/* components.css — i componenti di dental_practice. Il segno del verticale è la testata SPARTITA
   (blocco di colore pieno e fotografia affiancati) con la scheda bianca che ne scavalca il bordo, e i
   trattamenti come griglia NUMERATA: entrambi vengono da dental-care-04, il template di riferimento.
   I colori si prendono SOLO dai token; le regole d'uso della palette stanno in tokens.css. */

/* ============================ impianto ============================ */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - var(--gutter) * 2, 76ch); margin-inline: auto; }
.stack > * + * { margin-top: var(--space-4); }

.section { padding-block: var(--section-y); background: var(--grad-carta); }
.section--alt { background: var(--grad-carta2); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }

.section-intro { max-width: 62ch; margin-bottom: var(--space-7); }
.section-intro h2 { margin-bottom: var(--space-3); }

/* Filetto sotto un occhiello o un titolo: è il ciano DEL MARCHIO, che qui è nel suo mestiere —
   un segno, non un testo. */
.rule { border: 0; height: 3px; width: 56px; background: var(--grad-accento); border-radius: 2px; margin: var(--space-4) 0; }

/* ============================ bottoni ============================ */
/* Pillola: il registro moderno della categoria (i template recenti stanno su radius 38–57px). */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.78rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--brand); color: var(--on-dark);
  border: 2px solid var(--brand);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--brand-mid); border-color: var(--brand-mid); transform: translateY(-1px); }
/* ⚠ Il fantasma su fondo CHIARO porta il testo dell'accento-testo (6,00), non del marchio (4,36). */
.btn--ghost { background: transparent; color: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost:hover { background: var(--accent-ink); color: var(--on-dark); transform: translateY(-1px); }
/* Su fondo SCURO il fantasma è bianco su bianco-bordo: il contrasto lo dà la banda sottostante. */
.btn--on-dark { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.55); }
.btn--on-dark:hover { background: var(--on-dark); color: var(--brand); border-color: var(--on-dark); }
/* ⚠ Sull'accento chiaro il testo è --ink (6,41): il bianco farebbe 2,42. */
.btn--accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-lt); border-color: var(--accent-lt); }

/* ============================ fascia di servizio ============================ */
.topbar { background: var(--brand-dark); color: var(--on-dark); font-size: 0.82rem; }
.topbar__row {
  display: var(--topbar-display); flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5);
  justify-content: flex-end; min-height: var(--chrome-topbar);
}
.topbar__item { color: var(--on-dark-muted); }
.topbar a.topbar__item:hover { color: var(--on-dark); text-decoration: underline; }
@media (max-width: 599.98px) { .topbar { display: none; } }

/* ============================ intestazione ============================ */
/* Header FISSO su fondo chiaro: le pagine interne non hanno una testata fotografica sotto cui nascondersi.
   ⚠ Lo sticky va liberato dal wrapper del template-part, che altrimenti lo confina. */
.wp-block-template-part { display: contents; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.site-header__row {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 76px;
}
/* ⚠ Nav e CTA portano un margine di blocco da WP che li spinge sotto il centro: si azzera e si centra
   ciascuno per conto suo (regola 16). */
.site-header__row > * { align-self: center; margin-block: 0; }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); }
.wordmark__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.16rem;
  line-height: 1.1; letter-spacing: -0.012em; color: var(--ink);
  display: flex; flex-direction: column;
}
.wordmark__tag {
  font-size: 0.66rem; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-ink);
}
/* ⚠ UN MARCHIO SI MISURA SULLA LARGHEZZA, non sull'altezza: con la sola `height` in un flex item
   riducibile l'SVG si ridisegna DENTRO il box e risulta piccolo senza che nessuna misura del box lo
   denunci. Qui la larghezza è dichiarata e in riga stretta è la NAV a cedere (v. media query). */
.wordmark__mark { width: 46px; height: auto; flex: 0 0 auto; }

.site-nav { margin-left: auto; }
.site-nav .wp-block-navigation-item__content {
  font-family: var(--font-display); font-weight: 700; font-size: 0.94rem; color: var(--ink);
  padding-block: var(--space-2);
}
.site-header .site-nav .wp-block-navigation-item__content:hover { color: var(--accent-ink); }
/* Voce corrente: filetto nel ciano di marca — un segno, non un testo. */
.site-header .site-nav .current-menu-item .wp-block-navigation-item__content {
  color: var(--accent-ink); box-shadow: inset 0 -3px 0 var(--brand-mark);
}
/* ⚠ Una ul di wp:navigation nasce flex-wrap:wrap: con margin-left:auto una voce in più va orfana su due
   righe. Sopra i 900px si impone nowrap. */
