/**
 * Fluid Framework - Stats/Metrics Section
 * @layer components
 *
 * Counter blocks for displaying key metrics, achievements, or numbers.
 * Uses <dl> (description list) for semantic markup.
 *
 * Usage:
 *   <section class="stats" aria-label="Key metrics">
 *     <header class="stats__header">
 *       <h2>By the numbers</h2>
 *     </header>
 *     <dl class="stats__grid">
 *       <div class="stat">
 *         <dd class="stat__value">10K+</dd>
 *         <dt class="stat__label">Happy Users</dt>
 *       </div>
 *       <div class="stat">
 *         <dd class="stat__value">99.9%</dd>
 *         <dt class="stat__label">Uptime</dt>
 *       </div>
 *       <div class="stat">
 *         <dd class="stat__value">50M</dd>
 *         <dt class="stat__label">API Requests</dt>
 *       </div>
 *       <div class="stat">
 *         <dd class="stat__value">4.9</dd>
 *         <dt class="stat__label">Star Rating</dt>
 *       </div>
 *     </dl>
 *   </section>
 */

@layer components {
  /* The band's padding and edges, and the header (a section head), are in
     src/fluid.css (layouts). */

  .stats__header p:not(.eyebrow, .lede) { color: var(--color-text-muted); }   /* the label voice owns the eyebrow's colour */

  .stats__grid {
    display: grid;
    gap: var(--space-l) var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    margin: 0;
    padding: 0;
  }


  /* ========================================
     STAT: a serif numeral under a 2px ink rule, the label beneath. No tile.
     ======================================== */

  .stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-block-start: var(--space-s);
    border-block-start: var(--border-width-thick) solid var(--_stat-border, var(--color-border-strong));
  }

  .stat__value {
    order: -1;
    font-family: var(--font-heading);
    font-size: var(--step-4);
    font-weight: calc(var(--weight-display) + var(--_dark-weight));
    line-height: 1;
    letter-spacing: var(--tracking-heading);
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-text);
    margin: 0;
  }

  .stat__label {
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--color-text-muted);
  }

  .stat__icon {
    display: flex;
    color: var(--accent-ink);
    margin-block-end: var(--space-xs);
  }

  .stat__icon svg {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  /* Borderless: no rule, a larger numeral. */
  .stats[data-variant="borderless"] .stat { --_stat-border: transparent; }
  .stats[data-variant="borderless"] .stat__value { font-size: var(--step-5); }

  /* Divider: hairlines between the stats instead of rules above them. */
  .stats[data-variant="divider"] .stat {
    border-block-start: 0;
    padding-block-start: 0;
    padding-inline-end: var(--space-m);
    border-inline-end: var(--border-width) solid var(--color-border);
  }

  .stats[data-variant="divider"] .stat:last-child { border-inline-end: 0; }


  /* ========================================
     ENTRANCE (opt-in: data-animate). A short rise and fade, once.
     ======================================== */

  @keyframes stat-fade-up {
    from { opacity: 0; translate: 0 12px; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .stats[data-animate] .stat { animation: stat-fade-up var(--duration-slow) var(--ease-settle) both; }
    .stats[data-animate] .stat:nth-child(2) { animation-delay: 100ms; }
    .stats[data-animate] .stat:nth-child(3) { animation-delay: 200ms; }
    .stats[data-animate] .stat:nth-child(4) { animation-delay: 300ms; }
  }
}