.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.stat-box__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-box__label {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(18, 51, 63, 0.63);
}

.stat-box__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-petrol);
    box-shadow: 0 0 0 3px rgba(18, 51, 63, 0.12);
    display: block;
}

.stat-box__dot--moss { background: var(--color-moss); box-shadow: 0 0 0 3px rgba(79, 123, 92, 0.15); }
.stat-box__dot--lilac { background: var(--color-lilac); box-shadow: 0 0 0 3px rgba(139, 131, 173, 0.15); }
.stat-box__dot--brass { background: var(--color-brass); box-shadow: 0 0 0 3px rgba(185, 147, 51, 0.15); }
.stat-box__dot--teal { background: var(--color-teal); box-shadow: 0 0 0 3px rgba(95, 138, 134, 0.15); }
.stat-box__dot--danger { background: var(--color-danger); box-shadow: 0 0 0 3px rgba(162, 59, 44, 0.15); }

.stat-box__value-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.stat-box__value {
    font-family: var(--font-heading);
    font-size: 29px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1;
}

.stat-box__delta {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
}

.stat-box__delta.is-positive {
    color: #3d6b4f;
}

.stat-box__delta.is-negative {
    color: var(--color-danger);
}

.stat-box__spark {
    margin-top: 16px;
    height: 34px;
}

.stat-box__bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100%;
}

.stat-box__bar {
    flex: 1;
    min-width: 3px;
    border-radius: 2px 2px 0 0;
}

.stat-box__comparison {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(18, 51, 63, 0.08);
    font-size: 11.5px;
    color: rgba(18, 51, 63, 0.66);
    font-weight: 500;
}

/* La card e' un <a> quando ha 'href' (vedi stat-box.js): reset dei default
   del link (colore/sottolineatura/display inline) + un feedback al hover
   visibile ma discreto, coerente con "e' un contatore su cui si clicca"
   invece di un semplice numero statico. */
.stat-box--clickable {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.stat-box--clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(18, 51, 63, 0.1);
    border-color: rgba(18, 51, 63, 0.16);
}

/* Bordo intero color d'accento (non piu' una striscia solo in alto - la
   striscia era stata scelta in risposta a un tint pieno giudicato troppo
   tenue, ma confrontata con un riferimento esterno preciso risultava
   comunque sbagliata: l'utente l'ha corretta chiedendo esplicitamente un
   "bordo unico tutto intorno", vedi sessione Clienti) + sfondo con velo
   diagonale bianco sopra il tint colorato, stessa ricetta degli avatar
   (gloss). Il VALORE numerico non viene piu' tinto del colore hero: nel
   riferimento resta sempre scuro pieno (--color-petrol) a prescindere
   dalla card - l'accento vive nel bordo/sfondo/pallino, non nel numero
   (un numero colorato leggeva "meno nero" di quanto l'utente si
   aspettasse). */
.stat-box--hero {
    position: relative;
    border: 1px solid var(--stat-hero-border, rgba(18, 51, 63, 0.3));
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.15) 60%),
        var(--stat-hero-bg, var(--color-panel));
}

.stat-box--hero-petrol { --stat-hero-border: rgba(18, 51, 63, 0.3); --stat-hero-bg: #e4e8ea; }
.stat-box--hero-moss { --stat-hero-border: rgba(79, 123, 92, 0.3); --stat-hero-bg: #eaf1ea; }
.stat-box--hero-lilac { --stat-hero-border: rgba(139, 131, 173, 0.3); --stat-hero-bg: #eeecf3; }
.stat-box--hero-brass { --stat-hero-border: rgba(185, 147, 51, 0.3); --stat-hero-bg: #f6f0df; }
.stat-box--hero-teal { --stat-hero-border: rgba(95, 138, 134, 0.3); --stat-hero-bg: #e9f0ef; }
.stat-box--hero-danger { --stat-hero-border: rgba(162, 59, 44, 0.3); --stat-hero-bg: #f6e6e2; }

/* 6 card (report, cruscotto): tutte in fila sugli schermi larghi (come
   il design), 3 per riga sui medi invece di 4 + 2 con un buco. */
@media (min-width: 900px) {
    .stat-grid:has(> :nth-child(6):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1760px) {
    .stat-grid:has(> :nth-child(6):last-child) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Sfumature agli angoli, solo nei colori dello stile (petrolio in alto a
   sinistra, giallino in basso a destra) - niente bordini colorati. */
.stat-box:not(.stat-box--hero):not(.stat-box--feature) {
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(18, 51, 63, 0.07), transparent 45%),
        radial-gradient(120% 90% at 100% 100%, rgba(229, 201, 121, 0.2), transparent 50%),
        var(--color-panel);
}

/* Card protagonista: il dato da leggere per primo (vedi StatBoxComponent 'feature'). */
.stat-box--feature {
    border: none;
    color: #fff;
    background:
        radial-gradient(110% 90% at 100% 100%, rgba(229, 201, 121, 0.38), transparent 55%),
        radial-gradient(90% 80% at 0% 0%, rgba(95, 138, 134, 0.35), transparent 50%),
        linear-gradient(150deg, #12333f, #0b2430);
    box-shadow: 0 18px 40px rgba(11, 36, 48, 0.28);
}
.stat-box--feature .stat-box__label { color: rgba(255, 255, 255, 0.72); }
.stat-box--feature .stat-box__value { color: #fff; font-size: 34px; }
.stat-box--feature .stat-box__comparison { color: rgba(255, 255, 255, 0.66); border-top-color: rgba(255, 255, 255, 0.14); }
.stat-box--feature.stat-box--clickable:hover { box-shadow: 0 22px 46px rgba(11, 36, 48, 0.34); }

.stat-box__badge {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-petrol);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* Con la card protagonista in fila con le altre, lei e' un po' piu' larga. */
@media (min-width: 1760px) {
    .stat-grid:has(> .stat-box--feature:first-child):has(> :nth-child(6):last-child) {
        grid-template-columns: minmax(0, 1.45fr) repeat(5, minmax(0, 1fr));
    }
}