/*
  case-study.css : the ONLY new component surface for the Beecasso case-study
  page (/work/beecasso/). Everything else on the page is existing spine.css
  (.spine-section, .container, .measure, .eyebrow, .display, .metric,
  .cta-primary, .content-split, .proof-strip, .honest-caveat, .tag--signal,
  nav, footer, atmosphere/grain). This file adds only what the results-page
  needs and does not exist yet:

    1. .results-band   — the signature hero stat band (feature card + 4-up grid)
    2. .stat-card      — one before -> after proof card
    3. .trust-curve    — the 30/60/90 honest-trajectory chart wrapper
    4. .wedge          — the earned-not-manufactured callout
    5. .beforeafter    — the problem -> build two-state contrast

  Token-only, like spine.css: zero color/type/space literals except the two
  documented low-alpha lime tints that spine.css itself already uses
  (rgba(194,255,0,.04/.06) in .compare-table). Declares into @layer structure
  so it composes with the existing cascade with no specificity fights.

  LIME BUDGET (the #c2ff00 scarcity rule, direction §7 — four sanctioned sites).
  On this page lime appears at exactly these proof surfaces and nowhere else:
    - the ONE feature stat-card's after-value + its arrow      (the key metric)
    - the trust-curve REALIZED segment + the "now" node        (the same metric, drawn)
    - the primary CTA                                          (sanctioned)
    - the active nav item + .wedge 2px rule + .answer-block    (spine.css defaults; low-intensity structural lime, carried as-is)
  The four NON-feature stat cards resolve their after-value in full ink, never
  lime. Lime = earned proof; it never touches decoration or body copy.
*/

