/* ==========================================================================
   ITINERARY 2 - "The TranzAlpine Journey", day-by-day reading itinerary.
   Body content (day-nav, legend, day sections) adapted near-verbatim from
   "itinerary artisan escape - Copy/itinerary 2.html" (same data-driven
   render in itinerary-2.js), but re-themed onto the actual site palette/
   type system instead of that source file's own DM Sans + moss-green
   theme - Otago Schist background, Champagne Gold accents, Koru Cream
   text, Avenir Next Arabic body copy, and the same frosted-glass card
   language the Discovery Ledger and map HUD use elsewhere on the site,
   so this reads as one more room in the same house rather than an
   imported page. Sits under the shared site header instead of that
   source file's own hero/nav/footer (replaced by the 60/40 video+map
   hero below and the shared #main-header / #main-footer).
   ========================================================================== */
:root {
  --itn2-gold: #C6A87C;             /* Champagne Gold - same as the ledger */
  --itn2-gold-light: #E4CFA6;
  --itn2-dark: #1C1C1C;             /* Otago Schist */
  --itn2-panel: rgba(255, 255, 255, 0.04);
  --itn2-panel-line: rgba(198, 168, 124, 0.22);
  --itn2-text: #FDFBF7;             /* Koru Cream */
  --itn2-text-muted: rgba(253, 251, 247, 0.68);
  --itn2-text-dim: rgba(253, 251, 247, 0.45);
  --itn2-white: #FDFBF7;
  --itn2-included: #C6A87C;
  --itn2-included-text: #F1E4CC;
  --itn2-arranged: #2A4D53;         /* Glacial Turquoise */
  --itn2-arranged-text: #AFD3D8;
  --itn2-optional: #8B1E22;         /* Pōhutukawa Crimson */
  --itn2-optional-text: #F0B4B6;
}

#itinerary-2-page {
  background: var(--itn2-dark);
  color: var(--itn2-text);
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

/* ---- HERO: 60/40 split - TranzAlpine train video / route map -------------- */
.itn2-hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}
.itn2-hero-split {
  display: flex;
  height: 100%;
}
.itn2-hero-video-pane {
  flex: 0 0 60%;
  position: relative;
  overflow: hidden;
}
.itn2-hero-video-pane video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.itn2-hero-map-pane {
  flex: 0 0 40%;
  position: relative;
}
.itn2-hero-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.itn2-map-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--itn2-gold);
  border: 1.5px solid rgba(28, 28, 28, 0.85);
  box-shadow: 0 0 6px rgba(198, 168, 124, 0.6);
}

/* Route key - same frosted-glass swatch legend as the home page's map
   (#map-legend in experience-map.css), listing only the travel modes this
   route actually uses. */
.itn2-map-legend {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  padding: 12px 15px 13px;
  border-radius: 14px;
  background: rgba(28, 28, 28, 0.75);
  border: 1px solid var(--itn2-panel-line);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.itn2-map-legend-title {
  display: block;
  padding-bottom: 8px;
  margin-bottom: 8px;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--itn2-gold);
  border-bottom: 1px solid var(--itn2-panel-line);
}
.itn2-map-legend-list { list-style: none; margin: 0; padding: 0; }
.itn2-map-legend-row { display: flex; align-items: center; gap: 9px; height: 18px; }
.itn2-map-legend-label {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--itn2-text);
  white-space: nowrap;
}
.itn2-map-legend-swatch {
  flex-shrink: 0;
  width: 24px;
  height: 3px;
  border-radius: 2px;
}
.itn2-map-legend-swatch--road { background: var(--itn2-gold); }
.itn2-map-legend-swatch--rail {
  background-image: repeating-linear-gradient(90deg, var(--itn2-gold-light) 0 4px, rgba(0, 0, 0, 0) 4px 7px);
}
.itn2-map-legend-swatch--air {
  background-image: repeating-linear-gradient(90deg, var(--itn2-arranged-text) 0 6px, rgba(0, 0, 0, 0) 6px 9px);
}
@media (max-width: 768px) {
  .itn2-map-legend { bottom: 12px; right: 12px; padding: 10px 12px 11px; }
}
.itn2-hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.4) 0%, rgba(28, 28, 28, 0.15) 40%, rgba(28, 28, 28, 0.72) 100%);
  pointer-events: none;
  z-index: 1;
}
.itn2-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 3vw;
  pointer-events: none;
}
.itn2-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--itn2-white);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}
.itn2-hero-title em {
  font-style: italic;
  color: var(--itn2-gold-light);
}
@media (max-width: 768px) {
  .itn2-hero-split { flex-direction: column; }
  .itn2-hero-video-pane, .itn2-hero-map-pane { flex: 1 1 50%; }
}

