/* =============================================================================
   businessplan-facile.it — home.css
   Solo la home. Tutte le regole sono agganciate a .pagina--home: le pagine
   editoriali non vengono toccate.
   Richiede base.css e sito.css (griglia .pagina, guscio, componenti).

   Perché la home si deve staccare: una pagina editoriale è una colonna di
   testo da leggere dall'inizio alla fine; la home è un indice di argomenti che
   si guarda a salti. Quindi qui le sezioni alternano larghezza e fondo — piena
   larghezza su bianco, colonna stretta sul fondo di pagina — e il ritmo verticale
   è più ampio. Nessun gradiente, nessuna illustrazione, nessuna ombra diffusa:
   il distacco lo fanno i fili orizzontali e i cambi di fondo.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. IMPIANTO
   La griglia di .pagina resta quella delle pagine editoriali (colonna di testo
   fra due margini), ma qui le sezioni prendono tutta la larghezza e gestiscono
   da sé la propria colonna interna. Così una fascia di fondo arriva ai bordi
   della finestra mentre il testo resta allineato al guscio.
   -------------------------------------------------------------------------- */

.pagina--home {
  --home-colonna: var(--largh-guscio, 1080px);
  --home-misura: 34em;
  row-gap: 0;
  padding-block: 0 0;
}

/* Ogni sezione di primo livello è una fascia a piena larghezza. */
.pagina--home > .pagina__testata,
.pagina--home > section,
.pagina--home > .cta {
  grid-column: pieno-inizio / pieno-fine;
  width: 100%;
  padding-inline: max(var(--sp-6), (100% - var(--home-colonna)) / 2);   /* stesso pavimento del guscio (--sp-6): sotto i 1128px le sezioni restano allineate al logo e al piè */
}

/* Fasce sul fondo di pagina (default) e fasce su superficie bianca:
   si alternano, con un filo che le separa. La 2ª e la 4ª sezione sono bianche. */
.pagina--home > section { padding-block: var(--sp-16); }
.pagina--home > section:nth-of-type(2n) {
  background: var(--surface);
  border-block: var(--bd);
}

/* -----------------------------------------------------------------------------
   2. TESTATA
   Non è il titolo di un articolo: è la frase con cui l'utente arriva. Grande,
   su bianco, con il sommario a misura corta e i pulsanti in linea.
   -------------------------------------------------------------------------- */

.pagina--home > .pagina__testata {
  padding-block: var(--sp-16) var(--sp-12);
  background: var(--surface);
  border-bottom: var(--bd);
  gap: var(--sp-4);
}
.pagina--home > .pagina__testata h1 {
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 22ch;
}
.pagina--home > .pagina__testata .pagina__sommario,
.pagina--home > .pagina__testata > p:first-of-type {
  font-size: var(--fs-4);
  line-height: 1.5;
  color: var(--ink-700);
  max-width: 42ch;
}
/* I link d'azione della testata: il primo è il bottone pieno, il secondo è
   testuale. Nessuna classe aggiuntiva — conta la posizione. */
