/* ============================================================
   ARTISAN ESCAPE — NZ Journey Map
   Palette: Koru Cream canvas · Glacial Turquoise land
            Pōhutukawa Crimson trail · Champagne Gold accents
   ============================================================ */

#journey-map-section {
  position: relative;
  background: #1C1C1C;
  margin-top: -8vh;                 /* tighten the gap after Choose Your Arrival */
}

/* ── Sticky canvas: stays pinned while stops scroll over it ── */
#journey-canvas-wrapper {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

#journey-canvas-wrapper canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── All text content overlays the sticky canvas ── */
.journey-section-header,
.journey-map-footer {
  position: relative;
  z-index: 2;
}

/* No stacking context on #journey-stops — lets video cards escape to z:20
   above the spotlight overlay (z:15) while day cards sit below it (z:auto) */
#journey-stops {
  position: relative;
}

/* Editorial chronicle intro — Koru Cream canvas, Otago Schist ink, Champagne Gold metrics. */
.journey-section-header {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 280px 24px 220px;          /* generous top padding pushes the text block down, away from the top seam */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #1C1C1C;         /* shows while the video buffers */
}

/* Full-bleed looping video, sitting behind the dark gradient + text */
.journey-section-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Blends solid at both edges — into the Otago Schist (#1C1C1C) section
   above at the top, and into the map canvas's own near-black (#0e0d0b) at
   the bottom — with the video showing through, darkened, only in the
   middle band behind the text. Resolving both ends to solid colour (rather
   than fading to fully transparent) avoids exposing the raw, undarkened
   footage right at the seam with the sections above/below. */
.journey-section-header-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(to bottom,
    #1C1C1C 0%,
    rgba(28, 28, 28, 0.7) 32%,
    rgba(28, 28, 28, 0.7) 62%,
    rgba(20, 19, 17, 0.88) 84%,
    #0e0d0b 100%);
  pointer-events: none;
}

.journey-section-header-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

.journey-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 3.4vw, 48px);  /* smaller than before so it always fits on one line */
  font-weight: 700;                     /* bold */
  color: #FDFBF7;                       /* Koru Cream */
  margin: 56px 0 12px;                  /* nudged down further, closer to the divider below */
  line-height: 1.08;                    /* leading-tight */
  letter-spacing: -0.01em;
  white-space: nowrap;                  /* keep on a single line, desktop + mobile */
}

/* Hairline divider — Champagne Gold */
.journey-section-divider {
  width: 64px;                         /* w-16 */
  height: 1px;
  background: #C6A87C;
  opacity: 0.6;
  margin: 24px auto;
}

/* Geographic metrics — Champagne Gold, wide editorial tracking */
.journey-section-metrics {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: clamp(15px, 2vw, 22px);   /* larger */
  letter-spacing: 0.25em;              /* tracking-[0.25em] */
  text-transform: uppercase;
  color: #C6A87C;                      /* Champagne Gold */
  font-weight: 700;                    /* bolder */
  line-height: 1.6;
}

.journey-section-metrics .metric-sep {
  margin: 0 8px;
  color: #FDFBF7;                      /* Koru Cream */
  opacity: 0.35;
}

/* Route line — quieter than the metrics above it, same editorial family */
.journey-section-route {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C6A87C;                      /* Champagne Gold */
  opacity: 0.85;
  font-weight: 600;
  margin: 10px 0 0;
}

/* Chosen Step V arrival window — only appears once a date is selected */
.journey-section-arrival {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.1em;
  color: #FDFBF7;                      /* Koru Cream */
  opacity: 0.75;
  font-weight: 500;
  margin: 6px 0 0;
}

/* ── Journey stop cards ── */
.journey-stop {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 0 48px 72px;
  box-sizing: border-box;
}

.journey-stop:nth-child(even) { justify-content: flex-start; }
.journey-stop:nth-child(odd)  { justify-content: flex-start; }

