/**
 * =====================================================================
 * STATISTICS COMPONENT — STYLES
 * =====================================================================
 * Copied verbatim from the original design's CSS — confirmed nothing
 * like this (.stats/.stat/etc.) existed anywhere else in the theme
 * before writing this file.
 *
 * NOT REPEATED HERE: .section, .section--ink, .section__head,
 * .eyebrow, .lede, .container — already in assets/css/global.css.
 *
 * "div.stats"/"div.stat"/"div.stat__num"/"div.stat__label" (NOT bare
 * ".stats"/".stat"/etc.): same fix pattern as p.lede, p.hero__sub,
 * and a.btn elsewhere in this project. A bare single-class selector
 * has lower CSS specificity than Blocksy's own base styling, which is
 * apparently specific enough to win here — confirmed live, with EVERY
 * property on ".stat__num" showing as overridden in DevTools
 * (font-family, font-size, font-weight, line-height, letter-spacing,
 * color all struck through simultaneously). Adding the "div" tag
 * qualifier brings each of these up to the same specificity level
 * Blocksy's rule apparently sits at, and since this file loads after
 * Blocksy's own stylesheet, it wins. Applied to all four bare
 * selectors in this file at once, not just the one that was reported
 * — they're all the exact same structural pattern (single class,
 * applied directly to a <div>), so all four were equally at risk.
 * =====================================================================
 */

div.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
div.stat { padding: 40px 30px; border-left: 1px solid rgba(255,255,255,0.14); }
div.stat:first-child { border-left: 0; padding-left: 0; }
/*
 * font-family: ... !important — CONFIRMED NECESSARY, not a
 * precaution: after the div.stat__num specificity fix above, DevTools
 * showed 5 of 6 properties correctly winning (font-size, font-weight,
 * line-height, letter-spacing, color), but font-family SPECIFICALLY
 * remained overridden regardless. That signature — one property still
 * losing after specificity already matches — means Blocksy is using
 * !important on its own font-family declaration (a common pattern for
 * theme Typography/Customizer settings, which often need to override
 * everything unconditionally). Matching it with !important here is
 * the correct, necessary counter — nothing else was resistant to the
 * specificity fix, only this one property.
 */
div.stat__num {
  font-family: var(--font-display) !important; font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  font-weight: 300; line-height: 1; letter-spacing: -0.02em;
  color: var(--white); display: flex; align-items: baseline; gap: 4px;
}
/*
 * THIS is the actual, complete fix — everything above only ever
 * addressed the outer <div class="stat__num">, but the VISIBLE number
 * text ("38") lives on the nested <span data-count="38"> INSIDE it,
 * which has no class of its own and was relying on inheriting
 * font-family from its parent div. That inheritance was losing to
 * this project's own site-wide safety net in global.css
 * ("body span { font-family: var(--font-sans) !important; }") —
 * an explicit declaration on the span itself, !important or not,
 * always wins over inheritance, so the number was silently rendering
 * in the sans font regardless of what div.stat__num correctly set.
 * Targeting the span directly and matching !important fixes it.
 */
div.stat__num span[data-count] { font-family: var(--font-display) !important; }
div.stat__num .suffix { font-size: 0.4em; color: var(--red); font-family: var(--font-sans) !important; font-weight: 600; }
div.stat__label { color: rgba(255,255,255,0.7); font-size: 13px; margin-top: 16px; letter-spacing: 0.02em; }
@media (max-width: 900px) {
  div.stats { grid-template-columns: repeat(2, 1fr); }
  div.stat { border-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding: 30px 0; }
  div.stat:first-child, div.stat:nth-child(2) { border-top: 0; }
}