/* ==========================================================================
   WV Comparison Table — designer sign-off 2026-04-23
   --------------------------------------------------------------------------
   Typography, colors, and layout are final. Content is hardcoded in
   parts/pdp-comp-table.php; argification + ACF integration pending as
   a separate pass.

   Responsive tiers (see media queries at the bottom of this file):
     ≥1050px  — side-by-side headline + 3-col table (desktop, base rules)
     900–1049 — stacked, headline horizontal single line, 3-col tightened
     600–899  — stacked, headline wraps, 3-col further tightened
     <600     — 2-col (Col 3 hidden), mobile
   ========================================================================== */

.wv-comparison-table {
  /* Transparent outer — consumer template owns the backdrop. */
  background: transparent;
  /* Bleed-pair primitive (2026-06-03) — upper half of the pair with
     Meet Dr. Neal below. mobile/tablet keep a soft bottom-padding
     fallback for the bleed buffer; desktop pins to the spec'd
     --wv-bleed-pair-upper (510) via the media rule below. The MDN
     bleed image is now absolutely-positioned inside its own section
     and fills the combined 1275 zone, so the old 240px "reserved
     area" at desktop is no longer needed. */
  padding: 60px 0 60px;
  position: relative;
  z-index: 2;
}
@media (min-width: 1280px) {
  .wv-comparison-table {
    height: var(--wv-bleed-pair-upper);
  }
}

.wv-comparison-table__inner {
  /* Inner layout container — constrained width + centered so the component
     renders sensibly when dropped into any parent (including full-bleed). */
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding: 0 80px;

  display: grid;
  /* Headline 25% / table 75% per user direction. Gap 12px — keeps the
     headline visually linked to the table rather than a separate island. */
  grid-template-columns: 25fr 75fr;
  gap: 12px;
  align-items: start;
}

/* Full-width variant — when consumer opts out of the headline column via
   show_headline=false (e.g. First5 LP renders its own section heading
   above the partial), collapse the 25/75 grid so the table takes the
   full inner width. Single rule outside media queries — specificity
   wins at every responsive tier (1049 / 899 / 599 already set 1fr too,
   so this is a no-op there). */
.wv-comparison-table--no-headline .wv-comparison-table__inner {
  grid-template-columns: 1fr;
}

/* ── Headline ────────────────────────────────────────────────────── */

.wv-comparison-table__headline {
  display: flex;
  flex-direction: column;
  /* gap: 0 — line-height: 1 on the h-classes provides tight stacking. */
  gap: 0;
  margin: 0;
  padding-top: 80px;
}

.wv-comparison-table__head-prefix,
.wv-comparison-table__head-suffix,
.wv-comparison-table__head-highlight {
  display: block;
}

/* The middle (serif) word picks up the PDP accent color — see
   --wv-pdp-accent on the .wv-pdp dispatcher root. Falls back to the
   site accent (olive) when the product hasn't picked a specific color. */
.wv-comparison-table__head-highlight {
  color: var(--wv-pdp-accent);
  /* Remove the .wv-h-serif-lg typography class's text-stroke entirely.
     Designer call 2026-06-01: no stroke on this consumer regardless
     of product accent. The frozen typography class sets
     `-webkit-text-stroke: 1px var(--wv-color-accent)`; this zeroes
     out the width. */
  -webkit-text-stroke-width: 0;
}

/* ── Table grid ──────────────────────────────────────────────────── */

.wv-comparison-table__table {
  --ct-border: 1px solid var(--wv-color-text-secondary);
  --ct-radius: var(--wv-radius-sm);
  --ct-shadow: var(--wv-shadow-lifted);

  display: grid;
  /* Desktop column ratios. C1 absorbs spare width via 1fr; C2 (WV) is
     capped at 260–340px so it doesn't balloon on wide viewports; C3
     (competitor) is modest, capped at 200–260px.
     NEEDS DESIGNER REVIEW: caps are starting values — tune against
     reference at 1440 / 1280 / 1100. */
  grid-template-columns: 1fr minmax(260px, 340px) minmax(200px, 260px);
  /* No gap — keeps the highlight tab flush with the highlight-column fill */
  gap: 0;
  position: relative;
  /* Outer container has no border per user (col 1 row 1 and col 3 row 1
     should not carry top/left/right borders). Cell-level rules below
     create the internal grid lines; col 1 and col 3 white fills define
     their column shape without a bounding outline. */
  /* Establishes stacking context so the raised olive card's z-index
     resolves relative to the table, not the page. */
  z-index: 0;
}

