/* Impaginazione del portale: una scala sola, dal telefono al 4K.
   ----------------------------------------------------------------
   Le pagine erano nate una per volta e ognuna si era scelta la sua
   larghezza (860, 880, 900, 960, 1120, 1600) e i suoi margini: su un
   monitor grande restavano colonne strette in mezzo al vuoto, e la
   testata non si allineava col contenuto sotto.

   Qui le larghezze sono in rem e la dimensione del testo alla radice
   cresce con lo schermo: ingrandendo il testo cresce di conseguenza
   anche la colonna, e il rapporto fra i due resta quello giusto. Le
   soglie sono quelle gia' in uso sulla home.

   Le pagine usano:
     --col-prosa   testo lungo da leggere      (privacy, corpo articolo)
     --col-lista   elenchi a una colonna       (rassegna, notizie, dediche, media kit)
     --col-larga   griglie di schede           (elenco articoli)
     --col-piena   pannello di gestione
     --gutter      margine laterale, uguale per testata e contenuto   */

:root{
  --gutter: clamp(20px, 4vw, 48px);
  --col-prosa: 46rem;
  --col-lista: 58rem;
  --col-larga: 74rem;
  --col-piena: 78rem;
}

html{ font-size: 16px; }

@media (min-width: 1700px){
  html{ font-size: 17px; }
  :root{ --gutter: clamp(40px, 3.4vw, 72px); }
}
@media (min-width: 2200px){
  html{ font-size: 18.5px; }
  :root{ --gutter: clamp(64px, 3.2vw, 96px); }
}
@media (min-width: 3000px){
  html{ font-size: 20.5px; }
}

/* ---- pagine a elenco: le schede si affiancano, invece di lasciare vuoto ----
   Allargare la riga di testo si legge peggio, quindi su schermi grandi non si
   allunga la riga: si mettono piu' schede a fianco. Contenitore e numero di
   colonne crescono insieme, da un'unica variabile, cosi' la testata resta
   allineata al contenuto a ogni dimensione.                                  */

body{ --col-pagina: var(--col-lista); --colonne: 1; }
.pagina-prosa{ --col-pagina: var(--col-prosa); }

/* Su uno schermo alto le pagine corte lasciavano il piede a mezz'aria, con
   il fondo pagina sotto. Qui il piede scende sempre in fondo. La home non
   e' toccata: ha una sua impaginazione gia' tarata.                       */
.pagina-elenco, .pagina-prosa, .pagina-base{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.pagina-elenco > footer,
.pagina-prosa  > footer,
.pagina-base   > footer{ margin-top: auto; }

@media (min-width: 1200px){
  .pagina-elenco{ --col-pagina: var(--col-larga); --colonne: 2; }
}
@media (min-width: 1900px){
  .pagina-elenco{ --col-pagina: 96rem; --colonne: 3; }
}
@media (min-width: 2600px){
  .pagina-elenco{ --col-pagina: 118rem; --colonne: 4; }
}

/* Colonne che scorrono, non una griglia a righe.
   Le schede hanno altezze molto diverse -- una locandina accanto a tre
   sintesi brevi -- e con una griglia la riga prende l'altezza della piu'
   alta, lasciando un buco accanto alle altre. Qui invece le schede si
   incastrano, come su una pagina di giornale: si scende lungo la colonna
   e si passa alla successiva, quindi l'ordine di lettura resta quello
   cronologico.                                                            */
.colonne{
  columns: var(--colonne);
  column-gap: clamp(14px, 1.2vw, 26px);
}
.colonne > *{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(14px, 1.2vw, 26px);
}

/* niente scorrimento laterale su schermi stretti */
html, body{ max-width: 100%; }
img, svg, video, iframe{ max-width: 100%; }