/* ======================================================================
   Stats: the shared master for an outcomes strip. Three big light numerals, each with an optional unit word on its
   baseline and a caption under it, in equal columns with hairline dividers between them. The rules above and below
   the strip are off by default (owner, 2026-10-18); .stats--rules turns them on.
   First built as the Homeowners outcomes strip (#outcomes, owner-approved variant E5, 2026-10-18; comparison page
   docs/qa/outcomes-variants.html). How to adopt it on a page: docs/STATS.md. To change the look everywhere, edit THIS
   file only. A page never restyles .stats* from its own stylesheet; it tunes the dials below.

   Link order: tokens.css, site.css, stats.css, then the page's own stylesheet.
   Script: js/stats.js (counts each numeral up from 0 once, on scroll-in; the markup already holds the final value).
   Fonts: the page's Google Fonts line must request Hanken Grotesk 100 (Hanken+Grotesk:wght@100;700;800), or the
   numerals fall back to the lightest weight loaded (700) and the strip reads heavy.
   Figures are numerals. A word figure ("Every rule") is not supported: put the word in the caption.
   ====================================================================== */

/* ---------- the dials (set on .stats, or on an ancestor) ---------- */
.stats {
  --stats-cols: 3;
  --stats-num-size: 144px;
  --stats-num-weight: 100;
  --stats-num-nudge: -0.157em;   /* optical: lifts the numeral's em box so the flat digit tops (not the box) sit
                                    --stats-pad-y under the strip's top edge (Hanken 100: digit tops 0.157em into the box, measured) */
  --stats-narrow: -0.156em;      /* .stats__num--narrow: Hanken's "1" has a wide right sidebearing; this pulls the unit
                                    in so the visible gap after a "1" matches the one after a "3" (18.5px at 144, measured) */
  --stats-unit-gap: var(--pn-space-12);
  --stats-cap-w: 320px;          /* 320, not 300: at 300 two of the Homeowners captions break to 3 lines */
  --stats-cap-gap: var(--pn-space-16);
  --stats-pad-y: var(--pn-space-64);
  --stats-pad-x: var(--pn-space-48);
  --stats-divider: 1px solid var(--pn-color-border-decorative);   /* the vertical hairlines between the columns */
  --stats-rules-color: transparent; /* the rules above and below the strip: OFF by default (owner 2026-10-18). They stay
                                       1px transparent, so turning them on or off never changes the strip's height.
                                       Turn them on with .stats--rules. */
}
.stats--rules { --stats-rules-color: var(--pn-color-border-decorative); }

/* ---------- the strip: equal columns, hairline dividers between them; the padding is on the items so the dividers run
   the strip's full height. Rules above and below: see --stats-rules-color. ---------- */
.stats {
  display: grid; grid-template-columns: repeat(var(--stats-cols), minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--stats-rules-color); border-bottom: 1px solid var(--stats-rules-color);
}
.stats__item { min-width: 0; padding: var(--stats-pad-y) var(--stats-pad-x); }
/* Owner standing rule (no extra space on the left): the first column starts on the container edge, the last ends on it. */
.stats__item:first-child { padding-left: 0; }
.stats__item:last-child { padding-right: 0; }

.stats__item + .stats__item { border-left: var(--stats-divider); }

/* ---------- the figure: numeral + unit on one baseline ---------- */
.stats__fig {
  display: flex; align-items: baseline; gap: var(--stats-unit-gap);
  margin: 0;
}
/* the nudge sits on the numeral (em = the numeral's size); the unit rides the numeral's baseline, so it moves with it */
.stats__num {
  display: block; margin-top: var(--stats-num-nudge);
  font: var(--stats-num-weight) var(--stats-num-size)/1 var(--pn-font-display); letter-spacing: -0.03em;
  color: var(--pn-color-text-primary);
  white-space: nowrap;
}
.stats__num--narrow { margin-right: var(--stats-narrow); }
.stats__unit {
  font: 300 36px/1.1 var(--pn-font-sans); color: var(--pn-color-text-secondary);
  white-space: nowrap;
}

/* ---------- the caption: Text/Body at 1.5, secondary ---------- */
.stats__cap {
  max-width: var(--stats-cap-w); margin: var(--stats-cap-gap) 0 0;
  font: var(--pn-type-text-body); line-height: 1.5; color: var(--pn-color-text-secondary);
  text-wrap: pretty;
}

/* ---------- reduced motion: js/stats.js does not count; nothing in this file moves ---------- */

/* ---- responsive: tablet (2026-11-04) ---- */
/* three across at 96 with the hairlines; the unit drops to 24 and may wrap under the numeral rather than overflow */
@media (max-width: 1023px) {
  .stats { --stats-num-size: 88px; --stats-pad-x: var(--pn-space-24); --stats-pad-y: var(--pn-space-48); --stats-unit-gap: var(--pn-space-8); } /* 88, not 96: at 768 "100%" at 96 ran into the column rule (both phase 2 builders) */
  .stats__fig { flex-wrap: wrap; row-gap: var(--pn-space-4); }
  .stats__unit { font-size: 24px; }
  /* numeral flush left: pull it left by its first digit's left sidebearing, so its ink starts on the caption's edge
     (Hanken 100, measured: "1" 0.135em, 9.7px at 72, so it holds at 88 and 72; every other digit 0.03 to 0.08em, so 0.03em never overshoots) */
  .stats__num { margin-left: calc(-1 * var(--stats-num-lsb, 0.03em)); }
  .stats__num[data-count^="1"] { --stats-num-lsb: 0.135em; }
}

/* ---- responsive: phone (2026-11-04) ---- */
/* one stat per row, numeral left, a horizontal hairline between rows */
@media (max-width: 767px) {
  .stats { --stats-num-size: 72px; --stats-pad-y: var(--pn-space-32); --stats-cols: 1; --stats-cap-w: none; }
  .stats__item, .stats__item:first-child, .stats__item:last-child { padding-inline: 0; }
  .stats__item:first-child { padding-top: 0; }
  .stats__item:last-child { padding-bottom: 0; }
  .stats__item + .stats__item { border-left: 0; border-top: var(--stats-divider); }
}