/* =============================================================
   layout.css — contenitori, griglie, ritmo verticale
   Starter siti · 00_Sistema/02_Template/sito/starter/
   -------------------------------------------------------------
   Regola che separa questo file da components.css:
   il CONTENITORE decide lo spazio, il COMPONENTE guarda solo
   verso l'interno. Una card non ha margin-bottom e non ha
   width: 400px — altrimenti il giorno che finisce in una griglia
   diversa si rompe, e non è colpa della griglia.
   ============================================================= */

/* -------------------------------------------------------------
   SKIP LINK — il primo link della pagina
   -------------------------------------------------------------
   Sta fuori schermo finché non riceve il fuoco da tastiera; a quel
   punto compare in alto a sinistra. Senza, chi naviga da tastiera
   deve ripassare l'intero menu su ogni pagina.
   ------------------------------------------------------------- */
.salta-al-contenuto {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--sfondo);
  color: var(--testo);
  border: 2px solid var(--fuoco);
  border-radius: var(--raggio-m);
  text-decoration: none;
  transform: translateY(-200%);
}

.salta-al-contenuto:focus-visible {
  transform: translateY(0);
}

/* -------------------------------------------------------------
   CONTENITORE — la larghezza massima, il gutter, il centraggio
   ------------------------------------------------------------- */
.contenitore {
  inline-size: 100%;
  max-inline-size: var(--largh-contenitore);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Contenitore stretto per il testo lungo (privacy, cookie, articoli).
   ⚠️ Il contenitore generale e la colonna di testo hanno DUE limiti
   diversi: 1200 px per il layout, ~65ch per la lettura. Usare uno
   solo dei due è l'errore che produce righe da 130 caratteri. */
.contenitore--stretto {
  max-inline-size: var(--largh-stretto);
}

/* Su questo blocco si legge: la misura di riga sta nell'intervallo. */
.prosa {
  max-inline-size: var(--misura-riga);
}

.prosa > * + * {
  margin-block-start: var(--sp-4);
}

/* Lo spazio SOPRA un titolo è maggiore di quello sotto: è ciò che
   lega il titolo al suo paragrafo e non al precedente. */
.prosa > :is(h2, h3, h4) {
  margin-block-start: var(--sp-7);
  margin-block-end: var(--sp-3);
}

.prosa > :is(h2, h3, h4) + * {
  margin-block-start: 0;
}

/* -------------------------------------------------------------
   SEZIONI — tre distanze, non dieci
   -------------------------------------------------------------
   IL VOCABOLARIO È CHIUSO. Una <section> porta SOLO queste cinque:

     .sezione            il ritmo base
     .sezione--stretta   distanza corta
     .sezione--ampia     distanza lunga
     .sezione--tenue     fondo alternato
     .banda--accento     fondo d'accento

   Serve altro → si cambia il TOKEN, non si aggiunge una classe.
   Una classe in più su una sezione è il primo passo con cui un
   sito smette di avere un ritmo e comincia ad averne dodici.

   E non con style="": la CSP lo blocca in silenzio (_headers,
   style-src 'self' senza 'unsafe-inline'). Il perché per esteso
   sta in LEGGIMI.md §«Cosa NON si tocca», e non si rispiega:
   una regola scritta in due posti diverge.

   Lo conta disciplina.mjs, dalla radice del workspace:
     node 00_Sistema/02_Template/sito/_strumenti/disciplina.mjs <cartella-sito>/
   ------------------------------------------------------------- */
.sezione {
  padding-block: var(--sez-m);
}

.sezione--stretta { padding-block: var(--sez-s); }
.sezione--ampia   { padding-block: var(--sez-l); }

/* Fondo alternato: dà ritmo senza aggiungere colore alla pagina. */
.sezione--tenue {
  background-color: var(--sfondo-tenue);
}

/* Banda con l'accento: la usa la CTA di sezione, una volta sola.
   ⚠️ Qui dentro il fuoco si INVERTE ridefinendo il token: nessun
   componente deve sapere su che fondo è finito. */
.banda--accento {
  --fuoco: var(--fuoco-inverso);
  background-color: var(--accento);
  color: var(--accento-testo);
}

/* ⚠️ `a` NELLA LISTA, e non è un dettaglio.
   Senza, il link tiene il --accento del reset, che qui è ESATTAMENTE
   il colore di fondo: contrasto 1.00:1, link invisibile. Misurato il
   2026-08-22 sul link "Come li trattiamo" del modulo di contatto. */
.banda--accento :is(h1, h2, h3, p, a) {
  color: inherit;
}

/* Ereditando il colore, il link dentro la banda non si distingue più
   dal testo: il colore non può restare l'unico segnale (SC 1.4.1).
   Ci pensa la sottolineatura, piena e ispessita.
   `:not(.bottone)` perché i bottoni hanno già la loro inversione in
   components.css e non vanno sottolineati. */
.banda--accento a:not(.bottone) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* Il :hover del reset porterebbe --accento-scuro, di nuovo illeggibile
   sul fondo accento: qui si ingrossa il tratto, non si cambia colore. */
.banda--accento a:not(.bottone):hover {
  color: inherit;
  text-decoration-thickness: 3px;
}

/* Titolo di sezione + occhiello, con la misura giusta. */
.intestazione-sezione {
  max-inline-size: var(--misura-riga);
  margin-block-end: var(--sp-6);
}

.intestazione-sezione > * + * {
  margin-block-start: var(--sp-3);
}

/* -------------------------------------------------------------
   AUTO-GRID — la griglia che non ha bisogno di media query
   -------------------------------------------------------------
   Cambi solo --min-col: la griglia decide da sola quante colonne
   ci stanno. Il min(…, 100%) evita lo sbordamento quando il
   contenitore è più stretto della colonna minima — che è
   esattamente il caso a 360 px, dove i layout si rompono.
   -------------------------------------------------------------
   UN SOLO PUNTO DI ROTTURA IN TUTTO IL SITO. È la sede della
   regola: chi la cerca la trova QUI, e negli altri file c'è solo
   il rimando. Tre copie della stessa regola divergono.

   Perché: ogni larghezza di rottura in più è un layout in più da
   aprire e guardare a ogni consegna. Con la griglia automatica e
   il @container non serve quasi mai — lo starter oggi sta a ZERO
   @media a larghezza e UN @container a 48rem, misurato.

   La scala delle alternative, in ordine: ① niente (la griglia
   basta) → ② @container sul contenitore che deve cambiare → ③ UN
   @media, e solo se la struttura della pagina cambia davvero.
   Il quarto gradino non esiste: se ne servono due, il layout è
   sbagliato a monte.
   ------------------------------------------------------------- */
.griglia {
  --min-col: 17rem; /* ~272 px */
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min-col), 100%), 1fr)
  );
}