@media (min-width: 900px) { .site-nav .wp-block-navigation__container { flex-wrap: nowrap; } }

.site-header__cta { margin-left: var(--space-4); }
@media (max-width: 1023.98px) { .site-header__cta { display: none; } }

/* --- Menu mobile: overlay di wp:navigation (regola 15).
   ⚠ WP tiene l'overlay bianco con un selettore a specificità (0,4,0): si vince solo RICOPIANDONE lo
   schema, non aggiungendo una classe.
   ⚠⚠ E NON BASTA allineare le voci: il contenitore `__responsive-container-content` è largo quanto il
   viewport e nasce `justify-content: flex-end`, quindi le voci restano schiacciate a DESTRA e vanno
   fuori schermo anche con `text-align: left` sul figlio. Il colpevole è il PRIMO ANTENATO largo quanto
   lo schermo con l'allineamento contrario: si corregge lì, risalendo la catena. --- */
.wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.wp-block-navigation__responsive-container.is-menu-open:not(.has-background):not(.disable-default-overlay) { background: var(--paper); }
/* ⚠ Il padding orizzontale va sul CONTENUTO, non sull'overlay: sull'overlay WP lo azzera e la regola
   sparisce senza lasciare traccia (misurato: `padding: 0px` sull'overlay, `56px 0px 96px` sul contenuto,
   cioè è il contenuto la superficie che accetta il nostro padding). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%; align-items: stretch; justify-content: flex-start;
  padding-inline: var(--gutter); padding-bottom: 96px;
}
/* ⚠ Il contenitore delle voci nasce `align-items: flex-end` e il nostro `stretch` a pari specificità
   perde contro il CSS dei blocchi, che è iniettato DOPO il tema: serve un livello in più. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
  width: 100%; align-items: stretch; gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100%; text-align: left; font-family: var(--font-display); font-weight: 800;
  font-size: 1.32rem; color: var(--ink);
  padding-block: var(--space-4); border-bottom: 1px solid var(--line);
}
/* ⚠ Il bottone di chiusura di WP nasce minuscolo e SENZA area di tocco: sotto i 44px non rispetta il
   bersaglio minimo, e appiccicato al bordo sembra un refuso. Si dichiarano misura, area e posizione. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
  top: var(--space-5); right: var(--gutter);
  width: 48px; height: 48px; padding: 10px;
  color: var(--ink); background: var(--surface); border-radius: var(--radius-pill);
}
.wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.wp-block-navigation__responsive-container-close:hover { background: var(--surface-2); }
/* Anche l'hamburger merita un bersaglio pieno: 48×48 è il minimo comodo su un telefono. */
.wp-block-navigation__responsive-container-open {
  width: 48px; height: 48px; padding: 10px; color: var(--ink);
}
.wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }

/* ============================ testata (il segno del verticale) ============================ */
/* Blocco di colore pieno e fotografia AFFIANCATI, non sovrapposti: il contrasto del titolo è strutturale
   e non dipende dal fotogramma. È l'impianto di dental-care-04. */
.hero { background: var(--paper); }
.hero__split {
  display: grid; grid-template-columns: var(--hero-split-cols);
  min-height: var(--hero-min-h);
}
.hero__panel {
  background: var(--grad-brand); color: var(--on-dark);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-8) var(--space-7) var(--space-8) var(--bleed);
  /* ⚠ Il padding sinistro cresce col viewport (--bleed vale 680 a 2560px): la larghezza massima del
     contenuto DEVE sommarlo, altrimenti su un monitor largo il padding divora il blocco. */
  position: relative;
}
.hero__panel > * { max-width: 34rem; }
.hero__panel .eyebrow { color: var(--accent-lt); }
.hero__panel h1 { color: var(--on-dark); margin-bottom: var(--space-4); }
.hero__panel .lead { color: var(--on-dark-muted); margin-bottom: var(--space-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__media { position: relative; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos); }
/* Velo tenue: non serve a far leggere il titolo (che sta sul blocco), ma a legare foto e blocco. */
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--grad-velo); }
/* Bagliore d'accento sul blocco di colore: è ciò che toglie alla campitura piena l'aria di fondale. */
.hero__panel::before { content: ""; position: absolute; inset: 0; background: var(--grad-bagliore); pointer-events: none; }
.hero__panel > * { position: relative; }

