/* =============================================================================
   destination-v2.css — Destination Page (Zimbabwe) clean-room build (WP6).
   Holds ONLY this page's NEW section: the FAQ accordion (.deaccord). Every other
   section reuses existing CSS already loaded via the clean-room allow-list:
     - .btnav  / .btseasonal           → best-time-v2.css
     - .arhero / .armain / .arcar(2)   → area-v2.css
     - .v2insp / .v2reviews / .v2approach / opfoot* → home-v2.css
   Deps: tokens + reset + home-v2 + best-time + area (so all reused classes resolve).

   >1440 RULE (LESSONS L5): full-bleed BACKGROUNDS, content centred <=1440 — handled
   by each reused section's own page-scoped block; the accordion is flat #fff so it
   only needs its inner content centred. A `.dest-page` >1440 block is at the foot.

   Page base font: body.destination-v2 Roboto Flex (added up-front — the op-approach
   gate caught a missing page base → Times New Roman fallback for reused .v2btn labels).
   ========================================================================== */

body.destination-v2 {
  font-family: 'Roboto Flex', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--c-ink);
  background: #fff;
}

/* ============================================================ de-hero (.dehero)
   Reuses .arhero (area-v2.css). Overrides: Zimbabwe photo per bp + the per-bp title
   sizes that diverge from .arhero (desktop 72/66, tablet 54/46; mobile matches .arhero).
   Photo is a CSS bg (L14); crops are visual-UNVERIFIED (Q-DE-HEROIMG). */
/* 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-destination-v2 .dehero .arhero__photo { background-image: url('../../img/v2/dehero-mobile.webp'); }
.dehero .arhero__title { font-size: 46px; line-height: 42px; }   /* mobile Figma 46/42 (Mauritania frame) */

/* hero image caption sits at the TOP of the photo, not the bottom (Paul review 2026-06-15, issue 2);
   flip the gradient so the dark wash is at the top behind the text. Icon = gold OUTLINE camera
   (#ic-camera-line, swapped in the markup) which is a stroke icon, so set `color` gold not `fill`. */
