/* ===========================================================================
   destination-hub-v2.css — page-unique styles for the clean-room
   /destination-hub-v2/ build (the destinations INDEX page).
   Figma 355:23009 desktop (1440x9662) / 754:83615 tablet (1024x9306) /
   709:52153 mobile (400x9697). FULLY designed at all 3 breakpoints, so every
   section gates at all 3.

   Reuse (defined elsewhere, loaded ahead via the clean-room allow-list — do NOT
   redefine here, only override/hook):
     - .btnav                                  -> best-time-v2.css
     - .arhero (subpage-hero-1)                -> area-v2.css
     - .v2quote / .v2insp / .v2whyd /
       .v2reviews / .v2approach / opfoot*       -> home-v2.css

   NEW page-unique sections (built here, namespaced dh*):
     - dh-whereweoperate (.dhwhere) : centred intro paragraph (with gold runs) +
                                       "our best destinations" eyebrow + vertical
                                       gold divider.
     - dh-grid (.dhgrid)            : 2-column photo card grid (8 destination
                                       cards), country name overlaid bottom-left
                                       + small card number top-left.
   =========================================================================== */

body.destination-hub-v2 {
  font-family: "Roboto Flex", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===========================================================================
   dh-hero (.dhhero) — REUSE the Area subpage-hero-1 .arhero classes + photo.
   The only divergence from Area is the TITLE size at tablet/mobile: Destination
   Hub renders Bebas 46/42 at both (Area is 58/54 tablet, 46/44 mobile). Desktop
   matches Area (62/58). One per-bp override + the page's own hero photo.
   =========================================================================== */
.dhhero .arhero__title { font-size: 46px; line-height: 42px; }       /* mobile (Area mobile lh is 44) */
@media (min-width: 768px) {
  .dhhero .arhero__title { font-size: 46px; line-height: 42px; }     /* tablet (Area is 58/54) */
}
@media (min-width: 1280px) {
  .dhhero .arhero__title { font-size: 62px; line-height: 58px; }     /* desktop = Area */
}

/* Gallery UI (prev/next arrows + "more photos") is visible:false in the Destination
   Hub hero node (Gallery UI frame I355:23011;344:11446 visible=false) and the Figma
   annotation states "The gallery UI has been removed." The shared .arhero component
   renders it (Area uses it), so hide it here. measure is blind to a visible:false
   parent slot (L20); annotation override (L24). Caption stays (image-caption visible=true). */
.dhhero .arhero__gallery { display: none; }
/* hero image-caption sits at the TOP of the photo (node image-caption y82 = photo top),
   not the bottom — flip the gradient so the dark wash is at the top behind the text.
   Icon = Hugo's exact gold notched-camera (#ic-credit = comp 432:35604, stroke icon →
   set `color` + fill:none, not the old map-pin). Matches the Area/Destination/Lodge heroes. */
.dhhero .arhero__caption { top: 0; bottom: auto;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%); }
.dhhero .arhero__pin { color: #b19f70; fill: none; }

/* ===========================================================================
   dh-whereweoperate (.dhwhere) — Figma "Where we operate 5"
   desktop 355:23012 (1440x668) / tablet 754:89293 (1024x596) / mobile 710:70436 (400x663).
   A centred intro paragraph (Roboto Flex 300, gold runs on place names) + an
   "OUR BEST DESTINATIONS" eyebrow with a 1px gold vertical divider beneath it.
   =========================================================================== */
.dhwhere {
  background: #fff;
  padding: 144px 24px 0;          /* desktop body sits 144px (966-822) below section top */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dhwhere__body {
  max-width: 923px;
  margin: 0;
  font-family: "Roboto Flex", sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 40px;
  color: rgba(0,0,0,1);
}
.dhwhere__body .dhwhere__gold { color: #b19f70; }

.dhwhere__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 144px;              /* eyebrow sits at y_rel 994-822=172 below body block; tuned below */
}
.dhwhere__eyebrow {
  margin: 0;
  width: 252px;                   /* Figma "Frame 48" is 252 wide, eyebrow CENTER-aligned within */
  text-align: center;
  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,1);
}
.dhwhere__rule {
  width: 1px;
  height: 80px;
  margin-top: 18px;
  background: #b19f70;
}

/* ===========================================================================
   dh-grid (.dhgrid) — Figma "destination-grid"
   desktop 355:23017 (1440x2016) / tablet 754:89299 (1024x1416) / mobile 710:70442 (400x2376).
   A 2-column grid of photo cards (8). Each card: a photo (CSS bg), the country
   name overlaid bottom-left (Bebas, cream), a small card number top-left.
     desktop : cards 608x440, gap16, pad 104; 2 cols.
     tablet  : cards 400x290, gap16, pad 104; 2 cols.
     mobile  : cards 352x284, gap8,  pad 24;  1 col.
   =========================================================================== */
.dhgrid {
  background: #fff;
  padding: 104px;
}
.dhgrid__inner {
  max-width: 1232px;             /* 608*2 + 16 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.dhgrid__card {
  position: relative;
  aspect-ratio: 608 / 440;
  overflow: hidden;
  background: #15292c;
}
.dhgrid__photo {
  position: absolute;
  inset: 0;
  background-image: var(--dh-photo-m, var(--dh-photo));   /* phone file below 768, full file above (2026-08-16 sweep) */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* hover state (Paul, 18 Aug 2026): the card crossfades to the country page's second photo. Pointer devices
   only; no motion when the visitor prefers reduced motion. */
.dhgrid__photo.dhgrid__photo--alt { opacity: 0; z-index: 1; background-image: var(--dh-alt); }   /* --dh-alt is set by the script once a pointer reaches the grid; two classes so the later .dhgrid__photo breakpoint rule cannot override it */
@media (hover: hover) {
  .dhgrid__photo--alt { transition: opacity .7s ease; }
  .dhgrid__card:hover .dhgrid__photo--alt { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .dhgrid__photo--alt { transition: none; } }
/* seven cards (the 'Another destination' card came out for launch, Paul 18 Aug 2026): the odd last card
   spans both columns at the same row height, so the grid ends square. Drops away by itself at eight. */
@media (min-width: 768px) {
  .dhgrid__card:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 1232 / 440; }
  /* the spanning card shows purpose-cut 2.8:1 files at 2x (compose/build_hub_cards.py) instead of stretching the 608x440 crop */
  .dhgrid__card:last-child:nth-child(odd) > .dhgrid__photo:not(.dhgrid__photo--alt) { background-image: var(--dh-photo-wide, var(--dh-photo)); }
  .dhgrid__card:last-child:nth-child(odd) > .dhgrid__photo--alt { background-image: var(--dh-alt-wide, var(--dh-alt)); }
}
/* subtle bottom gradient so the cream title reads over any photo */
.dhgrid__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;   /* above both photos (the hover photo is z 1 too and earlier in the DOM); the number and name (z 2) stay above the gradient */
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}
.dhgrid__num {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  font-family: "Roboto Flex", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 1.44px;
  color: #fff;
}
.dhgrid__title {
  position: absolute;
  left: 32px;
  bottom: 32px;
  z-index: 2;
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 28px;
  letter-spacing: 0;
  color: #faf5f2;
}

/* ---------- tablet (<=1024) ---------- */
@media (max-width: 1024px) {
  .dhwhere { padding-top: 144px; }
  .dhwhere__body { max-width: 816px; font-size: 20px; line-height: 32px; }
  .dhgrid { padding: 104px; }
  .dhgrid__inner { max-width: 816px; gap: 16px; }   /* 400*2 + 16 */
}

/* ---------- mobile (<=767) ---------- */
@media (max-width: 767px) {
  .dhwhere { padding: 104px 32px 0; }
  .dhwhere__body { max-width: 336px; font-size: 18px; line-height: 30px; }
  .dhgrid { padding: 24px; }
  .dhgrid__inner { max-width: 352px; grid-template-columns: 1fr; gap: 8px; }
  .dhgrid__card { aspect-ratio: 352 / 284; }
}

/* ===========================================================================
   dh-quote (.dhquote) — the big-quote DARK variant. Same .v2quote LAYOUT/geometry
   as homepage §4 (measure passes at all 3 bps), but Destination Hub renders it on
   the dark teal #15292c background with WHITE text (gold runs stay gold). Override
   only the section background + the text colours + the divider/label tone.
   =========================================================================== */
.dhquote { background: #15292c; }
.dhquote .v2quote__q { color: rgba(255,255,255,.9); }
.dhquote .v2quote__name { color: rgba(255,255,255,.9); }
.dhquote .v2quote__desc { color: rgba(255,255,255,.9); }
.dhquote .v2quote__label { color: rgba(255,255,255,.6); }
.dhquote .v2quote__gold { color: #b19f70; }
@media (min-width: 768px) {
  .dhquote .v2quote__label { color: rgba(255,255,255,.9); }   /* vertical label over the photo */
}
@media (min-width: 1280px) {
  .dhquote .v2quote__label { color: rgba(255,255,255,.6); }
}

/* ===========================================================================
   dh-whychoose (.dhwhyd) — REUSE the §7 .v2whyd dark staggered grid.
   Desktop + mobile match §7 exactly. TABLET diverges: Destination Hub stacks the
   FULL 3-image collage ON TOP (column) then the text below, in an 816-wide centred
   column with 104 pad — whereas §7's tablet (768-1279) uses a row layout that only
   shows the single chem image. Override the tablet range to the column collage.
   =========================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  .dhwhyd { flex-direction: column; align-items: center; gap: 80px; padding: 104px; }
  .dhwhyd .v2whyd__grid { order: 1; flex: none; width: 816px; max-width: 100%;
    aspect-ratio: 816 / 881; filter: drop-shadow(60px 60px 120px rgba(0,0,0,.4)); }
  .dhwhyd .v2whyd__text { order: 2; width: 816px; max-width: 100%; padding: 0; margin: 0; gap: 56px; }
  /* show the full 3-image staggered collage (positions from the tablet node) */
  .dhwhyd .v2whyd__img--chem { inset: auto; left: 50.5%; top: 44.6%; width: 49.5%; height: 55.4%; box-shadow: none; }
  .dhwhyd .v2whyd__img--2 { display: block; left: 0; top: 25.3%; width: 38.7%; height: 46.8%; }
  .dhwhyd .v2whyd__img--3 { display: block; left: 46.7%; top: 0; width: 28.7%; height: 32.7%; }
  .dhwhyd .v2whyd__cap { display: none; }
  /* title/desc keep the §7 base sizes (40/38 + 16/28) — DH tablet does NOT use the desktop 50/30 */
}

/* ===========================================================================
   >1440 RULE (LESSONS L5): full-bleed BACKGROUNDS, content centred <=1440.
   Scoped under .desthub-page so /home-v2/ and the other reused pages are untouched.
   The two new sections both have a white section bg (full-bleed already) + a
   centred inner column (max-width caps), so above 1440 nothing stretches; this
   block just confirms the caps and centres the grid/intro column.
   nav + hero are PARKED for Hugo re wide-screen behaviour (Q-WP6-A).
   =========================================================================== */
@media (min-width: 1441px) {
  .desthub-page .dhgrid__inner { max-width: 1232px; margin: 0 auto; }
  .desthub-page .dhwhere__body { max-width: 923px; }
}

/* destination-grid card → destination page (whole card clickable). */
.dhgrid__card { position: relative; }
.dhgrid__cardlink { position: absolute; inset: 0; z-index: 3; }

@media (min-width: 768px) {
  .dhgrid__photo { background-image: var(--dh-photo); }
}