/* ═══════════════════════════════════════════════════════
   LAYOUT "Essenziale" — pensato prima per il telefono.

   Firma: lo spazio bianco separa, non le linee. Dove
   «Minimale» comprime per far stare tutto in poco, questo
   fa il contrario: poche cose per schermata, molto respiro
   attorno, titoli grandi. È il minimalismo delle pagine di
   prodotto, non quello dei documenti tecnici.

   Nessuna immagine decorativa (resta il logo, e restano i
   loghi degli sponsor, che sono contenuto).

   Le misure per il tocco seguono le linee guida Apple:
   nessun bersaglio sotto i 44px, testo del corpo a 17px
   perché su iOS sotto quella soglia si legge peggio.
   Colori e caratteri arrivano dalla palette.
   ═══════════════════════════════════════════════════════ */

/* ── Respiro di base ─────────────────────────────────────── */
body.lay-essenziale { font-size: 17px; line-height: 1.6; }
body.lay-essenziale .container { max-width: 940px; padding-left: 20px; padding-right: 20px; }

/* Testo che scorre: mai oltre la larghezza di lettura comoda.
   Vale per la PROSA, non per tutto ciò che è scritto dentro un <p>. Applicata
   a tappeto, questa misura andava a capo anche dentro i riquadri (che una
   larghezza ce l'hanno già) e nelle righe di servizio — elenchi di comprensori,
   avvisi — che non si leggono a paragrafi: lì lasciava un vuoto a destra che
   sembra un errore di impaginazione, e in effetti lo era. */
body.lay-essenziale .section p,
body.lay-essenziale .section li { max-width: 68ch; }

/* Le eccezioni. `p[class]` copre in un colpo solo ogni paragrafo che appartiene
   a un componente — presente e futuro: se qualcuno gli ha dato una classe, la
   sua larghezza l'ha già decisa chi l'ha disegnato, non questo tema. */
body.lay-essenziale .info-box p,
body.lay-essenziale .info-box li,
body.lay-essenziale .card p,
body.lay-essenziale .alert p,
body.lay-essenziale .section p[class],
body.lay-essenziale .section li[class] { max-width: none; }

/* ── Allineamento a sinistra, davvero ─────────────────────
   Il tema allinea a sinistra, ma molti paragrafi del sito
   hanno `margin: 0 auto` e restavano centrati sotto un titolo
   allineato a sinistra: da qui lo scalino di un centinaio di
   pixel fra titolo e testo. Il `.container` resta centrato —
   è il contenitore della pagina, non un blocco di contenuto. */
body.lay-essenziale .hero p,
body.lay-essenziale .hero-mission,
body.lay-essenziale .section-header p,
body.lay-essenziale .section > .container > p,
body.lay-essenziale .cta-sub,
body.lay-essenziale .testo-centrato { margin-left: 0; margin-right: 0; }
body.lay-essenziale .testo-centrato { text-align: left; }

/* Il badge diventa una sopra-titolo discreta: niente pillola nera, che in
   apertura pesava più del titolo stesso. Resta un'informazione — è pur sempre
   la natura giuridica dell'associazione — ma smette di gridare. */
