/* Chi sono — si carica da sola su template-chi.php. */

/* `padding: 0` annulla i 96px verticali che sv-base.css da' a ogni <section>:
   qui il fondo beige e' quello della fascia, e con quel padding restava una
   striscia beige sopra e sotto la foto invece di correre da bordo a bordo come
   nella consegna. La spaziatura la mette il testo (.cs-hero-testo). */
.cs-hero-split {
  padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-alt);
}
.cs-hero-testo {
  padding: 88px 56px 88px 40px;
  display: flex; flex-direction: column; gap: 24px; justify-content: center;
}
.cs-hero-testo h1 { font-size: 58px; line-height: 1.05; }
.cs-hero-testo .lead { line-height: 1.6; }
/* Il ritratto riempie sempre la sua meta' della fascia, qualunque altezza
   prenda il testo a fianco.
   Serve il contenitore: `height: 100%` su un'immagine che e' figlia diretta
   della griglia non funziona (la riga e' alta quanto il contenuto, e
   l'immagine e' parte di quel contenuto: la percentuale non ha su cosa
   risolversi e l'immagine torna alla sua proporzione naturale, allungando la
   fascia a mille pixel). Con la posizione assoluta l'immagine esce dal calcolo
   dell'altezza e si limita a riempire la cella. */
.cs-ritratto-box { position: relative; min-height: 560px; }
.cs-ritratto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* La foto e' un ritratto in verticale: il taglio centrato le toglierebbe la
     testa. Il volto sta nel primo terzo. */
  object-position: 50% 18%;
}

.cs-racconto-split {
  padding: 80px 40px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: start;
}

.cs-racconto { display: flex; flex-direction: column; gap: 22px; }
.cs-racconto h2 { font-size: 34px; line-height: 1.15; }
/* `.testo-lungo` e `.riga-cta` stanno in sv-base.css: li usano anche Dieta
   personalizzata e La visita. */

.cs-studi {
  background: var(--bg-alt); padding: 34px;
  display: flex; flex-direction: column;
}
.cs-studi .eyebrow { padding-bottom: 18px; }
.cs-tappe { display: flex; flex-direction: column; }
.cs-tappe li {
  display: grid; grid-template-columns: 74px 1fr; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--border);
}
.cs-tappe li:last-child { border-bottom: 1px solid var(--border); }
.cs-anno { font-family: var(--font-serif); font-size: 22px; color: var(--accent); }
.cs-tappa-testo { font-size: 15px; line-height: 1.55; }
.cs-nota { font-size: 15px; line-height: 1.6; color: var(--ink-dim); padding-top: 18px; }