/* ---- STICKY DAY NAV --------------------------------------------------- */
.itn2-day-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(28, 28, 28, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--itn2-panel-line);
  padding: 0 2rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.itn2-day-nav::-webkit-scrollbar { display: none; }
.itn2-day-nav-inner {
  display: flex;
  gap: 0;
  min-width: max-content;
  margin: 0 auto;
  max-width: 1100px;
}
.itn2-nav-day {
  padding: 0.9rem 1.2rem;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--itn2-text-dim);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.itn2-nav-day:hover { color: var(--itn2-gold-light); }
.itn2-nav-day.active { color: var(--itn2-gold); border-bottom-color: var(--itn2-gold); }

/* ---- MAIN ---------------------------------------------------------------- */
.itn2-container { max-width: 900px; margin: 0 auto; padding: 0 2rem; }

.itn2-legend {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--itn2-panel-line);
}
.itn2-legend-label {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--itn2-gold);
}
.itn2-legend-items { display: flex; gap: 1rem; flex-wrap: wrap; }
.itn2-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.itn2-tag-included { background: rgba(198, 168, 124, 0.16); color: var(--itn2-included-text); border: 1px solid rgba(198, 168, 124, 0.4); }
.itn2-tag-arranged { background: rgba(42, 77, 83, 0.35); color: var(--itn2-arranged-text); border: 1px solid rgba(42, 77, 83, 0.55); }
.itn2-tag-optional { background: rgba(139, 30, 34, 0.18); color: var(--itn2-optional-text); border: 1px solid rgba(139, 30, 34, 0.4); }

/* ---- DAY SECTION -------------------------------------------------------- */
/* Each day is its own frosted-glass card - the same material as .ledger-opt
   and the map HUDs - so 11 days of dense reading resolve into distinct,
   scannable chapters rather than one unbroken scroll. */
.itn2-day-section {
  margin: clamp(24px, 4vh, 40px) 0;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 40px);
  background: var(--itn2-panel);
  border: 1px solid var(--itn2-panel-line);
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 20px 44px rgba(0, 0, 0, 0.22);
}
.itn2-day-section:first-of-type { margin-top: clamp(40px, 6vh, 64px); }

.itn2-day-header {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--itn2-panel-line);
}
.itn2-day-number-block { flex-shrink: 0; text-align: center; }
.itn2-day-num-large {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.4rem;
  font-weight: 400;
  color: var(--itn2-gold);
  opacity: 0.5;
  line-height: 1;
}
.itn2-day-word {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--itn2-text-dim);
}