/* Variante DESIGN (nessuna foto hero-grade): il blocco di colore prende tutta la banda. Nel registro di
   dental-care-04 è una variante legittima, non un ripiego — MAI una foto finta. */
.hero--design .hero__split { grid-template-columns: 1fr; }
.hero--design .hero__panel { padding-inline: var(--bleed); align-items: flex-start; }
.hero--design .hero__panel > * { max-width: min(46rem, 100%); }

@media (max-width: 899.98px) {
  .hero__split { grid-template-columns: 1fr; min-height: 0; }
  .hero__panel { padding: var(--space-8) var(--gutter); }
  .hero__panel > * { max-width: none; }
  .hero__media { aspect-ratio: var(--fig-ratio-wide); }
}

/* ============================ lo studio (la scheda che scavalca) ============================ */
/* ⚠ Lo scavalcamento sulla testata schiacciava scheda e fotografia contro il blocco di colore: il
   segno resta, ma con una distanza dichiarata sopra, sennò la sezione sembra incollata. */
.studio { padding: clamp(var(--space-7), 5vw, var(--space-9)) 0 var(--section-y); background: var(--grad-carta); position: relative; }
.studio__grid {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(var(--space-6), 4vw, var(--space-8)); align-items: stretch;
  position: relative; z-index: 2;
}
.studio__card {
  background: var(--grad-scheda); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  box-shadow: var(--shadow-md);
  position: relative; z-index: 2;
}
.studio__card h2 { margin-bottom: var(--space-3); text-wrap: balance; }
/* Il corpo della scheda respira: senza una misura dichiarata il testo eredita la larghezza della
   colonna, che qui è stretta, e va a capo troppo presto. */
.studio__card .lead, .studio__card .prose p { max-width: 54ch; }
.studio__card .lead { margin-bottom: var(--space-4); }
.studio__card .prose p + p { margin-top: var(--space-4); }
.studio__card .btn { margin-top: var(--space-6); }

/* ⚠ Lo scavalcamento è un MARGINE NEGATIVO sul primo figlio del contenitore, e WP lo azzera con
   `.is-layout-flow > :first-child { margin-block-start: 0 }` — specificità (0,1,1), che BATTE la classe
   nuda (0,1,0). Il valore c'era nel foglio e computava 0: si vince solo aggiungendo un livello. */
.studio .container > .studio__grid { margin-top: 0; }

.studio__fig { border-radius: var(--radius-lg); overflow: hidden; display: flex; margin: 0; }
.studio__fig img { width: 100%; height: 100%; min-height: clamp(320px, 36vw, 560px); object-fit: cover; object-position: var(--fig-object-pos); }

@media (max-width: 899.98px) {
  .studio__grid { grid-template-columns: 1fr; margin-top: calc(-1 * var(--space-5)); }
}

/* ============================ i trattamenti (griglia numerata) ============================ */
.treats { padding-block: var(--section-y); background: var(--grad-tint); }
/* ⚠ L'introduzione stretta a sinistra lasciava un BUCO a destra largo mezza pagina. Titolo e testo
   si dividono la riga: la colonna del titolo tiene la gerarchia, quella del testo la misura di
   lettura, e insieme riempiono tutta l'area. Sotto i 900px tornano in colonna. */
