/* components.css — componenti health_professional. Core + CSS owned, niente dipendenze.
   Verticale sito-vetrina professionista sanitario: header fisso con wp:navigation, hero duotone
   asset-driven (foto/design), sezioni sobrie, sticky "Chiama" su mobile. */

/* ---------- Eyebrow / label (mono) ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent-ink); display: inline-flex; gap: var(--space-2); align-items: center;
}
.eyebrow--on-dark, .eyebrow--light { color: var(--accent-dark); }
.eyebrow::before { content: ""; width: 1.6em; height: 2px; background: currentColor; opacity: .85; }

/* ---------- Gallery "Il nostro studio" (foto reali a colori) ---------- */
.studio-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-7); }
@media (max-width: 880px) { .studio-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .studio-gallery { grid-template-columns: 1fr; } }
.studio-shot { margin: 0; border-radius: var(--radius-lg); aspect-ratio: 4 / 5; box-shadow: var(--shadow-sm);
  overflow: hidden; }
.studio-shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .8em 1.4em; border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--text-sm); text-decoration: none; border: 2px solid transparent;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--accent-ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); }
.btn--ghost.on-dark { color: var(--on-dark); border-color: rgba(255,255,255,.30); }
.btn--ghost.on-dark:hover { border-color: var(--on-dark); background: rgba(255,255,255,.06); }

/* Ponte core/button -> look ForgePress (editabile, round-trip valido; formalizzato in theme.json). */
.wp-block-button__link { border-radius: var(--radius-pill); padding: .8em 1.4em;
  font-weight: 600; font-size: var(--text-sm); border: 2px solid transparent; }
.wp-block-button.is-accent .wp-block-button__link { background: var(--accent); color: #fff; }
.wp-block-button.is-accent.on-dark .wp-block-button__link { background: var(--accent); color: #fff; }
.wp-block-button.is-ghost .wp-block-button__link { background: transparent; color: var(--accent-ink); border-color: var(--line); }
.wp-block-button.is-ghost.on-dark .wp-block-button__link { color: var(--on-dark); border-color: rgba(255,255,255,.30); background: transparent; }

/* ---------- Header (fisso/sticky, wordmark, wp:navigation) ---------- */
/* Il site-header è dentro il wrapper del template-part (WP): senza questo, il contenitore dello sticky è alto
   quanto l'header e lo "sticky" si stacca subito. display:contents dissolve il box del wrapper → l'header
   diventa figlio di .wp-site-blocks (alto quanto la pagina) e resta agganciato in alto durante lo scroll. */
.wp-block-template-part { display: contents; }
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.2) blur(8px); border-bottom: var(--border);
}
.site-header__row { display: flex; align-items: center; gap: var(--space-5); min-height: 74px; }
/* nav e CTA erano spinti ~24px sotto il centro da un margine di blocco WP: azzeralo e centra → spazio sopra = sotto. */
.site-header__row > * { align-self: center; margin-block: 0; }
.wordmark { display: inline-flex; align-items: baseline; gap: .45rem; text-decoration: none;
  font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--ink); }