.itn2-day-header-text { flex: 1; padding-top: 0.4rem; }
.itn2-day-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 500;
  color: var(--itn2-white);
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
.itn2-day-route {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--itn2-text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.itn2-route-dot { width: 4px; height: 4px; background: var(--itn2-gold); border-radius: 50%; display: inline-block; }

/* ---- SLOTS ---------------------------------------------------------------- */
.itn2-slots { display: flex; flex-direction: column; gap: 0; }
.itn2-slot {
  display: grid;
  grid-template-columns: 90px 1px 1fr;
  gap: 0 1.5rem;
  padding: 1.4rem 0;
  position: relative;
}
.itn2-slot:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 90px;
  right: 0;
  height: 1px;
  background: var(--itn2-panel-line);
  opacity: 0.5;
}
.itn2-slot-time-col { text-align: right; padding-top: 2px; }
.itn2-slot-time {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--itn2-white);
}
.itn2-slot-seg {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--itn2-text-dim);
  margin-top: 2px;
}
.itn2-slot-line-col { position: relative; display: flex; flex-direction: column; align-items: center; }
.itn2-slot-line-col::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--itn2-panel-line); }
.itn2-slot-dot { position: relative; width: 8px; height: 8px; background: var(--itn2-gold); border-radius: 50%; margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 8px rgba(198, 168, 124, 0.5); }
.itn2-slot-content { padding-top: 0; }
.itn2-slot-activity {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--itn2-white);
  margin-bottom: 6px;
  margin-top: 6px;
}
.itn2-slot-tip { font-size: 13.5px; color: var(--itn2-text-muted); line-height: 1.7; margin-bottom: 8px; }

/* ---- ADD-ON / ALTERNATIVE BOXES ------------------------------------------ */
.itn2-addon-box { margin-top: 12px; padding: 14px 16px; background: rgba(198, 168, 124, 0.06); border: 1px solid rgba(198, 168, 124, 0.24); border-radius: 10px; }
.itn2-addon-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.itn2-addon-activity { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 500; color: var(--itn2-white); }
.itn2-addon-tip { font-size: 12.5px; color: var(--itn2-text-muted); line-height: 1.65; }

.itn2-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--itn2-text-dim);
}
.itn2-or-divider::before, .itn2-or-divider::after { content: ''; flex: 1; height: 1px; background: var(--itn2-panel-line); }
.itn2-alt-box { padding: 14px 16px; background: rgba(42, 77, 83, 0.1); border: 1px solid rgba(42, 77, 83, 0.3); border-radius: 10px; }
.itn2-alt-activity { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 500; color: var(--itn2-white); margin-bottom: 6px; }
.itn2-alt-tip { font-size: 12.5px; color: var(--itn2-text-muted); line-height: 1.65; }

/* ---- FADE-IN SCROLL REVEAL ------------------------------------------------ */
.itn2-fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.itn2-fade-in.is-visible { opacity: 1; transform: none; }

@media (max-width: 600px) {
  .itn2-slot { grid-template-columns: 70px 1px 1fr; gap: 0 1rem; }
  .itn2-day-header { flex-direction: column; gap: 0.5rem; }
  .itn2-day-number-block { display: flex; align-items: baseline; gap: 0.5rem; }
  .itn2-day-num-large { font-size: 2.5rem; }
}

/* ---- CTA - hands off to the home page's Curators CTA ---------------------- */
.itn2-cta {
  position: relative;
  margin: clamp(40px, 6vh, 72px) 0 0;
  padding: clamp(90px, 14vh, 140px) 2rem;
  text-align: center;
  overflow: hidden;
}
.itn2-cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.itn2-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.72) 0%, rgba(28, 28, 28, 0.55) 45%, rgba(28, 28, 28, 0.82) 100%);
}
.itn2-cta-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.itn2-cta-eyebrow {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--itn2-gold);
  margin-bottom: 1rem;
}
.itn2-cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 400;
  color: var(--itn2-white);
  margin-bottom: 1rem;
}
.itn2-cta-body {
  font-size: 14px;
  color: var(--itn2-text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.itn2-cta-btn {
  display: inline-block;
  padding: 16px 44px;
  background: transparent;
  color: var(--itn2-white);
  border: 1px solid rgba(198, 168, 124, 0.6);
  border-radius: 2px;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.itn2-cta-btn:hover {
  background: var(--itn2-gold);
  color: #1C1C1C;
  border-color: var(--itn2-gold);
  transform: translateY(-2px);
}