/*
 * Shadow-emitting pseudo-element for the olive column.
 * Using ::after + position: absolute + grid-column: 2 / 3 so the
 * containing block is column 2 only (grid-column: 2 shorthand bleeds
 * to grid end). grid-row omitted: for abs-positioned grid items, both
 * auto values resolve to the grid's padding edges per CSS Grid Level 1
 * §9.1, spanning full grid height without depending on explicit rows.
 * Single emitter = no seams between cells.
 */
.wv-comparison-table__table::after {
  content: '';
  position: absolute;
  grid-column: 2 / 3;
  inset: 0;
  border-radius: var(--ct-radius);
  box-shadow: var(--ct-shadow);
  pointer-events: none;
  z-index: 2;
}

/* ── Spacer rows (decorative) ──────────────────────────────────────
   Dedicated grid rows above and below the data rows that give the
   olive highlight-bg element extra vertical room, creating the card's
   raised / extended look without negative margins or z-index tricks.
   ────────────────────────────────────────────────────────────────── */

.wv-comparison-table__spacer {
  /* Default spacer height — controls how far the olive column extends
     above and below the data rows. Top spacer overrides to 8px below. */
  height: 16px;
  background: transparent;
}

.wv-comparison-table__spacer--attribute {
  grid-column: 1;
}

.wv-comparison-table__spacer--highlight {
  grid-column: 2;
  /* Accent-driven: --wv-pdp-accent. See note in .wv-comparison-table cell rule below. */
  background: var(--wv-pdp-accent);
}

.wv-comparison-table__spacer--comparison {
  grid-column: 3;
}

.wv-comparison-table__row-wrapper--spacer-bottom .wv-comparison-table__spacer--highlight {
  border-left: var(--ct-border);
  border-right: var(--ct-border);
  border-bottom: var(--ct-border);
  border-bottom-left-radius: var(--ct-radius);
  border-bottom-right-radius: var(--ct-radius);
}

.wv-comparison-table__row-wrapper--spacer-top .wv-comparison-table__spacer {
  height: 8px;
}

.wv-comparison-table__row-wrapper--spacer-top .wv-comparison-table__spacer--highlight {
  border-left: var(--ct-border);
  border-right: var(--ct-border);
}

/* First data row (row 2) — rounded top corners for col 1 and col 3 so
   the white column cards begin with a soft corner under the raised
   olive tab row. */
.wv-comparison-table__row-wrapper--first .wv-comparison-table__attribute {
  border-top-left-radius: var(--ct-radius);
  border-top: var(--ct-border);
}

.wv-comparison-table__row-wrapper--first .wv-comparison-table__comparison-cell {
  border-top-right-radius: var(--ct-radius);
  border-top: var(--ct-border);
}

/* ── Header row — column labels ──────────────────────────────────── */

.wv-comparison-table__highlight-tab {
  grid-column: 2;
  grid-row: 1;
  background: var(--wv-color-text-secondary);
  color: var(--wv-color-text-inverse);
  text-transform: uppercase;
  text-align: center;
  padding: 6px 16px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--ct-border);
  border-top-left-radius: var(--ct-radius);
  border-top-right-radius: var(--ct-radius);
  position: relative;
  /* Above the card bg (z:2) so text renders on top of the olive fill. */
  z-index: 3;
}