.journey-stop-inner {
  background: rgba(28, 28, 28, 0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 2px solid var(--color-crimson, #8B1E22);
  padding: 22px 36px 22px 28px;
  max-width: 620px;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.20);
}

/* Highlight line alternates crimson / turquoise per day card, set via
   .accent-crimson / .accent-turquoise added in buildStopCards(). */
.journey-stop-inner.accent-crimson   { border-left-color: var(--color-crimson, #8B1E22); }
.journey-stop-inner.accent-turquoise { border-left-color: var(--color-turquoise, #2A4D53); }

.stop-day-label {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--color-gold, #C4A45A);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stop-day-label::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--color-gold, #C4A45A);
  opacity: 0.6;
  flex-shrink: 0;
}

.stop-city {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 54px);
  font-weight: 300;
  color: #FAF8F5;
  margin: 0 0 4px;
  line-height: 1.0;
  letter-spacing: -0.01em;
}

.stop-region {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.6vw, 16px);
  font-style: italic;
  font-weight: 300;
  color: #C6A87C;
  margin: 0 0 18px;
}

.stop-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 300;
  color: #FAF8F5;
  margin: 0 0 8px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.stop-segment {
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--color-gold, #C4A45A);
  opacity: 0.85;
  margin: 0 0 12px;
  line-height: 1.5;
  max-width: 560px;
}

.stop-body {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: #FAF8F5;
  opacity: 0.70;
  margin: 10px 0 14px;
  line-height: 1.80;
  max-width: 560px;
}

.stop-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.stop-meta-item {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: #C6A87C;
  opacity: 0.80;
  line-height: 1.4;
}

.stop-vehicle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8B1E22;
  border: 1px solid rgba(139,30,34,0.22);
  padding: 5px 14px;
  background: rgba(139,30,34,0.04);
}

.stop-vehicle-icon {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(14%) sepia(63%) saturate(2000%) hue-rotate(330deg);
  flex-shrink: 0;
}

/* ── Image/video stops (right-aligned) ── */
.journey-stop.journey-stop--image {
  justify-content: flex-end !important;
  align-items: center !important;
  position: relative;
  z-index: 1;
}

.journey-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
}

.journey-image-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.journey-image-icon {
  width: 44px;
  height: 36px;
  border: 1.5px solid rgba(198, 168, 124, 0.40);
  border-radius: 2px;
  position: relative;
}
.journey-image-icon::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid rgba(198, 168, 124, 0.35);
}
.journey-image-icon::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(198, 168, 124, 0.35);
}

.journey-image-label {
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: #C6A87C;
  opacity: 0.70;
}

.journey-image-hint {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: #FAF8F5;
  opacity: 0.28;
}

/* ── Video card (slot 1 and future video slots) ── */
.journey-video-card {
  position: relative;
  width: 72%;
  max-width: 680px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
}

.journey-video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
}

/* Video slots: center the player so the small remaining gap is even above and below */
.journey-stop--video {
  align-items: center !important;
  padding-bottom: 0;
}

/* Video card base */
.journey-video-card {
  position: relative;
  background: #111111;
  border-radius: 2px;
  overflow: hidden;
}

/* Poster image — covers card before video plays, fades out on play */
.journey-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  transition: opacity 0.4s ease;
}

/* Play button — matches nav CTA style exactly */
.journey-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(42, 77, 83);
  color: #fff;
  border: 1.6px solid #fff;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: pointer;
  z-index: 3;
  white-space: nowrap;
  transition: background 0.25s ease, opacity 0.4s ease;
}

.journey-video-play-btn:hover {
  background: rgb(58, 105, 113);
}

/* Pause button — Pōhutukawa Crimson, revealed on card hover */
.journey-video-pause-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #8B1E22;
  color: #fff;
  border: 1.6px solid #fff;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: pointer;
  z-index: 2;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.25s ease;
  pointer-events: none;
}

.journey-video-card:hover .journey-video-pause-btn {
  opacity: 1;
  pointer-events: auto;
}

.journey-video-pause-btn:hover {
  background: #a8262b;
}

@media (max-width: 768px) {
  .journey-video-card {
    width: 90%;
  }
}

/* ── Section footer fade ── */
.journey-map-footer {
  height: 90px;
  background: linear-gradient(to bottom, transparent 0%, #1C1C1C 60%, #1C1C1C 100%);
}

/* ── Scroll progress indicator ── */
#journey-progress-bar {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: 100px;
  background: rgba(42,77,83,0.45);
  z-index: 200;
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#journey-progress-bar.visible { opacity: 1; }

#journey-progress-fill {
  width: 100%;
  background: #8B1E22;
  border-radius: 1px;
  height: 0%;
  transition: height 0.1s linear;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .journey-stop {
    padding: 0 24px 56px;
    align-items: flex-end;
  }
  .journey-stop:nth-child(even),
  .journey-stop:nth-child(odd) {
    justify-content: flex-start;
  }

  .journey-stop-inner {
    max-width: 100%;
    padding: 22px 24px 22px 20px;
  }
  .journey-section-header {
    padding: 110px 28px 60px;
  }
  .journey-section-bg-video {
    /* Landscape footage in a narrow, tall frame — recentre on the middle
       of the shot and scale up slightly so it fills edge-to-edge with no
       letterboxing, instead of the top-anchored desktop crop. */
    object-position: center center;
    transform: scale(1.25);
  }
  .journey-section-title {
    font-size: clamp(13px, 5.2vw, 22px);  /* scales with viewport so the full line always fits */
    letter-spacing: -0.005em;
  }
  .journey-section-metrics {
    font-size: clamp(11px, 3.4vw, 15px);  /* fit on one line on mobile */
    letter-spacing: 0.18em;
    white-space: nowrap;
  }
  #journey-progress-bar { display: none; }
}