/* ==========================================================================
   Blocco condiviso — NUMERI
   Maintenance `Maintenance Numbers` 55:785 · 1512 x 750
   Su Compliance c'e `Compliance Numbers` 63:1003, stessa struttura.
   (La `Vidim Numbers` della Home ha un impianto diverso e resta dov'e.)

   Verifica altezza (3 card): 160 + 58 + 80 + 292 + 160 = 750 ✔
     griglia = 266 (card) + 16 + 10 (nota legale) = 292 ✔
     card    = 40 + 87 (cifra) + 80 + 19 (didascalia) + 40 = 266 ✔
     87 = 120px x 0.727 — la cifra usa il taglio alla cap-height
   ========================================================================== */

.numeri__titolo {
  color: var(--text-on-light);
  text-align: center;
  width: 100%;
}

/* Il numero di colonne lo decide il blocco: tre su Maintenance. Si passa con
   la variabile --colonne, cosi lo stesso CSS regge anche pagine con due o
   quattro card. */
.numeri__griglia {
  display: grid;
  grid-template-columns: repeat(var(--colonne, 3), minmax(0, 1fr));
  gap: var(--space-3);                  /* 16 */
  width: 100%;
  margin-top: var(--space-6);           /* 80 */
  list-style: none;
  padding: 0;
}

.numero-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);                  /* 80 */
  padding: var(--space-5);              /* 40 */
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
}

/* Cifra e unita su una riga, allineate in ALTO: l'unita non e un pedice, sta
   all'altezza della cima della cifra. Su "hours/ year" va a capo e resta
   comunque ancorata in alto. */
.numero-card__cifra {
  display: flex;
  align-items: flex-start;
  width: 100%;
  white-space: nowrap;
}

.numero-card__valore {
  font-size: var(--type-display-l-size);   /* 120px */
  font-weight: 400;
  color: var(--text-on-light);
}

.numero-card__unita {
  color: var(--color-tertiary-300);
  white-space: normal;                     /* "hours/ year" va a capo */
}

.numero-card__didascalia {
  color: var(--color-tertiary-300);
  width: 100%;
}

/* La nota legale occupa tutta la riga sotto le card. 8px e la misura del
   mockup: e una nota di conformita, non un testo da leggere. */
.numeri__nota {
  grid-column: 1 / -1;
  align-self: start;
  text-align: center;
  color: var(--color-neutral-500);
}