/* =============================================================
   components.css — i pezzi che si ripetono
   Starter siti · 00_Sistema/02_Template/sito/starter/
   -------------------------------------------------------------
   Ogni componente guarda solo verso l'interno: niente margini
   esterni, niente larghezze fisse. Lo spazio attorno lo decide
   il contenitore (layout.css).

   ⚠️ Qui NON si scrive un colore, una dimensione o una distanza
   a mano. Tutto arriva da variables.css. Se un valore ti serve e
   non esiste come token, il posto giusto per aggiungerlo è lì.
   ============================================================= */

/* -------------------------------------------------------------
   TITOLI — la scala applicata
   -------------------------------------------------------------
   Disciplina: massimo 3-4 gradini per sezione. Se in una schermata
   compaiono sei dimensioni diverse, non è gerarchia, è disordine.
   Il gradino 5 (display) si usa UNA volta in tutto il sito:
   l'h1 dell'apertura.
   ------------------------------------------------------------- */
/* ⚠️ Ogni gradino porta CINQUE cose nella stessa regola: famiglia,
   corpo, interlinea, crenatura, peso. Non è pignoleria: è l'unico
   modo perché l'abbinata non si possa sbagliare. Chi monta la pagina
   sceglie CHE COSA è quel testo, non quanto è grande, e non deve
   ricordarsi che a 55 px l'interlinea si stringe.

   ⚠️ Le classi valgono su QUALSIASI tag. Prima <p class="titolo-2">
   veniva fuori a peso 400, col font del corpo e interlinea 1.6:
   stessa classe, risultato diverso da un <h2>. Per questo famiglia e
   peso stanno QUI e non solo su h1-h6 nel reset.

   ⚠️ Questo file è caricato DOPO reset.css (index.html righe 61-64):
   è la condizione perché l'interlinea qui vinca. Chi riordina i
   <link> rompe la regola in silenzio.

   ⚠️ SC 1.4.12 non è a rischio: la crenatura è in em, e un foglio
   utente che forza 0.12em la scavalca. Il layout regge perché
   text-wrap: balance e overflow-wrap: break-word sono già nel reset. */

h1, .titolo-1,
h2, .titolo-2,
h3, .titolo-3,
h4,
.titolo-display {
  font-family: var(--font-titoli);
  font-weight: var(--peso-titoli);
  text-wrap: balance;
}

.titolo-display { font-size: var(--testo-5); line-height: var(--interlinea-5); letter-spacing: var(--crenatura-5); }
h1, .titolo-1   { font-size: var(--testo-4); line-height: var(--interlinea-4); letter-spacing: var(--crenatura-4); }
h2, .titolo-2   { font-size: var(--testo-3); line-height: var(--interlinea-3); letter-spacing: var(--crenatura-3); }
h3, .titolo-3   { font-size: var(--testo-2); line-height: var(--interlinea-2); letter-spacing: var(--crenatura-2); }
h4              { font-size: var(--testo-1); line-height: var(--interlinea-1); letter-spacing: var(--crenatura-1); }

.occhiello      { font-size: var(--testo-1); line-height: var(--interlinea-1); letter-spacing: var(--crenatura-1); color: var(--testo-tenue); font-weight: 400; }
.didascalia     { font-size: var(--testo--1); color: var(--testo-tenue); }

/* Etichetta piccola sopra un titolo di sezione.
   ⚠️ Decisione, non pulizia: prima ereditava --font-testo, qui prende
   --font-titoli. Invisibile finché le due famiglie coincidono, ma su
   un progetto a due famiglie cambia l'occhiello di TUTTE le sezioni.
   ⚠️ Niente line-height qui dentro: sarebbe un valore a mano in questo
   file, cioè il debito che questo blocco chiude. È inline-block su una
   riga, l'1.6 ereditato non fa danno. Se un giorno serve: variables.css §4. */
.etichetta {
  display: inline-block;
  font-family: var(--font-titoli);
  font-size: var(--testo--1);
  font-weight: var(--peso-titoli);
  letter-spacing: var(--crenatura-maiuscolo);
  text-transform: uppercase;
  color: var(--accento);
}

.banda--accento .etichetta { color: var(--accento-testo); }

/* -------------------------------------------------------------
   BOTTONI
   -------------------------------------------------------------
   Una sola CTA primaria visivamente predominante per pagina.
   Le secondarie sono ghost: si vedono, non gridano.

   Altezza minima: --tocco-comodo (44 px). Il pavimento assoluto
   di ogni cosa cliccabile è --tocco-min (24 px), ma un bottone che
   sta a 24 px è un bottone che si sbaglia col pollice.
   ------------------------------------------------------------- */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: var(--tocco-comodo);
  min-inline-size: var(--tocco-comodo);
  padding: var(--sp-3) var(--sp-5);
  border: 2px solid transparent;
  border-radius: var(--raggio-m);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--durata-veloce) var(--curva),
              border-color var(--durata-veloce) var(--curva);
}

