/*
 * Retreat landing — Section 5 "Your guides" (item I5, build-tracker.md)
 *
 * REVIEW ROUND 1, finding #7: split out of modules/bio-modal.css. The
 * original single-file build put both this section AND the reusable bio-
 * dialog component in modules/bio-modal.css on the (incorrect) premise that
 * the build task listed no sections/retreat/guides.css partial and no
 * enqueue path existed for one. Per theme-conventions.md #4, every retreat
 * section gets its own sections/retreat/*.css partial — inc/enqueue.php's
 * `glob( 'assets/css/sections/retreat/*.css' )` (frozen since F1) picks up
 * ANY new file in this directory automatically, so this file needed zero
 * enqueue.php edits to go live. modules/bio-modal.css now holds only the
 * reusable `.retreat-bio-modal*` dialog component (see that file's header).
 *
 * Node map (figma-analysis-2026-08.md): eyebrow 90:209 "YOUR GUIDES" (blue
 * #2383eb ≈ --color-primary, 22px = --font-xl override, uppercase via the
 * shared .eyebrow class). H2 90:208 "two humans, still on the path." (navy
 * #1c2161 = --color-retreat-navy, 40px = --font-3xl override, Rubik
 * SemiBold, green period via the shared .retreat-mark utility). Video
 * placeholder 90:210 (rect, bg #e2e8ef = --color-grey-200, radius 20 =
 * --radius-md exact, 1188×617 node geometry) + label 90:211 "VIDEO" (22px =
 * --font-xl, uppercase, text-black per THIS node's own get_design_context
 * reading — NOT navy like S8/S3's video placeholder label. Flagged as a
 * third placeholder-label variant for the tracker's existing
 * "Placeholder-style reconciliation" hygiene item, not silently harmonized —
 * pixel-match fidelity classification means build what the node says, log
 * the drift). Names row: 90:213 "Karen Bramhill" + 90:215 "read bio" (left),
 * 90:212 "Peter Georgariou" + 90:214 "read bio" (right) — both name/link
 * pairs share the same type recipe (name: Roboto Slab MEDIUM 22px navy, NOT
 * the heading font — verified via get_design_context; link: Rubik SemiBold
 * 16px blue underline).
 *
 * Geometry note (names row): raw node coordinates show Karen's block inset
 * ~88px from the video's own left edge and Peter's ~95px from its right
 * edge, rather than symmetric to the full 1216px section container — most
 * likely the original intent was positioning captions under each person in
 * the eventual real video. The video here is a styled aria-hidden
 * placeholder (no real footage yet), so that photo-relative alignment isn't
 * reproducible or meaningful. Built instead as a flex row (space-between)
 * flush to the same 1216px container every other section uses — flag for
 * C1 to confirm/adjust once real video lands.
 *
 * Header→video gap measured ~40px (line-height-adjusted, H2's 46px leading
 * vs its 38px tight bbox) = var(--space-lg) exact. Video→names gap ~22-24px
 * (same tight-bbox adjustment) = var(--space-sm).
 *
 * Accessible names (REVIEW ROUND 1, finding #4): both "read bio" buttons
 * carried the identical visible text, so their computed accessible names
 * were identical too — a screen-reader user tabbing the two names row
 * heard "read bio, button" twice with no way to tell them apart out of
 * context. Fixed with a per-button `.sr-only` suffix
 * (` — Karen Bramhill` / ` — Peter Georgariou`) appended after the visible
 * text — sighted users still see plain "read bio", the accessible name now
 * differs. `.sr-only` is the existing utility (global.css / utilities.css).
 */

.retreat-guides {
  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;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg); /* header -> media block, measured ~40px */
}

.retreat-guides__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs); /* 8px eyebrow -> heading, same as every other section */
}

.retreat-guides__eyebrow {
  color: var(--color-primary);
  margin: 0;
}

.retreat-guides__heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-3xl); /* 40 / 34@1024 / 28@768 via token-overrides.css */
  line-height: 1.15;
  color: var(--color-retreat-navy);
  margin: 0;
}

/* Green punctuation mark uses the shared .retreat-mark utility
   (sections/retreat/marks.css) — no per-section duplicate here. */

.retreat-guides__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* video -> names, measured ~22-24px */
}

