/*
 * Testimonial Carousel — Retreat variant overrides
 * (item I7, build-tracker.md — patterns/retreat-testimonials.php)
 *
 * ⚠️ Do NOT edit assets/css/modules/testimonial-carousel.css — that file is
 * the shared base module used by the homepage CTA banner and the
 * Facilitation stats section. This file only ADDS retreat-specific
 * overrides, scoped under `.retreat-testimonials .testimonial-card--light`
 * (the wrapper className on patterns/retreat-testimonials.php's outer
 * group), so nothing here can leak onto any other page. Selector
 * specificity (0,3,0 for most rules) beats the base module's (0,1,0)/(0,2,0)
 * without needing !important anywhere in this file.
 *
 * FILE LOCATION NOTE (deviation from the assigned path, flagged in
 * handoff): originally written to assets/css/modules/
 * testimonial-carousel-retreat.css per the task brief, then MOVED here to
 * sections/retreat/ once inc/enqueue.php was actually read — its modules/
 * foreach only matches three fixed names (anchor-nav, expander, bio-modal),
 * so a differently-named modules/ file would silently never load (same
 * failure class as I6's original dead-JS bug, see retreat-story.php's
 * header comment). sections/retreat/ is glob-enqueued (any filename), so
 * placing it here needed zero enqueue.php edits — no serialized exception
 * required, unlike the JS side (see patterns/retreat-testimonials.php,
 * which needed none either, since it reuses main.js's existing carousel
 * rather than adding a new script).
 *
 * Geometry read via Figma get_metadata on nodes 92:290 (panel, x=113 y=4684
 * w=1213 h=276), 92:299 (quote text, x=367 y=4727 w=707 h=176), 91:282 /
 * 92:292 (prev/next arrows, 46x46, vertically centered in the panel:
 * (276-46)/2 = 115px from panel top — matches measured y offset exactly),
 * 92:298 + children 92:295/296/297 (3 dots, y=4992 — 32px BELOW the panel's
 * own bottom edge at 4960, i.e. outside/below the card, not inside it).
 * Colors sampled from get_screenshot PNGs: arrow fill RGB(28,33,97) =
 * #1C2161 exact (--color-retreat-navy, NOT the shared module's green
 * --color-success); dot fill RGB(35,131,235) = #2383EB exact (KD Blue,
 * theme --color-primary, decision-log token mapping table).
 *
 * Radius (20px) and shadow (0 4px 20px 10px rgba(0,0,0,.1)) are EXACT
 * existing tokens (--radius-md, --shadow-card) — no new tokens needed.
 *
 * R2-2 fix (2026-08-16) — horizontal panel inset SUPERSEDES the original
 * call below: Alain re-pulled node metadata for 92:290-299 and measured
 * the arrows at x≈212/1218 on a 1213px-wide panel starting at x113 — i.e.
 * ~99-108px inset from each panel edge, essentially symmetric. The
 * original build's "asymmetric 99/62" read (kept below for the record)
 * was the stale/imprecise number this corrects; --space-80 (80px, the
 * previous inset) measured live 20px short of the arrow's own left edge.
 * Switched to var(--space-100) (100px, exact existing token, lands within
 * the comp's ~99-108px band) for `padding-inline` — this shifts the
 * prev/next buttons out to the correct inset without touching the quote's
 * own centering (space-between + symmetric 46px buttons keeps it centered
 * regardless of the padding value, verified live: leftGap === rightGap
 * from panel edge to quote-text box, 1440). ORIGINAL call, superseded:
 * "comp's arrow insets measured asymmetric (99px left / 62px right —
 * flat/loose Figma file, decision-log's own file-hygiene note applies) so
 * this uses --space-80, the same 80px inset already established site-wide
 * for panel horizontal padding (leave-with.css measured 81/82px and
 * adopted the same token) rather than inventing a new asymmetric literal."
 * Vertical inset: comp measured 43px top / 57px bottom hug (not a
 * fixed-height design) — --space-48 adopted, same technique + same token
 * leave-with.css used for its own 47/56px hug. Unaffected by this fix.
 */