.treats__head { display: grid; gap: clamp(var(--space-6), 4vw, var(--space-8)); }
.treats__head > .section-intro {
  max-width: none; margin-bottom: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* ⚠ Distanza fra COLONNE ampia (separa i due blocchi) ma fra RIGHE stretta: col gap unico il filetto
     restava orfano a mezz'aria sotto il titolo invece di appartenergli. */
  column-gap: clamp(var(--space-6), 5vw, var(--space-9)); row-gap: var(--space-4); align-items: start;
}
.treats__head > .section-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.treats__head > .section-intro h2 { margin-bottom: var(--space-3); }
.treats__head > .section-intro .rule { grid-column: 1; margin-top: 0; }
.treats__head > .section-intro .lead { grid-column: 2; grid-row: 2 / span 2; max-width: 54ch; margin: 0; }
@media (max-width: 899.98px) {
  .treats__head > .section-intro { grid-template-columns: 1fr; }
  .treats__head > .section-intro .lead { grid-column: 1; grid-row: auto; }
}
/* ⚠ Le schede della HOME sono tipografiche (occhiello + icona + testo) e stanno bene su tre colonne;
   quelle della pagina Trattamenti portano una FOTOGRAFIA, e su tre colonne la foto scende sotto la
   soglia in cui legge come immagine invece che come miniatura. Due griglie diverse, decise da CIÒ CHE
   LA SCHEDA CONTIENE — non dalla pagina, che il CSS non conosce. */
.treats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-5), 2.4vw, var(--space-6)); }
.treats__grid:has(.treat--foto) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-5), 3vw, var(--space-7)); }
@media (max-width: 1023.98px) { .treats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 619.98px) { .treats__grid, .treats__grid:has(.treat--foto) { grid-template-columns: 1fr; } }

.treat {
  display: block; background: var(--grad-scheda); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(var(--space-4), 2vw, var(--space-6));
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.treat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-mark); }
/* Il numerale 01–06 di dental-care-04. È nell'accento-testo (6,00), non nel ciano di marca. */
.treat__num {
  display: var(--num-display);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); color: var(--accent-ink);
  margin-bottom: var(--space-2);
}
.treat__icon {
  display: block; width: 34px; height: 34px; margin-bottom: var(--space-3);
  background: var(--brand-mark);
  /* ⚠ La maschera vive QUI e non in uno style inline nel post_content: `../assets/` è riscritto solo nei
     .php del tema, mentre nel DB il PHP non gira. Nel foglio la url() si risolve rispetto al FOGLIO. */
  -webkit-mask: var(--icon, none) center / contain no-repeat;
  mask: var(--icon, none) center / contain no-repeat;
}
.treat[data-icon="ortodonzia"]     { --icon: url("../assets/img/icons/ortodonzia.svg"); }
.treat[data-icon="pedodonzia"]     { --icon: url("../assets/img/icons/pedodonzia.svg"); }
.treat[data-icon="parodontologia"] { --icon: url("../assets/img/icons/parodontologia.svg"); }
.treat[data-icon="implantologia"]  { --icon: url("../assets/img/icons/implantologia.svg"); }
.treat[data-icon="protesi"]        { --icon: url("../assets/img/icons/protesi.svg"); }
.treat[data-icon="conservativa"]   { --icon: url("../assets/img/icons/conservativa.svg"); }
.treat[data-icon="igiene"]         { --icon: url("../assets/img/icons/igiene.svg"); }
.treat[data-icon="estetica"]       { --icon: url("../assets/img/icons/estetica.svg"); }
.treat[data-icon="endodonzia"]     { --icon: url("../assets/img/icons/endodonzia.svg"); }
.treat[data-icon="chirurgia"]      { --icon: url("../assets/img/icons/chirurgia.svg"); }

.treat h3 { margin-bottom: var(--space-2); }
.treat p { color: var(--ink-muted); }
.treat__more { margin-top: var(--space-3); font-weight: 700; color: var(--accent-ink); font-size: 0.92rem; }
a.treat:hover h3 { color: var(--accent-ink); }
a.treat:hover .treat__more { text-decoration: underline; }

/* ============================ i valori (pannello a mezza pagina) ============================ */
/* Il blocco di colore che occupa METÀ pagina e si ferma, con l'elenco spuntato: è il device
   «why choose us» di dental-care-04. Asimmetrico per costruzione. */
