/* ==========================================================================
   WV Support For — Homepage Goal Selector (COMPONENTS.md #37)
   --------------------------------------------------------------------------
   Section H2 doubles as the control: "Support for [GOAL] ›"
   - Goal word: olive, underlined, clickable (advances to next goal)
   - › arrow: olive, clickable (advances)
   - Six grids SSR'd; inactive grids use the `hidden` attribute. JS toggles.
   - prefers-reduced-motion: handled sitewide via assets/css/wv-reduced-motion.css

   WIDTH PATTERN: full-bleed section + inner capped at --wv-container-max
   (1440) with padding cadence 0 24/50/80 mobile/tablet/desktop. Yields
   1280px effective inner at desktop — what the 4-up product card grid
   (288 × 4 + 20 × 3 = 1212px) needs to render cleanly. This is the
   carousel-section exception documented in CLAUDE.md v15. Other carousel
   hosts (PDP Related Products, Pairs With, Addon Featured, Related
   Articles) already use this scaffolding.
   ========================================================================== */

.wv-support-for {
  /* Full-bleed breakout so the surface bg hits viewport edges. Same
     pattern as buzzword-bar and pdp-related-products. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  background: var(--wv-color-surface);
  padding: 64px 0;

  /* Section cascade target — body text under this section should read as
     primary (dark) to match the First5 section's body cadence. Intro +
     per-goal body use `color: inherit` to opt into this (CLAUDE.md Rule
     3 exception for typography-class color overrides). */
  color: var(--wv-color-text-primary);
}

.wv-support-for__inner {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Eyebrow centering — .wv-section-pill is inline-flex with
   align-self: flex-start in the frozen base. Center it via the wrap. */
.wv-support-for__eyebrow-wrap {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
}

/* This section's surface is --wv-color-surface — the same fill the default
   pill uses, so the pill is invisible here. Invert it: dark fill + cream
   text (certified text-inverse-on-text-primary pair). Scoped override —
   the frozen .wv-section-pill is untouched. */
.wv-support-for .wv-section-pill {
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
}

.wv-support-for__heading {
  text-align: left;
  /* 16px gap matches the First5 section's heading→body cadence. */
  margin: 0 0 16px;
}

/* Goal word + › arrow are inline children of the .wv-h2. They inherit the
   heading's font via `font: inherit` (browser <button> defaults strip it).
   Color is set explicitly because button default `color: buttontext` blocks
   inheritance — this isn't a typography-class override, it's a child
   element setting its own color (CLAUDE.md Rule 3 exception N/A). */
.wv-support-for__goal-word,
.wv-support-for__arrow {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--wv-color-olive-dark);
  cursor: pointer;
  transition: var(--wv-transition-color), opacity var(--wv-transition-fast), transform var(--wv-transition-fast);
}

.wv-support-for__goal-word {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.06em;
  min-height: 44px; /* WCAG 2.5.5 touch target on mobile */
}

.wv-support-for__arrow {
  margin-left: 0.2em;
  min-height: 44px;
  min-width: 44px;
}

.wv-support-for__goal-word:hover,
.wv-support-for__arrow:hover,
.wv-support-for__goal-word:focus-visible,
.wv-support-for__arrow:focus-visible {
  color: var(--wv-color-text-primary);
}

/* Brief opacity/translate transition while the goal-word text swaps. JS
   adds .is-changing, waits ~150ms, swaps text content, removes class. */
.wv-support-for__goal-word.is-changing {
  opacity: 0;
  transform: translateY(-2px);
}

/* Per-goal narrative paragraph (inside each .wv-support-for__grid).
   Centered, narrower than the grid so the reading line length stays
   comfortable while the cards span full width. */
.wv-support-for__body {
  max-width: var(--wv-content-max);
  margin: 0 auto 32px;
  text-align: center;
  /* Override .wv-body-lg's text-secondary (lighter) — section root
     sets text-primary (matches First5 body color). Same Rule 3
     exception as .wv-support-for__intro above. */
  color: inherit;
}

.wv-support-for__body p {
  margin: 0 0 1em;
}

.wv-support-for__body p:last-child {
  margin-bottom: 0;
}

/* Section-level intro paragraphs — static lead-in between the heading
   and the goal grids. Distinct from .wv-support-for__body (per-goal,
   inside each grid wrapper). */
.wv-support-for__intro {
  max-width: var(--wv-content-max);
  margin: 0 0 32px;
  text-align: left;
  /* Override .wv-body-lg's text-secondary (lighter) — section root
     sets text-primary (matches First5 body color). CLAUDE.md Rule 3
     exception: `color: inherit` is the only color allowed on a
     selector that also carries a typography class. */
  color: inherit;
}

.wv-support-for__intro p {
  margin: 0 0 1em;
}

.wv-support-for__intro p:last-child {
  margin-bottom: 0;
}

.wv-support-for__grids {
  position: relative;
  /* Reserve space so goal switching doesn't shift surrounding content.
     Min-height covers the worst-case grid + body-copy height — flag for
     visual review once goals are populated. */
  min-height: 460px;
}

.wv-support-for__grid[hidden] {
  display: none;
}

/* CTA below the grid. Inherits .wv-label-btn typography from the element class. */
.wv-support-for__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.wv-support-for__cta {
  color: var(--wv-color-olive-dark);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: var(--wv-transition-color);
}

.wv-support-for__cta:hover,
.wv-support-for__cta:focus-visible {
  color: var(--wv-color-text-primary);
  text-decoration: underline;
}

/* ── Tablet+ ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  .wv-support-for {
    padding: 96px 0;
  }
  .wv-support-for__inner {
    padding: 0 50px;
  }
  /* Align the header with the carousel's first card. With arrows='sides'
     (shown at tablet+) the carousel reserves a left arrow column
     (.wv-arrow-btn 35px) + 16px arrow-gap = 51px before the track, so the
     first card is inset 51px from the inner's left. Shift the pill/heading/
     intro right by the same amount so they line up with the card edge. */
  .wv-support-for__eyebrow-wrap,
  .wv-support-for__heading,
  .wv-support-for__intro {
    padding-left: 51px;
  }
  /* Heading→body gap stays at 16px across all breakpoints to match
     the First5 section cadence — no tablet override. */
  .wv-support-for__body {
    margin-bottom: 40px;
  }
  .wv-support-for__cta-wrap {
    margin-top: 48px;
  }
  .wv-support-for__grids {
    min-height: 540px;
  }
}

/* ── Desktop ─────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .wv-support-for {
    padding: 120px 0;
  }
  .wv-support-for__inner {
    padding: 0 80px;
  }
}