/* ============================================================================
 * trip-template-v2.css — NEW sections for the Trip Template (dynamic itinerary)
 * clean-room page (/trip-template-v2/, template page-trip-template-v2.php).
 *
 * Figma: Current Designs V1 "Trip Template" — desktop 276:27153 / tablet
 * 813:118366 / mobile 721:75772.
 *
 * REUSED via home-v2.css / best-time-v2.css / area-v2.css (NOT restyled here):
 *   .btnav (global nav)  .arhero (subpage-hero)  .v2quote (big-quote)
 *   .v2insp (inspiration-trips)  .v2reviews  .v2approach  .opfoot (footer)
 * NEW here: trip-highlights, departure-dates-banner, daily-summary, gallery.
 *
 * Build discipline: every value below is measured from the Figma node, then the
 * rendered build is diffed against the node before commit (design-fidelity rule).
 * Base = mobile; @media(min-width:768px) tablet; @media(min-width:1280px) desktop.
 * ========================================================================== */

/* base font (home-v2 scopes Roboto Flex to body.home-v2; this page has its own body class) */
body.trip-template-v2 { font-family: "Roboto Flex", sans-serif; color: var(--c-ink); }

/* ============================================================ HERO (.tthero)
 * REUSES the .arhero subpage-hero shell (photo / cream panel / caption / gallery).
 * Page-unique: the title size + colour and the 4-stat details grid.
 * Node 346:38779 (Container 520 wide, inner 376): Title Bebas 50/50 #000@.8;
 * Kicker gold 14/24 ls1.68 (inherited from .arhero__eyebrow); stat text Roboto Flex
 * 300 16/26 #000@.8 with a gold 24px stroke icon + 1px #000 divider rules; two
 * columns of two stats (col1 text x=1018, col2 x=1215 at 1440). */
/* title: mobile 46/42 solid #000 (node 721:75774); tablet 54/46 #000@.8; desktop 50/50 #000@.8 */
.tthero .arhero__title { font-size: 46px; line-height: 42px; color: #000; }
/* description: 14/24 on mobile/tablet (node), 16/26 on desktop */
.tthero .arhero__body { font-size: 14px; line-height: 24px; }

/* hero photo: the real Botswana/Okavango image cropped to Hugo's slot per bp (ref 03f387e00a4b).
 * mobile slot 400x400, tablet slot 1024x680 (Area's reuse is 824 -> override), desktop 920x740. */
/* Demo photo is DEMO-PAGE-ONLY (live pages inline-style their own image; see the
   wrong-lodge-flash fix 2026-07-08). */
.page-template-page-trip-template-v2 .tthero .arhero__photo { background-image: url('../../img/v2/tthero-mobile.webp'); }
@media (min-width: 768px) {
  .tthero .arhero__photo { aspect-ratio: 1024 / 680; }
  .page-template-page-trip-template-v2 .tthero .arhero__photo { background-image: url('../../img/v2/tthero-tablet.webp'); }
}
@media (min-width: 1280px) {
  .page-template-page-trip-template-v2 .tthero .arhero__photo { background-image: url('../../img/v2/tthero-desktop.webp'); }
}

.tthero__details { align-self: stretch; display: flex; gap: 18px; margin-top: 24px; }
.tthero__detcol  { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  border-bottom: 1px solid rgba(0,0,0,.07); }   /* cols split evenly: desktop 179 / tablet 343 / mobile 167 */
.tthero__detrow  { display: flex; align-items: center; gap: 10px; padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,.07); }
.tthero__detic   { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: #b19f70;
  stroke-width: 1.4px; }
.tthero__dettxt  { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px;
  line-height: 24px; letter-spacing: 0; color: rgba(0,0,0,.8); }   /* mobile/tablet 14/24 */

@media (min-width: 768px) {
  .tthero .arhero__title { font-size: 54px; line-height: 46px; color: rgba(0,0,0,.8); }
}
@media (min-width: 1280px) {
  .tthero .arhero__title { font-size: 50px; line-height: 50px; }
  .tthero .arhero__body { font-size: 16px; line-height: 26px; }
  .tthero__dettxt { font-size: 16px; line-height: 26px; }   /* desktop 16/26 */
}

/* ==================================================== TRIP HIGHLIGHTS (.tthl)
 * NEW. Dark teal band (node 721:83300): #15292c + black@.30 tint (+ faint .10 luminosity
 * photo, flagged visual-UNVERIFIED, not built). Breadcrumbs top-left (real trail, ungated).
 * Centred-width band: "trip highlights" Bebas 42/42 #fff + 4 gold-diamond bullets (Roboto 300
 * 18/30 #fff). Scroll cue (Roboto 12/22 ls1.44 #f9f5f2) over a 60px vertical gold line.
 * pad sides 24 (mobile) / 128 (tablet) / 320 (desktop); gap 112. */