.values { background: var(--paper); position: relative; }
.values__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.values__panel {
  background: var(--grad-panel); color: var(--on-dark);
  padding: var(--section-y) var(--space-7) var(--section-y) var(--bleed);
}
.values__panel > * { max-width: 30rem; }
.values__panel .eyebrow { color: var(--accent-lt); }
.values__panel h2 { color: var(--on-dark); margin-bottom: var(--space-3); }
.values__panel .lead { color: var(--on-dark-muted); }
.values__list { margin-top: var(--space-6); }
.values__list li + li { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.22); }
.value { display: grid; grid-template-columns: 26px 1fr; gap: var(--space-3); }
.value__icon {
  width: 26px; height: 26px; margin-top: 3px;
  background: var(--accent-lt);
  -webkit-mask: var(--icon, none) center / contain no-repeat;
  mask: var(--icon, none) center / contain no-repeat;
}
.value[data-icon="paziente"]        { --icon: url("../assets/img/icons/paziente.svg"); }
.value[data-icon="cortesia"]        { --icon: url("../assets/img/icons/cortesia.svg"); }
.value[data-icon="professionalita"] { --icon: url("../assets/img/icons/professionalita.svg"); }
.value[data-icon="qualita"]         { --icon: url("../assets/img/icons/qualita.svg"); }
.value h3 { color: var(--on-dark); margin-bottom: var(--space-1); font-size: var(--text-base); }
.value p { color: var(--on-dark-muted); font-size: 0.95rem; }

.values__side { background: var(--surface); }
.values__side img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos); }

@media (max-width: 899.98px) {
  .values__grid { grid-template-columns: 1fr; }
  .values__panel { padding-inline: var(--gutter); }
  .values__panel > * { max-width: none; }
  /* ⚠ Senza foto la colonna resterebbe un riquadro tinto VUOTO alto mezzo schermo: su mobile la si
     mostra solo quando contiene davvero un'immagine. */
  .values__side:not(:has(img)) { display: none; }
  .values__side:has(img) { aspect-ratio: var(--fig-ratio-wide); }
}

/* ============================ fascia contatti ============================ */
/* Un MESTIERE per blocco: questa fascia AGISCE (prenota), il piè ORIENTA (mappa del sito). */
/* Scala di PROFONDITÀ fra i tre blocchi pieni che si susseguono: pannello valori (--brand), fascia
   contatti (--brand-mid), piè (--brand-dark). Sullo stesso teal si leggevano come una massa unica —
   il salto di tono è ciò che dice al lettore che il mestiere del blocco è cambiato. Tutte e tre le
   coppie di testo restano sopra 4,6 (misurate: bianco 6,01 · 7,96 · 11,26). */
.contact-band { background: var(--grad-band); color: var(--on-dark); padding-block: var(--section-y); }
.contact-band__map .eyebrow { color: var(--accent-lt); }
.contact-band__map p { color: var(--on-dark); margin-bottom: var(--space-4); }
.contact-band__map .btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,.55); }
.contact-band__map .btn--ghost:hover { background: var(--on-dark); color: var(--brand); border-color: var(--on-dark); }
.contact-band .eyebrow { color: var(--accent-lt); }
.contact-band h2 { color: var(--on-dark); margin-bottom: var(--space-3); }
.contact-band .lead { color: var(--on-dark-muted); margin-bottom: var(--space-6); }
.contact-band__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: center; }
.contact-band__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contact-band__facts { display: grid; gap: var(--space-4); }
.contact-band__facts dt { font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-lt); }
.contact-band__facts dd { color: var(--on-dark); margin: 0; }
.contact-band a:hover { text-decoration: underline; }
@media (max-width: 899.98px) { .contact-band__row { grid-template-columns: 1fr; } }

/* Orari: componente CONDIVISO fra banda scura, scheda chiara e piè.
   ⚠ Un componente condiviso NASCE CHIARO: il colore si EREDITA dal contesto, non si fissa qui, altrimenti
   diventa invisibile sull'altro fondo. */
.hours { display: grid; gap: var(--space-2); font-size: 0.95rem; }
.hours li { display: flex; justify-content: space-between; gap: var(--space-4); }
.hours li span:first-child { font-weight: 700; }

/* ============================ testata di pagina ============================ */
/* ⚠ NON riusa la size della testata (regola 6): è una testata di pagina, non un hero. */
.page-head { background: var(--grad-carta2); padding-block: clamp(var(--space-7), 5vw, var(--space-9)); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.page-head .lead { max-width: 62ch; }

/* ============================ prosa ============================ */
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose p + p { margin-top: var(--space-4); }
.prose ul { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.prose ul li { padding-left: var(--space-5); position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-mark); }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

.checks { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; }
.checks li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; background: var(--accent-ink); -webkit-mask: url("../assets/img/icons/check.svg") center / contain no-repeat; mask: url("../assets/img/icons/check.svg") center / contain no-repeat; }

