/*
 * Retreat landing — Section 8 "Logistics" (item S8, build-tracker.md)
 *
 * Nodes: eyebrow 90:98, H2 90:97, CTA 90:116-118, stats
 * 90:40/41/50/51/91/92 + 90:36/38/46/48/87/89, video panel 90:106/115.
 *
 * Selectors scoped under `.retreat-logistics` only (decision-log #12 /
 * theme-conventions.md) — the `.retreat-page` ancestor already supplies the
 * token-override cascade. Alias tokens only: var(--font-*), var(--space-*),
 * var(--color-*), var(--radius-*) — no raw hex/px where a token exists.
 *
 * Column geometry reuses retreat-how-it-works's exact split (598px media /
 * 528px text / 90px gap = 1216px content width) — verified via node
 * geometry, not assumed: video panel 90:106 sits at x=730 w=598, right edge
 * 1328 === container right edge (112 margin + 1216 content). Proportional
 * flex-basis (not fixed px), same reasoning as how-it-works.css (holds the
 * ratio through the 1025-1240px band instead of a fixed basis forcing one
 * column to absorb the width deficit as the viewport narrows).
 */

.retreat-logistics {
  max-width: 1216px;
  margin: 0 auto;
  /* R2-4 fix (2026-08-16): standard inter-section rhythm — see
     token-overrides.css's --retreat-section-pad header comment. */
  padding-block: var(--retreat-section-pad);
  padding-inline: 0;
}

/* ── Header row: eyebrow+H2 stack (left) / CTA (right) ──
 * align-items: flex-end — comp geometry: CTA bottom edge (5144+50=5194)
 * lands exactly on the H2's bottom edge (5148+46=5194), not the whole
 * eyebrow+H2 stack's center. flex-end on the row reproduces that exactly
 * without a manual offset.
 */
.retreat-logistics__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);
  margin-bottom: var(--space-80); /* comp H2->content gap, figma-analysis token spec: "80 H2->content (=80)" */
}

.retreat-logistics__header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.retreat-logistics__eyebrow {
  color: var(--color-primary); /* base .eyebrow (typography.css) sets no color — matches retreat-how__eyebrow precedent */
  margin: 0;
}

.retreat-logistics__heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-3xl);
  line-height: 1.15;
  color: var(--color-retreat-navy);
  margin: 0;
}

/* ── CTA (nodes 90:116-118) ──
 * Core wp:buttons/wp:button, same component as the S2/S3 CTAs — navy fill +
 * animated hover darken (buttons.css supplies pill/height/uppercase/tracking;
 * only the fill + hover transition are section-specific, matching every
 * other retreat CTA exactly).
 */
.retreat-logistics__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--color-retreat-navy);
  transition: filter 0.2s ease;
}

.retreat-logistics__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  filter: brightness(0.85);
}

/* ── Content row: stats (left) / video panel (right) ── */
.retreat-logistics__content {
  display: flex;
  /* center, not flex-start (Alain, 2026-08-23): the real video is 16:9 and
     runs taller than the 2x2 stat grid, so top-aligning left a growing gap
     under the stats. The comp can't settle this — its video slot is a
     placeholder panel at 598/349, near enough the stats' own height that
     flex-start and center looked identical when S8 was built. Centering is
     what holds once real media of any ratio lands in the slot. Restored to
     stretch at <=768 where the row becomes a column (see the mobile block). */
  align-items: center;
  gap: var(--retreat-col-gap, 90px); /* fallback: editor canvas has no .retreat-page ancestor (S3 precedent) */
}

.retreat-logistics__stats {
  flex: 0 1 47%; /* proportional 528:598 ≈ 47:53, matches how-it-works.css's text/media split exactly */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-lg);
  row-gap: var(--space-md); /* figma-analysis token spec: "34 grid rows/stats (≈ md 32, adopt)" — the raw bar-to-bar pixel delta (48px) includes the bar's own oversized decorative height (109px, taller than its title+desc content), so the documented token value is used rather than the raw geometry */
}

.retreat-logistics__stat {
  display: flex;
  align-items: stretch;
  gap: var(--space-xs);
}

/* Yellow left-bar — comp places this decorative bar ON WHITE here (documented
 * band exception, figma-analysis "NOTE on the color matrix": exempt from
 * 1.4.11, treated as a decorative separator, not text). Same ::before
 * pattern as retreat-hero__stat (hero.css fix round 1, finding #8) —
 * participates in the flex row's layout like a div would, no extra markup.
 *
 * Hygiene pass: shared box geometry + colour (content/display/width/
 * background/flex-shrink) moved to sections/retreat/stat-bar.css. Only the
 * geometry local to this call site stays here — see stat-bar.css's header
 * for why radius isn't shared. */
