/* ==========================================================================
   DAY-BY-DAY ITINERARY CARDS - styling for the captured markup moved here
   from journey-overview.html (was: map + 12 places, now on
   journey-overview.html - see experience-map.css there).

   journey-app.css (the itinerary app's full compiled Tailwind stylesheet)
   is NOT loaded on this page: its class names - .absolute, .flex,
   .hero-title, .hero-btn, and so on - are generic enough to collide with
   index.css and the rest of index.html sitewide (its own .hero-title on
   the home hero got its font-size clobbered by journey-app.css's
   .hero-title for the day-slide caption the first time this was tried).
   Every rule below is copied from journey-app.css (extracted straight out
   of the loaded stylesheet in the browser, via document.styleSheets, so
   the values are exact) but scoped under #day-cards-section, so none of it
   can ever apply outside this one section.
   ========================================================================== */
#day-cards-section {
  --schist: #1C1C1C;
  --cream: #FDFBF7;
  --cream-2: #FAF8F5;
  --gold: #C6A87C;
  --turquoise: #2A4D53;
  --crimson: #8B1E22;
  --pohutukawa: #C8102E;
  --forest: #18251E;
  --glacial: #5FA8B6;
}

#day-cards-section .pointer-events-none { pointer-events: none; }
#day-cards-section .absolute { position: absolute; }
#day-cards-section .relative { position: relative; }
#day-cards-section .inset-0 { inset: 0px; }
#day-cards-section .bottom-8 { bottom: 2rem; }
#day-cards-section .left-1\/2 { left: 50%; }
#day-cards-section .z-10 { z-index: 10; }
#day-cards-section .z-20 { z-index: 20; }
#day-cards-section .flex { display: flex; }
#day-cards-section .h-full { height: 100%; }
#day-cards-section .h-screen { height: 100vh; }
#day-cards-section .w-full { width: 100%; }
#day-cards-section .max-w-xl { max-width: 36rem; }
#day-cards-section .origin-center { transform-origin: center center; }
#day-cards-section .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
#day-cards-section .animate-bounce { animation: 1s ease 0s infinite normal none running bounce; }
#day-cards-section .items-center { align-items: center; }
#day-cards-section .justify-center { justify-content: center; }
#day-cards-section .overflow-hidden { overflow: hidden; }
#day-cards-section .whitespace-nowrap { white-space: nowrap; }
#day-cards-section .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
#day-cards-section .text-center { text-align: center; }
#day-cards-section .text-xs { font-size: 0.75rem; line-height: 1rem; }
#day-cards-section .font-bold { font-weight: 700; }
#day-cards-section .font-normal { font-weight: 400; }
#day-cards-section .uppercase { text-transform: uppercase; }
#day-cards-section .italic { font-style: italic; }
#day-cards-section .not-italic { font-style: normal; }
#day-cards-section .leading-snug { line-height: 1.375; }
#day-cards-section .font-serif { font-family: "Cormorant Garamond", serif; }

#day-cards-section .hero-flag { display: inline-block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 11px; border-radius: 2px; margin: 14px 0px 10px; font-weight: 600; background: transparent; box-shadow: none; }
/* Included - plain bright gold text, no highlight box. box-shadow/background
   are re-asserted here (not just on the base .hero-flag rule above) because
   journey-app.css - loaded alongside this on journey-overview.html now that
   the day-frame carousel lives there - carries its own unscoped
   .hero-flag.included/.optional rules with a red/teal box-shadow; this
   selector out-specifies those (an #id beats a bare class list) for color,
   but a property only day-cards.css's OWN .included/.optional rule sets can
   actually override journey-app.css's - box-shadow wasn't one of them
   before, so that red glow was bleeding through untouched. */
#day-cards-section .hero-flag.included { color: var(--gold); background: transparent; box-shadow: none; text-shadow: 0 0 8px rgba(198, 168, 124, 0.5); }
/* Optional add-on - same gold, but blinks to read as "still open to pick",
   unlike the settled "included" flag. prefers-reduced-motion below turns
   the blink off but keeps the gold colour. */
