/* ==========================================================================
   layout-tre-colonne.css
   Studio ALESSIO ASCANELLI

   Scopo:
   1) i due frame laterali hanno ESATTAMENTE la stessa larghezza;
   2) il frame centrale si dilata per occupare tutto lo spazio residuo;
   3) l'insieme dei tre frame ha la stessa larghezza della barra superiore
      (cioe' del contenitore .contenitore usato da barra, testata e menu).

   Il file va caricato DOPO css/tema.css: essendo successivo nella cascata,
   prevale sulle regole omonime a parita' di specificita'.

   NOTA: se in tema.css il contenitore del sito ha una larghezza massima
   diversa da 1280px, e' sufficiente modificare qui la variabile
   --larghezza-sito: barra superiore e colonne restano comunque allineate,
   perche' entrambe leggono la stessa variabile.
   ========================================================================== */

:root {
  --larghezza-sito: 1280px;   /* larghezza massima del contenuto del sito   */
  --larghezza-laterale: 280px;/* larghezza IDENTICA dei due frame laterali  */
  --distanza-colonne: 24px;   /* spazio fra le colonne                      */
  --margine-interno: 16px;    /* rientro laterale interno                   */
}

/* Contenitore comune a barra superiore, testata e navigazione ------------ */
.contenitore {
  width: 100%;
  max-width: var(--larghezza-sito);
  margin-inline: auto;
  padding-inline: var(--margine-interno);
}

/* Corpo della pagina: griglia a tre colonne ----------------------------- */
.pagina {
  width: 100%;
  max-width: var(--larghezza-sito);
  margin-inline: auto;
  padding-inline: var(--margine-interno);
  display: grid;
  /* laterale sinistro | centrale elastico | laterale destro
     le due misure esterne sono la stessa variabile: larghezza identica */
  grid-template-columns:
      var(--larghezza-laterale)
      minmax(0, 1fr)
      var(--larghezza-laterale);
  gap: var(--distanza-colonne);
  align-items: start;
}

/* Nel codice HTML il <main> precede le due <aside>: la griglia riporta
   ciascun blocco nella colonna corretta senza toccare l'ordine del markup
   (che resta ottimale per accessibilita' e lettori di schermo).           */
.pagina > .laterale-1 { grid-column: 1; grid-row: 1; }
.pagina > .principale { grid-column: 2; grid-row: 1; min-width: 0; }
.pagina > .laterale-2 { grid-column: 3; grid-row: 1; }

/* Evita che tabelle o immagini larghe sfondino la colonna centrale ------ */
.pagina > .principale img,
.pagina > .principale table { max-width: 100%; }

/* --- Adattamento a schermi ridotti ------------------------------------- */

/* Tablet orizzontale: colonne laterali piu' strette, sempre uguali fra loro */
@media (max-width: 1200px) {
  :root { --larghezza-laterale: 240px; }
}

/* Tablet verticale: contenuto a tutta larghezza, laterali affiancati sotto */
@media (max-width: 1024px) {
  .pagina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina > .principale { grid-column: 1 / -1; grid-row: 1; }
  .pagina > .laterale-1 { grid-column: 1; grid-row: 2; }
  .pagina > .laterale-2 { grid-column: 2; grid-row: 2; }
}

/* Telefono: colonna unica nell'ordine del codice HTML */
@media (max-width: 720px) {
  .pagina { grid-template-columns: minmax(0, 1fr); }
  .pagina > .principale,
  .pagina > .laterale-1,
  .pagina > .laterale-2 { grid-column: 1; grid-row: auto; }
}