.wv-comparison-table__comparison-label {
  grid-column: 3;
  grid-row: 1;
  /* Transparent bg per user — label floats outside the white competitor
     column card (which starts at row 2). */
  background: transparent;
  color: var(--wv-color-text-primary);
  text-transform: uppercase;
  text-align: center;
  padding: 6px 20px;
  min-height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* ── Data rows ───────────────────────────────────────────────────── */

/* Row wrapper uses display:contents so role="row" survives but children
   participate in the parent grid. Modern browsers (2022+) handle ARIA
   through display:contents correctly. */
.wv-comparison-table__row-wrapper {
  display: contents;
}

.wv-comparison-table__attribute {
  grid-column: 1;
  /* Centered both axes per user direction. Symmetric padding so the text
     sits mid-cell without asymmetric offset. */
  padding: 18px 20px 18px 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: var(--wv-color-text-primary);
  /* White background on row headers per user direction. */
  background: var(--wv-color-card-bg);
  /* Left border forms the left edge of the C1 bracket (R3–R7). */
  border-left: var(--ct-border);
  border-bottom: var(--ct-border);
  position: relative;
  z-index: 1;
}

/* C1R7 — last data row's attribute cell gets a bottom-left radius to
   close the bracket. R7 is second-to-last row-wrapper (R8 = bottom
   spacer is last). */
.wv-comparison-table__row-wrapper--last .wv-comparison-table__attribute {
  border-bottom-left-radius: var(--ct-radius);
}

.wv-comparison-table__row-wrapper--last .wv-comparison-table__comparison-cell {
  border-bottom-right-radius: var(--ct-radius);
}

.wv-comparison-table__row-wrapper--last .wv-comparison-table__highlight-cell {
  border-bottom: 0;
}

.wv-comparison-table__highlight-cell {
  grid-column: 2;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Accent-driven: --wv-pdp-accent custom property set on .wv-pdp by
     the dispatcher partial. Defaults to --wv-color-accent (olive) when
     the product's pdp_accent_color is unset; switches to product
     color (omega/probiotic/etc.) when set. */
  background: var(--wv-pdp-accent);
  color: var(--wv-color-text-inverse);
  border-bottom: var(--ct-border);
  position: relative;
  /* Above the card bg (z:2) so checkmark + text render on the olive fill. */
  z-index: 3;
}

/* .wv-body-bold class sets color: text-secondary explicitly; override
   to inherit cream from the cell so the claim reads against the olive. */
.wv-comparison-table__claim {
  color: inherit;
}

.wv-comparison-table__comparison-cell {
  grid-column: 3;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  /* White bg on every col-3 cell per user direction. */
  background: var(--wv-color-card-bg);
  color: var(--wv-color-text-primary);
  border-right: var(--ct-border);
  border-bottom: var(--ct-border);
  position: relative;
  z-index: 1;
}

/* ── Icons ───────────────────────────────────────────────────────── */

.wv-comparison-table__check,
.wv-comparison-table__x {
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.wv-comparison-table__check {
  width: 22px;
  height: 22px;
}

.wv-comparison-table__x {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   COMPACT TIER — tablet / small desktop (768–1049px)
   --------------------------------------------------------------------------
   Headline stacks above the table horizontally. Column ratios tighten;
   C2 remains visibly widest, C3 narrows. Cell padding reduces.
   NEEDS DESIGNER REVIEW: ratios (0.8/1.8/1.4), headline gap (16px),
   cell padding (14px) are starting values. Tune after render.
   ========================================================================== */

/* Tablet base — formerly a max-width: 1049 block. Applies at all sizes
   below desktop; restored to side-by-side desktop values in the
   @media (min-width: 1280px) block at the end of this file. */
.wv-comparison-table__inner {
  /* Stack: headline above table in source order */
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 0 50px;
}

.wv-comparison-table__headline {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 16px;
  padding-top: 0;
  text-align: center;
}

.wv-comparison-table__table {
  grid-template-columns: minmax(100px, 0.8fr) 1.8fr 1.4fr;
}

.wv-comparison-table__attribute,
.wv-comparison-table__highlight-cell,
.wv-comparison-table__comparison-cell {
  padding: 14px 14px;
}

.wv-comparison-table__attribute {
  padding-left: 20px;
}

/* ==========================================================================
   COMPACT TIER — lower (600–899px)
   --------------------------------------------------------------------------
   Layers overrides on top of the 1049 block. Headline is already set to
   flex-wrap: wrap at 1049, so below 900 it breaks to multi-line naturally
   as "The Woodstock Advantage" runs out of horizontal room. Column ratios
   tighten further: C1 gives up most space, C2 stays widest, C3 narrows.
   Inner padding tightens to 0 24px to reclaim table width.
   NEEDS DESIGNER REVIEW: ratios (0.6/1.6/1.3), gap (12px), cell padding
   (12px / 14px), inner padding (24px) are all starting points.
   ========================================================================== */

/* Mobile-default tightening — formerly a max-width: 899 block. Applies
   at all sizes; tablet+ restores intermediate "compact" values in the
   @media (min-width: 768px) block immediately after, desktop returns
   to full side-by-side in the @media (min-width: 1280px) block at the
   end of this file. Refactored 2026-06-01. */
.wv-comparison-table__inner {
  padding: 0 24px;
}

.wv-comparison-table__headline {
  /* Tighter inter-word gap when headline wraps */
  gap: 12px;
}

.wv-comparison-table__table {
  grid-template-columns: minmax(80px, 0.6fr) 1.6fr 1.3fr;
}

.wv-comparison-table__attribute,
.wv-comparison-table__highlight-cell,
.wv-comparison-table__comparison-cell {
  padding: 12px 12px;
}

.wv-comparison-table__attribute {
  /* Further reduced from the 20px compact-upper value */
  padding-left: 14px;
}

/* ── Tablet+ (768) restores intermediate compact tier values that the
   mobile-default block above overrides. These are the values formerly
   in the @media (max-width: 1049) block (now applied as unqueried
   tablet-default earlier in this file). ── */
@media (min-width: 768px) {
  .wv-comparison-table__inner {
    padding: 0 50px;
  }

  .wv-comparison-table__headline {
    gap: 16px;
  }

  .wv-comparison-table__table {
    grid-template-columns: minmax(100px, 0.8fr) 1.8fr 1.4fr;
  }

  .wv-comparison-table__attribute,
  .wv-comparison-table__highlight-cell,
  .wv-comparison-table__comparison-cell {
    padding: 14px 14px;
  }

  .wv-comparison-table__attribute {
    padding-left: 20px;
  }
}

/* ==========================================================================
   MOBILE — 2-COLUMN (<600px)
   --------------------------------------------------------------------------
   Component renders with Col 3 (Competitors) hidden; headline + attribute
   column + WV column remain. Headline's flex-wrap and inner padding
   (0 24px) carry over from the 899 tier — no override needed here.

   Accessibility: hiding Col 3 via `display: none` removes it from the
   screen reader tree as well. At mobile, SR users hear attribute + WV
   claim only, no competitor contrast. Acceptable for this component —
   mobile presents a simplified "here's what we do well" view rather than
   the side-by-side comparison. If comparison framing becomes critical at
   mobile, revisit with a collapsible / tabbed reveal of Col 3 in a
   future pass.

   ⚠ KEEP-AS-IS / DO NOT REFACTOR TO MOBILE-FIRST. The 599 boundary
   marks a deliberate "below this width, Col 3 disappears + the whole
   comparison concept collapses to a 2-col WV-only summary." It is a
   visibility/IA shift, not a layout tier — and the override only ever
   needs to apply at the smallest viewports. Inverting to a mobile-first
   form would require flipping the cascade to "Col 3 hidden by default,
   shown at 600+" which is the opposite of how the rest of the table is
   designed (Col 3 is the default / always-on in the tablet+ tiers).
   Reviewed during the breakpoint cleanup pass 2026-06-01.
   ========================================================================== */

@media (max-width: 599px) {
  .wv-comparison-table__table {
    /* 2-col grid: tight C1 floor, C2 widest. Shadow ::after still uses
       grid-column: 2 / 3 which correctly refers to Col 2's track. */
    grid-template-columns: minmax(80px, 0.6fr) 1.6fr;
  }

  /* Full Col 3 hidden: header label + data cells + spacer cells. All
     three must be hidden so no grid item requests column 3 (which would
     force the grid to create a phantom implicit track). */
  .wv-comparison-table__comparison-label,
  .wv-comparison-table__comparison-cell,
  .wv-comparison-table__spacer--comparison {
    display: none;
  }

  /* NEEDS DESIGNER REVIEW: mobile cell padding — starting values */
  .wv-comparison-table__attribute,
  .wv-comparison-table__highlight-cell {
    padding: 10px 10px;
  }

  .wv-comparison-table__attribute {
    /* Further reduced from the 14px compact-lower value */
    padding-left: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP — restore side-by-side layout + wider padding + full ratios
   ──────────────────────────────────────────────────────────────────────
   Inverts the tablet defaults set in the unqueried block earlier in
   this file (which was formerly a max-width: 1049 block). Refactored
   2026-06-01 as part of the breakpoint consolidation pass.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .wv-comparison-table__inner {
    grid-template-columns: 25fr 75fr;
    gap: 12px;
    padding: 0 80px;
  }

  .wv-comparison-table__headline {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding-top: 80px;
    text-align: left;
  }

  .wv-comparison-table__table {
    grid-template-columns: 1fr minmax(260px, 340px) minmax(200px, 260px);
  }

  .wv-comparison-table__attribute,
  .wv-comparison-table__highlight-cell,
  .wv-comparison-table__comparison-cell {
    padding: 18px 20px;
  }

  .wv-comparison-table__attribute {
    padding-left: 40px;
  }
}