/* Foto di sezione INTEGRATA vicino alla descrizione, mai in una banda separata a fondo pagina (regola 13). */
.fig { border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-6); }
.fig img { width: 100%; aspect-ratio: 21 / 9; min-height: clamp(260px, 30vw, 460px); object-fit: cover; object-position: var(--fig-object-pos); }

/* ============================ pagina contatti ============================ */
.contact-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: start; }
@media (max-width: 899.98px) { .contact-cols { grid-template-columns: 1fr; } }

/* ⚠ Aside per fondo CHIARO: non si riusa la scheda della banda scura, che avrebbe i colori invertiti. */
.contact-info { background: var(--grad-tint); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(var(--space-5), 3vw, var(--space-7)); }
.contact-info dl { display: grid; gap: var(--space-5); }
.contact-info dt { font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--space-1); }
.contact-info dd { margin: 0; color: var(--ink); }
.contact-info a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.contact-info .btn { margin-top: var(--space-5); }

.contact-form { display: grid; gap: var(--space-4); }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 599.98px) { .contact-form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--field-radius);
  padding: 0.72rem 0.9rem; width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent-ink); }
/* ⚠ `.consent` è un flex: un <a> dentro il testo si spezzerebbe in un flex-item a sé — il testo va TUTTO
   dentro un solo <span>, link compreso. */
.consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.92rem; color: var(--ink-muted); }
.consent input { margin-top: 0.28rem; flex: 0 0 auto; }
.consent a { color: var(--accent-ink); text-decoration: underline; }

.contact-hero { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-7); }
.contact-hero img { width: 100%; height: clamp(300px, 38vw, 520px); object-fit: cover; object-position: var(--fig-object-pos); }

/* ============================ piè di pagina ============================ */
.site-footer { background: var(--grad-foot); color: var(--on-dark); padding-block: var(--space-8) var(--space-6); }
.site-footer__grid { display: grid; grid-template-columns: var(--footer-cols); gap: clamp(var(--space-6), 4vw, var(--space-8)); }
/* ⚠ Togliere una colonna da una griglia FISSA lascia un buco: la traccia resta e lo spazio a destra
   rimane vuoto. La regola scatta SOLO quando la colonna manca davvero, così chi ha tutte le colonne non
   cambia di un pixel. Vale per gli orari, che spariscono con la loro riga quando non sono dichiarati. */
.site-footer__grid:has(> :nth-child(2):last-child) { grid-template-columns: var(--footer-cols-2); }
.site-footer__col h3 { font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-lt); margin-bottom: var(--space-4); }
.site-footer__col ul { display: grid; gap: var(--space-2); }
.site-footer__col a { color: var(--on-dark-muted); }
.site-footer__col a:hover { color: var(--on-dark); text-decoration: underline; }
.site-footer p { color: var(--on-dark-muted); }
.site-footer .hours { color: var(--on-dark-muted); }

/* ⚠ `justify-content: space-between` con TRE elementi NON centra il mediano: lo posiziona dove capita,
   in funzione della larghezza dei due laterali (qui la riga legale è lunga e «Powered by Dgitaly»
   finiva spostato a sinistra del centro ottico). Il centraggio vero vuole `1fr auto 1fr`: le due
   colonne laterali si spartiscono lo spazio in parti UGUALI e il mediano resta al centro della riga
   qualunque cosa contengano. */
.site-footer__legal {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.18);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3) var(--space-5); align-items: center;
  font-size: 0.85rem; color: var(--on-dark-muted);
}
.site-footer__legal > :last-child { justify-self: end; }
@media (max-width: 699.98px) {
  .site-footer__legal { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer__legal > :last-child { justify-self: center; }
}
.site-footer__legal a { color: var(--on-dark-muted); text-decoration: underline; }
.site-footer__legal a:hover { color: var(--on-dark); }
/* Powered by Dgitaly (regola 1): il marchio è un badge quadrato SENZA scritta, quindi il testo è nostro
   e il logo non si deforma. */
.powered { display: inline-flex; align-items: center; gap: var(--space-2); }
.powered img { width: 20px; height: 20px; }
@media (max-width: 899.98px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ============================ barra CTA mobile ============================ */
.cta-bar { display: none; }
@media (max-width: 1023.98px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; inset: auto 0 0 0; z-index: 60;
    background: var(--brand); border-top: 1px solid rgba(255,255,255,.2);
  }
  .cta-bar a {
    padding: var(--space-4) var(--space-3); text-align: center;
    font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--on-dark);
  }
  .cta-bar a + a { border-left: 1px solid rgba(255,255,255,.2); background: var(--brand-mid); }
  /* Lo spazio per la barra, così l'ultima riga del piè non ci finisce sotto. */
  .wp-site-blocks { padding-bottom: 60px; }
}

