/* Impianto di pagina — una misura sola per tutto il sito.
 *
 * REGOLA: il max-width non va MAI sulla sezione, altrimenti sparisce lo sfondo
 * a piena larghezza. La sezione resta larga quanto lo schermo e ospita lo
 * sfondo; il contenuto si allinea con padding laterali calcolati.
 */

/* UNA misura sola, ed e' quella del design system.
 *
 * sito.css allinea intestazione e piede con:
 *   padding: X max(var(--sp-6), (100% - var(--largh-guscio)) / 2)
 * Qui si riusa lo stesso identico calcolo per le fasce del corpo, cosi' il
 * bordo sinistro del logo, dell'H1 e del contenuto cade sullo stesso pixel.
 * Non si introducono numeri nuovi: --largh-guscio (1080px) e --sp-6 (24px)
 * arrivano dal design system e restano l'unica fonte di verita'.
 */
:root {
  --misura: var(--largh-guscio);
  --gronda: var(--sp-6);
  --lato: max(var(--gronda), (100% - var(--misura)) / 2);
  /* .cfg e .contenitore si centravano a 1120px, cioe' 40px piu' larghi del
     guscio: allineati al resto. */
  --largh-pagina: var(--largh-guscio);
}

/* --- Guscio: intestazione e piede allineati al contenuto ----------------- */
.intestazione,
.pie {
  max-width: none;
  width: 100%;
  padding-inline: var(--lato);
  box-sizing: border-box;
}

/* --- Home: fasce a piena larghezza, contenuto allineato ----------------- */
.pagina--home {
  max-width: none;
  padding-inline: 0;
}

.pagina--home > section,
.pagina--home > .cta,
.pagina--home > .pagina__testata {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: var(--lato);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  box-sizing: border-box;
}

