/* ===========================================================================
   Home — si carica da sola su template-home.php.

   Tutto quello che nella consegna era uno style="" inline sta qui come classe.
   Non e' pignoleria: uno stile inline vince su ogni media query, quindi finche'
   le griglie restano inline il layer responsive non puo' collassarle e il sito
   si rompe sotto ai 960px senza che si possa rimediare dal CSS.
   =========================================================================== */

/* ---- Apertura ---- */
/* Il suffisso -split non e' decorativo: e' l'aggancio con cui il layer
   responsive collassa le due colonne. Rinominare la classe senza cercarla
   anche in sv-responsive.css rompe il mobile in silenzio. */
/* Due terzi al testo. Il paragrafo di apertura elenca tutti gli ambiti e a
   meta' sezione arrivava a otto righe; la foto e' un ritratto verticale e il
   taglio piu' stretto lo regge. Sotto ai 1200px si torna vicini alla meta':
   il riquadro prezzi e' largo 300px fissi e in una colonna da 370 coprirebbe
   quasi tutta la foto (vedi sv-responsive.css). */
.hp-hero-split {
  display: grid;
  grid-template-columns: 1.94fr 1fr;
  background: var(--bg-alt);
  padding: 0;
}
.hp-hero-testo {
  padding: 88px 56px 88px 40px;
  display: flex; flex-direction: column; gap: 22px; justify-content: center;
}
/* Col riquadro prezzi acceso servono 100px a destra e non 56: il riquadro
   sborda di 52px dentro questa colonna, e la quarta credenziale — che cresce
   fino a riempire la riga — gli finirebbe sotto. Con 100 restano ~48px di aria
   a qualunque larghezza: il conto non dipende dal viewport, il riquadro sta
   sempre a padding-destro meno 52. */
.hp-hero-split.con-prezzi .hp-hero-testo { padding-right: 100px; }
/* Il titolo NON si allarga con la colonna: a 64px su 850px starebbe su una
   riga sola lunghissima, e l'apertura perderebbe il suo blocco di due righe. */
.hp-hero-testo h1 { font-size: 64px; line-height: 1.04; max-width: 660px; }
.hp-hero-testo h1 em { font-style: italic; color: var(--accent); }

/* Il sottotitolo e' la promessa della pagina: sta fra il titolo e il testo, e
   deve leggersi a colpo d'occhio anche da chi non legge il resto. Piu' grande
   del corpo, piu' scuro, e attaccato al titolo — con i 22px di gap sembrava
   il primo capoverso del testo. */
.hp-hero-sottotitolo {
  margin-top: -8px;
  font-size: 23px; line-height: 1.45; color: var(--ink);
  /* Nessun tetto: nella colonna a due terzi la frase ci sta su una riga sola, ed
     e' cosi' che deve leggersi. Piu' stretta si spezzava lasciando due parole
     sulla seconda riga. Sotto ai 1200 va a capo da se'. */
  text-wrap: balance;
}
/* Nell'apertura il corpo si estende con la colonna: 520px erano la misura di
   mezza sezione, qui sarebbero una colonnina in mezzo al vuoto. */
.hp-hero-testo .lead { max-width: 700px; }
.hp-hero-cta { display: flex; gap: 14px; align-items: center; padding-top: 4px; flex-wrap: wrap; }

/* Le credenziali sono quattro e devono stare su una riga sola: con gap 28 e
   voci larghe fino a 160px la quarta andava a capo da sola sotto le altre tre,
   e "San Raffaele" sembrava una nota a piè di pagina invece che la quarta
   colonna. Restano in flex-wrap (non in grid) perché a schermo stretto devono
   poter andare a capo da sole: una grid a 4 colonne su 390px le spezzerebbe
   parola per parola. */
.hp-cred {
  display: flex; gap: 16px; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--ink-dim); line-height: 1.5;
  flex-wrap: wrap;
}
/* Crescono invece di stare ferme a 148px: con la colonna a due terzi le quattro
   voci lasciavano duecento pixel di vuoto a destra, ma fissarle piu' larghe le
   faceva andare a capo appena sotto ai 1450px — e la quarta, "San Raffaele",
   finiva da sola su una seconda riga. Con flex-grow occupano quello che c'e' e
   restano su una riga sola finche' ci stanno (4x148 + 48 di gap = 640). */
.hp-cred li { flex: 1 1 148px; max-width: 220px; }
.hp-cred strong { display: block; color: var(--accent-dark); font-size: 15px; }

.hp-hero-media { position: relative; min-height: 620px; }
.hp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Il riquadro prezzi sborda a sinistra sopra la foto: e' il gesto grafico
   dell'apertura. Sotto ai 960px torna in colonna (vedi sv-responsive). */
