/* =====================================================================
   20 — IMPIANTO
   Contenitori, sezioni, griglie. Mobile first: le media query sono tutte
   in min-width, sui tre breakpoint dichiarati (620 · 1000 · 1280).
   ===================================================================== */

/* --- Contenitore ----------------------------------------------------- */
.w{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Colonna di lettura: la larghezza la decide --measure, non il contenitore. */
.w--text{ max-width:calc(var(--container-text) + var(--gutter) * 2); }

/* --- Sezioni --------------------------------------------------------- */
.section{ padding-block:var(--section-y); }

/* Fascia alternata. Sulla carta piu' scura il colore pieno non arriva a
   4,5:1, quindi l'accento passa alla variante scura: e' una sostituzione di
   token, non una regola in piu' da ricordare. */
.section--alt{
  background:var(--paper-2);
  --cta:var(--deep);
}

/* Fascia a colore pieno. Il testo sopra --brand e' --on (scuro): il bianco
   su questo ciano darebbe 2,88:1. */
.section--full{
  background:var(--brand);
  color:var(--on);
}
.section--full a{ color:var(--on); }

/* --- Intestazione di sezione ---------------------------------------- */
.head{ max-width:var(--measure); }
.head > :last-child{ margin-bottom:0; }
.lead{
  font-size:var(--fs-lead);
  line-height:1.5;
  color:var(--ink-2);
}

/* --- Griglie --------------------------------------------------------
   Una sola meccanica: `--cols` dice quante colonne al massimo, e le
   colonne non scendono sotto la larghezza minima leggibile. */
.grid{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:1fr;
}
@media (min-width:620px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px){
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* Due colonne asimmetriche: indice a sinistra, contenuto a destra. */
.split{ display:grid; gap:var(--s-6); grid-template-columns:1fr; }
@media (min-width:1000px){
  .split{ grid-template-columns:minmax(0,34%) minmax(0,66%); gap:var(--s-8); }
}

/* --- Ritmo verticale ------------------------------------------------ */
.stack > * + *{ margin-top:var(--s-4); }
.stack--wide > * + *{ margin-top:var(--s-6); }

/* --- Azioni in fila -------------------------------------------------
   8px e' la distanza minima fra due aree toccabili; qui e' piu' larga. */
.acts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-5);
  margin-top:var(--s-6);
}

/* --- Corpo principale ----------------------------------------------- */
main{ display:block; }

/* La testata e' sticky: un'ancora interna non deve finirci sotto. */
:target{ scroll-margin-top:calc(var(--header-h) + var(--s-4)); }
@media (min-width:1000px){
  :target{ scroll-margin-top:calc(var(--header-h-desk) + var(--s-4)); }
}