/* Primario: fondo accento, testo bianco. 6.70:1 — passa AA. */
.bottone--primario {
  background-color: var(--accento);
  color: var(--accento-testo);
}

.bottone--primario:hover {
  background-color: var(--accento-scuro);
  color: var(--accento-testo);
}

/* Secondario: bordo forte, nessun riempimento.
   Il bordo usa --bordo-forte perché porta informazione (dice dove
   si clicca) e deve stare ≥3:1 sul fondo (SC 1.4.11). */
.bottone--ghost {
  background-color: transparent;
  border-color: var(--bordo-forte);
  color: var(--testo);
}

.bottone--ghost:hover {
  border-color: var(--testo);
  color: var(--testo);
}

/* Dentro la banda accento i ruoli si invertono. */
.banda--accento .bottone--primario {
  background-color: var(--accento-testo);
  color: var(--accento);
}

.banda--accento .bottone--ghost {
  border-color: var(--accento-testo);
  color: var(--accento-testo);
}

/* ⚠️ Telefono e WhatsApp: 48 px, e non si discute.
   È l'unico punto in cui il sito produce soldi. */
.bottone--telefono {
  min-block-size: var(--tocco-telefono);
  min-inline-size: var(--tocco-telefono);
  font-size: var(--testo-1);
}

.bottone--largo { inline-size: 100%; }

/* ⚠️ REGOLA TRASVERSALE, e non è ridondante con .bottone--telefono.
   QUALUNQUE link che fa partire una chiamata o apre WhatsApp è alto
   almeno 48 px, ovunque si trovi — compreso il piè di pagina, dove
   non sembra un bottone e proprio per questo ci si dimentica.
   Il primo collaudo di questo starter ha trovato esattamente quello:
   il numero nel piè di pagina era un link da 24 px.
   Vive qui, agganciato all'href, così vale anche sui link che
   qualcuno aggiungerà fra sei mesi senza leggere questo file. */
a[href^="tel:"],
a[href^="sms:"],
a[href*="wa.me"] {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tocco-telefono);
}

/* -------------------------------------------------------------
   CARD
   ------------------------------------------------------------- */
.card {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-5);
  background-color: var(--sfondo-elevato);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
}

/* Card interamente cliccabile: il bordo diventa informativo. */
.card--cliccabile {
  border-color: var(--bordo-forte);
  transition: border-color var(--durata-veloce) var(--curva),
              box-shadow var(--durata-veloce) var(--curva);
}

.card--cliccabile:hover {
  border-color: var(--accento);
  box-shadow: var(--ombra-sollevata);
}

.card__titolo {
  font-family: var(--font-titoli);
  font-size: var(--testo-2);
  line-height: var(--interlinea-2);
  letter-spacing: var(--crenatura-2);
  font-weight: var(--peso-titoli);
}

/* Il numero degli step di "Come funziona": generato dal CSS,
   così non è testo da tradurre né da rinumerare a mano. */
.passi {
  counter-reset: passo;
  list-style: none;
  padding: 0;
}

.passi > li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.passi > li::before {
  content: counter(passo);
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--raggio-tondo);
  background-color: var(--accento);
  color: var(--accento-testo);
  font-family: var(--font-titoli);
  font-weight: var(--peso-titoli); /* il carattere dei titoli porta il loro peso */
}

/* -------------------------------------------------------------
   PROVA SOCIALE
   -------------------------------------------------------------
   ⚠️ La sezione della prova non si riveste con nessuna direzione
   forte: se la fai urlare, smette di provare. Qui dentro niente
   gradienti, niente animazioni, niente accento a tutta banda.
   ------------------------------------------------------------- */
.testimonianza {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-inline-start: 4px solid var(--accento);
  background-color: var(--sfondo-elevato);
}

/* ⚠️ Qui l'interlinea NON si tocca: una testimonianza è testo che si
   legge, resta a 1.6. Si aggiunge solo la crenatura del gradino. */
.testimonianza blockquote {
  margin: 0;
  font-size: var(--testo-1);
  letter-spacing: var(--crenatura-1);
  max-inline-size: var(--misura-riga);
}

.testimonianza figcaption {
  font-size: var(--testo--1);
  color: var(--testo-tenue);
}

/* -------------------------------------------------------------
   IMMAGINI
   -------------------------------------------------------------
   ⚠️ width e height SEMPRE dichiarati nell'HTML, anche se poi il
   CSS li sovrascrive: servono al browser per riservare lo spazio
   e non far saltare la pagina mentre carica (CLS).
   ------------------------------------------------------------- */
.figura {
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}

.figura img {
  inline-size: 100%;
  border-radius: var(--raggio-l);
  object-fit: cover;
}

.figura figcaption {
  font-size: var(--testo--1);
  color: var(--testo-tenue);
}

/* Testo sopra una foto: il velo è OBBLIGATORIO.
   Non sai quale foto caricherà il cliente, quindi il design deve
   reggere anche con la peggiore.
   ⚠️ I numeri stanno nel token --velo-foto (variables.css §1-bis),
   non qui: prima il commento prometteva «Nero al 55%» mentre il
   gradiente scriveva 0.70→0.35, e il capo debole misurava 2,4415:1
   contro i 4,5:1 di AA. Un commento e un valore che divergono sono
   peggio di nessun commento. */
