/* South Africa 2027 reuses the complete landing-page composition.
   Only the photographic setting differs from the main landing page. */
.south-africa-2027-page .hero-photo {
  background-image:
    linear-gradient(120deg, rgba(0, 120, 69, 0.22), rgba(239, 159, 0, 0.16)),
    url("../img/hero-cape-town-2027-desktop.jpg");
  background-position: center, 52% center;
}

/* Keep the available hero action on one line. The journey map and livestream
   actions stay out of the public page until those experiences are released. */
.south-africa-2027-page .hero-actions .button {
  white-space: nowrap;
}

@media (min-width: 721px) {
  .south-africa-2027-page .hero-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(12px, 1.7vw, 24px);
    padding-inline: clamp(18px, 3vw, 54px);
  }

  .south-africa-2027-page .hero-actions .button {
    box-sizing: border-box;
    flex: 0 1 clamp(210px, 23vw, 310px);
    width: clamp(210px, 23vw, 310px);
    min-height: clamp(48px, 5.2vw, 62px);
    padding: 12px clamp(18px, 2.2vw, 30px) 10px;
    font-size: clamp(0.82rem, 1.05vw, 1.05rem);
  }
}

@media (max-width: 720px) {
  .south-africa-2027-page .hero-photo {
    background-image:
      linear-gradient(120deg, rgba(0, 120, 69, 0.22), rgba(239, 159, 0, 0.16)),
      url("../img/hero-cape-town-2027-mobile.jpg");
    background-position: center, 54% center;
  }
}