.wordmark small { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
/* Wordmark con logo (progetti reali): marchio a sinistra + testo. */
.wordmark--logo { align-items: center; gap: .6rem; }
.wordmark__mark { height: 42px; width: 42px; flex: 0 0 auto; display: block; }
.wordmark__txt { display: inline-flex; align-items: baseline; gap: .45rem; }
/* wp:navigation reso: <nav class="site-nav"> con lista di navigation-item */
.site-header .site-nav { margin-left: auto; }
.site-nav .wp-block-navigation__container { gap: var(--space-5); }
.site-nav .wp-block-navigation-item__content { text-decoration: none; font-size: var(--text-sm);
  font-weight: 500; color: var(--ink-muted); }
.site-nav .wp-block-navigation-item__content:hover,
.site-nav .current-menu-item .wp-block-navigation-item__content { color: var(--accent-ink); }
.site-header__cta { flex: 0 0 auto; margin-left: var(--space-4); align-self: center;
  padding: .5em 1em; font-size: var(--text-sm); }
@media (max-width: 720px) { .site-header__cta { display: none; } }
/* Overlay mobile (hamburger): il backdrop-filter dell'header crea un containing-block per il position:fixed →
   l'overlay si fermava all'altezza dell'header (~76px) e il resto sbordava trasparente sopra la pagina. Full-viewport
   + sfondo pieno + design pulito (voci a sinistra con divisori). Nav flat: nessun sotto-menu da appiattire. */
.wp-block-navigation__responsive-container.is-menu-open { height: 100vh; max-height: 100vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; background: var(--paper); }
/* padding-bottom generoso: l'ultima voce deve restare sopra la cta-bar fissa "Chiama" (~74px su mobile). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 74px var(--space-6) 96px; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
  width: 100%; border-bottom: 1px solid rgba(0,0,0,.08); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100% !important; padding: var(--space-4) 0 !important; font-size: var(--text-md) !important; font-weight: 600 !important;
  color: var(--ink) !important; justify-content: flex-start !important; margin-left: 0 !important; text-align: left !important; }

/* ---------- Hero design-only (fallback senza foto): fascia scura ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--on-dark);
  background: linear-gradient(158deg, var(--brand-dark) 0%, var(--brand) 72%, var(--brand-mid) 100%);
  isolation: isolate;
}
.hero__inner { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); max-width: 42rem; }
.hero h1 { color: #fff; margin-top: var(--space-4); }
.hero__lead { font-size: var(--text-md); color: var(--on-dark); margin-top: var(--space-5); max-width: 36rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Hero con foto di sfondo a scorrimento (slideshow crossfade + scrim teal) ---------- */
/* Le foto dello studio scorrono dietro uno scrim teal forte: il testo bianco resta leggibile su ogni
   fotogramma. Fail-safe: senza animazione (reduced-motion) resta visibile la prima foto. */
.hero--media { position: relative; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--brand-dark); }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hero-slide:nth-child(1) { opacity: 1; }
.hero--media::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(158deg, rgba(11,43,46,.86) 0%, rgba(11,43,46,.74) 52%, rgba(14,59,58,.82) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .hero-slide { animation: fp-hero-fade 32s linear infinite; }
  .hero-slide:nth-child(2) { animation-delay: 8s; }
  .hero-slide:nth-child(3) { animation-delay: 16s; }
  .hero-slide:nth-child(4) { animation-delay: 24s; }
}
@keyframes fp-hero-fade {
  0% { opacity: 0; transform: scale(1.0); }
  3% { opacity: 1; }
  22% { opacity: 1; }
  27% { opacity: 0; }
  100% { opacity: 0; transform: scale(1.07); }
}

/* ---------- Hero split (foto a colori + sfondo chiaro): registro amichevole ---------- */
.hero-split { position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 70%); border-bottom: var(--border); }
.hero-split__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: var(--space-8); align-items: center;
  padding-block: clamp(2.5rem, 1.4rem + 5vw, 5rem); }
@media (max-width: 900px) { .hero-split__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.hero-split__body { max-width: 34rem; }
.hero-split h1 { color: var(--ink); margin-top: var(--space-4);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: var(--lh-tight); }
.hero-split__lead { font-size: var(--text-md); color: var(--ink-muted); margin-top: var(--space-5); max-width: 34rem; }
.hero-split__cta { margin-top: var(--space-6); }
.hero-split__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .hero-split__media { aspect-ratio: 16 / 10; } }
.hero-split__photo { width: 100%; height: 100%; object-fit: cover; }

/* striscia contatto rapido nell'hero (fascia scura = design-only; chiara = split) */
.quickbar { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-7);
  padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.16); }
.quickbar__item { display: flex; flex-direction: column; gap: 2px; }
.quickbar__k { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-dark); }
.quickbar__v { font-weight: 600; color: #fff; font-size: var(--text-sm); }
.hero-split .quickbar { border-top-color: var(--line); }
.hero-split .quickbar__k { color: var(--accent-ink); }
.hero-split .quickbar__v { color: var(--ink); }

/* ---------- Section heading ---------- */
.section-intro { max-width: 48rem; margin-bottom: var(--space-7); }
.section-intro h2 { margin-top: var(--space-3); }
.lead { color: var(--ink-muted); font-size: var(--text-md); margin-top: var(--space-4); }
.muted { color: var(--ink-muted); }
.statement { font-size: var(--text-xl); font-weight: 600; color: var(--ink); line-height: var(--lh-snug); }
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-8); align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: var(--space-6); } }
.link-arrow { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.section-more { margin-top: var(--space-6); }

/* ---------- Patologie trattate (card) ---------- */
.conditions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 880px) { .conditions { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .conditions { grid-template-columns: 1fr; } }
.condition { background: var(--surface); border: var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm); }
.condition h3 { margin-bottom: var(--space-3); font-size: var(--text-md); }
.condition p { color: var(--ink-muted); font-size: var(--text-sm); }
.condition__k { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-ink);
  letter-spacing: .08em; }