.foto-con-testo {
  position: relative;
  display: grid;
  border-radius: var(--raggio-l);
  overflow: hidden;
}

.foto-con-testo > img {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.foto-con-testo::after {
  content: "";
  grid-area: 1 / 1;
  background: var(--velo-foto);
}

.foto-con-testo > .foto-con-testo__testo {
  grid-area: 1 / 1;
  z-index: 1;
  align-self: end;
  padding: var(--sp-5);
  color: var(--testo-su-velo);
}

/* -------------------------------------------------------------
   FAQ — <details>/<summary>, zero JavaScript
   ------------------------------------------------------------- */
.faq {
  display: grid;
  gap: var(--sp-2);
  max-inline-size: var(--misura-riga);
}

.faq details {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background-color: var(--sfondo-elevato);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-block-size: var(--tocco-comodo);
  padding: var(--sp-4);
  font-family: var(--font-titoli);
  font-weight: var(--peso-titoli);
  cursor: pointer;
}

.faq summary::after {
  content: "+";
  font-size: var(--testo-2);
  line-height: 1;
  color: var(--accento);
}

.faq details[open] summary::after { content: "\2013"; } /* trattino */

.faq details > :not(summary) {
  padding: 0 var(--sp-4) var(--sp-4);
}

/* -------------------------------------------------------------
   FORM
   -------------------------------------------------------------
   ⚠️ <label> vera associata a ogni campo, mai il solo placeholder:
   il placeholder sparisce appena scrivi e non lo legge nessuno
   screen reader come etichetta.
   ⚠️ Nessuna casella di consenso su un modulo di contatto: la base
   è l'art. 6.1.b (misure precontrattuali). Chiedere il consenso
   dove non serve lo rende invalido.
   ------------------------------------------------------------- */
.modulo {
  display: grid;
  gap: var(--sp-5);
  max-inline-size: var(--largh-stretto);
}

.campo {
  display: grid;
  gap: var(--sp-2);
}

.campo label {
  font-weight: 700;
}

.campo input,
.campo textarea,
.campo select {
  min-block-size: var(--tocco-comodo);
  padding: var(--sp-3);
  border: 1px solid var(--bordo-forte); /* ≥3:1 sul fondo: SC 1.4.11 */
  border-radius: var(--raggio-s);
  background-color: var(--sfondo-elevato);
  color: var(--testo);
}

.campo textarea {
  min-block-size: 8rem;
  resize: vertical;
}

.campo input:hover,
.campo textarea:hover {
  border-color: var(--testo);
}

/* Aiuto sotto al campo: 14 px, il pavimento. Mai più piccolo. */
.campo__aiuto {
  font-size: var(--testo--1);
  color: var(--testo-tenue);
}

/* Errore: colore + testo. Il colore non basta mai da solo (SC 1.4.1). */
.campo__errore {
  font-size: var(--testo--1);
  font-weight: 700;
  color: var(--errore);
}

.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--errore);
  border-width: 2px;
}

/* Messaggio di esito, letto ad alta voce quando cambia (aria-live). */
.esito {
  padding: var(--sp-4);
  border-radius: var(--raggio-m);
  border-inline-start: 4px solid var(--ok);
  background-color: var(--sfondo-tenue);
}

.esito--errore { border-inline-start-color: var(--errore); }

/* Trappola per i bot: nascosta agli umani, non agli automi.
   ⚠️ Non usare display:none — alcuni bot lo riconoscono. */
.esca {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* -------------------------------------------------------------
   TABELLE
   -------------------------------------------------------------
   ⚠️ Una tabella è il pezzo che sborda a 360 px più di ogni altro.
   Si avvolge sempre in .tabella-scorrevole: scorre dentro il suo
   contenitore, non fa scorrere la pagina.
   tabindex="0" sul contenitore così ci si arriva anche da tastiera.
   ------------------------------------------------------------- */
.tabella-scorrevole {
  overflow-x: auto;
  max-inline-size: 100%;
}

table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--testo-0);
}

caption {
  text-align: start;
  margin-block-end: var(--sp-2);
}

th,
td {
  padding: var(--sp-3);
  border-block-end: 1px solid var(--bordo);
  text-align: start;
  vertical-align: top;
}

thead th {
  border-block-end: 2px solid var(--bordo-forte);
  font-family: var(--font-titoli);
}

/* -------------------------------------------------------------
   AVVISI
   ------------------------------------------------------------- */
.avviso {
  padding: var(--sp-4);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-m);
  background-color: var(--sfondo-tenue);
}

/* Etichetta di trasparenza IA (art. 50 AI Act) nel colofone.
   Standard di casa: si dichiara ogni immagine generata pubblicata,
   anche dove la legge non lo imporrebbe. */
.etichetta-ia {
  font-size: var(--testo--1);
  color: var(--testo-tenue);
}