/* Fasce alternate: lo sfondo copre tutta la larghezza. */
.pagina--home > section:nth-of-type(even) { background: var(--ink-050, #f4f6f9); }
.pagina--home > .pagina__testata { background: var(--ink-050, #f4f6f9); }
.pagina--home > .cta:last-child { background: var(--brand-900, #12283f); color: #fff; }
.pagina--home > .cta:last-child h2,
.pagina--home > .cta:last-child small { color: inherit; }

/* Dentro la fascia nessun figlio si ricentra per conto suo. */
.pagina--home > section > *,
.pagina--home > .cta > *,
.pagina--home > .pagina__testata > * { margin-inline: 0; }

/* Misure di lettura: massimi dentro la colonna, non colonne a se'. */
.pagina--home > section > h2 { max-width: 26ch; }
.pagina--home > section > p { max-width: 68ch; }
.pagina--home > .pagina__testata h1 { max-width: 20ch; }
.pagina--home > .pagina__testata .pagina__sommario { max-width: 60ch; }
.pagina--home .motivi,
.pagina--home .passi,
.pagina--home .elenco-settori,
.pagina--home .caratteristiche,
.pagina--home .prezzo { max-width: none; }

/* --- Pagine di contenuto ------------------------------------------------ */
.pagina:not(.pagina--home):not(.pagina--configuratore) { --pagina-misura: var(--misura); }

.pagina:not(.pagina--home):not(.pagina--configuratore) > .pagina__testata,
.pagina:not(.pagina--home):not(.pagina--configuratore) > .pagina__coda,
.pagina:not(.pagina--home):not(.pagina--configuratore) > section,
.pagina:not(.pagina--home):not(.pagina--configuratore) > div {
  grid-column: testo-inizio / testo-fine;
}

.pagina:not(.pagina--home):not(.pagina--configuratore) > h2 { max-width: 30ch; }
.pagina:not(.pagina--home):not(.pagina--configuratore) > h3 { max-width: 36ch; }
.pagina:not(.pagina--home):not(.pagina--configuratore) > p,
.pagina:not(.pagina--home):not(.pagina--configuratore) > ul,
.pagina:not(.pagina--home):not(.pagina--configuratore) > ol { max-width: 74ch; }
.pagina:not(.pagina--home):not(.pagina--configuratore) > .pagina__testata > h1 { max-width: 20ch; }
.pagina:not(.pagina--home):not(.pagina--configuratore) > .pagina__testata > .pagina__sommario { max-width: 70ch; }

.pagina:not(.pagina--home):not(.pagina--configuratore) table,
.pagina:not(.pagina--home):not(.pagina--configuratore) .cfg,
.pagina:not(.pagina--home):not(.pagina--configuratore) .cta { width: 100%; max-width: none; }

/* --- Calcolatore dentro una pagina strumento ---------------------------- */
.pagina:not(.pagina--home):not(.pagina--configuratore) > .cfg { display: block; padding: 0; }
.pagina:not(.pagina--home):not(.pagina--configuratore) > .cfg > .cfg__pannello {
  width: 100%; max-width: none; margin: 0; padding-inline: 0;
}
@media (min-width: 48rem) {
  .pagina:not(.pagina--home):not(.pagina--configuratore) > .cfg .cfg__campi {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5, 1.5rem); align-items: start;
  }
  .pagina:not(.pagina--home):not(.pagina--configuratore) > .cfg .cfg__sintesi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* home.css aggiunge un rientro suo dentro le fasce: lo azzero, il bordo
   sinistro deve essere identico a quello di intestazione e piede. */
.pagina--home > section > *,
.pagina--home > .cta > *,
.pagina--home > .pagina__testata > * { padding-inline: 0; border-inline: 0; }

/* Azzeramento definitivo dei rientri interni e alternanza delle fasce.
   Il selettore e' volutamente specifico: home.css imposta padding e bordi
   sui figli diretti, e senza questo il titolo parte 4px piu' a destra
   dell'intestazione. */
.pagina--home > .pagina__testata > *,
.pagina--home > section > *,
.pagina--home > .cta > * {
  padding-left: 0 !important;
  border-left: 0 !important;
  margin-left: 0 !important;
}

/* Fasce: apertura chiara, poi alternanza a partire da "Come funziona". */
.pagina--home > .pagina__testata { background: #fff; }
.pagina--home > section { background: #fff; }
.pagina--home > section:nth-of-type(odd) { background: var(--ink-050, #f4f6f9); }
.pagina--home > .cta:last-child { background: var(--brand-900, #0d1f31); color: #fff; }
.pagina--home > .cta:last-child h2 { color: #fff; }
.pagina--home > .cta:last-child p,
.pagina--home > .cta:last-child small { color: rgba(255,255,255,.82); }

/* Il configuratore non usa la griglia di .pagina: ha il suo layout completo in
   configuratore.css. Qui gli si dà solo la stessa misura del resto del sito. */
.pagina--configuratore {
  width: 100%;
  padding-inline: var(--lato);
  padding-block: clamp(2rem, 5vw, 3.5rem);
  box-sizing: border-box;
}

/* Un solo padrone del layout per pagina: qui il rientro laterale lo dà
   l'articolo, quindi .cfg smette di ricentrarsi per conto suo. Altrimenti i
   due rientri si sommano e il pannello si strozza. */
.pagina--configuratore > .cfg {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  padding-block: 0;
}
.pagina--configuratore > .pagina__testata { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.pagina--configuratore > .pagina__testata h1 { max-width: 20ch; }
.pagina--configuratore > .pagina__testata .pagina__sommario { max-width: 66ch; }
.pagina--configuratore > .pagina__coda { margin-top: clamp(2rem, 5vw, 3rem); max-width: 74ch; }

/* --- Opt-in marketing nel paywall --------------------------------------
 * Sta qui e non in risultati.css: i fogli del design system restano
 * riesportabili senza perdere questa regola. Serve perche'
 * .cfg__paywall-form input vale per i campi di testo (larghezza piena,
 * altezza minima da tocco) e su una casella di spunta darebbe un quadrato
 * enorme largo quanto il form.
 */
.cfg__consenso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: start;
  font-size: var(--fs-1);
  font-weight: var(--fw-normale, 400);
  line-height: var(--lh-corpo);
  color: var(--ink-700);
}
.cfg__paywall-form .cfg__consenso input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--brand-600);
}

/* --- Barra dei passi sotto l'intestazione fissa -------------------------
 * .cfg__passi e' sticky a top: var(--sp-6), ma sopra c'e' .intestazione che e'
 * a sua volta sticky a top: 0: scorrendo, il primo passo finiva nascosto
 * dietro all'intestazione. L'altezza reale dell'intestazione e' 68px
 * reale e' 73px, qui dichiarata come token cosi' se
 * cambia si cambia in un punto solo.
 */
:root { --h-intestazione: 73px; }
.cfg__passi { top: calc(var(--h-intestazione) + var(--sp-4)); }

/* --- Schede settore non cliccabili sulla landing -------------------------
 * elenco-settori nasce con un <a> dentro ogni voce. Sulla landing le voci
 * sono informative: stesso aspetto, nessun link. Senza questa regola le
 * schede perderebbero riempimento e bordo, perche' in home.css lo stile sta
 * sull'ancora e non sul <li>.
 */
.elenco-settori--fermo > li {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: var(--bd);
  border-radius: var(--r-3);
}
.elenco-settori--fermo > li > span { font-weight: var(--fw-forte); }
.elenco-settori--fermo > li > small { color: var(--ink-700); font-size: var(--fs-1); }

/* --- Intestazione della landing -----------------------------------------
 * Senza menu il logo e la chiamata all'azione restano ai due estremi.
 */
.intestazione--landing { justify-content: space-between; }