.tthl { position: relative; overflow: hidden; background: #15292c; padding: 112px 24px 0;
  display: flex; flex-direction: column; gap: 112px; align-items: stretch; isolation: isolate; }
.tthl__tint { position: absolute; inset: 0; z-index: 0; background: rgba(0,0,0,.30); pointer-events: none; }
.tthl__photo { position: absolute; inset: 0; z-index: 0; background: url('../../img/v2/auteam-bg.webp') center/cover no-repeat;
  mix-blend-mode: luminosity; opacity: .10; pointer-events: none; }   /* faint .10 luminosity photo (787b1cfbbf2d) */
.tthl > *:not(.tthl__tint):not(.tthl__photo):not(.tthl__crumbs) { position: relative; z-index: 1; }
.tthl__crumbs { position: absolute; z-index: 2; left: 24px; top: 24px; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; }
.tthl__crumbs a, .tthl__crumb-cur { font-family: "Roboto Flex", sans-serif; font-weight: 400;
  font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase;
  color: rgba(249,245,242,.7); text-decoration: none; }
.tthl__sep { color: #b19f70; font-size: 12px; line-height: 1; }
.tthl__inner { display: flex; flex-direction: column; gap: 56px; }
.tthl__title { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 42px;
  line-height: 42px; letter-spacing: 0; color: #fff; text-transform: uppercase;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.tthl__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; }
.tthl__bullet { display: flex; gap: 16px; align-items: flex-start; }
.tthl__dot { flex: 0 0 12px; width: 12px; height: 12px; position: relative; margin-top: 9px; }
.tthl__dot::before { content: ""; position: absolute; inset: 1.5px; background: #b19f70; transform: rotate(45deg); }
.tthl__btxt { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 18px; line-height: 30px;
  letter-spacing: 0; color: #fff; }
.tthl__scroll { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.tthl__scrolltxt { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px; line-height: 22px;
  letter-spacing: 1.44px; text-transform: uppercase; color: #f9f5f2; }
.tthl__scrollline { width: 1px; height: 60px; background: #b19f70; }
@media (min-width: 768px)  { .tthl { padding: 184px 128px 0; } .tthl__crumbs { left: 48px; top: 48px; } }
@media (min-width: 1280px) { .tthl { padding: 184px 320px 0; } }

/* ================================================= ANCHOR LINKS (.ttanchor)
 * REBUILT 2026-07-31 to "Anchor Links (New)" — component 1069:125326, desktop frame
 * 1069:118561, tablet 1069:128457 (the old 721:83381 segmented row is deprecated).
 * Node numbers: a 900x42 bar, horizontally centred (desktop 270/270 at 1440, tablet 62/62
 * at 1024), floating 40px below the overview section's top edge INSIDE its top padding —
 * it is a Main Container child at y=40, so it adds NO page height (the section is height:0
 * here and .ttmain's own padding carries the design's 200/164 content offsets). Buttons:
 * equal widths sharing 1px #b19f70 borders, white 80% fill + 20px backdrop blur (the topo
 * map and, when pinned, the page show through), Roboto Flex 12/22 +1.44 uppercase black/90.
 * The node's 26px button padding is dropped to 8px: the real labels ("departure dates") are
 * longer than the node's placeholders and 26px would clip them inside the node's 180.8px
 * button — centred text keeps the rendered geometry on-node for labels that fit.
 * MOBILE (<768): the component is REMOVED entirely (Hugo 2026-07-31; mobile frame
 * 1069:128335 carries no anchor row).
 * Sticky behaviour (js/home-v2.js setupAnchorLinks): pins at nav-height+24 from the
 * viewport top (106 desktop / 88 tablet), 24 when the nav is hidden (gap 40 -> 24, Hugo
 * amendment v2 2026-07-31; the bar's STATIC 40px spot inside the section is unchanged),
 * eased 300ms; hides for good at Our approach (.is-away). .is-pinned toggles fixed. */
.ttanchor { display: none; }
@media (min-width: 768px) {
  .ttanchor { display: block; position: relative; height: 0; z-index: 30; }
  .ttanchor__bar {
    position: absolute; top: 40px; left: 0; right: 0; margin: 0 auto;
    width: 900px; max-width: calc(100% - 48px);
    display: flex; box-sizing: border-box;
    transition: top .3s ease-in-out, opacity .3s ease-in-out, transform .3s ease-in-out;
  }
  .ttanchor__bar.is-pinned { position: fixed; }
  .ttanchor__bar.is-away { opacity: 0; transform: translateY(-12px); pointer-events: none; }
  .ttanchor__btn {
    flex: 1 1 0; min-width: 0; height: 42px; margin-left: -1px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; padding: 0 8px;
    border: 1px solid #b19f70;
    background: rgba(255,255,255,.8);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px;
    line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase;
    color: rgba(0,0,0,.9); text-decoration: none; white-space: nowrap;
  }
  .ttanchor__btn:first-child { margin-left: 0; }
  /* jump targets clear the pinned bar (24 gap + 42 bar + 24 breathing room; a jump is a
     down-scroll so the nav is hidden and the bar sits at 24) */
  .tthl, .ttmain, .ttdaily, .ttdep, .ttgal, .ttfaq { scroll-margin-top: 90px; }
}
@media (prefers-reduced-motion: reduce) { .ttanchor__bar { transition: none !important; } }

/* ================================================== MAIN CONTAINER (.ttmain)
 * NEW. Single image-first basic-text-and-image (506:45121 / tablet 813:118369 / mobile 721:78266).
 * Faint topo bg @.03. Desktop: 664 square photo LEFT + 464 text RIGHT (gap104, pad 200/104).
 * Tablet/mobile: single square photo on top then text (masters carry 2 slots, instance uses 1 ->
 * adapted, Q-WP6-U). Kicker Roboto 14/24 ls1.68 #000@.8; Title Bebas 50/50 #000@.8; Desc Roboto 300
 * 18/30 #000@.9; gold button (#b19f70 bg, #f9f5f2 label + plane icons). Photo placeholder (UNVERIFIED). */
.ttmain { position: relative; overflow: hidden; background: #fff; padding: 40px 24px; }
.ttmain__topo { position: absolute; inset: 0; z-index: 0; background-image: url('../../img/v2/opmain-topo.webp');
  background-repeat: repeat; background-size: 1440px auto; opacity: .03; pointer-events: none; }
.ttmain__inner { position: relative; z-index: 1; box-sizing: border-box; max-width: 1232px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 40px; align-items: stretch; }
.ttmain__img { position: relative; margin: 0; width: 100%; aspect-ratio: 1 / 1; background: #15292c center/cover no-repeat;
  box-shadow: 0 0 50px rgba(0,0,0,.04); }
/* Demo photo is DEMO-PAGE-ONLY (live pages inline-style their own image; see the
   wrong-lodge-flash fix 2026-07-08). */
.page-template-page-trip-template-v2 .ttmain__img { background-image: url('../../img/v2/tt-mainimg.webp'); }
.ttmain__cap { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; display: flex;
  align-items: center; gap: 8px; padding: 20px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 12px; line-height: 16px; color: rgba(255,255,255,.8); }
.ttmain__pin { width: 16px; height: 16px; flex: none; fill: none; stroke: #b19f70; stroke-width: 1px; }
.ttmain__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ttmain__kicker { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 14px;
  line-height: 24px; letter-spacing: 1.68px; text-transform: uppercase; color: rgba(0,0,0,.8); }
.ttmain__title { margin: 40px 0 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 40px;
  line-height: 38px; letter-spacing: 0; color: rgba(0,0,0,.8); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ttmain__desc { margin: 32px 0 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 16px;
  line-height: 28px; letter-spacing: 0; color: rgba(0,0,0,.9); }
.ttmain__btn { margin: 40px 0 0; display: inline-flex; align-items: center; gap: 12px; background: #b19f70;
  padding: 18px 26px; text-decoration: none; }
.ttmain__btnic { width: 16px; height: 16px; flex: none; fill: none; stroke: #f9f5f2; stroke-width: 1px; }
.ttmain__btntxt { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px; line-height: 22px;
  letter-spacing: 1.68px; text-transform: uppercase; color: #f9f5f2; }
@media (min-width: 768px) {
  /* top 164 per the Anchor Links (New) tablet frame 1069:128457 (Sqaure Image y=164; the
     anchor bar floats at y=40 inside this padding). Bottom stays 104 (node: 1393-1289). */
  .ttmain { padding: 164px 128px 104px; }
  .ttmain__inner { gap: 80px; }
  .ttmain__btntxt { font-size: 14px; line-height: 24px; }
}
@media (min-width: 1280px) {
  .ttmain { padding: 200px 104px; }
  .ttmain__inner { flex-direction: row; gap: 104px; align-items: center; }
  .ttmain__img { flex: 0 0 664px; width: 664px; }
  .ttmain__text { flex: 0 1 464px; }
  .ttmain__title { font-size: 50px; line-height: 50px; }
  .ttmain__desc { font-size: 18px; line-height: 30px; margin-top: 56px; }
  .ttmain__btn { margin-top: 56px; }
}

/* ============================================== DEPARTURE DATES (.ttdep)
 * NEW (514:45326 / 813:126538 / 721:83606). Cream band, centred column. "Departure dates"
 * Bebas 36/40. A left-aligned clipped STRIP of segmented gold date cards (154 desktop/tablet ·
 * 124 mobile; desktop fits all 8, tab/mob scroll). Each card: day 12/22 · date 22/25.8 ls2.64 ·
 * month 12/22, #15292c centred, space-between, shared 1px borders. Progress (01..06) + arrows +
 * gold "get in touch" button. Carousel wired in the interactivity phase (prev/next loads 8 at a time). */
.ttdep { background: #f9f5f2; padding: 72px 24px; overflow: hidden; }
.ttdep__inner { max-width: 1232px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.ttdep__title { align-self: stretch; margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400;
  font-size: 32px; line-height: 32px; letter-spacing: 0; text-align: center; color: rgba(0,0,0,.9);
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
/* BELOW 1280 the strip BLEEDS to the viewport edges, matching the fixed 1232px track in Hugo's
   tablet (813:126538) and mobile (721:83606) nodes: running off the screen is what tells you
   there is more to scroll. It escapes the section padding with negative margins and puts that
   padding back inside, so the FIRST card still lines up with the title above it.
   From 1280 up, JS trims the track to whole cards instead and align-self centres that trimmed
   width (a stretched box would pin it left). Paul 2026-07-31. */
.ttdep__cards { align-self: center; display: flex; justify-content: flex-start;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  width: 100vw; max-width: 100vw; margin-left: -24px; margin-right: -24px;
  padding-left: 24px; padding-right: 24px; box-sizing: border-box;
  /* scroll-padding must match, or the snap aligns the first card to the CONTAINER edge and
     the strip loads 24px pre-scrolled with card one flush to the screen (measured 2026-07-31) */
  scroll-padding-left: 24px; }
.ttdep__cards::-webkit-scrollbar { display: none; }
.ttdep__card { flex: 0 0 124px; height: 156px; box-sizing: border-box; border: 1px solid #b19f70; margin-left: -1px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 24px;
  scroll-snap-align: start; background: #f9f5f2; }
.ttdep__card:first-child { margin-left: 0; }
.ttdep__day, .ttdep__month { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px;
  line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: #15292c; text-align: center; }
.ttdep__date { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 22px; line-height: 25.8px;
  letter-spacing: 2.64px; text-transform: uppercase; color: #15292c; text-align: center; }
/* Progress + arrows re-measured off the nodes 2026-07-31. The old rules had never rendered (no
   markup existed) and did not match the design: the bar was a single 1px line with a #15292c
   fill on a 20%-black track, and the arrows were transparent with a gold border. The node has
   discrete SEGMENTS 3px tall, active gold on a 10%-black track, and SOLID dark-teal buttons
   with a white border and white chevron. */
.ttdep__progress { display: flex; align-items: center; gap: 24px; width: 704px; max-width: 100%; padding: 8px 0; }
.ttdep__pnum { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px; line-height: 22px;
  letter-spacing: 1.44px; text-transform: uppercase; color: rgba(0,0,0,.8); text-align: center; width: 16px; flex: none; }
.ttdep__pbar { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.ttdep__pseg { flex: 1 1 0; min-width: 0; height: 3px; background: rgba(0,0,0,.1); }
.ttdep__pseg.is-on { background: #b19f70; }
/* MOBILE arrows are their own spec in node 721:83606: 52px, an 8px GAP between them, and NO
   border. They only become the 42px bordered pair that share an edge from tablet up. */
.ttdep__arrows { display: flex; align-items: flex-start; gap: 8px; }
.ttdep__arrow { width: 52px; height: 52px; box-sizing: border-box; padding: 0; border: 0;
  background: #15292c; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.ttdep__arrow[disabled] { opacity: .35; cursor: default; }
.ttdep__chev { width: 14px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; }
.ttdep__arrow--back .ttdep__chev { transform: rotate(180deg); }
.ttdep__btn { display: inline-flex; align-items: center; justify-content: center; background: #b19f70; padding: 18px 26px;
  text-decoration: none; }
.ttdep__btn span { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 14px; line-height: 24px;
  letter-spacing: 1.68px; text-transform: uppercase; color: #f9f5f2; }
/* Mobile puts the progress bar and arrows in their own 32px-gap group, inside the 48px column
   (node 721:83606). The outer gap is 48, so pull the arrows up by 16 to land on 32. */
@media (max-width: 767.98px) {
  .ttdep__arrows { margin-top: -16px; }
}
@media (min-width: 768px) {
  .ttdep { padding: 120px 104px; }
  .ttdep__card { flex: 0 0 154px; height: 160px; }
  /* tablet keeps the bleed, but the section padding is 104 here, not 24 */
  .ttdep__cards { margin-left: -104px; margin-right: -104px; padding-left: 104px; padding-right: 104px;
    scroll-padding-left: 104px; }
  /* 36/40 from TABLET up: node 813:126538 uses the same H5 as desktop, and holding it at 32/32
     until 1280 left every tablet width a size short (measured 2026-07-31). */
  .ttdep__title { font-size: 36px; line-height: 40px; }
  .ttdep__arrows { gap: 0; }
  .ttdep__arrow { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.9); margin-left: -1px; }
  .ttdep__arrow:first-child { margin-left: 0; }
}
/* DESKTOP: no bleed. JS trims the track to whole cards and align-self centres it, so the strip
   closes on a card boundary instead of cutting one in half (Paul 2026-07-31). */
@media (min-width: 1280px) {
  .ttdep__cards { width: auto; max-width: 100%;
    margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
    /* must be cleared alongside the padding: leaving the tablet's 104 here made every step
       land 49px off and the strip refuse to return to 0 (measured 2026-07-31) */
    scroll-padding-left: 0; }
}

/* ================================================= DAILY SUMMARY (.ttdaily)
 * NEW (721:82572 / 813:126635 / 721:79075). Dark teal + black@.5 + faint .36 luminosity photo
 * (reuses hiw-bg). Centred "Daily Itinerary Breakdown" Bebas 62/58 white. 2-col: LEFT day
 * accordion (expanded entry: gold "Days N" 18/28 ls2.16 + Bebas 36/40 title + desc 16/26 + gold-
 * check inclusions; collapsed rows white@.7 + 1px white@.5 dividers); RIGHT 664 square photo +
 * caption + gallery UI. Accordion/lightbox wired in interactivity. Photo placeholder (UNVERIFIED). */
.ttdaily { position: relative; overflow: clip; background: #15292c; padding: 72px 24px; isolation: isolate; }
.ttdaily__tint { position: absolute; inset: 0; z-index: 0; background: rgba(0,0,0,.5); pointer-events: none; }
.ttdaily__bg { position: absolute; inset: 0; z-index: 0; background: url('../../img/v2/hiw-bg-mobile.webp') center/cover no-repeat;
  mix-blend-mode: luminosity; opacity: .36; pointer-events: none; }
.ttdaily__wrap { position: relative; z-index: 1; max-width: 1232px; margin: 0 auto; display: flex;
  flex-direction: column; align-items: center; gap: 56px; }
.ttdaily__title { margin: 0; align-self: stretch; font-family: "Bebas Neue", sans-serif; font-weight: 400;
  font-size: 40px; line-height: 38px; letter-spacing: 0; color: rgba(255,255,255,.9); text-align: center;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ttdaily__grid { position: relative; align-self: stretch; display: flex; flex-direction: column; gap: 48px; }
.ttdaily__acc { display: flex; flex-direction: column; border-bottom: 1px solid rgba(255,255,255,.15); }
.ttdaily__entry { border-top: 1px solid rgba(255,255,255,.15); }
.ttdaily__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 32px 0; background: none; border: 0; cursor: pointer; text-align: left; }
.ttdaily__day { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 16px; line-height: 26px;
  letter-spacing: 2.16px; text-transform: uppercase; color: rgba(255,255,255,.7); }   /* collapsed = white@.7 */
.ttdaily__entry.is-open .ttdaily__day { color: #b19f70; }                              /* open = gold */
.ttdaily__chev { width: 16px; height: 8px; flex: none; transition: transform .25s ease; }
.ttdaily__entry.is-open > .ttdaily__head { padding-bottom: 0; }
.ttdaily__panel { box-sizing: border-box; padding-bottom: 0; }
.ttdaily__entry.is-open .ttdaily__panel { padding-bottom: 32px; }
.ttdaily__etitle { margin: 16px 0 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 32px;
  line-height: 32px; letter-spacing: 0; color: rgba(255,255,255,.9); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ttdaily__edesc { margin: 24px 0 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 16px;
  line-height: 28px; letter-spacing: 0; color: rgba(255,255,255,.9); }
.ttdaily__incl { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.ttdaily__inclitem { display: flex; align-items: center; gap: 12px; }
.ttdaily__check { width: 14px; height: 10px; flex: none; }
.ttdaily__incl span { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 16px; line-height: 28px;
  color: rgba(255,255,255,.9); }
.ttdaily__img { display: none; position: relative; margin: 0; width: 100%; aspect-ratio: 1 / 1; box-shadow: 0 40px 100px rgba(0,0,0,.5);
  background: #f9f5f2 url('../../img/v2/tt-mainimg.webp') center/cover no-repeat;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1); }   /* glides when it re-aligns to the open day (engine) */
/* per-day image inside each panel — tablet + mobile (nodes 813:126635 landscape / 721:79075 square).
   The shared right-column image (.ttdaily__img) is desktop-only; below 1280 each open day shows its own. */
.ttdaily__pimg { position: relative; margin: 32px 0 0; width: 100%; aspect-ratio: 1 / 1;
  background: #15292c center/cover no-repeat; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
@media (min-width: 768px)  { .ttdaily__pimg { aspect-ratio: 896 / 589; } }
@media (min-width: 1280px) { .ttdaily__pimg { display: none; } }   /* desktop uses the shared image */
.ttdaily__cap { position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; display: flex; align-items: center;
  gap: 8px; padding: 20px; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 12px; line-height: 16px; color: rgba(255,255,255,.8); }
.ttdaily__gallery { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: center; justify-content: space-between; }
.ttdaily__garrows { display: flex; }
.ttdaily__garrow { width: 42px; height: 42px; margin-left: -1px; border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.1);
  color: #fff; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ttdaily__garrow:first-child { margin-left: 0; }
/* batch2 #2 sweep completion (2026-08-01): day-panel gallery arrows onto the shared Arrow
   asset (white via currentColor); prev = rotated 180. The demo page's static departure strip
   gets the same treatment via .ttdep__arrow .ic (the live strip uses .ttdep__chev). */
.ttdaily__garrow .ic { width: 15px; height: 11px; fill: none; }
.ttdaily__garrow[aria-label^="Previous"] .ic { transform: rotate(180deg); }
.ttdep__arrow .ic { width: 14px; height: 10px; fill: none; }
.ttdep__arrow[aria-label^="Previous"] .ic { transform: rotate(180deg); }
.ttdaily__gmore { display: inline-flex; align-items: center; padding: 16px 22px; background: #fff; text-decoration: none;
  font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px; line-height: 22px; letter-spacing: 1.44px;
  text-transform: uppercase; color: rgba(0,0,0,.9); }
@media (min-width: 768px) {
  .ttdaily { padding: 120px 64px; }
  .ttdaily__bg { background-image: url('../../img/v2/hiw-bg-tablet.webp'); }
}
@media (min-width: 1280px) {
  .ttdaily { padding: 200px 104px; }
  .ttdaily__bg { background-image: url('../../img/v2/hiw-bg-desktop.webp'); }
  .ttdaily__wrap { gap: 160px; }
  .ttdaily__title { align-self: center; text-align: left; font-size: 62px; line-height: 58px; }
  .ttdaily__day { font-size: 18px; line-height: 28px; }
  .ttdaily__etitle { font-size: 36px; line-height: 40px; }
  .ttdaily__edesc { line-height: 26px; }
  .ttdaily__incl span { line-height: 26px; }
  .ttdaily__grid { flex-direction: row; gap: 80px; align-items: flex-start; }
  /* trailing room so the sticky image can stay pinned (and fully visible) even when the LAST day is
     open, instead of releasing at the accordion's bottom and clipping the image's lower edge */
  .ttdaily__col { flex: 1 1 488px; min-width: 0; padding-bottom: 34vh; }
  /* desktop: shared right-column image (fluid 1280-1440, L13). Sticky + capped to the viewport so
     it stays fully visible beside the open day on ANY itinerary length (replaces the old JS
     bottom-align, which clipped the photo's top on long trips). Needs .ttdaily overflow:clip (not
     hidden) above, or sticky would not engage. */
  .ttdaily__img { display: block; flex: 1 1 664px; width: auto; min-width: 0;
    position: sticky; top: 24px; align-self: flex-start; max-height: calc(100vh - 48px); }
}

/* ====================================================== GALLERY (.ttgal)
 * NEW (519:63104 / 813:120409). White 2x2 grid of 608x400 photos (gap16, pad 120/104/0).
 * "more photos" white button overlaid bottom-right on the last cell -> lightbox (interactivity).
 * Mobile = single-column stack (Lodge Q-LO-GALMOB precedent). Photos placeholder (UNVERIFIED). */
.ttgal { background: #fff; padding: 72px 24px; }
.ttgal__grid { max-width: 1232px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 16px; }
.ttgal__cell { margin: 0; position: relative; aspect-ratio: 608 / 400; background: #15292c center/cover no-repeat; }
.ttgal__more { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center;
  background: #fff; padding: 16px 22px; text-decoration: none; }
.ttgal__more span { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px; line-height: 22px;
  letter-spacing: 1.44px; text-transform: uppercase; color: rgba(0,0,0,.9); }
@media (min-width: 768px) { .ttgal { padding: 120px 104px; } .ttgal__grid { grid-template-columns: 1fr 1fr; } }

/* ========================================================== FAQ (.ttfaq)
 * NEW (276:30450 / 813:125370 / 721:80492). White, "frequently asked questions" Bebas #15292c +
 * question rows (Roboto 18/28 #15292c, gold chevron, 1px #000 dividers, expandable answer panels).
 * Wired by the shared engine (.ttfaq ACCORDIONS hook).
 * Paul 2026-08-01 (deviations from the node, queued for Hugo):
 *  - topo layer REMOVED (the node has it at .03 but the gallery above has none; inconsistent);
 *  - TOP padding removed so the gallery's symmetric padding makes the gap above the FAQ equal
 *    the gap above the images (was 264 vs 120 at 1440, measured; now 120/120);
 *  - content aligned to the gallery's 1232 column (was inset 220, images at 104). */
.ttfaq { position: relative; overflow: hidden; background: #fff; padding: 0 24px 72px; }
.ttfaq__topo { display: none; }
.ttfaq__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px;
  max-width: 1232px; margin: 0 auto; }
.ttfaq__title { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px; line-height: 28px;
  letter-spacing: 0; color: #15292c; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ttfaq__list { display: flex; flex-direction: column; border-bottom: 1px solid rgba(0,0,0,.10); }
.ttfaq__item { border-top: 1px solid rgba(0,0,0,.10); }
.ttfaq__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px 0; background: none; border: 0; cursor: pointer; text-align: left; }
.ttfaq__q { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 14px; line-height: 24px;
  letter-spacing: 1.68px; text-transform: uppercase; color: #15292c; }
.ttfaq__chev { width: 18px; height: 9px; flex: none; }
.ttfaq__item.is-open .ttfaq__chev { transform: rotate(180deg); }
.ttfaq__panel { }
.ttfaq__a { margin: 0 0 32px; max-width: 760px; font-family: "Roboto Flex", sans-serif; font-weight: 300;
  font-size: 16px; line-height: 26px; letter-spacing: 0; color: rgba(21,41,44,.9); }
@media (min-width: 768px)  { .ttfaq { padding: 0 104px 104px; } }
@media (min-width: 1280px) { .ttfaq { padding: 0 104px 144px; } .ttfaq__title { font-size: 36px; line-height: 40px; } }

/* ============================================ BIG-QUOTE DARK (.ttquote)
 * REUSE .v2quote (home §4), DARK variant: teal bg + white text (mirrors Destination Hub .dhquote).
 * Same Ed Charles content/geometry as home §4; only colours change. (276:28394) */
.ttquote { background: #15292c; }
.ttquote .v2quote__q { color: rgba(255,255,255,.9); }
.ttquote .v2quote__name { color: rgba(255,255,255,.9); }
.ttquote .v2quote__desc { color: rgba(255,255,255,.9); }
.ttquote .v2quote__label { color: rgba(255,255,255,.6); }
.ttquote .v2quote__gold { color: #b19f70; }
@media (min-width: 768px)  { .ttquote .v2quote__label { color: rgba(255,255,255,.9); } }
@media (min-width: 1280px) { .ttquote .v2quote__label { color: rgba(255,255,255,.6); } }

/* ===================================================== REVIEWS DARK (.ttreviews)
 * REUSE .v2reviews, DARK variant (497:43923 / 813:120413 / 721:75785): teal bg + white tagline +
 * inverted (white) reviews.io logo + faint texture (reuses dereviews-bg). Mirrors .dereviews. */
.ttreviews { position: relative; isolation: isolate; background: #15292c; overflow: hidden; }
.ttreviews::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .10;
  background: url('../../img/v2/dereviews-bg-mobile.webp') center/cover no-repeat; }
.ttreviews > * { position: relative; z-index: 1; }
.ttreviews .v2reviews__tagline { color: #ffffff; }
.ttreviews .v2reviews__logo { filter: brightness(0) invert(1); }
@media (min-width: 768px)  { .ttreviews::before { background-image: url('../../img/v2/dereviews-bg-tablet.webp'); } }
@media (min-width: 1280px) { .ttreviews::before { background-image: url('../../img/v2/dereviews-bg-desktop.webp'); } }

/* ===================================== REVIEW FIXES (Paul, 2026-06-16) =====================================
 * 1. Hero image-caption to the TOP of the photo (gradient flipped) — matches the design (.arhero base
 *    puts it at the bottom; Area scopes it to the top via body.area-v2). */
.tthero .arhero__caption { top: 0; bottom: auto;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%); }
/* 2. reset.css `svg{fill:currentColor}` (L28) was FILLING the stroke-only chevrons/checks (inline
 *    fill="none" is an attribute, the CSS rule beats it). Force fill:none on every stroke glyph. */
.ttfaq__chev, .ttdaily__chev, .ttdaily__check, .tthl__scrollline { fill: none; }
/* Inspiration Embla filmstrip CSS now lives on the shared .v2insp base in home-v2.css (L26 —
 * a rule correct for every instance of a shared component goes on the base, not per page). */

/* Related-trip cards: make the WHOLE card a clickable link (stretched overlay), not just the
   "View Safari" CTA (Paul 2026-06-22). Scoped to the trip page; the shared .v2card is untouched. */
.ttinsp .v2card { position: relative; }
.ttinsp .v2card__link { position: absolute; inset: 0; z-index: 2; }
.ttinsp .v2card__cta { position: relative; z-index: 3; }
/* Keep every related-trip card's description the SAME length so the three cards stay symmetric:
   clamp to exactly 3 lines with an ellipsis, whatever the source overview length (Paul 2026-06-23).
   Only >=768 where the description is shown (mobile hides it), so mobile display:none is preserved. */
@media (min-width: 768px) {
  .ttinsp .v2card__desc { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden; min-height: 5.25em; }   /* 3 lines @ 1.75 line-height: a floor AND a cap = every card identical */
}

/* Related trips on DESKTOP: home-v2 hides the .v2insp__cards grid >=1280 in favour of a featured
   filmstrip, but the trip page doesn't build that filmstrip, so the section would be empty on
   desktop. Show the 3 cards (centred) at desktop here instead (Paul 2026-06-22). */
@media (min-width: 1280px) {
  .ttinsp .v2insp__cards { display: flex; justify-content: center; gap: 16px; padding: 0 24px; }
  .ttinsp .v2insp__foot { display: none; }
}

/* Overview: put a gap between the two paragraphs. The wysiwyg wraps them in <p> but reset.css
   zeroes paragraph margins, so they ran together (Paul 2026-06-22). */
.ttmain__desc p { margin: 0; }
.ttmain__desc p + p { margin-top: 24px; }

/* Related cards: the home design hides the first detail line of each column on mobile to save
   space, which dropped the trip type and guests on the trip cards. Show them all here, and let
   the card grow so the extra lines don't clip (Paul 2026-06-22). */
.ttinsp .v2card__details .v2trip__col li:first-child { display: flex; }
@media (max-width: 767px) { .ttinsp .v2card { height: auto; min-height: 576px; } }

/* Related-card image cycler: left/right arrows scroll the trip's photos within the card image
   (Paul 2026-07-18). Sit ABOVE the .v2card__link stretched overlay (z-index 2) so they're clickable;
   the JS (setupV2CardGalleries in home-v2.js) swaps the src and stops propagation. */
.ttinsp .v2card__imgnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: rgba(21,41,44,.5); color: #fff; border: 0; border-radius: 4px; cursor: pointer;
  transition: background .15s ease; }
.ttinsp .v2card__imgnav:hover { background: rgba(21,41,44,.82); }
.ttinsp .v2card__imgnav--prev { left: 12px; }
.ttinsp .v2card__imgnav--next { right: 12px; }
.ttinsp .v2card__imgnav .ic { width: 13px; height: 13px; fill: none; }
/* batch2 #2: the shared Arrow asset points forward; the prev photo-nav flips it (white via
   currentColor here — these 36px translucent photo-nav buttons are Paul's gallery controls,
   not the teal carousel-arrows component, so only the glyph changed). */
.ttinsp .v2card__imgnav--prev .ic { transform: rotate(180deg); }

/* hero gallery (arrows + "more photos") shown at ALL breakpoints, same as the lodge/area
   heroes (the shared base hides it below desktop; the trip template never had the override,
   so tablet and mobile lost the arrows — Paul 2026-07-11). */
.tthero .arhero__gallery { display: flex; align-items: center; justify-content: space-between;
  position: absolute; left: 16px; right: 16px; bottom: 16px; }
@media (min-width: 768px)  { .tthero .arhero__gallery { left: 24px; right: 24px; bottom: 24px; } }
@media (min-width: 1280px) { .tthero .arhero__gallery { left: 32px; right: 32px; bottom: 32px; } }