/* ==========================================================================
   COMPONENT: stat-block
   --------------------------------------------------------------------------
   Large-number-plus-label "stat" used by Playbook, ResultsCover, Lgpd,
   ChangelogHero, Habilidades, etc. Wrap multiple in an .e-row or .e-wrap
   for a stat grid.

   Markup contract:
     <div class="e-stat">
         <span class="e-stat__value">90%</span>
         <span class="e-stat__label">Resposta</span>
     </div>

   Variants:
     .e-stat--featured  — extra prominent variant (Hero "big" stats)
     .e-stat--inline    — value & label on a single line (compact)
   ========================================================================== */

/* Mirror of legacy `.playbook-stat` + `.lgpd-cover-stat` (components.css
   2053-2074 + 2121-2142). Value is 48px gradient, label is muted lowercase
   with 0.1em letter-spacing. */

.e-stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.e-stat__value {
    font-size: 48px;
    font-weight: var(--e-font-weight-bold);
    background: linear-gradient(135deg, var(--e-color-primary) 0%, var(--e-color-secondary) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
    line-height: 1;
}

.e-stat__label {
    color: var(--e-color-muted);
    letter-spacing: 0.1em;
    text-transform: lowercase;
}


/* DARK SURFACE INHERITANCE */

.e-section--dark .e-stat__label {
    color: var(--e-text-on-dark-faint);
}


/* FEATURED — bigger and bolder. */

.e-stat--featured .e-stat__value { font-size: var(--e-font-size-4xl); }


/* INLINE — value + label horizontally. */

.e-stat--inline {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    text-align: left;
}


/* SUFFIX — lightweight unit appended to the value (e.g. "%", "min"). */

.e-stat__suffix {
    font-weight: var(--e-font-weight-medium);
    color: var(--e-color-muted-soft);
    font-size: 0.5em;
    margin-left: 4px;
}