/* =========================================================
   DAN TOURS — Destinations Split-Scroll (reiseziele.html)
   A pinned, full-screen split-panel experience adapted from a
   React "ScrollAdventure" concept into vanilla HTML/CSS/JS.

   Desktop (wide + fine pointer, motion allowed):
     JS engages "paging mode" — one destination per wheel tick /
     arrow key. Each panel's two halves slide in from opposite
     edges (image half up from below, content half down from above).

   Mobile / touch / reduced-motion:
     No JS paging. This CSS reflows the very same markup into
     normal, stacked full-bleed cards (image over content).
   ========================================================= */

/* One-line intro under the hero heading (this page's cinematic lead-in). */
.hero-band-sub {
  margin-top: clamp(12px, 1.6vh, 20px);
  max-width: 46ch;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.6;
  color: rgba(248, 246, 242, 0.9);
}

/* =========================================================
   EDITORIAL — the longer "Kenya, region by region" read that
   leads into the destinations experience. Light palette, to match
   the rest of the site (warm background, charcoal text, gold accent).
   ========================================================= */
.dest-story {
  background: var(--page);
  color: var(--charcoal);
}
.dest-story-head {
  /* 760px was a fixed cap against rem-based type: --text-scale grew the
     lead 40% while the cap stayed put, so the lead ran to ~81 characters a
     line. In ch the cap tracks the type instead. 56ch measures out at ~66
     characters here — `ch` is the width of "0", which is narrower than the
     average lowercase letter, so the rendered measure runs ~1.2x the ch
     number. Same value as .map-sub, the existing house setting. */
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
}
.dest-story-lead {
  margin-top: clamp(18px, 2.4vw, 26px);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.85;
  color: rgba(29, 29, 29, 0.72);
}
.dest-story-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(34px, 4.5vw, 68px);
  max-width: 1040px;
  margin: clamp(46px, 6vw, 84px) auto 0;
}
.dest-region-media {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: clamp(16px, 1.6vw, 24px);
  background: var(--sand);
}
.dest-region-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dest-region-title {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--charcoal);
  margin-bottom: clamp(10px, 1.2vw, 16px);
  padding-top: clamp(12px, 1.4vw, 18px);
  border-top: 1px solid rgba(154, 131, 82, 0.5);   /* thin gold rule per region */
}
.dest-region-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(29, 29, 29, 0.72);
}
.dest-story-close {
  /* Was 720px — same fixed-cap drift, and this one is display italic, so it
     was running to ~80 characters a line where the eye starts losing the
     return sweep. */
  max-width: 52ch;
  text-wrap: pretty;
  margin: clamp(40px, 5vw, 68px) auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.7;
  color: var(--charcoal);
}
@media (max-width: 760px) {
  .dest-story-grid { grid-template-columns: 1fr; gap: clamp(30px, 9vw, 48px); }
}

.dest-scroll {
  position: relative;
  /* Divided by --ui-scale so it still fills the whole screen after the
     global `zoom` on <html> shrinks it (matches .hero — see main.css).
     svh rather than dvh: this section is scroll-pinned, and a dvh box that
     resizes as the mobile toolbar retracts would fight the pinning mid-step. */
  height: calc(100vh / var(--ui-scale, 1));
  height: calc(100svh / var(--ui-scale, 1));
  overflow: hidden;
  background: var(--charcoal);
  color: var(--white);
}

/* Each destination is a full-viewport layer stacked on the others. The navbar
   auto-hides while paging (see JS), so panels run edge to edge / full-screen. */
.ds-panel {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;      /* only the active panel is interactive */
}
.ds-panel.is-active {
  pointer-events: auto;
  z-index: 2;
}
/* Even panels swap sides: content LEFT / image RIGHT */
.ds-panel--flip { flex-direction: row-reverse; }

/* The two halves. Default order = image LEFT / content RIGHT (odd panels).
   Even panels get .ds-panel--flip to swap sides. */
.ds-half {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 1000ms var(--ease-inout);
  will-change: transform;
}

/* Off-stage resting positions when the panel is NOT active:
   image half waits BELOW, content half waits ABOVE — so activation
   slides them together toward the centre line. */
.ds-panel:not(.is-active) .ds-media { transform: translateY(101%); }
.ds-panel:not(.is-active) .ds-content { transform: translateY(-101%); }

/* ---- Media half ---- */
.ds-media {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ds-media::after {           /* subtle depth + keeps captions legible near edges */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,16,10,0.28) 0%, rgba(20,16,10,0) 30%, rgba(20,16,10,0.32) 100%);
}
/* Photos are static — no Ken Burns / zoom. Each image just holds still
   (background-size: cover) once its panel has slid into place. */