.dehero .arhero__caption { top: 0; bottom: auto;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%); }
.dehero .arhero__pin { color: #b19f70; }   /* keep the Figma 14px box (gates caption text x=44) */

/* hero gallery UI (prev/next arrows + "more photos") was hidden below desktop by the shared component
   (a flagged "desktop-only to avoid clutter" assumption) — but Hugo shows it at every breakpoint
   (Paul review 2026-06-15). Show it, positioned at the bottom of the photo per bp. Scoped to .dehero;
   sweep to Area/Lodge when reviewed (same .arhero component). */
.dehero .arhero__gallery { display: flex; align-items: center; justify-content: space-between;
  position: absolute; left: 16px; right: 16px; bottom: 16px; }
@media (min-width: 768px) {
  .dehero .arhero__gallery { left: 24px; right: 24px; bottom: 24px; }
}
@media (min-width: 1280px) {
  .dehero .arhero__gallery { left: 32px; right: 32px; bottom: 32px; }
}

/* >1440: keep the panel fixed at 520 and let the extra width go to the hero PHOTO, so the Destination
   header scales exactly like the signed-off Accommodation hero (Paul 2026-06-19). The photo grows to
   fill the left (no white gutter) and the hero gets taller on wide screens, matching the lodge. */
@media (min-width: 1441px) {
  .dehero .arhero__panel { flex: 0 0 520px; }
}

@media (min-width: 768px) {
  .dehero .arhero__photo { aspect-ratio: 1024 / 680; }
  .page-template-page-destination-v2 .dehero .arhero__photo { background-image: url('../../img/v2/dehero-tablet.webp'); }
  .dehero .arhero__title { font-size: 54px; line-height: 46px; }
}
@media (min-width: 1280px) {
  .page-template-page-destination-v2 .dehero .arhero__photo { background-image: url('../../img/v2/dehero-desktop.webp'); }
  .dehero .arhero__title { font-size: 72px; line-height: 66px; }
}

/* ========================================================= de-reviews (.dereviews)
   Reuses .v2reviews (home-v2.css) but the DESTINATION reviews-io-banner is the DARK
   variant (Figma 497:34255): bg #15292c + a faint luminosity photo (op .10) + WHITE
   tagline + gold stars. .v2reviews defaults to the white-bg/dark-text variant → this
   scopes the dark treatment. Faint photo = one inset:0 bg layer (L14/L16), op .10 +
   mix-blend luminosity over teal. Photo bg visual-UNVERIFIED (Q-DE-REVIEWSBG). */
.dereviews { position: relative; isolation: isolate; background: #15292c; overflow: hidden; }
.dereviews::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url('../../img/v2/dereviews-bg-mobile.webp');
  background-size: cover; background-position: center;
  opacity: .10; mix-blend-mode: luminosity; pointer-events: none;
}
.dereviews > * { position: relative; z-index: 1; }
.dereviews .v2reviews__tagline { color: #ffffff; }
/* reviews.io logo ships dark (black wordmark) for light banners; on this DARK variant it must be
   WHITE to match Figma (Paul review 2026-06-15, issue 11). It is an <img> of a monochrome SVG, so
   recolour with a filter (brightness(0) makes it solid black, invert(1) flips it to white). */
.dereviews .v2reviews__logo { filter: brightness(0) invert(1); }
@media (min-width: 768px) {
  .dereviews::before { background-image: url('../../img/v2/dereviews-bg-tablet.webp'); }
}
@media (min-width: 1280px) {
  .dereviews::before { background-image: url('../../img/v2/dereviews-bg-desktop.webp'); }
}

/* ===================================================== de-besttime (.debesttime)
   Reuses .btseasonal (best-time-v2.css). The Zimbabwe "see more detail" link is pure
   #fff in Figma (347:44228) vs bt-seasonal's cream #f9f5f2 → one scoped colour fix. */
.debesttime .btseasonal__moretxt { color: #ffffff; }
/* "see more detail" is a BORDERED BOX button here (miscellaneous-buttons, 1px white border, square),
   not the plain text+chevron of the best-time page (Paul review 2026-06-15, issue 7). */
.debesttime .btseasonal__more { flex-direction: row; align-items: center; justify-content: center;
  gap: 0; height: 42px; padding: 0 18px; border: 1px solid #ffffff; border-radius: 0; align-self: center; }
.debesttime .btseasonal__chev { display: none; }

/* ====================================================== de-accordion (.deaccord)
   NEW section — the FAQ accordion. #fff section + faint topo bg (@.05). Title Bebas 36
   #15292c; FAQ items = UPPER Roboto 14/24 ls1.68 #15292c + gold chevron, hairline #000
   1px dividers (top + between + bottom, L19). STATIC collapsed default (clean-room).
   Fluid: mobile base → 768 tablet → 1280 desktop. Topo reuses opmain-topo.webp (@.05,
   Q-WP6-T). measure gates desktop questions by text; tab/mob by node NAME. */
.deaccord { position: relative; isolation: isolate; background: #fff; overflow: hidden;
  padding: 72px 24px; }
.deaccord__topo { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../../img/v2/opmain-topo.webp'); background-repeat: repeat;
  background-size: 1500px 1500px; opacity: .016; }
.deaccord__inner { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 40px; }
.deaccord__title { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400;
  font-size: 28px; line-height: 28px; letter-spacing: 0; color: #15292c;
  text-transform: lowercase; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.deaccord__list { display: flex; flex-direction: column; gap: 24px;
  border-top: 1px solid #000; padding-top: 24px; }
.deaccord__item { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-bottom: 24px; border-bottom: 1px solid #000; }
/* last item keeps the same question-to-divider padding as the others — the prior
   `padding-bottom: 0` squashed the last question onto its hairline (Paul review 2026-06-15, issue 10). */
.deaccord__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; }
.deaccord__chev { width: 18px; height: 9px; flex: none; }

@media (min-width: 768px) {
  .deaccord { padding: 104px; }
  .deaccord__inner { max-width: 816px; gap: 40px; }
  .deaccord__list { gap: 32px; padding-top: 32px; }
  .deaccord__item { padding-bottom: 32px; }
}
@media (min-width: 1280px) {
  .deaccord { padding: 144px 220px; }
  .deaccord__inner { max-width: 1000px; }
  .deaccord__title { font-size: 36px; line-height: 40px; }
  .deaccord__chev { width: 18px; height: 9px; }
}

/* >1440: full-bleed bg, content centred <=1000 (L5). The topo bg already spans the full
   section (inset:0); the inner column is max-width capped + auto-centred → no change needed. */

/* ====================================================== de-maincontent (.demain)
   Reuses .armain (area-v2.css). Only swaps the two square photos to the Zimbabwe crops
   (demain-img1/2.webp), CSS bg (L14), visual-UNVERIFIED (Q-DE-MAINIMG). */
.page-template-page-destination-v2 .demain .armain__img--1 { background-image: url('../../img/v2/demain-img1.webp'); }
.page-template-page-destination-v2 .demain .armain__img--2 { background-image: url('../../img/v2/demain-img2.webp'); }

/* caption icon = Hugo's gold OUTLINE camera (#ic-camera-line), not the filled map-pin (Paul review
   2026-06-15, issues 4 + 6). ic-camera-line is a stroke icon (fill:none; stroke:currentColor), so it
   needs `color` set gold, not `fill`. Scoped to Destination — Area/Lodge are not reviewed yet. */
.demain .armain__pin { color: #b19f70; }   /* keep the Figma 14px box */

/* READ MORE / SHOW LESS (Paul review 2026-06-15 — the Mauritania expand pattern, Figma frame
   "Desktop Destinations Page 1: Mauritania 2"). Both main blocks show IN FULL as standard; a centred
   boxed toggle BELOW them reveals .demain__extra (additional text+image sections — placeholder content
   on this test page) and flips Read more <-> Show less. Works at every breakpoint. */
.demain__extra { display: block; }
.demain__extra[hidden] { display: none; }
.demain__togglewrap { margin-top: 56px; text-align: center; }
.demain__more { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 24px; box-sizing: border-box; border: 1px solid #15292c; background: none;
  color: #15292c; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px;
  line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; cursor: pointer; border-radius: 0;
  transition: background .15s, color .15s; }
.demain__more:hover { background: #15292c; color: #f9f5f2; }
.demain__morechev { width: 14px; height: 7px; flex: none; transition: transform .2s; }
.demain__more.is-open .demain__morechev { transform: rotate(180deg); }

/* The revealed section (.deexp) = a NEW "optional section title here" rich block (Mauritania 2):
   text column (heading + paragraphs + a pull-quote + button) beside a stacked image column
   (portrait + landscape). Distinct content from the two standard blocks above. */
.deexp { margin-top: 48px; }
.deexp__title { margin: 0 0 28px; }
.deexp__cols { display: flex; flex-direction: column; gap: 32px; }
.deexp__text { display: flex; flex-direction: column; gap: 24px; }
.deexp__imgs { display: flex; flex-direction: column; gap: 24px; }
/* MOBILE/TABLET (below the desktop 2-column): single column with the images SLOTTED INTO the copy
   (Paul review 2026-06-15). The two wrappers dissolve (display:contents) so text + images become one
   flex flow, then `order` interleaves them: desc1 -> portrait -> desc -> quote -> desc -> landscape -> button.
   A paragraph sits BETWEEN the portrait image and the pull-quote so the quote stays among its own copy
   rather than stranded right after the image (Paul 2026-06-20: "handle it like Arijiju"). This block now
   mirrors .arexp exactly (area-v2.css) so the destination read-more matches the lodge on mobile/tablet.
   Scoped to <1280 so the desktop 2-column (source order) is untouched. */
@media (max-width: 1279px) {
  .deexp__text, .deexp__imgs { display: contents; }
  .deexp__text > p:nth-of-type(1), .deexp__text > p:nth-of-type(2) { order: 1; }
  .deexp__img--portrait { order: 2; }
  .deexp__text > p:nth-of-type(3) { order: 3; }   /* a paragraph between the image and the quote on mobile */
  .deexp__text > .deexp__quote { order: 4; }
  .deexp__text > p:nth-of-type(4), .deexp__text > p:nth-of-type(5),
  .deexp__text > p:nth-of-type(6) { order: 5; }
  .deexp__img--landscape { order: 6; }
  .deexp__text > .armain__btn { order: 7; }
}
.deexp__img { position: relative; margin: 0; width: 100%; background-size: cover; background-position: center; }
.deexp__img--portrait { aspect-ratio: 599 / 798; }
.deexp__img--landscape { aspect-ratio: 1174 / 784; }
.page-template-page-destination-v2 .deexp__img--portrait { background-image: url('../../img/v2/dexp-1.webp'); }
.page-template-page-destination-v2 .deexp__img--landscape { background-image: url('../../img/v2/dexp-2.webp'); }
.deexp__quote { margin: 8px 0; display: flex; gap: 12px; }   /* no gold left border (not in the design, Paul 2026-06-15) */
.deexp__quote p { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 24px;
  line-height: 28px; letter-spacing: 0; color: #15292c; text-transform: uppercase; }
.deexp__quotemark { flex: none; width: 16px; height: 14px; color: #b19f70; }
.deexp .armain__btn { margin-top: 8px; align-self: flex-start; }
@media (min-width: 1280px) {
  .deexp { margin-top: 122px; }
  .deexp__cols { flex-direction: row; gap: 104px; align-items: center; }   /* centre the shorter column so longer copy overflows evenly top + bottom (Paul 2026-06-19), matching .arexp__cols */
  .deexp__text { flex: 1 1 600px; min-width: 0; gap: 28px; }
  .deexp__imgs { flex: 0 1 600px; min-width: 0; gap: 32px; }
  .deexp__quote p { font-size: 28px; line-height: 32px; }
}

/* de-maincontent: bti-1 title is Bebas 62/58 on desktop (vs .armain's 50/50); bti-2 is 36/40
   = .armain__title--sm (matches). One desktop override for bti-1. */
@media (min-width: 1280px) {
  .demain .armain__bti--textleft .armain__title { font-size: 62px; line-height: 58px; }
}

/* de-carousel2: the Destination dark carousel title is cream #f9f5f2 (vs .arcar2's #fff). */
.decar2 .arcar__title { color: #f9f5f2; }

/* TABLET/MOBILE carousel text width (Paul review 2026-06-15, issues 2+3): .arcar__panel is capped at
   357px (the desktop left-column width) at ALL widths, so below desktop — where the layout STACKS text
   on top of the cards — the copy was a cramped 357px instead of spanning the column like Hugo's tablet
   design. Drop the cap below 1280 so the text fills the width. Scoped to Destination (sweep to
   Area/Lodge when reviewed — same component). */
@media (max-width: 1279px) {
  .decar1 .arcar__panel, .decar2 .arcar__panel { max-width: none; }
}

/* >1440 our-approach containment now lives on the BASE .v2approach (home-v2.css, unscoped) —
   .deapproach carries .v2approach so it is covered automatically. Per-page copy removed. */

/* FAQ accordion — interactive (interactivity phase, Paul 2026-06-16). Engine toggles .is-open
   on .deaccord__item, animates .deaccord__panel, rotates the chevron. Item becomes a column
   (head row + answer panel); placeholder answers (Q-DE-FAQ), real copy comes later. */
.deaccord__item { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; }
.deaccord__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
.deaccord__a { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px; line-height: 24px; letter-spacing: 0; text-transform: none; color: rgba(21,41,44,.78); }
.deaccord__item.is-open .deaccord__panel { padding-top: 16px; }