/*
 * Africa Made Easy — site-wide refinement layer
 * Shared spatial, responsive and photographic rules for the production site.
 */

:root {
  --ame-max-shell: 1540px;
  --ame-max-content: 1280px;
  --ame-max-editorial: 760px;
  --ame-gutter: clamp(24px, 4vw, 64px);
  --ame-section-space: clamp(72px, 8vw, 124px);
  --ame-focus-desktop: 50% 50%;
  --ame-focus-mobile: var(--ame-focus-desktop);
}

/* The fixed mobile CTA needs clearance; desktop pages should end at the footer. */
body {
  padding-bottom: 0 !important;
}

@media (max-width: 1179px) {
  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }
}

/* Reusable media variants for current and future editorial sections. */
.ame-media,
.ame-media--hero,
.ame-media--editorial-wide,
.ame-media--cinematic,
.ame-media--split,
.ame-media--portrait,
.ame-media--card {
  display: block;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: var(--ame-focus-desktop);
}

.ame-media--hero { height: 100%; }
.ame-media--editorial-wide { aspect-ratio: 16 / 9; }
.ame-media--cinematic { aspect-ratio: 2.2 / 1; }
.ame-media--split { height: 100%; }
.ame-media--portrait { aspect-ratio: 4 / 5; }
.ame-media--card { aspect-ratio: 1 / 1; }

@media (max-width: 767px) {
  .ame-media,
  .ame-media--hero,
  .ame-media--editorial-wide,
  .ame-media--cinematic,
  .ame-media--split,
  .ame-media--portrait,
  .ame-media--card {
    object-position: var(--ame-focus-mobile);
  }
}

/* Keep the global header and footer on the same measured grid at every width. */
.ame-nav-shell,
.ame-footer-grid,
.ame-footer-bottom {
  width: 100%;
  max-width: var(--ame-max-shell);
}

.ame-primary-cta,
.ame-view-all-button,
.ame-journey-card-link {
  min-height: 46px;
}

/* Journey subnavigation remains scrollable without looking like a clipped row. */
.ame-journey-subnav {
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
}

.ame-journey-subnav::-webkit-scrollbar { display: none; }
.ame-journey-subnav .subnav-link { scroll-snap-align: center; }

/*
 * Signature Journey highlights share one photographic rhythm. The image may
 * use a different focal point, but the section no longer changes height at
 * random from one journey to the next.
 */
html[data-ame-kind="journey"] #highlights > div:first-child:has(> img) {
  width: 100%;
  height: clamp(480px, 38vw, 580px) !important;
  overflow: hidden;
}

html[data-ame-kind="journey"] #highlights > div:first-child > img:first-child {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--ame-focus-desktop) !important;
}

html[data-ame-kind="journey"] #highlights > div:nth-child(2) {
  padding-top: clamp(56px, 6vw, 84px) !important;
  padding-bottom: clamp(96px, 8vw, 128px) !important;
}

html[data-ame-kind="journey"] #highlights .section-headline {
  font-size: clamp(2.5rem, 3.6vw, 3.75rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

html[data-ame-kind="journey"] #highlights .itinerary-row p {
  font-size: 14px !important;
  line-height: 1.75 !important;
}

/* Image-specific art direction for the nine Signature Journey highlights. */
html[data-ame-page="the-classic-cape"] #highlights {
  --ame-focus-desktop: 56% 56%;
  --ame-focus-mobile: 57% 57%;
}

html[data-ame-page="the-classic-cape-golf-journey"] #highlights {
  --ame-focus-desktop: 50% 50%;
  --ame-focus-mobile: 50% 52%;
}

html[data-ame-page="cape-classic-greater-kruger"] #highlights,
html[data-ame-page="south-africa-honeymoon"] #highlights {
  --ame-focus-desktop: 50% 55%;
  --ame-focus-mobile: 50% 57%;
}

html[data-ame-page="south-africa-victoria-falls"] #highlights {
  --ame-focus-desktop: 50% 78%;
  --ame-focus-mobile: 50% 82%;
}

