/* ═══════════════════════════════════════════════════════════════════════════
   HOME — il linguaggio visivo del sito nuovo di IODAH
   ═══════════════════════════════════════════════════════════════════════════

   Caricato **solo dalla landing**: porta con sé Inter, che nel resto del
   portale non serve, e una scala tipografica che sul back-office sarebbe fuori
   posto — un titolo da 92px sopra una tabella di clienti non è un titolo, è un
   incidente.

   ┌── I COLORI NON STANNO QUI ───────────────────────────────────────────────┐
   │ Questo foglio definisce **impaginazione e tipografia**. Fondi, testi,     │
   │ bordi e primario arrivano dai token di iodah.css, quindi la landing segue │
   │ l'interruttore scuro/chiaro come tutte le altre pagine, e un giorno in    │
   │ cui si ritocca la palette non c'è un secondo posto da ricordarsi.         │
   │                                                                          │
   │ L'unica eccezione è l'hero, che sta **sempre su fondo scuro**: è una      │
   │ fotografia con il testo sopra, e in entrambi i temi vuole lo stesso velo. │
   │ Il velo non è un vezzo — il perché, con i numeri, sta più sotto.          │
   └──────────────────────────────────────────────────────────────────────────┘

   I valori tipografici sono misurati sulle pagine di riferimento del sito
   nuovo, non scelti a occhio: hero 92px peso 900 maiuscolo con interlinea 1,
   sezioni 64px peso 700, corpo Inter 16/1.8, occhiello Inter 20 peso 300 con
   il prefisso «/».
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ Inter ════════════════════════════════════════════════════════════════
   Il corpo del testo del sito nuovo. Tre pesi: 300 per gli occhielli, 400 per
   il testo, 500 per i grassetti leggeri.

   Provenienza: `@fontsource/inter`, copiato in `public/fonts` come si è fatto
   per Dune Rise. I woff2 sono committati, che è ciò che serve a servirli. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/inter-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB;
}

/* Poppins 900 — il peso dell'hero. È quello che fa il carattere della pagina:
   senza, il tono cambia del tutto. Gli altri pesi li carica già iodah.css. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/poppins-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/poppins-latin-ext-900-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB;
}


/* ═══ La pagina ════════════════════════════════════════════════════════════
   Tutto è agganciato a `.home-nuova` sul body: fuori da questa pagina non
   cambia niente, e il resto del portale non si accorge che questo foglio
   esiste. */

.home-nuova {
  font-family: 'Inter', var(--font-ui);
  font-size: 1rem;
  line-height: 1.8;
}

.home-nuova .contenitore {
  width: min(100% - 2.5rem, var(--content-max));
  margin-inline: auto;
}


/* ── Tipografia ─────────────────────────────────────────────────────────────
   Interlinea 1 sui titoli: è la cifra del riferimento, dove le due righe del
   nome prodotto stanno appiccicate come un blocco unico. */

.home-nuova .titolo-hero {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2.6rem, 1rem + 8.5vw, 5.76rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.home-nuova .titolo-sezione {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 1rem + 5vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}

.home-nuova .titolo-card {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.4;
  color: var(--text);
}

/* L'occhiello con la barra: il segno più riconoscibile del riferimento. */
.home-nuova .occhiello-barra {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}

.home-nuova .occhiello-barra::before {
  content: '/ ';
  color: var(--primary);
  font-weight: 500;
}

.home-nuova p { line-height: 1.8; }


/* ── Hero ───────────────────────────────────────────────────────────────────
   Come nel riferimento: una fotografia a tutta larghezza alta 720px con il
   titolo bianco sopra. Le immagini sono di proprietà del committente e servite
   dal nostro dominio — la CSP non ammette host esterni. */

.home-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  padding: var(--space-9) 0;
  background-color: #101010;
  background-image: url('/img/home/hero.png');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
}

/**
 * ┌── IL VELO SOPRA LA FOTOGRAFIA NON È UN VEZZO ──────────────────────────┐
 * │ Campionando i pixel dell'immagine, il punto più chiaro sotto il testo   │
 * │ sta a 0,97 di luminanza: il bianco sopra, senza velo, sarebbe a 1,1:1.  │
 * │                                                                        │
 * │ Il primo tentativo era un gradiente forte a sinistra e aperto a destra: │
 * │ bello, e fragile — bastava una riga più lunga per finire a 2:1. Un      │
 * │ contrasto che dipende da quanto è lunga la frase non è un contrasto.    │
 * │ Servono 0,82 di velo perché il bianco resti sopra 4,5:1 sul pixel       │
 * │ peggiore, quindi il velo è **quasi uniforme**, con una variazione        │
 * │ minima che dà profondità senza scendere sotto la soglia da nessuna      │
 * │ parte.                                                                  │
 * │                                                                        │
 * │ Vale in **entrambi i temi**: una fotografia chiara con il testo bianco  │
 * │ sopra ha lo stesso problema sul chiaro e sullo scuro.                   │
 * └────────────────────────────────────────────────────────────────────────┘
 */
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0.82) 100%),
    linear-gradient(180deg, rgba(11, 104, 57, 0.22) 0%, transparent 55%);
  pointer-events: none;
}