/* ============================ 404 ============================ */
.notfound { padding-block: clamp(var(--space-8), 10vw, var(--space-10)); text-align: center; }
.notfound h1 { margin-bottom: var(--space-4); }
.notfound p { margin-inline: auto; margin-bottom: var(--space-6); }

/* Scheda di trattamento CON fotografia (pagina Trattamenti): la foto sta SOPRA il numerale, vicino al
   testo che descrive — mai raccolta in una banda a fondo pagina (regola 13). */
.treat__fig { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-4); }
.treat__fig img { width: 100%; aspect-ratio: 4 / 3; min-height: clamp(240px, 32vw, 470px); object-fit: cover; object-position: var(--fig-object-pos); transition: transform 620ms var(--ease); }
.treat--foto:hover .treat__fig img { transform: scale(1.03); }

/* ============================ mosaico dello studio ============================ */
/* ⚠ Mai una griglia piatta e uniforme: la categoria «Dottori» compone per mosaici asimmetrici. Due
   tessere rompono il passo — una ALTA (per lo scatto verticale) e una LARGA (per il panoramico) — e le
   altre restano quadre. Le dimensioni sono scelte sul RAPPORTO delle foto disponibili, non a caso. */
.gallery { padding-block: var(--section-y); background: var(--grad-carta2); }
/* ⚠ Il mosaico deve TASSELLARE per intero: con collocazioni automatiche la tessera alta e quella larga
   lasciavano celle scoperte e l'ultima foto finiva sola su una riga nuova. Qui la griglia è 4×2 = otto
   celle, e le sei fotografie le occupano TUTTE: la alta ne prende due in colonna, la larga due in riga,
   le altre quattro una ciascuna. Le posizioni sono DICHIARATE, non lasciate all'auto-placement. */
.mosaic {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(190px, 19vw, 275px)); gap: var(--tile-gap);
}
.mosaic > .tile:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.mosaic > .tile:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.mosaic > .tile:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
.mosaic > .tile:nth-child(4) { grid-area: 1 / 4 / 2 / 5; }
.mosaic > .tile:nth-child(5) { grid-area: 2 / 2 / 3 / 4; }
.mosaic > .tile:nth-child(6) { grid-area: 2 / 4 / 3 / 5; }
.tile { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-2); margin: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos); transition: transform 620ms var(--ease); }
.tile:hover img { transform: scale(1.05); }
/* Le classi restano come segno del RUOLO della tessera; la collocazione la fissa la griglia sopra. */
/* La didascalia vive sotto un velo sfumato: sul chiaro di una foto il bianco non reggerebbe, e un velo
   pieno spegnerebbe la fotografia. Compare al passaggio del puntatore e resta leggibile anche ferma. */
.tile figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--space-5) var(--space-4) var(--space-3);
  background: linear-gradient(180deg, rgba(1,65,77,0) 0%, rgba(1,65,77,.86) 100%);
  color: var(--on-dark); font-size: 0.82rem; line-height: 1.35;
  opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tile:hover figcaption, .tile:focus-within figcaption { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tile figcaption { opacity: 1; transform: none; } .tile:hover img { transform: none; } }
@media (max-width: 899.98px) {
  /* Su due colonne la tassellatura si rifà: la alta occupa una colonna su due righe, la larga le
     attraversa entrambe. Sei foto, sei celle piene, nessun buco. */
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, clamp(130px, 30vw, 185px)); }
  .mosaic > .tile:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
  .mosaic > .tile:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  .mosaic > .tile:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
  .mosaic > .tile:nth-child(4) { grid-area: 3 / 1 / 4 / 3; }
  .mosaic > .tile:nth-child(5) { grid-area: 4 / 1 / 5 / 2; }
  .mosaic > .tile:nth-child(6) { grid-area: 4 / 2 / 5 / 3; }
}