.pagina--home > .pagina__testata > p:last-of-type { margin: 0; }
.pagina--home > .pagina__testata a[href] {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: var(--sp-3);
  margin-right: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-2);
  font-size: var(--fs-3);
  font-weight: var(--fw-forte);
  text-decoration: none;
}
.pagina--home > .pagina__testata a[href]:first-of-type {
  background: var(--brand-600);
  border: 1px solid var(--brand-600);
  color: #fff;
}
.pagina--home > .pagina__testata a[href]:first-of-type:hover {
  background: var(--brand-500); border-color: var(--brand-500); color: #fff;
}
.pagina--home > .pagina__testata a[href] + a[href] {
  padding-inline: var(--sp-2);
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pagina--home > .pagina__testata a[href] + a[href]:hover { background: var(--brand-100); }

/* -----------------------------------------------------------------------------
   3. TITOLI DI SEZIONE
   Gli H2 aprono una fascia: più grandi che nelle pagine editoriali e sempre a
   misura corta, così restano titoli e non paragrafi.
   -------------------------------------------------------------------------- */

.pagina--home > section > h2 {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 26ch;
  margin: 0;
}
.pagina--home > section > h2 + p {
  font-size: var(--fs-3);
  line-height: var(--lh-corpo);
  color: var(--ink-700);
  max-width: var(--home-misura);
  margin-top: var(--sp-4);
}

/* -----------------------------------------------------------------------------
   4. SEZIONE "COME FUNZIONA" — colonne di testo
   Gli H3 diventano tre passaggi numerati affiancati: nessun riquadro, solo la
   cifra e un filo sopra. Impilati sotto 860px.
   -------------------------------------------------------------------------- */

.pagina--home > section:nth-of-type(1) > h3 { display: none; }  /* nessun H3 orfano */

.pagina--home .passi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-10);
  padding: 0;
  list-style: none;
  max-width: none;
  counter-reset: passo;
}
.pagina--home .passi > li {
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--ink-300);
  counter-increment: passo;
}
.pagina--home .passi > li::before {
  content: counter(passo);
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-2);
  font-weight: var(--fw-titolo);
  font-variant-numeric: tabular-nums;
  color: var(--brand-600);
}
.pagina--home .passi h3 { font-size: var(--fs-4); margin: 0 0 var(--sp-2); }
.pagina--home .passi p { font-size: var(--fs-3); line-height: var(--lh-corpo); color: var(--ink-700); margin: 0; max-width: 38ch; }

/* -----------------------------------------------------------------------------
   5. I TRE MOTIVI DEL RIFIUTO — schede affiancate
   Sono il contenuto più utile della home: perché una pratica viene respinta.
   Schede con bordo netto e barra di stato a sinistra (la stessa grammatica dei
   risultati), affiancate su desktop e impilate su mobile. Nessuna ombra.
   -------------------------------------------------------------------------- */

.pagina--home .motivi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-10) 0 0;
  padding: 0;
  list-style: none;
  max-width: none;
  counter-reset: motivo;
}
.pagina--home .motivi > li {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-left: 4px solid var(--err-base);
  border-radius: var(--r-3);
  counter-increment: motivo;
}
/* Ordinale in cifra: dice che sono tre e li rende citabili ("il secondo motivo"). */
.pagina--home .motivi > li::before {
  content: counter(motivo) " / 3";
  font-size: var(--fs-1);
  font-weight: var(--fw-forte);
  text-transform: uppercase;
  letter-spacing: var(--ls-maiuscoletto);
  color: var(--err-text);
}
.pagina--home .motivi h3 { font-size: var(--fs-4); line-height: 1.2; margin: 0; }
.pagina--home .motivi p {
  font-size: var(--fs-2);
  line-height: var(--lh-corpo);
  color: var(--ink-700);
  margin: 0;
  max-width: none;
}
/* Il dato di chiusura della scheda (percentuale, soglia): staccato in basso. */
.pagina--home .motivi p:last-child {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ink-100);
  font-size: var(--fs-1);
  color: var(--ink-500);
}

/* -----------------------------------------------------------------------------
   6. ELENCO SETTORI — griglia
   Undici voci: tre colonne su desktop, due su tablet, una su telefono. La
   dodicesima cella vuota non disturba perché le schede hanno bordo proprio e
   non c'è un fondo condiviso che mostri il buco.
   -------------------------------------------------------------------------- */

.pagina--home .elenco-settori {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-10);
}
.pagina--home .elenco-settori a {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-3);
}
/* Freccia di continuazione: un segno tipografico, non un'icona. */
.pagina--home .elenco-settori a::after {
  content: "›";
  grid-column: 2;
  grid-row: 1;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-400);
}
.pagina--home .elenco-settori a:hover::after { color: var(--brand-600); }
.pagina--home .elenco-settori a > span,
.pagina--home .elenco-settori a > small { grid-column: 1; }

/* -----------------------------------------------------------------------------
   7. ELENCHI DI CARATTERISTICHE
   Due colonne su desktop, con il segno di spunta come marcatore. Restano
   elenchi: nessuna scheda attorno, altrimenti la home diventa un mosaico.
   -------------------------------------------------------------------------- */

.pagina--home .caratteristiche {
  columns: 2;
  column-gap: var(--sp-10);
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: 0;
  max-width: none;
}
.pagina--home .caratteristiche > li {
  position: relative;
  break-inside: avoid;
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-8);
  font-size: var(--fs-3);
  line-height: var(--lh-corpo);
}
.pagina--home .caratteristiche > li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: var(--brand-100);
  color: var(--brand-700);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: var(--fw-titolo);
  line-height: 1;
}

/* Prezzo dichiarato in sezione, non solo nella CTA. */
.pagina--home .prezzo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--ink-300);
  font-size: var(--fs-6);
  font-weight: var(--fw-titolo);
  font-variant-numeric: tabular-nums;
  max-width: none;
}
.pagina--home .prezzo small { font-size: var(--fs-2); font-weight: var(--fw-normale); color: var(--ink-700); }

/* -----------------------------------------------------------------------------
   8. BLOCCHI .cta
   Nella home ce n'è più di uno. Il primo (o l'unico) chiude la pagina a piena
   larghezza sul fondo bianco; se ne compare uno a metà pagina, resta la scheda
   con barra brand delle pagine editoriali, così non spezza la lettura.
   -------------------------------------------------------------------------- */

.pagina--home > .cta {
  margin: 0;
  padding-block: var(--sp-16);
  background: var(--surface);
  border: 0;
  border-top: var(--bd);
  border-radius: 0;
}
.pagina--home > .cta h2, .pagina--home > .cta h3 {
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.pagina--home > .cta p { font-size: var(--fs-4); max-width: 46ch; }
.pagina--home > .cta a[href] { min-height: 52px; font-size: var(--fs-3); }

/* La home chiude su una fascia bianca: il pi\u00e8 le si attacca senza aria morta. */
.pagina--home + .pie { margin-top: 0; }

/* -----------------------------------------------------------------------------
   9. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .pagina--home .passi,
  .pagina--home .motivi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina--home .elenco-settori { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .pagina--home > .pagina__testata,
  .pagina--home > section,
  .pagina--home > .cta { padding-inline: var(--sp-4); }   /* come .intestazione e .pie */
  .pagina--home > section,
  .pagina--home > .cta { padding-block: var(--sp-10); }
  .pagina--home > .pagina__testata { padding-block: var(--sp-10) var(--sp-8); }
  .pagina--home > .pagina__testata a[href] { display: flex; justify-content: center; margin-right: 0; }
  .pagina--home > .pagina__testata a[href] + a[href] { min-height: var(--altezza-tocco); }

  .pagina--home .passi,
  .pagina--home .motivi,
  .pagina--home .elenco-settori { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-6); }
  .pagina--home .passi { gap: var(--sp-6); }
  .pagina--home .caratteristiche { columns: 1; margin-top: var(--sp-5); }
  .pagina--home .prezzo { font-size: var(--fs-5); }
}

/* -----------------------------------------------------------------------------
   10. STAMPA
   La home non si stampa quasi mai; se accade, resta il testo senza fasce.
   -------------------------------------------------------------------------- */

@media print {
  .pagina--home > section,
  .pagina--home > .pagina__testata { background: #fff; border: 0; padding-inline: 0; padding-block: 12pt; }
  .pagina--home > .cta { display: none; }
  .pagina--home .motivi, .pagina--home .passi, .pagina--home .elenco-settori { grid-template-columns: repeat(3, 1fr); }
  .pagina--home .motivi > li { break-inside: avoid; }
}