.home-hero-testo {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

/* Dentro l'hero il fondo è scuro in tutti e due i temi: i testi non seguono i
   token, che sul tema chiaro li renderebbero neri su nero. */
.home-hero .occhiello-barra { color: #FFFFFF; }
.home-hero .occhiello-barra::before { color: #00BB66; }

.home-hero-sottotitolo {
  max-width: 60ch;
  margin: var(--space-5) 0 var(--space-7);
  font-size: 1.125rem;
  color: #E8E8E8;
}

.home-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Il pulsante secondario è pensato per il fondo della pagina: nell'hero il
   fondo è scuro comunque, e il bordo scuro sparirebbe. */
.home-hero .btn-iodah-outline {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.55);
}

.home-hero .btn-iodah-outline:hover,
.home-hero .btn-iodah-outline:focus-visible {
  background: #FFFFFF;
  color: #101010;
  border-color: #FFFFFF;
}


/* ── Sezioni ───────────────────────────────────────────────────────────────
   Il respiro del riferimento è più ampio di quello del back-office: qui si
   legge, non si lavora. */

.home-sezione { padding: var(--space-9) 0; }

.home-sezione-alt { background: var(--bg-alt); }

.home-intestazione {
  max-width: 60ch;
  margin-bottom: var(--space-8);
}

.home-intestazione .titolo-sezione { margin-bottom: var(--space-4); }


/* Blocchi alternati testo / immagine: la struttura portante del riferimento. */
.home-blocco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.home-blocco + .home-blocco { margin-top: var(--space-9); }

/* Il blocco pari inverte le colonne. `order` e non due strutture nel markup,
   così l'ordine di lettura resta quello giusto per uno screen reader. */
.home-blocco-invertito .home-media { order: -1; }

@media (max-width: 900px) {
  .home-blocco { grid-template-columns: 1fr; }
  .home-blocco-invertito .home-media { order: 0; }
}

.home-blocco .titolo-sezione { margin-bottom: var(--space-3); }
.home-blocco .occhiello-barra { margin-bottom: var(--space-5); }

/* Le fotografie: raggio 20px come nel riferimento, `object-fit: cover` così il
   ritaglio è prevedibile qualunque proporzione abbia il file. */
.home-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}

.home-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Etichetta della famiglia sopra il titolo del modulo: la famiglia non si
   perde passando da quattro blocchi a sei. */
.home-famiglia {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}


/* ── Griglia dei destinatari ──────────────────────────────────────────────── */

.home-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

.home-scheda {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.home-scheda .icon-tile {
  margin-bottom: var(--space-4);
  background: var(--primary);
  color: var(--on-primary);
}

.home-scheda p {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}


/* ── La riga sul metodo ────────────────────────────────────────────────────
   Una sola in tutta la pagina: ripetuta a ogni sezione suonerebbe come una
   scusa. Riquadro discreto e non un avviso — risponde a una domanda, non
   segnala un problema. */

.home-metodo {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  max-width: 78ch;
  margin: var(--space-7) auto 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
}

.home-metodo .bi {
  color: var(--primary);
  font-size: 1.1rem;
  line-height: 1.4;
}


/* ── Fascia di chiusura ────────────────────────────────────────────────────
   Nel riferimento chiude la pagina un blocco verde pieno. Il verde è
   `--fascia`, non `--primary`: il §5 vieta il verde acceso sulle grandi
   superfici, e questa è una superficie grande. */

.home-chiusura {
  padding: var(--space-9) 0;
  background: var(--fascia);
  color: var(--su-fascia);
}

.home-chiusura .titolo-sezione {
  max-width: 20ch;
  color: var(--su-fascia);
}

.home-chiusura-griglia {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
  align-items: end;
}

@media (max-width: 900px) {
  .home-chiusura-griglia { grid-template-columns: 1fr; align-items: start; }
}

.home-chiusura p { color: rgba(255, 255, 255, 0.92); }

.home-chiusura a:not(.btn-iodah):not(.btn-iodah-outline) {
  color: var(--su-fascia);
  text-decoration: underline;
}

/* Sul verde pieno il pulsante primario sparirebbe: qui si inverte. */
.home-chiusura .btn-iodah {
  background: var(--su-fascia);
  color: var(--fascia);
  box-shadow: none;
}

.home-chiusura .btn-iodah:hover,
.home-chiusura .btn-iodah:focus-visible {
  background: #EFEFEF;
  color: var(--fascia);
}

.home-chiusura .nota {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.88);
}


/* Sulla sezione alternata la card avrebbe lo stesso fondo della sezione — sul
   tema chiaro bianco su bianco — e resterebbe piatta, delineata dal solo bordo.
   Qui si inverte: la card prende il fondo della pagina, che sull'alternata
   stacca appena quanto basta. */
.home-sezione-alt .home-scheda {
  background: var(--bg);
}