/* ---------- Metodo (step) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
@media (max-width: 880px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step { padding: var(--space-5); border-radius: var(--radius); background: var(--surface); border: var(--border); }
.step__n { font-family: var(--font-mono); font-weight: 600; color: var(--accent-ink); font-size: var(--text-sm); }
.step h3 { font-size: var(--text-md); margin: var(--space-3) 0; }
.step p { font-size: var(--text-sm); color: var(--ink-muted); }

/* ---------- Contatti (contact band) ---------- */
.contact { background: var(--brand-dark); color: var(--on-dark); }
.contact .eyebrow--light { color: var(--accent-dark); }
.contact h2 { color: #fff; margin-top: var(--space-3); }
.contact__lead { color: var(--on-dark); margin-top: var(--space-4); max-width: 34rem; }
.contact__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: center; }
@media (max-width: 820px) { .contact__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.contact__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.facts { display: grid; gap: var(--space-5); }
.facts > div { display: grid; gap: 2px; }
.facts dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-dark); }
.facts dd { color: var(--on-dark); }
.facts a { color: #fff; }
/* Variante su fondo CHIARO (pagina Contatti): la .facts base è pensata per la fascia scura. */
.facts--light dt { color: var(--accent-ink); }
.facts--light dd { color: var(--ink-muted); }
.facts--light a { color: var(--accent-ink); }

/* ---------- Pagina interna (page-head) ---------- */
.page-head { background: var(--surface); border-bottom: var(--border); padding-block: var(--space-8) var(--space-7); }
/* Titolo di pagina contenuto (proporzionato, non sovradimensionato). */
.page-head h1 { color: var(--ink); margin-top: var(--space-3); font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); }
.page-head p { color: var(--ink-muted); font-size: var(--text-md); margin-top: var(--space-4); }

/* ---------- Pagina Chiropratica: corpo + "Cosa trattiamo" (marcatori ciano) ---------- */
.chiro-grid { display: grid; grid-template-columns: 1.5fr .9fr; gap: var(--space-8); align-items: start; }
@media (max-width: 880px) { .chiro-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.chiro-treats { background: var(--surface); border: var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm); position: sticky; top: 96px; }
@media (max-width: 880px) { .chiro-treats { position: static; } }
.chiro-list { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.chiro-list li { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; color: var(--ink); }
.chiro-list li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sage); flex: 0 0 auto; }
.chiro-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 720px) { .chiro-photos { grid-template-columns: 1fr; } }
.chiro-photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 3 / 2; }
.chiro-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Foto distribuite sulla pagina: 2 in alto (riga sotto testo/card) + 1 in basso (con "Test ortopedici"). */
/* Le 2 foto in alto stanno nella STESSA riga della griglia (row 2) con la STESSA altezza → ALLINEATE (top e bottom),
   a prescindere dall'altezza di testo/card. La card non è più sticky in questo layout. */
.chiro-grid .chiro-treats { position: static; }
.chiro-grid > .chiro-photo { aspect-ratio: auto; height: clamp(320px, 30vw, 400px); }
@media (max-width: 880px) { .chiro-grid > .chiro-photo { aspect-ratio: 3 / 2; height: auto; } }
/* Margine sopra le foto (row-gap della griglia, --space-8) = margine sotto (--space-8, .chiro-lead) → simmetrico. */
.chiro-lead { padding-bottom: var(--space-8); }
/* Sezione bassa: foto (grande) a sinistra + testo "Test ortopedici" a destra, centrati. */
.chiro-tests { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
@media (max-width: 880px) { .chiro-tests { grid-template-columns: 1fr; gap: var(--space-6); } }
.chiro-photo--feature { aspect-ratio: 4 / 3; }

/* ---------- Footer ---------- */
/* margin-top:0 + bordo tenue: se la sezione precedente è scura (contact band) non lascia lo stacco bianco;
   il bordo delinea footer e fascia contatti quando sono adiacenti. */
.site-footer { background: var(--brand-dark); color: var(--on-dark-muted); margin-top: 0; border-top: 1px solid rgba(255,255,255,.08); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); padding-block: var(--space-8); }
@media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.site-footer .wordmark { color: #fff; }
.site-footer .wordmark small { color: var(--accent-dark); }
.site-footer__tag { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--on-dark-muted); max-width: 30ch; }
.site-footer__demo { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--accent-dark); }
.site-footer h4 { font-size: var(--text-xs); font-family: var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: var(--space-3); }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--space-4);
  font-size: var(--text-xs); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; }