html[data-ame-page="south-africa-family-safari"] #highlights {
  --ame-focus-desktop: 50% 64%;
  --ame-focus-mobile: 50% 67%;
}

html[data-ame-page="south-africa-mauritius"] #highlights {
  --ame-focus-desktop: 70% 60%;
  --ame-focus-mobile: 76% 62%;
}

html[data-ame-page="kenya-safari-indian-ocean"] #highlights {
  --ame-focus-desktop: 54% 65%;
  --ame-focus-mobile: 54% 66%;
}

html[data-ame-page="botswana-waterways-victoria-falls"] #highlights {
  --ame-focus-desktop: 50% 66%;
  --ame-focus-mobile: 50% 70%;
}

@media (max-width: 767px) {
  html[data-ame-kind="journey"] #highlights > div:first-child:has(> img) {
    height: clamp(300px, 88vw, 390px) !important;
  }

  html[data-ame-kind="journey"] #highlights > div:first-child > img:first-child {
    object-position: var(--ame-focus-mobile) !important;
  }

  html[data-ame-kind="journey"] #highlights > div:nth-child(2) {
    padding-top: 54px !important;
    padding-bottom: 104px !important;
  }

  html[data-ame-kind="journey"] #highlights .section-headline {
    font-size: clamp(2.15rem, 10vw, 2.7rem) !important;
    line-height: 1.08 !important;
  }

  /* This genuine panorama cannot support a portrait crop without losing 75%. */
  html[data-ame-page="the-classic-cape-golf-journey"] #highlights > div:first-child:has(img[src*="Fancourt-golf-experience"]) {
    height: clamp(168px, 46vw, 210px) !important;
  }
}

/* Enquiry photography also accepts intentional page-specific focal points. */
.ame-itinerary-enquire-new .ame-enquire-media > img,
.ame-itinerary-enquire-new .ame-enquire-media > video,
.ame-itinerary-enquire-new .ame-enquire-image {
  object-position: var(--ame-enquire-focus-desktop, 50% 50%) !important;
}

html[data-ame-page="honeymoon-romance"] { --ame-enquire-focus-desktop: 66% 50%; }
html[data-ame-page="family-adventures"] { --ame-enquire-focus-desktop: 54% 50%; }
html[data-ame-page="cape-town-winelands"] { --ame-enquire-focus-desktop: 50% 58%; }
html[data-ame-page="south-africa-victoria-falls"] { --ame-enquire-focus-desktop: 64% 50%; }
html[data-ame-page="south-africa-honeymoon"] { --ame-enquire-focus-desktop: 69% 50%; }
html[data-ame-page="south-africa-family-safari"] { --ame-enquire-focus-desktop: 55% 50%; }
html[data-ame-page="south-africa-mauritius"] { --ame-enquire-focus-desktop: 62% 50%; }

@media (max-width: 900px) {
  .ame-itinerary-enquire-new .ame-enquire-media > img,
  .ame-itinerary-enquire-new .ame-enquire-media > video,
  .ame-itinerary-enquire-new .ame-enquire-image {
    object-position: var(--ame-enquire-focus-mobile, var(--ame-enquire-focus-desktop, 50% 50%)) !important;
  }
}

/* Why Africa had 160px vertical padding around a very tall image block. */
@media (min-width: 1024px) {
  html[data-ame-page="why-africa"] #stays-with-you,
  html[data-ame-page="why-africa"] #effortless {
    padding-top: clamp(88px, 6vw, 104px) !important;
    padding-bottom: clamp(88px, 6vw, 104px) !important;
  }

  html[data-ame-page="why-africa"] #stays-with-you .image-zoom {
    min-height: clamp(560px, 50vw, 700px) !important;
  }
}

@media (max-width: 767px) {
  html[data-ame-page="why-africa"] #stays-with-you,
  html[data-ame-page="why-africa"] #effortless {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
}

/* Respect reduced-motion preferences without changing the default direction. */
@media (prefers-reduced-motion: reduce) {
  .kenburns-img,
  .editorial-img,
  .fade-up,
  .reveal,
  .reveal-word-inner {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}