/* home.css — la home è un cruscotto: i dati sopra la piega, le parole sotto.

   Qui dentro solo le regole specifiche della home (il gruppo di tabelle per
   città e la versione compatta dei numeri chiave). Tipografia, tavolozza,
   tabelle e schede di base restano in sito.css e non si toccano da qui: le
   regole sotto sono aggiunte o rifiniture mirate, mai una riscrittura di
   quello che esiste già. Solo token già definiti in sito.css — nessun colore
   nuovo, quindi il modo scuro resta automatico. */

/* Apertura più bassa che altrove: sulla home il primo schermo deve arrivare
   già al cruscotto, non fermarsi sul titolo. */
.apertura-cruscotto { padding-bottom: clamp(20px, 3vw, 32px); }
.apertura-cruscotto .sommario { max-width: 48ch; }

/* ---------------------------------------------------------- cruscotto */
/* Un riquadro per città, non undici righe in un'unica tabella: Milano e
   Firenze non si leggono a confronto diretto, e la prima domanda del
   cruscotto è "come va la mia città", non "qual è la zona più cara delle
   due". Due colonne quando lo spazio c'è, una sola sotto i ~750px. */
.cruscotto-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}

.cruscotto-citta {
  background: var(--carta-alta);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  padding: 18px 18px 8px;
}

.cruscotto-citta h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 0 10px;
}

.cruscotto-citta h3 .nota { font-size: .76rem; }

/* Tabella più fitta della tabella standard di sito.css: qui la riga è una
   zona fra molte, non l'unico contenuto della pagina come sulla città. */
table.tabella-cruscotto th,
table.tabella-cruscotto td {
  padding: 7px 9px;
  font-size: .84rem;
}
table.tabella-cruscotto .sparkline { width: 60px; height: 20px; }
/* La tabella del cruscotto è più stretta di quella "vera" della pagina di
   città: non ha bisogno dello stesso minimo per restare leggibile. */
.cruscotto-citta .tavola-invasa table.dati { min-width: 420px; }

/* ---------------------------------------------------------- numeri chiave */
/* Stessa griglia .cifre di sito.css, ma senza il sottotitolo esplicativo
   sotto ogni numero: qui le cifre affiancano il cruscotto, non lo aprono da
   sole, quindi possono restare più piccole. */
.cifre-compatte .cifra { padding: 12px 16px; }
.cifre-compatte .cifra dd { font-size: 1.4rem; }
.cifre-compatte .cifra dt { font-size: .72rem; margin-bottom: 3px; }

@media (max-width: 480px) {
  .cruscotto-citta { padding: 14px 14px 4px; }
}

/* L'apertura della home sta stretta di proposito: il committente ha chiesto i
   dati sopra la piega, e un titolo alto quanto lo schermo li spinge fuori.
   Vale solo qui: le altre pagine tengono il respiro che avevano. */
body.pagina-home .apertura { padding: clamp(28px, 4vw, 48px) 0 clamp(18px, 2vw, 26px); }
body.pagina-home .apertura h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); max-width: 20ch; }
body.pagina-home .apertura .sommario { font-size: clamp(1rem, 1.5vw, 1.12rem); max-width: 60ch; margin-bottom: 0; }
body.pagina-home .sezione:first-of-type { padding-top: clamp(22px, 3vw, 34px); }