.retreat-logistics__stat::before {
  align-self: stretch;
  border-radius: var(--radius-pill); /* category fix (review round 1): was var(--space-4xs), a spacing token miscopied from hero.css's own bar — radius belongs to the radius scale, matches who-for.css's pill convention */
}

.retreat-logistics__stat-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.retreat-logistics__stat-copy > * {
  margin: 0;
}

.retreat-logistics__stat-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-lg); /* comp 20px = exact --font-lg match — DESKTOP ONLY.
    At <=768px this declaration is outranked by token-overrides.css's
    `.retreat-page h3.wp-block-heading { font-size: var(--font-xl) !important }`
    mobile counter-layer (this element carries .wp-block-heading, being a
    core h3 block) — that shared file's rule owns mobile sizing for every
    h3 in .retreat-page, this rule owns desktop only. It renders 20px today
    only because --font-xl and --font-lg happen to coincide at <=768px
    (both 20px) — NOT because this declaration is winning there. Do not
    "fix" this by adding a local mobile override; the coupling is by design
    (review round 1, finding #2). */
  line-height: 1.4;
  color: var(--color-retreat-navy); /* comp: navy on white, NOT the hero band's white stat-title treatment */
  /* defensive vs theme.json h3 element styles (S10 gate finding — theme.json
     h3 carries textTransform: uppercase + letter-spacing: 1.2px at (0,1,0)
     specificity via `:root :where(h3)`; nothing in the theme resets
     letter-spacing at all, so both properties need an explicit reset here). */
  text-transform: none;
  letter-spacing: normal;
}

.retreat-logistics__stat-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--font-sm); /* comp 16px — figma-analysis token spec: "descs 15-16 ... = --font-sm" */
  line-height: 1.5;
  color: var(--color-text-body); /* comp samples pure black; routed through the semantic body token, matching every other real-copy paragraph in this build (retreat-how, retreat-leave-with) rather than a literal hex */
}

/* "Wakefield Mill Hotel" (node 90:92) — real anchor, not styled text (review
 * round 1, finding #1): bold + underline only makes sense as a link, so the
 * comp's styling is treated as link intent rather than decoration. Color
 * inherits the surrounding body copy (comp shows no distinct link color,
 * only weight/underline) — reset.css's `a { color: inherit }` already gives
 * us this for free, restated here for clarity at the call site. reset.css
 * also strips the default underline (`a { text-decoration: none }`), so
 * unlike a plain `<strong>` this needs an explicit re-assertion, not a
 * removal — text-decoration-skip-ink matches the comp's from-font
 * baseline-hugging underline. */
.retreat-logistics__stat-link {
  color: inherit;
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

/* ── Video placeholder panel (nodes 90:106/115) ──
 * Real video embed lands at a later item — aria-hidden styled placeholder
 * (S3 lesson). Same aspect ratio (598/349) as the how-it-works placeholders
 * — coincidentally identical node geometry, not a shared class (kept
 * section-scoped per theme-conventions.md's one-partial-per-pattern rule).
 */
.retreat-logistics__video {
  flex: 0 1 53%; /* flex-shrink:1 with no flex-basis-exceeding content already
    caps this at 53% of the row — max-width:100% was redundant (review
    round 1, finding #4d), dropped */
}

.retreat-logistics__video-placeholder {
  aspect-ratio: 598 / 349;
  border-radius: var(--radius-md);
  /* Hygiene pass: this borderless treatment is comp-verified (90:106) and
     diverges from S3's old bordered image placeholder — parked for C1
     reconciliation when the real video embed replaces this placeholder.
     R1-7 note: S3's steps 1/3 placeholder panels were replaced with a real
     attachment-backed wp:image (how-it-works.css) — this video placeholder
     is a DIFFERENT mechanism (video embed lands at C1, not a swappable
     content photo) and is explicitly out of scope for that fix. */
  background: var(--color-grey-200); /* closest alias to comp's #e2e8ef light blue-grey fill — no exact token */
  display: flex;
  align-items: center;
  justify-content: center;
}

.retreat-logistics__video-label {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-xl); /* comp 22px = exact --font-xl match */
  text-transform: uppercase;
  text-align: center;
  color: var(--color-retreat-navy); /* comp: navy label on the grey panel, NOT the how-it-works placeholder's grey-700 label */
  margin: 0;
}