.hp-prezzi {
  position: absolute; left: -52px; bottom: 56px; width: 300px;
  background: var(--bg); border: 1px solid var(--border);
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 40px rgba(94, 43, 61, .14);
}
.hp-prezzi-lista { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.hp-prezzi-lista li { display: flex; justify-content: space-between; gap: 12px; }
.hp-prezzo { color: var(--accent); font-weight: 700; white-space: nowrap; }

/* ---- Intestazioni di sezione ---- */
/* La testata di sezione (`.blocco-testa`) e il link freccia (`.link-freccia`,
   `.link-freccia-chiaro`) stanno in sv-base.css: li usano anche La visita,
   Contatti e Dieta personalizzata. */

/* ---- Ambiti ---- */
.hp-ambiti { padding: 88px 40px 20px; display: flex; flex-direction: column; gap: 34px; }
.hp-ambiti-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.hp-ambito {
  border: 1px solid var(--border); padding: 26px 22px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 215px; background: var(--bg);
  transition: border-color .2s ease, background .2s ease;
}
.hp-ambito:hover { border-color: var(--accent); background: var(--bg-alt); }
.hp-bollo {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bg-deep); color: var(--accent-dark);
  display: grid; place-items: center; flex: 0 0 auto;
  transition: background .2s ease, color .2s ease;
}
.hp-ambito:hover .hp-bollo { background: var(--accent); color: var(--bg); }
.hp-ambito h3 { font-size: 22px; }
.hp-ambito p { font-size: 14px; line-height: 1.55; color: var(--ink-dim); }

/* ---- Come funziona ---- */
.hp-metodo-split {
  padding: 80px 40px;
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center;
}
.hp-metodo-img { width: 100%; height: 470px; object-fit: cover; }
.hp-metodo-testo { display: flex; flex-direction: column; gap: 30px; }
.hp-metodo-testo > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.hp-passi { display: flex; flex-direction: column; }
.hp-passi li {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  padding: 22px 0; border-top: 1px solid var(--border);
}
.hp-passi li:last-child { border-bottom: 1px solid var(--border); }
.hp-passo-n { font-family: var(--font-serif); font-size: 30px; color: var(--accent); font-weight: 300; }
.hp-passo-testo { display: flex; flex-direction: column; gap: 6px; }
.hp-passo-testo strong { font-size: 19px; font-weight: 700; }
.hp-passo-testo span { font-size: 15px; line-height: 1.6; color: var(--ink-dim); }
.hp-metodo-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---- Dove ricevo ---- */
.hp-studi { background: var(--bg-alt); padding: 80px 40px; display: flex; flex-direction: column; gap: 34px; }
.hp-studi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hp-studio {
  background: var(--bg); border: 1px solid var(--border);
  padding: 26px; display: flex; flex-direction: column; gap: 8px;
}
.hp-studio h3 { font-size: 23px; }
.hp-studio p { font-size: 14px; line-height: 1.6; color: var(--ink-dim); }
.hp-tel { color: var(--ink); font-weight: 700; }
.hp-studio-online {
  background: var(--accent-dark); color: var(--accent-soft); border-color: var(--accent-dark);
  justify-content: space-between; gap: 16px;
}
.hp-studio-online > div { display: flex; flex-direction: column; gap: 10px; }
.hp-studio-online h3 { color: var(--accent-soft); }
.hp-studio-online p { color: var(--accent-tint); }
.hp-eyebrow-chiaro { color: var(--accent-mid); }
/* ---- Ricette ---- */
.hp-ricette { padding: 80px 40px; display: flex; flex-direction: column; gap: 30px; }
.hp-ricette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hp-ricette-grid a { display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.hp-ricette-grid a:hover { text-decoration: none; }
.hp-ricette-grid a:hover .card-titolo { color: var(--accent); }
.hp-ricetta-img { width: 100%; height: 240px; object-fit: cover; }
/* .card-meta, .card-kicker e .card-titolo stanno in sv-base.css: la stessa
   scheda compare anche nell'archivio ricette e nel blog. */

/* ---- Blog + newsletter ---- */
.hp-blog-split { padding: 0 40px 80px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; }
.hp-blog-lista { display: flex; flex-direction: column; gap: 26px; }
.hp-articoli { display: flex; flex-direction: column; }
.hp-articoli li { border-top: 1px solid var(--border); }
.hp-articoli li:last-child { border-bottom: 1px solid var(--border); }
.hp-articoli a {
  display: grid; grid-template-columns: 130px 1fr; gap: 22px;
  padding: 22px 0; align-items: center; color: var(--ink);
}
.hp-articoli a:hover { text-decoration: none; }
.hp-articoli a:hover .card-titolo { color: var(--accent); }
.hp-articolo-img { width: 100%; height: 84px; object-fit: cover; }
.hp-articoli .card-titolo { font-size: 23px; }
/* Un articolo senza immagine in evidenza: il testo prende tutta la riga.
   Senza questa regola finirebbe nella colonna da 130px riservata alla
   miniatura e il titolo andrebbe a capo a ogni parola. */
.hp-articoli a > .card-meta:only-child { grid-column: 1 / -1; }

.hp-newsletter {
  background: var(--accent-dark); color: var(--accent-soft);
  padding: 38px; display: flex; flex-direction: column; gap: 20px; align-self: start;
}
.hp-newsletter h2 { font-size: 30px; line-height: 1.15; color: var(--accent-soft); }


/* ---- Pazienti ---- */
.hp-test { background: var(--bg-alt); padding: 80px 40px; display: flex; flex-direction: column; gap: 34px; }
.hp-test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-test-grid li {
  background: var(--bg); border: 1px solid var(--border);
  padding: 30px; display: flex; flex-direction: column; gap: 16px;
}
.hp-test-grid blockquote {
  margin: 0; font-family: var(--font-serif); font-size: 20px;
  line-height: 1.45; font-style: italic; color: var(--accent-deep);
}
.hp-test-grid cite { font-style: normal; font-size: 14px; color: var(--ink-mute); }