.retreat-guides__video-placeholder {
  aspect-ratio: 1188 / 617;
  width: 100%;
  border-radius: var(--radius-md); /* 20px — matches comp exactly */
  /* Hygiene pass: borderless, same variant as S8's — see file header for
     the full placeholder-label divergence note; parked for C1
     reconciliation when real media replaces all placeholders. */
  background: var(--color-grey-200); /* closest alias to comp's #e2e8ef, same call as logistics/how-it-works placeholders */
  display: flex;
  align-items: center;
  justify-content: center;
}

.retreat-guides__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-black); /* comp: text-black on THIS node — see file header re: the S8/S3 navy variant */
  margin: 0;
}

.retreat-guides__names {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.retreat-guides__name-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs); /* ~12px, matches comp's name -> "read bio" gap */
}

.retreat-guides__name {
  font-family: var(--font-body);
  font-weight: var(--fw-medium); /* Roboto Slab Medium — NOT the heading font, verified via get_design_context */
  font-size: var(--font-xl); /* comp 22px = exact --font-xl match */
  color: var(--color-retreat-navy);
  margin: 0;
}

.retreat-guides__bio-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch-target floor, same lesson as token-overrides.css's button fix */
  padding: var(--space-4xs) var(--space-3xs);
  margin: 0;
  border: none;
  background: transparent;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-sm); /* comp 16px, adopted to the nearest alias (15px, same class as figma-analysis's own "16 = --font-sm" mapping) */
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.retreat-guides__bio-link:hover {
  color: var(--color-primary-dark);
}

/* :focus-visible intentionally NOT restated here (REVIEW ROUND 1, finding
   #8) — global.css:177's universal `:focus-visible { outline: 2px solid
   var(--color-primary); outline-offset: 2px; }` already applies to this
   button with identical values; a per-class duplicate is dead weight. */

@media (max-width: 1240px) {
  .retreat-guides {
    padding-inline: 24px;
  }
}

@media (max-width: 768px) {
  .retreat-guides {
    padding-inline: var(--space-xs);
  }

  .retreat-guides__names {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
}

/* ── YouTube embed slot (Alain, 2026-08-16: "the video will be a youtube
 * embed") — C1 swap: an editor selects the aria-hidden placeholder group
 * above and replaces it with a core Embed block (paste the YouTube URL —
 * decision #19). These rules pre-style that block so the paste lands
 * comp-true with zero dev involvement (decision #18, editability).
 * Body carries `wp-embed-responsive` (theme supports responsive-embeds),
 * so core's own aspect-ratio machinery (.wp-embed-aspect-16-9 padding
 * trick) sizes the iframe — nothing here re-declares ratio. NOTE: a 16:9
 * embed renders ~668px tall at 1188w vs the comp panel's 617 (1188/617 ≈
 * 1.93:1 is wider than any real video ratio) — accepted deviation, logged
 * in Peter's batch alongside the video ask. */
.retreat-guides__media .wp-block-embed {
  margin: 0;
  width: 100%;
}

.retreat-guides__media .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); /* same r20 as the placeholder panel */
  overflow: hidden; /* clips the iframe corners to the radius */
}

/* Blank-embed flow (Alain, 2026-08-16): a URL-less core Embed block sits in
   the page right after the placeholder (emits NOTHING on the front end —
   verified), so the C1 action is paste-the-URL only, no block replacement.
   The moment the embed gains its iframe, the decorative placeholder panel
   auto-hides — zero manual cleanup. (:has() — baseline-available in every
   browser this site supports.) */
.retreat-guides__media .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.retreat-guides__media:has(.wp-block-embed iframe, .wp-block-video video) .retreat-guides__video-placeholder {
  display: none;
}

/* Self-hosted draft video (Sara's 2026-08-20 ask, Bárbara's Draft1 files,
   placed 2026-08-21) — same geometry contract as the embed path above. The
   blank embed block stays in the page, so the launch-time YouTube paste
   (decision #19) still works unchanged; delete the wp:video block when the
   URL lands and the :has() arm above takes over. */
.retreat-guides__media .wp-block-video {
  margin: 0;
  width: 100%;
}

.retreat-guides__media .wp-block-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md); /* same r20 as the placeholder panel */
}