.retreat-testimonials {
  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;
}

.retreat-testimonials__heading {
  /* Review round 1 fix (blocker #1): without its own typography, this H2
     fell through to theme.json's h2 element style — color #26265F (the
     P&C brand navy, a forbidden substitution for --color-retreat-navy on
     this page, tokens.css:19-21), flat 40px with no responsive step, and
     an unpinned weight. Mirrors sections/retreat/how-it-works.css:51-58
     exactly (that section's H2 treatment is the established pattern for
     retreat H2s). --font-3xl resolves 40/34/28 via .retreat-page's
     token-overrides.css (desktop/1024/768) — verified live, computed
     color rgb(28,33,97). */
  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;
  margin-bottom: var(--space-md); /* comp measured 32px H2-bottom to panel-top; --space-md = 34px under .retreat-page's token-overrides.css */
}

/* ── Panel: r20 shadow-card, comp insets ── */
.retreat-testimonials .testimonial-card--light {
  position: relative; /* positioning context for the dots, which sit outside/below in the comp */
  overflow: visible; /* base module sets overflow:hidden, which clips the dots row positioned below the card's own box (self-verify round 1 finding) */
  border-radius: var(--radius-md); /* 20px — matches comp exactly */
  box-shadow: var(--shadow-card);
  padding-block: var(--space-48);
  padding-inline: var(--space-100); /* R2-2 fix (2026-08-16): was --space-80
    (80px) — see header comment, corrected to ~100px per re-verified comp
    metadata (92:290-299). */
  min-height: 276px; /* comp panel height — a hug, not a hard design-real minimum; carousel content is short lorem text so this holds without clipping */
}

.retreat-testimonials .testimonial-card--light .testimonial-card__quote {
  max-width: 707px; /* comp quote text width, node 92:299 */
}

/* Author byline. The comp's node inventory had none, so this was shipped
   `display:none` — hidden, not deleted, precisely so the C1 content pass
   could re-enable it without a markup change. C1 landed 2026-08-24 (real
   named testimonials replaced the lorem seeds), so it is on.
   ⚠️ Colour override is REQUIRED, not cosmetic: the module default for the
   light variant is `--color-success` (#02BC7F), which measures 2.47:1 on
   white — below even the 3:1 large-text floor, and this is 22px regular so
   the bar is 4.5:1. Retreat navy is 14.59:1. Do not revert to the green. */
.retreat-testimonials .testimonial-card--light .testimonial-card__quote-author {
  display: block;
  color: var(--color-retreat-navy);
  margin: var(--space-sm) 0 0;
}

/* ── Nav buttons: 46x46 navy circles, Font Awesome icons ──
 * FA icons per Alain 2026-08-15, replacing the earlier CSS chevron.
 * The previous round of this file hid the shared shortcode's <i
 * class="fa-solid fa-arrow-left/right"> (inc/cpt-testimonial.php) and
 * hand-drew a thin two-line chevron via ::before, reasoning the comp's
 * light-stroke arrow didn't match Font Awesome's bold solid glyph. Alain
 * overruled: the icon stays Font Awesome (fa-solid fa-arrow-left/right —
 * same glyphs the shared module already uses for the homepage/facilitation
 * carousels, so all three carousel instances stay visually consistent) —
 * only size/colour are themed here to fit the comp's 46px circle. The
 * base module (modules/testimonial-carousel.css) already sets
 * `color:#fff; font-size:20px` on `.testimonial-card__nav`, which the <i>
 * inherits, so no icon-specific rule is needed beyond the circle's own
 * size/background below — verified live (computed font-family resolves to
 * "Font Awesome 6 Pro", glyph visible, not tofu/empty-box).
 */