/* ---- Content half ---- */
.ds-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 96px);
  background: linear-gradient(155deg, var(--safari) 0%, var(--charcoal) 115%);
}
.ds-index {
  font-family: var(--font-label);
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(14px, 2vw, 24px);
}
.ds-index b { color: var(--white); font-weight: 400; }
.ds-name {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  margin: 0 0 clamp(14px, 2vw, 22px);
}
.ds-desc {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  color: rgba(248,246,242,0.86);
  max-width: 46ch;
  margin: 0 0 clamp(24px, 3vw, 38px);
}
.ds-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  color: var(--warm);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(154, 131, 82,0.55);
  transition: color var(--t-base), border-color var(--t-base), gap var(--t-base);
}
.ds-cta i { transition: transform var(--t-base); }
.ds-cta:hover { color: var(--gold); border-color: var(--gold); gap: 0.95em; }
.ds-cta:hover i { transform: translateX(4px); }

/* Stagger the active panel's text in AFTER the halves meet */
.ds-content > * {
  opacity: 0;
  transform: translateY(18px);
}
.ds-panel.is-active .ds-content > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.ds-panel.is-active .ds-index   { transition-delay: 0.55s; }
.ds-panel.is-active .ds-name    { transition-delay: 0.66s; }
.ds-panel.is-active .ds-desc    { transition-delay: 0.77s; }
.ds-panel.is-active .ds-cta     { transition-delay: 0.88s; }

/* =========================================================
   FIXED UI CHROME (progress dots + counter + scroll hint)
   Only shown while paging mode is active (body.ds-paging).
   ========================================================= */
.ds-ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
body:not(.ds-paging) .ds-ui { display: none; }

/* Progress dots down the right edge */
.ds-dots {
  position: absolute;
  top: 50%;
  right: clamp(16px, 2vw, 34px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}
.ds-dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 1px solid rgba(248,246,242,0.6);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.ds-dot:hover { border-color: var(--gold); }
.ds-dot.is-active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.35);
}

/* Bottom-left counter */
.ds-counter {
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  bottom: clamp(20px, 4vw, 48px);
  font-family: var(--font-label);
  letter-spacing: 0.2em;
  color: var(--warm);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.ds-counter b { color: var(--gold); font-weight: 400; }

/* Bottom-centre scroll hint */
.ds-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vw, 34px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: clamp(0.883rem, 0.9vw, 0.936rem);
  color: rgba(248,246,242,0.82);
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.ds-hint i { animation: dsBob 1.8s ease-in-out infinite; }
@keyframes dsBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
/* Fade the hint out once the visitor has advanced past the first panel */
body.ds-advanced .ds-hint { opacity: 0; transition: opacity 0.5s ease; }

/* =========================================================
   STACKED FALLBACK — pre-JS, no-JS and reduced-motion
   Before the engine adds `ds-paging` (and whenever paging never
   starts: reduced motion / no JS) the very same markup flows as
   normal stacked full-bleed cards — image over content — at every
   width, so there is never a flash of 13 panels piled on top of
   each other. The engine adds `ds-paging` to switch to the pinned
   overlay layout.
   ========================================================= */
body:not(.ds-paging) .dest-scroll { height: auto; overflow: visible; }
body:not(.ds-paging) .ds-panel {
  position: relative;
  inset: auto;
  flex-direction: column;
  pointer-events: auto;
  min-height: 82vh;
}
body:not(.ds-paging) .ds-panel--flip { flex-direction: column; }   /* image-first */
body:not(.ds-paging) .ds-half {
  width: 100%;
  transform: none !important;
  transition: none;
  animation: none !important;
}
body:not(.ds-paging) .ds-media { height: 46vh; min-height: 260px; }
body:not(.ds-paging) .ds-content { padding: clamp(28px, 8vw, 48px); }
body:not(.ds-paging) .ds-content > * { opacity: 1; transform: none; }
body:not(.ds-paging) .ds-ui { display: none; }

/* =========================================================
   PINNED — touch / small screens (pointer: coarse)
   The pinned paging experience also runs on touch devices, but the
   two halves stack vertically (image on top, copy beneath) so each
   destination reads well on a phone. The halves still slide in from
   opposite edges to meet at the seam.
   ========================================================= */
@media (pointer: coarse) {
  body.ds-paging .ds-panel,
  body.ds-paging .ds-panel--flip { flex-direction: column; }
  body.ds-paging .ds-half { width: 100%; }
  body.ds-paging .ds-media { height: 44%; }
  body.ds-paging .ds-content {
    height: 56%;
    justify-content: center;
    padding: clamp(24px, 7vw, 44px);
  }
  /* 13 dots are too fiddly to tap on a phone — keep just counter + hint. */
  body.ds-paging .ds-dots { display: none; }
}

/* =========================================================
   NAVBAR — auto-hide while paging the destinations.
   The engine slides the nav away as you move forward into the
   destinations and brings it back the moment you scroll up (so you
   can leave the page). Page-local: dest-scroll.css only loads here.
   ========================================================= */
#navbar { transition: transform 0.4s var(--ease-inout), opacity 0.35s ease; }
.navbar.ds-nav-hidden {
  transform: translateY(-130%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ds-half { transition: none; animation: none !important; }
  .ds-content > *, .ds-panel.is-active .ds-content > * { transition: none; }
  #navbar { transition: none; }
}