#day-cards-section .hero-flag.optional { color: var(--gold); background: transparent; box-shadow: none; animation: heroFlagBlink 1.4s ease-in-out infinite; }
#day-cards-section .hero-flag.swap { color: var(--gold); background: transparent; box-shadow: none; text-shadow: 0 0 8px rgba(198, 168, 124, 0.5); }
@keyframes heroFlagBlink {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(198, 168, 124, 0.5); }
  50% { opacity: 0.3; text-shadow: 0 0 18px rgba(198, 168, 124, 0.95), 0 0 26px rgba(198, 168, 124, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  #day-cards-section .hero-flag.optional { animation: none; text-shadow: 0 0 8px rgba(198, 168, 124, 0.5); }
}
#day-cards-section .hero-title { font-family: "Cormorant Garamond", serif; font-style: normal; font-weight: 500; font-size: clamp(20px, 2.4vw, 38px); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#day-cards-section .hero-desc { margin-top: 14px; font-size: 14.5px; line-height: 1.65; color: rgba(253, 251, 247, 0.82); }
#day-cards-section .hero-action { margin-top: 22px; }
#day-cards-section .hero-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; border: 1px solid var(--cream); background: transparent; color: var(--cream); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; cursor: pointer; border-radius: 2px; transition: 0.2s; }
#day-cards-section .hero-btn:hover { background: rgba(253, 251, 247, 0.12); }
#day-cards-section .hero-btn.added { background: var(--gold); border-color: var(--gold); color: var(--schist); }

#day-cards-section .day-frame { position: relative; overflow: hidden; }
#day-cards-section .day-frame-track { display: flex; height: 100%; width: 100%; overflow: auto hidden; scroll-snap-type: x proximity; scrollbar-width: none; }
#day-cards-section .day-frame-track::-webkit-scrollbar { display: none; }
#day-cards-section .day-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; height: 100%; background-size: cover; background-position: center center; display: flex; align-items: flex-end; }
#day-cards-section .day-slide::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(28, 28, 28, 0.05), rgba(28, 28, 28, 0.18) 45%, rgba(28, 28, 28, 0.94)); }
#day-cards-section .day-slide-content { position: relative; z-index: 1; padding: 0px 6vw 116px; color: var(--cream); max-width: 640px; }
#day-cards-section .day-slide-cover { align-items: center; justify-content: center; background-color: rgb(0, 0, 0); }
/* width:100% added - as a flex item this otherwise shrinks to fit its own
   content (the title's natural text width), which then becomes the base
   the title's own max-width percentage resolves against, undermining it
   entirely (a card-relative max-width on the title is pointless if the
   title's own text is what's sizing its parent in the first place). */
#day-cards-section .day-slide-cover-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 0px 6vw; width: 100%; box-sizing: border-box; }
#day-cards-section .day-slide-cover-content .d-num { font-family: "Avenir Next Arabic", Avenir, Jost, sans-serif; font-weight: 600; font-size: clamp(14px, 1.8vw, 18px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); line-height: 1; }
/* max-width was 88vw in the captured markup, sized for a full-viewport-wide
   day-frame - now that #itinerary's day-frames are a contained placeholder
   (see the #itinerary override in index.css), 88vw is far wider than the
   card itself, so a long title like "Franz Josef to Queenstown, via
   Wanaka" overflowed straight through the card edge and collided with the
   prev/next arrows sitting on top of it. Sized to the card's own width
   (minus room for both 44px arrows) instead, with a smaller font-size cap
   so more titles fit on their one line before ellipsis has to kick in. */
#day-cards-section .day-slide-cover-content .d-title { font-family: "Cormorant Garamond", serif; font-style: normal; font-weight: 700; font-size: clamp(20px, 3.4vw, 36px); color: var(--cream); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 150px); }

#day-cards-section .day-frame-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(253, 251, 247, 0.3); background: rgba(28, 28, 28, 0.35); color: var(--cream); cursor: pointer; backdrop-filter: blur(6px); transition: 0.2s; }
#day-cards-section .day-frame-arrow:hover { background: rgba(28, 28, 28, 0.55); border-color: var(--cream); color: var(--cream); }
#day-cards-section .day-frame-arrow:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
#day-cards-section .day-frame-arrow-left { left: 20px; }
#day-cards-section .day-frame-arrow-right { right: 20px; }
#day-cards-section .day-frame-dots { position: absolute; left: 0px; right: 0px; bottom: 66px; z-index: 5; display: flex; justify-content: center; gap: 8px; }
#day-cards-section .dot-btn { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0px; cursor: pointer; background: rgba(253, 251, 247, 0.35); transition: 0.25s; }
#day-cards-section .dot-btn.active { background: var(--gold); width: 20px; border-radius: 4px; }

@media (max-width: 640px) {
  #day-cards-section .day-slide-content { padding: 0px 5vw 108px; }
  #day-cards-section .day-frame-dots { bottom: 60px; }
  /* Vertically centred (the desktop position) sat right across the middle
     of the card, on top of the slide's own title/description text on a
     narrow screen. Anchored to the bottom instead, below the dots, inside
     the same reserved padding the text above already avoids. */
  #day-cards-section .day-frame-arrow {
    top: auto;
    bottom: 14px;
    transform: none;
  }
  #day-cards-section .hero-title { font-size: clamp(10px, 3.6vw, 14px); }
  /* The base rule's max-width: calc(100% - 150px) was sized for the desktop
     card (room either side for the 44px arrow buttons) - on a ~375px phone
     that leaves barely 150px total for the text, so nearly every cover
     title truncated to a fragment regardless of how small the font got.
     Mobile instead wraps to two lines at 88% width (still clear of the
     arrows, which sit inside the existing 6vw side padding) rather than
     forcing one ellipsised line. */
  #day-cards-section .day-slide-cover-content .d-title {
    font-size: clamp(15px, 5.5vw, 24px);
    max-width: 88%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}