.griglia--larga  { --min-col: 22rem; }
.griglia--stretta{ --min-col: 13rem; }

/* Due colonne asimmetriche (testo + immagine) quando c'è spazio.
   Container query, non media query: dipende dallo spazio che il
   contenitore ha davvero, non da quanto è largo lo schermo. */
.affiancate {
  container-type: inline-size;
}

.affiancate > .affiancate__interno {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@container (min-width: 48rem) {
  .affiancate > .affiancate__interno {
    grid-template-columns: 1fr 1fr;
  }
}

/* Riga di elementi che va a capo da sola (bottoni, tag, loghi). */
.fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.fila--centrata { justify-content: center; }

/* Distanziatore verticale generico: figli diretti separati da uno
   spazio unico. Evita i margin-bottom sparsi sui componenti. */
.impila       { display: grid; gap: var(--sp-4); }
.impila--corta{ gap: var(--sp-2); }
.impila--lunga{ gap: var(--sp-6); }

/* -------------------------------------------------------------
   TESTA DEL SITO
   ------------------------------------------------------------- */
.testa {
  border-block-end: 1px solid var(--bordo);
  background-color: var(--sfondo);
}

.testa__interno {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-4);
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-titoli);
  font-size: var(--testo-1);
  line-height: var(--interlinea-1);
  letter-spacing: var(--crenatura-1);
  font-weight: var(--peso-titoli);
  color: var(--testo);
  text-decoration: none;
}

/* Navigazione: nessun JavaScript. Su schermi stretti va a capo.
   Un menu a panino su una vetrina da 5-8 pagine è JavaScript che
   si paga in bug e non si vede in conversioni. */
.nav-principale ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-principale a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tocco-min);
  color: var(--testo);
  text-decoration: none;
}

.nav-principale a:hover,
.nav-principale a[aria-current="page"] {
  color: var(--accento);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* -------------------------------------------------------------
   PIÈ DI PAGINA
   ------------------------------------------------------------- */
.pie {
  padding-block: var(--sez-s);
  border-block-start: 1px solid var(--bordo);
  background-color: var(--sfondo-tenue);
  font-size: var(--testo--1); /* 14 px al minimo: il pavimento vale anche qui */
}

.pie__griglia {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.pie ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.pie a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tocco-min);
  color: var(--testo);
}

.pie__legale {
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--bordo);
  color: var(--testo-tenue);
}

/* -------------------------------------------------------------
   UTILITÀ
   ------------------------------------------------------------- */

/* Visibile agli screen reader, invisibile a schermo. */
.solo-lettori {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.centrato    { text-align: center; }
.testo-tenue { color: var(--testo-tenue); }

/* Elenco che serve alla semantica ma non deve sembrare un elenco
   (griglie di card scritte come <ul>, che è il markup giusto). */
.lista-nuda { list-style: none; padding: 0; margin: 0; }

/* ⚠️ Queste due esistono per NON scrivere style="" nell'HTML.
   Non è pignoleria: la CSP di _headers dichiara style-src 'self',
   che blocca gli attributi style in linea. Un margine scritto
   nell'HTML non viene applicato e nessuno capisce perché. */
.stacco-sotto { margin-block-end: var(--sp-7); }
.stacco-sopra { margin-block-start: var(--sp-7); }

/* Nessuna altezza fissa sui contenitori di testo: se l'utente
   forza line-height 1.5 (SC 1.4.12) il layout non deve rompersi.
   Questa classe esiste solo per ricordarlo a chi legge il file. */
.no-altezza-fissa { block-size: auto; }