/* ==========================================================================
   Blocco NUMERI — responsive
   PROVVISORIO. Nessuna riga fuori da @media.
   ========================================================================== */

/* --- <= 1023 · da tre colonne a due --------------------------------------
   A 1024 la card e larga 300px: la cifra a 120px piu l'unita ci sta appena, e
   la didascalia in maiuscolo va su tre righe. Due colonne danno respiro; la
   terza card si prende la riga sotto, larga il doppio — sbilanciato ma
   leggibile, e meglio di tre colonne strizzate. */
@media (max-width: 1023px) {
  .numeri__griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 56px;
  }

  .numero-card { gap: var(--space-5); }
}

/* --- <= 767 · una colonna ------------------------------------------------
   La cifra scende a 96px: 120 su una card larga quanto lo schermo e piu
   dell'altezza di mezza riga di testo, e diventa un blocco. */
@media (max-width: 767px) {
  .numeri__griglia {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 48px;
  }

  .numero-card__valore { font-size: 96px; }
  .numero-card { gap: var(--space-4); padding: var(--space-4); }
}

@media (max-width: 479px) {
  .numero-card__valore { font-size: 80px; }
  .numero-card { padding: 24px; }
}