/* ============================================================
   METRICS PANEL — homepage §3 "By the numbers"
   A LIGHT floating product-dashboard card on the grey (--alt) band.
   Tokens only. The ONLY raw px are 1px hairline dividers/borders and
   the responsive breakpoints (matches existing convention).
   ============================================================ */

/* Floating card — white surface, hairline, large shadow, generous padding,
   so it reads as one independent unit and can't merge into §4. */
.mp-panel{
  background:var(--s-page);
  border:1px solid var(--c-border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
  padding:var(--sp-8) var(--sp-6);
  text-align:center;               /* centres the eyebrow (inline-block) + all stat text */
}
.mp-eyebrow{margin-bottom:var(--sp-8)}

/* 6-stat grid. Mobile-first: 2×3. gap:0 so hairline dividers sit flush;
   per-cell padding gives the dividers breathing room. */
.mp-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
}

/* Each cell. min-width:0 lets long values ("ISO 14040/44") wrap — no h-scroll. */
.mp-stat{
  min-width:0;
  padding:var(--sp-4) var(--sp-4);
}

/* Value line — big number + optional static unit, baseline-aligned + centred. */
.mp-value{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:var(--sp-1);
  color:var(--c-heading);          /* 10.8:1 on white */
}
/* Static-text value (stat 6, "ISO 14040/44"): a long standard code, not a quantity —
   sized to --t-h2 and allowed to wrap so it splits cleanly to two lines
   ("ISO" / "14040/44") and never overflows its 1/6 column. overflow-wrap:anywhere
   prefers the space as the break point and only splits the token if the column
   truly can't fit it (--t-h1 spilled past the panel at ≥900px and forced h-scroll). */
.mp-value--text{
  font-size:var(--t-h2);
  font-weight:800;
  line-height:var(--lh-tight);
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
/* .stat-num already carries --t-h1 / 800 / --c-heading from components.css. */

/* Unit suffix — static sibling of .stat-num, matched to the number, blue accent.
   Kept OUT of .stat-num so the shared count-up (textContent) never wipes it. */
.mp-suffix{
  font-size:var(--t-h1);
  font-weight:800;
  line-height:var(--lh-tight);
  letter-spacing:-.03em;
  color:var(--c-link);             /* 5.5:1 on white */
}

/* Caps kicker — letterspaced like .eyebrow, small, navy heading colour. */
.mp-kicker{
  margin-top:var(--sp-2);
  font-size:var(--t-caption);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--c-heading);          /* 10.8:1 on white */
}

/* Short description. */
.mp-desc{
  margin-top:var(--sp-1);
  font-size:var(--t-small);
  line-height:var(--lh-body);
  color:var(--c-muted);            /* 4.9:1 on white */
}

/* ---- Dividers — each layout scoped to its OWN bounded width range AND its own
   grid variant (via :not(.mp-grid--3) / .mp-grid--3), so nothing leaks across
   breakpoints or stat counts. Each block resets border:0 then re-applies only
   its own dividers. Raw px = 1px hairlines + breakpoints only. ---- */

/* === Default 6-stat layout (homepage §3): 2×3 → 3×2 → 6-across === */

/* <560px — 2×3: vertical between the 2 columns, horizontal between the 3 rows.
   Columns come from the base .mp-grid{repeat(2)} rule above. */
@media (max-width:559.98px){
  .mp-grid:not(.mp-grid--3) .mp-stat{border:0}
  .mp-grid:not(.mp-grid--3) .mp-stat:not(:nth-child(2n+1)){border-inline-start:1px solid var(--c-border)}
  .mp-grid:not(.mp-grid--3) .mp-stat:nth-child(n+3){border-block-start:1px solid var(--c-border)}
}

/* 560–899px — 3×2. */
@media (min-width:560px) and (max-width:899.98px){
  .mp-grid:not(.mp-grid--3){grid-template-columns:repeat(3,1fr)}
  .mp-grid:not(.mp-grid--3) .mp-stat{border:0}
  .mp-grid:not(.mp-grid--3) .mp-stat:not(:nth-child(3n+1)){border-inline-start:1px solid var(--c-border)}
  .mp-grid:not(.mp-grid--3) .mp-stat:nth-child(n+4){border-block-start:1px solid var(--c-border)}
}

/* ≥900px — single row of 6, vertical dividers only (no border-block-start). */
@media (min-width:900px){
  .mp-grid:not(.mp-grid--3){grid-template-columns:repeat(6,1fr)}
  .mp-grid:not(.mp-grid--3) .mp-stat{border:0}
  .mp-grid:not(.mp-grid--3) .mp-stat:not(:first-child){border-inline-start:1px solid var(--c-border)}
}

/* === 3-stat variant (e.g. §12 CAP band): single column → 3-across === */
.mp-grid--3{grid-template-columns:repeat(1,1fr)}

/* <560px — single column, horizontal dividers between the rows. */
@media (max-width:559.98px){
  .mp-grid--3 .mp-stat{border:0}
  .mp-grid--3 .mp-stat:not(:first-child){border-block-start:1px solid var(--c-border)}
}

/* ≥560px — 3-across, vertical dividers only. */
@media (min-width:560px){
  .mp-grid--3{grid-template-columns:repeat(3,1fr)}
  .mp-grid--3 .mp-stat{border:0}
  .mp-grid--3 .mp-stat:not(:first-child){border-inline-start:1px solid var(--c-border)}
}

/* ISO code refinement (flagged deviation from literal "--t-h2 everywhere"): in the
   narrow 6-stat columns drop to --t-h3 so the value wraps cleanly to
   "ISO" / "14040/44" instead of breaking mid-number ("14040/" / "44").

   Two arms, not one. The ≥900 arm was there already (6-across). The ≤559.98 arm is
   new: this rule previously read "stays --t-h2 at ≤899 where the 1–3 column widths
   comfortably fit it", and at 375 that is not true. Measured at a real 375 layout
   viewport, the 2-across column gives the value 115px of content box while
   "14040/44" at --t-h2 (26px/800) needs 126px — so overflow-wrap:anywhere did what
   it is asked to and split the token, landing the value on THREE lines. At --t-h3
   (21px at 375) the token needs 102px and fits, restoring the intended two-line
   split. The 560–899 band keeps --t-h2: at 3-across it measures one line.

   Scoped to the 6-stat grid; .mp-grid--3 is single-column below 560 and never
   short of width. */
@media (max-width:559.98px){ .mp-grid:not(.mp-grid--3) .mp-value--text{ font-size:var(--t-h3) } }
/* 900–1079.98: --t-h3 is fluid (2.4vw between 21 and 26px) and at the BOTTOM of the
   6-across band it is still too big for the column it has to fit — 900px gives the
   value 102px of content and the token needs 106px, so the ≥900 arm alone was
   producing the same three-line break it exists to prevent, from 900 to ~1020.
   --t-h4 is flat 20px (token needs 97px), so it clears the narrowest column in the
   band by 5px instead of tracking the viewport past it. */
@media (min-width:900px) and (max-width:1079.98px){ .mp-grid:not(.mp-grid--3) .mp-value--text{ font-size:var(--t-h4) } }
@media (min-width:1080px){ .mp-grid:not(.mp-grid--3) .mp-value--text{ font-size:var(--t-h3) } }