/* Real media in the panel auto-hides the placeholder — same :has()
   mechanism guides.css uses. Covers both the launch-time YouTube embed
   and the self-hosted Draft1 video placed 2026-08-21 (Sara's ask; delete
   the wp:video block when the YouTube URL lands). */
.retreat-logistics__video:has(.wp-block-embed iframe, .wp-block-video video) .retreat-logistics__video-placeholder {
  display: none;
}

.retreat-logistics__video .wp-block-embed,
.retreat-logistics__video .wp-block-video {
  margin: 0;
  width: 100%;
}

.retreat-logistics__video .wp-block-embed__wrapper {
  /* Same defensive 16:9 sizing as guides.css — programmatic embeds can miss
     core's wp-embed-aspect classes. */
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.retreat-logistics__video .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.retreat-logistics__video .wp-block-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ══════════════════════════════════════
   RESPONSIVE (no mobile Figma frame — derived per figma-analysis-2026-08.md
   §Design gaps, same breakpoints as the rest of this build: plain flex/grid,
   not wp:columns, so 768/1024 are this section's own breakpoints, not
   core's 781px column-stacking rule)
   ══════════════════════════════════════ */

@media (max-width: 1240px) {
  .retreat-logistics {
    padding-inline: 24px; /* matches .retreat-hero__inner's ≤1240 gutter */
  }
}

@media (max-width: 1024px) {
  .retreat-logistics__header {
    margin-bottom: var(--space-xl);
  }

  .retreat-logistics__content {
    gap: var(--space-lg);
  }
}

@media (max-width: 768px) {
  .retreat-logistics {
    padding-inline: var(--space-xs); /* matches .retreat-hero__inner's ≤768 gutter */
  }

  /* Header stacks: eyebrow+H2 above, CTA below, full width (matches the
     S3/S2 CTA mobile treatment — >=44px touch target via the shared
     token-overrides.css counter-layer, no per-section override needed). */
  .retreat-logistics__header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
  }

  .retreat-logistics__cta .wp-block-button,
  .retreat-logistics__cta .wp-block-button__link {
    width: 100%;
  }

  /* Content stacks: stats above, video below (DOM order already puts stats
     first — no reorder needed). align-items reverts to stretch because the
     base rule's `center` is a CROSS-axis value: once the row is a column it
     would centre both blocks horizontally instead of letting them fill the
     width (the width:100% below makes it moot today, but the pairing should
     not depend on that). */
  .retreat-logistics__content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
  }

  .retreat-logistics__stats,
  .retreat-logistics__video {
    flex: 1 1 auto;
    width: 100%;
  }

  /* 2x2 -> single column at the same tier the rest of this build stacks at.
     No row-gap restatement needed here (review round 1, finding #4c,
     dead duplicate removed): the base rule's `row-gap: var(--space-md)`
     already steps down to 20px at this breakpoint via the custom-property
     cascade (token-overrides.css), it doesn't need a second declaration
     with the same var() to "pick up" the mobile value. */
  .retreat-logistics__stats {
    grid-template-columns: 1fr;
  }
}

/* ── YouTube embed slot (Alain, 2026-08-16) — same contract as
 * guides.css's embed slot (see that file's comment block for the full
 * rationale): C1 swaps the placeholder above for a core Embed block with
 * the YouTube URL; core's wp-embed-responsive machinery owns the 16:9
 * sizing (598w → ~336px tall vs the comp panel's 349 at 598/349 ≈ 1.71 —
 * negligible). Radius + corner clipping here only. */
.retreat-logistics__video .wp-block-embed {
  margin: 0;
  width: 100%;
}

.retreat-logistics__video .wp-block-embed__wrapper {
  /* Defensive 16:9 sizing: core's responsive-embed machinery only applies
     when the editor stamped wp-embed-aspect-16-9/wp-has-aspect-ratio on the
     block (it does on a normal URL paste, but programmatic/REST writes can
     skip it, leaving the iframe at its intrinsic 500x281). aspect-ratio
     16/9 === core's 56.25% padding trick, so when both apply they agree to
     the pixel — this only changes the classless case. */
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Blank-embed flow — same contract as guides.css (see its comment):
   placeholder auto-hides when the adjacent embed gains its iframe. */
.retreat-logistics__video .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.retreat-logistics__video:has(.wp-block-embed iframe) .retreat-logistics__video-placeholder {
  display: none;
}