.retreat-testimonials .testimonial-card--light .testimonial-card__nav {
  /* 46px held at every breakpoint, deliberately not the base module's own
     55px desktop / 44px <=768px mobile step (testimonial-carousel.css:38,128)
     — comp doesn't distinguish sizes, so this variant doesn't either. */
  width: 46px;
  height: 46px;
  background: var(--color-retreat-navy);
}
.retreat-testimonials .testimonial-card--light .testimonial-card__nav:hover {
  background: var(--color-retreat-navy);
  opacity: 0.85;
}

/* ── Dots: ring style, always on, positioned outside/below the panel ──
 * Base module only shows dots <=768px (display:none above that) and fills
 * them solid at every state. Comp shows a permanent 3-dot row, hollow ring
 * for inactive, solid fill for active, sitting below the card — not inside
 * it. Absolute-positioned against `.testimonial-card--light`'s new
 * position:relative above; DOM nesting inside .testimonial-card__quote
 * doesn't matter for an absolutely-positioned descendant.
 */
.retreat-testimonials .testimonial-card--light .testimonial-card__dots {
  display: flex;
  position: absolute;
  left: 50%;
  /* Review round 1 fix (finding #3): this header documents the comp's
     card-bottom-to-dots-top gap as 32px (node 92:298, y=4992 vs panel
     bottom y=4960), but the offset was --space-2xs (12px) — a leftover
     from an earlier draft. --space-md is the comp-measured token (already
     used above for the heading's own 32px gap) and steps 34/26/20
     alongside it via .retreat-page's token-overrides.css. */
  bottom: calc(-1 * var(--space-md));
  transform: translate(-50%, 100%);
}
.retreat-testimonials .testimonial-card--light .testimonial-card__dot {
  width: 10px;
  height: 10px;
  background: transparent;
  border: 2px solid var(--color-primary);
}
.retreat-testimonials .testimonial-card--light .testimonial-card__dot.active {
  background: var(--color-primary);
}

/* ── Reduced motion: instant swap, no visible crossfade ──
 * The shared JS (main.js initTestimonialCarousel) always runs a 300ms
 * opacity fade via the fadeClass toggle regardless of
 * prefers-reduced-motion — that gap lives in a shared file this item
 * doesn't touch. Neutralised here for the retreat variant only: the JS
 * still toggles the fade class and swaps text after its setTimeout, but
 * with the transition removed the opacity change is instant, so nothing
 * animates.
 */
@media (prefers-reduced-motion: reduce) {
  .retreat-testimonials .testimonial-card--light .testimonial-card__quote-text,
  .retreat-testimonials .testimonial-card--light .testimonial-card__quote-author,
  .retreat-testimonials .testimonial-card--light .testimonial-card__quote-readmore {
    transition: none;
  }
}

/* ── Responsive ──
 * Section gutters match .retreat-hero__inner / .retreat-how / .retreat-leave-with
 * exactly (leave-with.css:99-115 is the template), so the panel's left/right
 * edge lines up with every other section on the page. Review round 1 fix
 * (finding #2): these were missing entirely below 1240px — the panel sat
 * flush to the viewport edge instead of matching its neighbours.
 */
@media (max-width: 1240px) {
  .retreat-testimonials {
    padding-inline: 24px;
  }
}

@media (max-width: 1024px) {
  .retreat-testimonials .testimonial-card--light {
    padding-inline: var(--space-48);
  }
}

@media (max-width: 768px) {
  .retreat-testimonials {
    padding-inline: var(--space-xs);
  }
  .retreat-testimonials .testimonial-card--light {
    padding-block: var(--space-lg);
    padding-inline: var(--space-md);
    min-height: 0;
  }
  .retreat-testimonials .testimonial-card--light .testimonial-card__quote {
    max-width: 100%;
  }
  .retreat-testimonials .testimonial-card--light .testimonial-card__nav {
    display: flex; /* base module hides nav <=768px; comp has no mobile frame (design-gap, figma-analysis §Design gaps) so arrows are kept for keyboard/pointer users, dots remain for the swipe-first pattern */
  }
}