body.lay-essenziale .hero-badge {
  display: inline-block;
  width: auto;
  max-width: 100%;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 1.1rem;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ── Apertura: solo parole, molto spazio ─────────────────── */
body.lay-essenziale .hero {
  background: none;
  padding: clamp(56px, 12vw, 120px) 0 clamp(40px, 8vw, 72px);
  text-align: left;
  min-height: 0;
}
body.lay-essenziale .hero::before,
body.lay-essenziale .hero::after { display: none; }
body.lay-essenziale .hero h1 {
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  line-height: 1.08;
  margin-bottom: .5em;
  max-width: 16ch;
}
body.lay-essenziale .hero p { font-size: clamp(1.05rem, 2.6vw, 1.25rem); max-width: 54ch; }
body.lay-essenziale .page-hero { min-height: 0; height: clamp(28px, 6vw, 56px); background: none; }

/* Niente immagini decorative: il tema vive di tipografia.
   Eccezione: i loghi degli sponsor, che sono informazione. */
body.lay-essenziale .hero img,
body.lay-essenziale .section img,
body.lay-essenziale .card img { display: none; }
body.lay-essenziale .partner-card img { display: inline-block; }

/* ── Sezioni: separate dal vuoto ─────────────────────────── */
body.lay-essenziale .section { padding: clamp(44px, 9vw, 88px) 0; border-top: none; }
body.lay-essenziale .section-header { text-align: left; margin-bottom: clamp(24px, 5vw, 44px); }
body.lay-essenziale .section-header h2 {
  font-size: clamp(1.5rem, 4.2vw, 2.1rem);
  line-height: 1.15;
  max-width: 20ch;
}
body.lay-essenziale .section-header p { font-size: 1.02rem; max-width: 60ch; }
/* Il filetto sotto i titoli sparisce: separa lo spazio, non un tratto. */
body.lay-essenziale .section-header::after { display: none; }

/* ── Superfici: bordi appena accennati, angoli morbidi ───── */
body.lay-essenziale .card,
body.lay-essenziale .price-card,
body.lay-essenziale .partner-card,
body.lay-essenziale .info-box {
  border-radius: 14px;
  box-shadow: none;
  border: 1px solid var(--rule-color);
  padding: clamp(18px, 4vw, 26px);
}
body.lay-essenziale .card:hover,
body.lay-essenziale .price-card:hover { transform: none; }

body.lay-essenziale .grid { gap: clamp(12px, 2.5vw, 20px); }

/* ── Tabelle: su telefono diventano leggibili ─────────────── */
body.lay-essenziale table { border-radius: 12px; overflow: hidden; }
body.lay-essenziale th,
body.lay-essenziale td { padding: 13px 14px; }
body.lay-essenziale .tbl-wrap,
body.lay-essenziale .table-wrap { -webkit-overflow-scrolling: touch; }

/* ── Comandi: grandi abbastanza da colpirli con il pollice ─ */
body.lay-essenziale .btn {
  min-height: 48px;
  padding: 13px 26px;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* L'intestazione respira più del testo: la colonna di lettura resta stretta
   (940px, comoda da leggere), mentre la barra di navigazione usa la larghezza
   che le serve — con nove voci, dentro 940px il menù sbordava dalla pagina. */
body.lay-essenziale .site-header .container { max-width: 1200px; }
body.lay-essenziale .main-nav { gap: 0; }
/* Nessuna voce va a capo: «Chi Siamo» spezzato in due righe faceva crescere
   l'intera barra e sfalsava le altre voci. Per farcele stare tutte su una riga
   servono una trentina di pixel, recuperati dove non si notano: la spaziatura
   fra lettere scende da .06em a .03em (era un vezzo del tema scuro precedente,
   fuori posto in un tema che punta alla leggibilità) e il padding da 9 a 7px.
   Misurato sul sito: la nav passa da 922px a 853px, contro gli 889px
   disponibili — restano 36px di margine. */
body.lay-essenziale .main-nav a {
  padding: 6px 7px;
  font-size: .92rem;
  letter-spacing: .03em;
  white-space: nowrap;
}
/* Sotto i 1200px il menù orizzontale lascia il posto all'hamburger: lì il
   bersaglio torna generoso, perché si tocca con il dito. */
@media (max-width: 1200px) {
  body.lay-essenziale .main-nav a { padding: 10px 14px; font-size: 1rem; }
}

/* ── Telefono ─────────────────────────────────────────────
   Sotto i 700px la pagina diventa una colonna sola: niente
   griglie a due colonne strizzate, che su schermo stretto
   sono il difetto più comune dei temi «responsive». */
@media (max-width: 700px) {
  /* Il CSS base centra `.hero .container` in questa stessa fascia: essendo
     più interno vince sull'ereditarietà, e l'apertura restava centrata sotto
     sezioni allineate a sinistra. */
  body.lay-essenziale .hero .container { text-align: left; align-items: flex-start; }

  body.lay-essenziale .grid,
  body.lay-essenziale .grid--2,
  body.lay-essenziale .grid--3,
  body.lay-essenziale .grid--4 { grid-template-columns: 1fr; }

  body.lay-essenziale .hero { padding-top: 40px; }
  body.lay-essenziale .hero h1 { max-width: none; }

  /* Pulsanti a tutta larghezza: più facili da colpire in movimento.
     Il `max-width: 280px` del CSS base va tolto esplicitamente, altrimenti
     vince sul 100% e i pulsanti restano stretti e centrati. */
  body.lay-essenziale .hero .hero-btns,
  body.lay-essenziale .azioni-centrate {
    width: 100%; flex-direction: column; align-items: stretch;
  }
  body.lay-essenziale .hero .hero-btns .btn,
  body.lay-essenziale .azioni-centrate .btn { width: 100%; max-width: none; }

  /* Bersagli comodi anche nell'elenco di navigazione. */
  body.lay-essenziale .mobile-nav a { padding: 15px 20px; font-size: 1.05rem; }
}

/* ── Rispetto delle preferenze di sistema ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.lay-essenziale * { animation: none !important; transition: none !important; }
}