/* Dieta personalizzata — si carica da sola su template-dieta.php. */

/* padding: 0 — vedi la nota su .cs-hero-split in pages/chi.css: la fascia deve
   correre da bordo a bordo, i 96px di <section> lasciavano beige sopra e sotto
   la foto. */
.dp-hero-split {
  padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-alt);
}
.dp-hero-testo {
  padding: 84px 56px 84px 40px;
  display: flex; flex-direction: column; gap: 22px; justify-content: center;
}
.dp-hero-testo h1 { font-size: 56px; line-height: 1.05; }
.dp-hero-testo .lead { line-height: 1.6; }
.dp-cta { align-self: flex-start; }
.dp-hero-img { width: 100%; height: 520px; object-fit: cover; }

.dp-casi { padding: 80px 40px 30px; display: flex; flex-direction: column; gap: 30px; }
.dp-casi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dp-casi-grid li {
  border: 1px solid var(--border); padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
/* Titoli della scheda in sans grassetto, non in serif: nella consegna qui
   il carattere cambia, ed è la differenza fra una domanda e un titolo. */
.dp-casi-grid h3 {
  font-family: var(--font-sans); font-size: 18px;
  font-weight: 700; line-height: 1.35; letter-spacing: 0;
}
.dp-casi-grid p { font-size: 15px; line-height: 1.6; color: var(--ink-dim); }

.dp-metodo-split {
  padding: 50px 40px 80px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center;
}
.dp-metodo-testo { display: flex; flex-direction: column; gap: 20px; }
.dp-metodo-testo h2 { font-size: 40px; line-height: 1.1; }
.dp-metodo-img { width: 100%; height: 480px; object-fit: cover; }

/* Il modulo «oppure richiedi informazioni», come nella pagina online.
   Fondo alternato per staccarlo dal metodo che lo precede, e il modulo dentro
   una colonna stretta: un campo largo 1080px si legge male e si compila
   peggio. Il padding laterale sta sulla sezione (i 40px del resto della
   pagina); su mobile ci pensa il blocco «Rientri» di sv-responsive.css. */
.dp-modulo { padding: 80px 40px; background: var(--bg-alt); }
/* Colonna centrata: sopratitolo e titolo uno sotto l'altro. Vedi la nota nel
   template sul perché qui non va bene `.blocco-testa`. */
.dp-modulo-testa {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; margin-bottom: 32px;
}
.dp-modulo-testa h2 { margin: 0; }
.dp-modulo-box {
  max-width: 640px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); padding: 36px;
}