/* ============================ bande delle pagine interne ============================ */
/* Chiusura che INVITA ad agire in fondo a ogni pagina interna: una pagina che finisce nel nulla lascia
   il visitatore senza il gesto successivo. Colore diverso da fascia e piè, così i tre blocchi scuri
   restano tre cose distinte. */
.cta-band { background: var(--grad-panel); color: var(--on-dark); padding-block: clamp(2.6rem, 1.8rem + 3vw, 4.5rem); }
.cta-band__row { display: grid; justify-items: center; text-align: center; gap: var(--space-4); }
.cta-band h2 { color: var(--on-dark); max-width: 22ch; }
.cta-band p { color: var(--on-dark-muted); max-width: 56ch; }
.cta-band__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* I punti fermi: numerali editoriali su una riga di tre. Non sono decorazione — sono le tre frasi che il
   cliente ripete in tutte le pagine, qui raccolte una volta sola. */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-5), 3vw, var(--space-7)); }
.pillar {
  display: grid; gap: var(--space-2); padding: var(--space-5);
  background: var(--grad-scheda); border: 1px solid var(--line); border-radius: var(--radius-lg);
  border-top: 3px solid transparent; border-image: var(--grad-accento) 1;
}
.pillar__n { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
  background: var(--grad-accento); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pillar p { color: var(--ink); font-weight: 600; }
@media (max-width: 699.98px) { .pillars { grid-template-columns: 1fr; } }

/* Gli orari come banda propria: su una pagina Contatti sono il dato più cercato, e in fondo a un aside
   si perdono. */
.orari-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: center; }
.hours--big { font-size: 1.02rem; }
.hours--big li { padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.hours--big li:last-child { border-bottom: 0; }
@media (max-width: 899.98px) { .orari-band { grid-template-columns: 1fr; } }

/* Dentro la scheda la fotografia va a FILO del bordo: un riquadro dentro un riquadro fa cornice, e la
   cornice è il difetto tipico delle griglie di schede. */
.treat--foto { padding: 0; overflow: hidden; }
.treat--foto .treat__fig { margin-bottom: 0; border-radius: 0; }
.treat--foto > :not(.treat__fig) { margin-inline: clamp(var(--space-4), 2vw, var(--space-6)); }
.treat--foto > .treat__num { margin-top: var(--space-5); }
.treat--foto > p:last-child { margin-bottom: clamp(var(--space-4), 2vw, var(--space-6)); }

/* Il mosaico dei Contatti ha tre tessere: una larga che apre e due che chiudono la riga. */
.mosaic--contatti { grid-template-rows: repeat(2, clamp(230px, 24vw, 340px)); margin-bottom: var(--space-7); }

/* ============================ nastro dei trattamenti ============================ */
/* Le sei specialità che scorrono sotto la testata: sono le PAROLE DEL CLIENTE, non un ornamento, e
   dicono in tre secondi che cosa fa lo studio. ⚠ Il nastro è decorativo per lo screen reader (il suo
   contenuto è ripetuto per esteso nella sezione Trattamenti) e si FERMA su prefers-reduced-motion. */
.ribbon { background: var(--grad-nastro); color: var(--on-dark); overflow: hidden; }
.ribbon__viewport { display: flex; width: 100%; }
.ribbon__track {
  display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--space-3) var(--space-4) 0; margin: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 0.94rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap;
  animation: fp-ribbon 38s linear infinite;
}
.ribbon__track li { flex: 0 0 auto; }
.ribbon__track li[aria-hidden] { color: var(--accent-lt); }
@keyframes fp-ribbon { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ribbon__track { animation: none; } .ribbon__viewport { overflow-x: auto; } }

/* La chiamata all'azione di ogni trattamento: sul sito precedente chiudeva la rispettiva pagina, qui
   chiude la sua scheda. La freccia si sposta al passaggio del puntatore — il movimento dice che è un link. */
.treat__cta { margin-top: var(--space-4); }
.treat__cta a {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--accent-ink);
}
.treat__cta a::after { content: "→"; transition: transform var(--dur) var(--ease); }
.treat__cta a:hover { color: var(--brand-dark); }
.treat__cta a:hover::after { transform: translateX(4px); }