/* =============================================================================
   Modulo: il riquadro dei numeri.

   Nodo di design 552:4021, pagina di un singolo progetto: un riquadro 1448×132
   diviso in tre colonne, 24 di padding e 24 fra una colonna e l'altra.

   ⚠ **Non è `stats-row`.** Quello è la fila della pagina About — riquadri separati,
   numero sfumato, parola in maiuscolo — e il perché i due sono due moduli sta per
   esteso nel PHP. Qui il riquadro è uno e il numero è bianco pieno.

   Non è una scena: nessun pin, nessun progresso, nessun `data-scene`. Il solo
   movimento è il reveal globale di base.css.
   ========================================================================== */

.stats-panel {
    margin-block: var(--space-module);
}

/* Il riquadro.

   ⚠ **Il filetto non è qui: è `.corner-rule` di base.css**, che il PHP mette sullo
   stesso elemento. È lo stesso tratto acceso a due angoli opposti di `.stat-box`, e
   ci è arrivato un nome proprio il giorno che l'ha voluto questo modulo. Se il
   filetto va cambiato si cambia là, e cambia in quattro posti.

   ⚠ **Nessun `border`**, per la stessa ragione di `.stat-box`: in Figma un bordo non
   si somma alla misura e in CSS sì, quindi il riquadro verrebbe 134 invece dei 132
   del frame.

   ⚠ Il velo **non è `--color-veil-card`**, che è il `rgb(32 29 46 / 0.16)` di
   `.stat-box`: qui il design dice `rgb(10 14 21 / 0.08)` con una sfocatura di 4px
   invece di 2. Sono due tinte diverse e restano locali, come lo era quella finché la
   voleva un modulo solo. Il giorno che questa la vuole un secondo modulo vero, va in
   base.css con un nome per ruolo. */
.stats-panel__box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    margin: 0;
    padding: var(--space-m);
    border-radius: var(--radius-l);
    background-color: rgb(10 14 21 / 0.08);
    backdrop-filter: blur(4px);
    list-style: none;
}

/* `flex: 1` con `min-inline-size: 0`: le colonne si dividono la riga in parti
   uguali, come i tre `flex-[1_0_0]` del design. Senza il minimo a zero una colonna
   non si stringerebbe sotto il proprio contenuto, e «5.376×1.472» non si stringe. */
.stats-panel__item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    min-inline-size: 0;
    text-align: center;
}

/* Il numero: 48 su 48 in Medium con tracking −1%.

   ⚠ **Nessuno dei tre valori è un token, e non è una dimenticanza.** Nel file di
   design questo testo non è legato a nessuna variabile — `get_variable_defs` sul
   nodo non restituisce niente — quindi è misurato sul render, e la regola del tema è
   che un corpo non legato a una variabile resta locale al modulo finché non lo vuole
   un secondo modulo vero. I 48 di `--text-title-lower-lg` sono un altro stile:
   `title-lower-lg` è 48 **su 56** con tracking zero, cioè il claim della hero About.

   ⚠ **Bianco pieno, non `--fill-stat`.** Campionata l'asta del «230» sul render:
   255 in cima e 255 in fondo, mentre il numero di `.stat-box` scende a 158.

   `nowrap`: «5.376×1.472» è un numero solo e non deve spezzarsi a metà. */
.stats-panel__value {
    font-size: 3rem;          /* 48 */
    line-height: 1;           /* 48 su 48 */
    font-weight: var(--weight-medium);
    letter-spacing: -0.01em;  /* −0,48px su 48 */
    white-space: nowrap;
}

/* La parola sotto: 20 su 32 in Medium, **in tondo**.

   ⚠ Non è `--text-title-s`, che è pure 20 ma su 24 con tracking 4% e maiuscolo —
   quello è `title-upper-xs`, lo stile delle etichette. E non è maiuscola come in
   `stats-row`: qui il design lascia la frase come la scrive la redazione, ed è una
   delle due cose che distinguono i due moduli. */
.stats-panel__label {
    font-size: 1.25rem; /* 20 */
    line-height: 1.6;   /* 32 su 20 */
    font-weight: var(--weight-medium);
}

/* -----------------------------------------------------------------------------
   Telefono: le colonne diventano righe.

   Il design mobile di questa pagina non c'è. Tre colonne su 344 di riquadro non
   ci stanno — «5.376×1.472» non va a capo, ed è giusto così — e i numeri
   finivano uno sopra l'altro. Il riquadro resta uno, e dentro le voci si impilano
   con 32 fra l'una e l'altra; il numero scende a 40, che è il corpo dei titoli in
   card del tema, perché il più lungo stia nella riga anche su un telefono da 360. */
@media (max-width: 900px) {
    .stats-panel__box {
        flex-direction: column;
        gap: var(--space-l);
        padding-block: var(--space-l);
    }

    .stats-panel__value {
        font-size: 2.5rem;
    }

    .stats-panel__label {
        font-size: var(--text-body-m);
        line-height: var(--leading-body-m);
    }
}