@layer structure {

  /* ============================================================
     1 · RESULTS BAND — the signature element
     Feature card full-width on top; 4 supporting cards below,
     1-col mobile -> 2-col at 720 -> 4-col at 1024. Scannable in 3s.
     ============================================================ */
  .results-band {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-6);
  }
  .results-band__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* ============================================================
     2 · STAT CARD — one before -> after proof
     ============================================================ */
  .stat-card {
    background: var(--surface-4);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 100%;
  }

  .stat-card__label {
    font-size: var(--type-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  /* The movement line: before  ->  after, digits tabular so they align. */
  .stat-card__move {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    margin-top: auto;
  }
  .stat-card__before {
    font-family: var(--font-display);
    font-size: var(--type-h3);
    line-height: 1;
    color: var(--color-ink-faint);
  }
  .stat-card__arrow {
    font-size: var(--type-h4);
    color: var(--color-ink-muted);
    line-height: 1;
  }
  .stat-card__after {
    font-family: var(--font-display);
    font-size: var(--type-h2);
    line-height: 0.95;
    color: var(--color-ink);          /* supporting cards: full ink, NOT lime */
    letter-spacing: var(--tracking-display);
  }

  .stat-card__source {
    font-size: var(--type-small);
    color: var(--color-ink-faint);
    line-height: var(--leading-body);
  }

  /* The ONE feature card — the emotional hit, wider, and the single lime metric. */
  .stat-card--feature {
    background:
      linear-gradient(180deg, rgba(194,255,0,0.05) 0%, transparent 55%),
      var(--surface-4);
    border-color: var(--color-hairline-2);
    padding: var(--space-6);
    gap: var(--space-4);
  }
  .stat-card--feature .stat-card__before { font-size: var(--type-h2); }
  .stat-card--feature .stat-card__arrow  { color: var(--color-signal); }
  .stat-card--feature .stat-card__after  {
    font-size: clamp(3rem, 8vw, 5rem);
    color: var(--color-signal);         /* the key-metric lime site */
  }
  @media (min-width: 720px) {
    .stat-card--feature {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--space-6);
    }
    .stat-card--feature .stat-card__head { align-self: start; }
    .stat-card--feature .stat-card__move { margin-top: 0; justify-content: flex-end; }
  }

  @media (min-width: 720px) {
    .results-band__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1024px) {
    .results-band__grid { grid-template-columns: repeat(4, 1fr); }
  }

  /* Supporting multipliers, a thin row under the band (search views ~13x, US
     share 65% -> 96%). Small, so they read as "and there is more," never as
     headline. */
  .results-multipliers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-hairline);
  }
  .results-multipliers span {
    font-size: var(--type-small);
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
  }
  .results-multipliers b {
    font-family: var(--font-display);
    color: var(--color-ink);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-display);
  }

  /* ============================================================
     3 · TRUST CURVE — the honest 30/60/90 trajectory
     The wrapper; the chart itself is inline SVG (realized segment lime,
     projected segment faint-dashed). "Real so far, expected climb."
     ============================================================ */
  .trust-curve {
    margin-top: var(--space-5);
    padding: var(--space-5);
    background: var(--surface-3);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
  }
  .trust-curve svg { display: block; width: 100%; height: auto; }
  .trust-curve__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-4);
  }
  .trust-curve__legend span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--type-small);
    color: var(--color-ink-muted);
  }
  .trust-curve__legend i {
    width: 1.5rem;
    height: 0;
    border-top-width: 2px;
    border-top-style: solid;
  }
  .trust-curve__legend .k-real { border-color: var(--color-signal); }
  .trust-curve__legend .k-proj { border-color: var(--color-ink-faint); border-top-style: dashed; }

  /* ============================================================
     4 · WEDGE — earned, not manufactured
     A distinct callout. Lime 2px left rule (answer-block family), so it reads
     as "the important aside" without a new lime fill.
     ============================================================ */
  .wedge {
    margin-top: var(--space-6);
    padding: var(--space-5) var(--space-6);
    background: var(--surface-3);
    border: 1px solid var(--color-hairline);
    border-left: 2px solid var(--color-signal);
    border-radius: var(--radius-md);
  }
  .wedge__kicker {
    font-family: var(--font-display);
    font-size: var(--type-h3);
    line-height: var(--leading-snug);
    color: var(--color-ink);
  }
  .wedge p {
    margin-top: var(--space-3);
    color: var(--color-ink-muted);
    line-height: var(--leading-body);
  }
  .wedge__line {
    margin-top: var(--space-4);
    font-size: var(--type-h4);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
  }

  /* ============================================================
     5 · BEFORE / AFTER — the problem -> the build
     Two states side by side; before = faint on the low surface, after = ink
     on a raised surface with a single lime accent word. Reuses .content-split
     grid rhythm; adds the two state cards.
     ============================================================ */
  .beforeafter {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-5);
  }
  .ba-state {
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
  }
  .ba-state__tag {
    font-size: var(--type-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
  }
  .ba-state--before {
    background: var(--surface-2);
    color: var(--color-ink-faint);
  }
  .ba-state--before .ba-state__tag { color: var(--color-ink-faint); }
  .ba-state--before .ba-state__head {
    font-family: var(--font-display);
    font-size: var(--type-h3);
    line-height: var(--leading-snug);
    color: var(--color-ink-muted);
  }
  .ba-state--after {
    background: var(--surface-4);
    border-color: var(--color-hairline-2);
  }
  .ba-state--after .ba-state__tag { color: var(--color-signal); }
  .ba-state--after .ba-state__head {
    font-family: var(--font-display);
    font-size: var(--type-h3);
    line-height: var(--leading-snug);
    color: var(--color-ink);
  }
  .ba-state ul {
    list-style: none;
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--type-small);
    line-height: var(--leading-body);
  }
  @media (min-width: 720px) {
    .beforeafter { grid-template-columns: 1fr 1fr; align-items: stretch; }
  }

  /* ============================================================
     6 · CLIENT QUOTE — reserved slot (Cass, build).
     Katie's verbatim quote drops in here later; the build ships it
     RESERVED and empty (dispatch constraint 6). On-system, token-only,
     and deliberately NON-lime (hairline-2 left rule, not signal) so it
     does NOT spend a fifth lime site. Same visual family as .wedge.
     ============================================================ */
  .client-quote {
    margin-top: var(--space-5);
    padding: var(--space-5) var(--space-6);
    background: var(--surface-3);
    border: 1px solid var(--color-hairline);
    border-left: 2px solid var(--color-hairline-2);
    border-radius: var(--radius-md);
  }
  .client-quote blockquote {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--type-h3);
    line-height: var(--leading-snug);
    color: var(--color-ink-muted);
  }
  .client-quote__attr {
    margin-top: var(--space-3);
    font-size: var(--type-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }
  /* Reserved state: the slot is present but visibly awaiting real words. */
  .client-quote--reserved blockquote { color: var(--color-ink-faint); }

  /* ============================================================
     7 · CASE TEASER — the /work/ index card that links into the
     case study (dispatch section B). Card frame + hover + a compact
     5-stat readout. Reuses the stat/number language; token-only, and
     NO new lime (the stat values resolve in ink, per the budget).
     ============================================================ */
  .case-teaser {
    display: block;
    margin-top: var(--space-5);
    padding: var(--space-6);
    background: var(--surface-4);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease;
  }
  .case-teaser:hover { border-color: var(--color-hairline-2); }
  .case-teaser__head {
    font-family: var(--font-display);
    font-size: var(--type-h3);
    line-height: var(--leading-snug);
    color: var(--color-ink);
    margin-top: var(--space-2);
  }
  .case-teaser__hook {
    margin-top: var(--space-3);
    color: var(--color-ink-muted);
    line-height: var(--leading-body);
    max-width: 60ch;
  }
  .case-teaser__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-hairline);
  }
  .case-teaser__stats li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    font-size: var(--type-small);
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
  }
  .case-teaser__stats b {
    font-family: var(--font-display);
    color: var(--color-ink);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-display);
    white-space: nowrap;
  }
  .case-teaser__note {
    margin-top: var(--space-3);
    font-size: var(--type-small);
    color: var(--color-ink-faint);
    line-height: var(--leading-body);
  }
  .case-teaser__cta {
    display: inline-block;
    margin-top: var(--space-4);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
  }
  @media (min-width: 720px) {
    .case-teaser__stats { grid-template-columns: 1fr 1fr; }
  }
}