/* ---------- Sticky CTA bar (solo mobile): Chiama ---------- */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex;
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: var(--border);
}
.cta-bar a { flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  border-radius: 12px; font-weight: 600; font-size: var(--text-sm); text-decoration: none; }
.cta-bar__call { background: var(--accent); color: #fff; }
@media (min-width: 721px) { .cta-bar { display: none; } }
@media (max-width: 720px) { body { padding-bottom: 74px; } }

/* ---------- Form contatti (placeholder statico finché il plugin form non è cablato) ---------- */
.contact-form { display: grid; gap: var(--space-4); max-width: 46rem; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .contact-form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.field input, .field textarea { font: inherit; padding: .7em .9em; border: var(--border); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); width: 100%; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-muted); }
.consent input { margin-top: .25em; }
.form-note { font-size: var(--text-sm); color: var(--ink-muted); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--space-4); max-width: 56rem; }
.faq details { border: var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--space-4) var(--space-5); }
.faq summary { font-weight: 600; cursor: pointer; color: var(--ink); }
.faq p { margin-top: var(--space-3); color: var(--ink-muted); font-size: var(--text-sm); }

/* ---------- 404 ---------- */
.notfound { text-align: center; max-width: 40rem; margin-inline: auto; }
.notfound .eyebrow { justify-content: center; }
.notfound h1 { margin-top: var(--space-3); }
.notfound p { color: var(--ink-muted); font-size: var(--text-md); margin-top: var(--space-4); }
.notfound .wp-block-buttons { justify-content: center; margin-top: var(--space-6); }

/* ---------- Powered by Dgitaly (footer, reso solo nei progetti reali via fence fp:real) ---------- */
.site-footer__dgitaly { display: inline-flex; align-items: center; gap: .45em; color: var(--on-dark-muted);
  font-size: var(--text-xs); text-decoration: none; opacity: .82; transition: opacity var(--dur) var(--ease); }
.site-footer__dgitaly:hover { opacity: 1; color: var(--on-dark); text-decoration: none; }
.site-footer__dgitaly img { height: 20px; width: 20px; display: block; border-radius: 5px; }
.site-footer__dgitaly span { font-weight: 600; letter-spacing: .01em; }

/* ---------- Micro-animazioni (sobrie, CSS-only, fail-visible, rispettano prefers-reduced-motion) ---------- */
/* Hover raffinati: card e step si sollevano; le foto guadagnano un lieve zoom (solo con motion abilitato). */
.condition, .step { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.condition:hover, .step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sage); }
@media (prefers-reduced-motion: no-preference) {
  .studio-shot img, .hero-split__photo, .chiro-photo img { transition: transform 500ms var(--ease); }
  .studio-shot:hover img, .hero-split__media:hover .hero-split__photo, .chiro-photo:hover img { transform: scale(1.045); }
}
/* Reveal allo scroll via micro-JS (reveal.js aggiunge .is-visible su .reveal all'ingresso in viewport).
   Safari non supporta animation-timeline:view(), quindi si usa IntersectionObserver. FAIL-VISIBLE: senza la
   classe .js sull'<html> (JS assente/fallito) il contenuto è sempre visibile. L'hero è escluso (above-the-fold). */
.js .reveal { opacity: 0; transform: translateY(20px); will-change: opacity, transform; }
.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
/* Stagger percepibile ma sobrio: le figlie delle griglie entrano scalate. */
.js .conditions > .reveal, .js .steps > .reveal, .js .studio-gallery > .reveal, .js .contact__grid > .reveal {
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }