/* components.css — le bande del verticale heavy_vehicle_workshop.
   Registro BeMechanic5: testata fotografica scura a piena larghezza, titolo grande, e un colore saturo
   in CAMPI PIENI grandi (mai filetti). Il parco fotografico del mestiere è fatto di ritratti piccoli
   scattati col telefono: il carattere lo porta il colore, non la fotografia.

   ⚠⚠ Disciplina dell'ambra, valida in TUTTO il file: `--accent` è una SUPERFICIE. Sopra ci va
   `--ink` (11,37), mai il bianco (1,62). Come inchiostro l'ambra vale solo sulle bande scure (11,98);
   sui fondi chiari l'accento testuale è `--accent-ink` (6,92). */

/* ⚠⚠ SUPERFICI SCURE — la regola che chiude un'intera classe di difetti.
   Inseguire ogni componente con un override `.banda-scura .x { color: … }` non funziona: le superfici
   scure sono CINQUE (bande, ferro, testata, piè, testata fotografica) e ogni regola scritta per una
   sola lascia le altre nere su nero — è successo tre volte di fila (menu, <strong>, recapiti del piè).
   Qui si rimappano i TOKEN dentro il sottoalbero: chi consuma `--ink`, `--ink-muted` o `--accent-ink`
   si adatta da solo, oggi e per ogni componente che verrà. */
:is(.banda-scura, .banda-ferro, .site-header, .site-footer, .hero) {
  --ink: var(--on-dark);
  --ink-muted: var(--on-dark-muted);
  --accent-ink: var(--accent);
  --line: rgba(255, 193, 60, .22);
  --surface: var(--brand-mid);
  --paper: var(--brand);
}

/* Altezza della testata fissa: serve alle ancore, che senza finirebbero SOTTO di essa. Un valore
   solo, consumato da entrambe: due numeri scollegati divergono al primo ritocco dell'header. */
:root { --header-h: 96px; }
@media (max-width: 720px) { :root { --header-h: 84px; } }
[id="officina"], [id="chi-siamo"], [id="servizi"], [id="gallery"], [id="contatti"], #main {
  scroll-margin-top: var(--header-h);
}

/* ============================== testata ============================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--brand);
  border-bottom: 3px solid var(--accent);
  /* ⚠ Senza questo, TUTTO nella testata eredita `--ink` dal body: le voci del menu e l'hamburger
     escono neri su fondo nero (1,0 di contrasto). Il difetto non si vede nel sorgente — gli elementi
     ci sono, sono in posizione e hanno la loro larghezza — solo nel colore CALCOLATO. */
  color: var(--on-dark);
}
/* ⚠ WordPress avvolge ogni parte di template in un <div>, che diventerebbe il contenitore dello
   sticky e lo renderebbe inerte: dichiarato ≠ applicato. */
.wp-block-template-part { display: contents; }

/* Barra dei recapiti: la nota del cliente chiede telefono, email e Facebook IN EVIDENZA. */
.recapiti-bar { background: var(--brand-dark); font-size: var(--t-xs); }
.recapiti-bar__row {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  align-items: center; justify-content: flex-end; padding-block: .45rem;
}
.recapiti-bar a { color: var(--on-dark-muted); display: inline-flex; align-items: center; gap: .4rem; }
.recapiti-bar a:hover { color: var(--accent); }

.site-header__row {
  display: flex; align-items: center; gap: var(--space-4);
  padding-block: var(--space-3);
  transition: padding-block .35s var(--ease);
}
/* La testata si CONTRAE scorrendo: la barra dei recapiti si ritira, il marchio rimpicciolisce e la
   riga si stringe. Guadagna due cose insieme — l'ancora non deve più scavalcare 211px di intestazione,
   e la pagina smette di sembrare ferma. La classe `is-scrolled` la mette reveal.js (opt-in, zero JS nuovo). */
.site-header.is-scrolled .recapiti-bar { max-height: 0; overflow: hidden; padding-block: 0; }
.site-header .recapiti-bar { max-height: 4rem; transition: max-height .35s var(--ease); }
.site-header.is-scrolled .site-header__row { padding-block: var(--space-2); }
.site-header.is-scrolled .wordmark--logo img { height: 26px; }
.site-header .wordmark--logo img { transition: height .35s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.site-header__row > * { align-self: center; margin-block: 0; }

.wordmark { display: inline-flex; align-items: center; gap: .65rem; }
.wordmark__mark { width: 40px; height: 40px; flex: 0 0 auto; }
/* Sui siti reali il marchio È il wordmark del cliente (immagine): il testo del demo sparisce con lui.
   ⚠ Il simbolo che accompagna il wordmark sulla sorgente è 21×23 px e illeggibile: resta fuori finché
   il cliente non dice cosa raffigura — ricostruirlo a occhio sarebbe inventarlo. */
.wordmark--logo img { height: 34px; width: auto; }
.wordmark__txt {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: .02em; text-transform: uppercase; color: var(--on-dark); line-height: 1;
}
.wordmark__txt em { font-style: normal; color: var(--accent); }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: var(--space-4); align-items: center; }
/* ⚠ A parità di specificità vince WordPress: il CSS dei blocchi è iniettato DOPO il tema. Per le voci
   del menu serve un livello in più della sua regola — si ricopia il suo schema di selettore invece di
   inseguirlo con `!important`. */
.site-header .site-nav a,
.site-header .site-nav .wp-block-navigation-item__content {
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--on-dark);
  padding-block: .3rem; border-bottom: 2px solid transparent;
}
.site-header .site-nav a:hover,
.site-header .site-nav .wp-block-navigation-item__content:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* L'hamburger è un SVG inline: prende `currentColor`, che sulla testata scura dev'essere chiaro. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close { color: var(--on-dark); }

/* Il telefono in testata è il punto d'azione del mestiere: campo ambra pieno, testo inchiostro. */
.header-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: .04em;
  padding: .6rem 1.1rem;
}
.header-cta:hover { background: var(--accent-dark); }

/* --- mobile: la testata porta SOLO marchio e hamburger, spinto a destra --- */
@media (max-width: 860px) {
  .site-header .header-cta { display: none; }
  .recapiti-bar__row { justify-content: center; gap: var(--space-3); }
  .site-header__row { gap: var(--space-2); }
  .site-nav { margin-left: auto; }
  .wordmark--logo img { height: 26px; }
}

/* --- il pannello del menu mobile: WP lo lascia nudo, e nudo sembra rotto --- */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--brand-dark);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  /* ⚠ Il padding superiore deve superare l'ALTEZZA DELLA X più il suo margine, sennò il riquadro di
     chiusura si posa sopra la prima voce (misurato: X a 56px + 2×space-3 => 100px). */
  padding: calc(56px + var(--space-6)) var(--gutter) var(--space-8);
  align-items: stretch;
  width: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 0; width: 100%;
}
/* ⚠ L'<a> del blocco è `display:block` e in una colonna flex si stringe sul testo, finendo allineato
   a destra: con width 100% torna a sinistra e la riga intera diventa bersaglio. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block; width: 100%;
  padding: var(--space-3) 0;
  font-size: 1.6rem; letter-spacing: .06em;
  border-bottom: 1px solid rgba(255, 193, 60, .22);
  border-top: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child .wp-block-navigation-item__content { border-top: 1px solid rgba(255, 193, 60, .22); }
/* La X: bersaglio pieno e tratto spesso. Un glifo sottile su un pannello nero non si trova. */
.site-header .wp-block-navigation__responsive-container-close {
  width: 56px; height: 56px; inset-block-start: var(--space-3); inset-inline-end: var(--gutter);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--accent); color: var(--accent);
}
.site-header .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }
.site-header .wp-block-navigation__responsive-container-close svg path { stroke: currentColor; stroke-width: 1.4; }
.site-header .wp-block-navigation__responsive-container-open { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.site-header .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }

/* ============================== testata fotografica ============================== */
.hero { position: relative; isolation: isolate; background: var(--brand); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Il velo: il titolo bianco deve reggere sopra una fotografia d'officina, che è chiara a chiazze.
   ⚠ Il limite lo danno i pixel CHIARI dietro il testo, non la media dell'immagine. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,13,10,.62) 0%, rgba(14,13,10,.74) 55%, rgba(14,13,10,.9) 100%);
}
.hero__inner { padding-block: clamp(4.5rem, 12vw, 9rem); }
.hero__eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent);
  display: inline-flex; align-items: center; gap: .7rem;
}
.hero__eyebrow::before { content: ""; width: 42px; height: 3px; background: var(--accent); }
.hero__title {
  font-size: var(--t-3xl); color: var(--on-dark); margin-top: var(--space-3);
  max-width: 18ch;
}
.hero__title em { font-style: normal; color: var(--accent); }
.hero__lead {
  color: var(--on-dark-muted); margin-top: var(--space-4); max-width: 54ch; font-size: var(--t-lg);
}
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* Variante senza fotografia hero-grade: campo ambra pieno, MAI una foto finta. */
.hero--design { background: var(--brand); }
.hero--design::after { background: none; }
.hero--design .hero__inner { position: relative; }
.hero--design .hero__inner::before {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 38%;
  background: var(--accent); z-index: -1;
}
@media (max-width: 860px) { .hero--design .hero__inner::before { display: none; } }

/* ============================== bottoni ============================== */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .8rem 1.5rem; border: 2px solid transparent;
}
.btn--primario { background: var(--accent); color: var(--on-accent); }
.btn--primario:hover { background: var(--accent-dark); }
/* ⚠⚠ Il fantasma esiste in DUE forme perché l'ambra come TESTO vale solo su scuro (11,98) e su
   chiaro fa 1,54. Il default è quello per fondo CHIARO — l'errore, se si sbaglia contesto, cade dalla
   parte sicura; la forma ambra si accende solo DENTRO una banda scura. */
.btn--fantasma { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn--fantasma:hover { background: var(--accent-ink); color: var(--paper); }
.banda-scura .btn--fantasma, .banda-ferro .btn--fantasma, .hero .btn--fantasma { border-color: var(--accent); color: var(--accent); }
.banda-scura .btn--fantasma:hover, .banda-ferro .btn--fantasma:hover, .hero .btn--fantasma:hover { background: var(--accent); color: var(--on-accent); }

/* ============================== bande e testate di sezione ============================== */
.banda-scura { background: var(--brand); color: var(--on-dark); }
.banda-scura h2, .banda-scura h3 { color: var(--on-dark); }
.banda-ferro { background: var(--brand-mid); color: var(--on-dark); }
.banda-ferro h2, .banda-ferro h3 { color: var(--on-dark); }

.testa { max-width: 60ch; }
.testa__eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: .7rem;
}
.testa__eyebrow::before { content: ""; width: 42px; height: 3px; background: var(--accent); }
.banda-scura .testa__eyebrow, .banda-ferro .testa__eyebrow { color: var(--accent); }
.testa h2 { font-size: var(--t-2xl); margin-top: var(--space-3); }
.testa__lead { margin-top: var(--space-3); color: var(--ink-muted); font-size: var(--t-lg); max-width: 62ch; }
.banda-scura .testa__lead, .banda-ferro .testa__lead { color: var(--on-dark-muted); }

/* ⚠ La misura di lettura sta sul PARAGRAFO, non sul contenitore: un `ch` su un display da 40px non
   è lo stesso `ch` del corpo da 17. */
.prosa { max-width: none; }
.prosa p { max-width: 70ch; }
.testa__lead { max-width: 58ch; }
.tessere__cella p, .servizio p, .chisiamo__blocco p { max-width: 46ch; }
.prosa p { color: var(--ink-muted); }
.banda-scura .prosa p, .banda-ferro .prosa p { color: var(--on-dark-muted); }

/* ============================== tessere della testata (le tre schede) ============================== */
.tessere { display: grid; gap: 3px; grid-template-columns: repeat(3, 1fr); background: var(--line); }
.tessere__cella { background: var(--paper); padding: var(--space-5) var(--space-4); }
.tessere__cella h3 {
  font-size: var(--t-lg); display: inline-flex; align-items: center; gap: .6rem;
}
.tessere__cella h3::before { content: ""; width: 10px; height: 22px; background: var(--accent); flex: 0 0 auto; }
.tessere__cella p { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--t-sm); }
@media (max-width: 860px) { .tessere { grid-template-columns: 1fr; } }

/* ============================== officina (featured) ============================== */
.officina { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-7); align-items: start; }
.officina__quesiti { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.officina__quesito {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  border-left: 4px solid var(--accent); padding-left: var(--space-3);
}
.officina__quesito span { color: var(--ink); }
.officina__media { position: relative; align-self: stretch; }
.officina__media img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
/* Il dato numerico: campo ambra pieno che INVADE la fotografia, come chiede il linguaggio della
   categoria. Il numero è inchiostro sull'ambra (11,37). */
.dato {
  position: absolute; left: 0; bottom: 0; background: var(--accent); color: var(--on-accent);
  padding: var(--space-3) var(--space-4); max-width: 62%;
}
.dato__n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; }
.dato__t { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); }
@media (max-width: 900px) { .officina { grid-template-columns: 1fr; } .officina__media img { height: auto; } }

/* ============================== chi siamo (trust) ============================== */
.chisiamo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.chisiamo__blocchi { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.chisiamo__blocco { border-top: 3px solid var(--accent); padding-top: var(--space-3); }
.chisiamo__blocco h3 { font-size: var(--t-lg); }
.chisiamo__blocco p { margin-top: var(--space-2); color: var(--on-dark-muted); font-size: var(--t-sm); }
.chisiamo__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) { .chisiamo { grid-template-columns: 1fr; } }

/* ============================== cosa facciamo (method) ============================== */
.metodo { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--space-7); align-items: center; }
.metodo__media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.metodo__nota {
  margin-top: var(--space-4); background: var(--accent); color: var(--on-accent);
  padding: var(--space-4); font-weight: 500;
}
@media (max-width: 900px) { .metodo { grid-template-columns: 1fr; } }

/* ============================== i sei servizi (NON cliccabili) ============================== */
/* ⚠ Il cliente ha chiesto ESPRESSAMENTE tessere non cliccabili: qui non esiste nessun <a>, e non
   deve comparirne uno in futuro «per comodità». */
.servizi__griglia {
  margin-top: var(--space-6);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.servizio__media { position: relative; background: var(--brand-mid); overflow: hidden; }
.servizio__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
/* La tessera reagisce al puntatore: la fotografia avanza e schiarisce, e una lama d'ambra sale dal
   basso. Senza, la griglia è un tabellone e non un oggetto. */
.servizio:hover .servizio__media img { transform: scale(1.06); filter: saturate(1.12) contrast(1.04); }
.servizio__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.servizio:hover .servizio__media::after { transform: scaleX(1); }
.servizio h3 { transition: color .3s var(--ease); }
.servizio:hover h3 { color: var(--accent-ink); }
.servizio__n {
  position: absolute; left: 0; top: 0; background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  padding: .3rem .75rem; line-height: 1.2;
}
.servizio h3 { font-size: var(--t-lg); margin-top: var(--space-3); }
.servizio p { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--t-sm); }
@media (max-width: 980px) { .servizi__griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .servizi__griglia { grid-template-columns: 1fr; } }

/* ============================== mosaico dei lavori (gallery) ============================== */
/* Il parco è fatto di ritratti piccoli: il mosaico li mette in colonna 3:4 e non chiede a nessuno di
   reggere una banda a piena larghezza. */
.mosaico__griglia {
  margin-top: var(--space-6);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
}
.mosaico figure { margin: 0; background: var(--brand-mid); overflow: hidden; position: relative; }
.mosaico img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform .7s var(--ease), filter .5s var(--ease);
  filter: saturate(.86) contrast(1.02);
}
.mosaico a.zoom:hover img, .mosaico a.zoom:focus-visible img { transform: scale(1.08); filter: saturate(1.1) contrast(1.05); }
/* Il segno «apri»: compare solo al puntatore, non ruba spazio a riposo. */
.mosaico a.zoom::after {
  content: ""; position: absolute; inset: 0; background: rgba(14, 13, 10, 0);
  transition: background .4s var(--ease);
}
.mosaico a.zoom:hover::after, .mosaico a.zoom:focus-visible::after { background: rgba(14, 13, 10, .28); }
/* Due tessere prendono doppia altezza: il mosaico non è una griglia regolare. */
/* ⚠ Le tessere a doppia altezza lasciavano buchi: con `grid-row: span 2` le righe non si richiudono e
   il mosaico diventa una scacchiera bucata. Griglia REGOLARE, righe piene, un solo rapporto. */
.mosaico figure { grid-row: auto; }
@media (max-width: 980px) { .mosaico__griglia { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .mosaico__griglia { grid-template-columns: repeat(2, 1fr); } }

/* ============================== sede e orari (contact_details) ============================== */
.sede { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.sede__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sede__dati { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.sede__dl dt {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent-ink);
}
.sede__dl dd { margin: .2rem 0 0; color: var(--ink); }
.banda-scura .sede__dl dt { color: var(--accent); }
.banda-scura .sede__dl dd { color: var(--on-dark); }
.orari { display: grid; gap: .3rem; }
.orari__riga { display: flex; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--line); padding-block: .35rem; }
.banda-scura .orari__riga { border-bottom-color: rgba(255, 193, 60, .28); }
@media (max-width: 900px) { .sede { grid-template-columns: 1fr; } }

/* ============================== contatti e modulo ============================== */
.contatti { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-7); align-items: start; }
.contact-form { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field { display: grid; gap: .35rem; }
.field label {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-muted);
}
/* ⚠ Il modulo vive nella banda scura: l'inchiostro tenue lì misura 2,58. */
.banda-scura .field label { color: var(--on-dark-muted); }
.banda-scura .consent { color: var(--on-dark-muted); }
.banda-scura .consent a { color: var(--accent); }
.field input, .field textarea {
  border: 1px solid var(--line); background: var(--paper); padding: .7rem .8rem; width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent-ink); }
/* ⚠ `.consent` è un flex: se il testo contiene un <a> si spezzerebbe in più flex-item, quindi TUTTO
   il testo (link incluso) sta dentro un solo <span>. */
.consent { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--t-sm); color: var(--ink-muted); }
.consent a { color: var(--accent-ink); text-decoration: underline; }
@media (max-width: 900px) {
  .contatti { grid-template-columns: 1fr; }
  .contact-form .row { grid-template-columns: 1fr; }
}

/* ============================== piè ============================== */
.site-footer { background: var(--brand-dark); color: var(--on-dark-muted); }
/* ⚠ Tre colonne di larghezza diversa NON danno una colonna centrale centrata: il centro della
   seconda cade dove finisce la prima. Con tre frazioni UGUALI il centro della seconda coincide col
   centro della riga, e i contatti si allineano a destra dentro la propria. */
.site-footer__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  padding-block: var(--space-7);
}
.site-footer__row > :nth-child(2) { justify-self: center; text-align: center; }
.site-footer__row > :nth-child(3) { justify-self: end; text-align: right; }
.site-footer__row > :nth-child(3) .sede__dl dd { text-align: right; }
.site-footer h3 {
  color: var(--accent); font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.site-footer ul { margin-top: var(--space-3); display: grid; gap: .5rem; }
.site-footer a:hover { color: var(--accent); }
.site-footer__coda {
  border-top: 1px solid rgba(255, 193, 60, .22);
  padding-block: var(--space-3);
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
  font-size: var(--t-xs);
}
.dgitaly { display: inline-flex; align-items: center; gap: .45rem; }
.dgitaly img { width: 20px; height: 20px; }
@media (max-width: 860px) { .site-footer__row { grid-template-columns: 1fr; } }

/* ============================== barra CTA mobile ============================== */
.cta-bar { display: none; }
@media (max-width: 720px) {
  .cta-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--accent); color: var(--on-accent);
  }
  .cta-bar a {
    flex: 1; text-align: center; padding: .85rem .5rem;
    font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  }
  .cta-bar a + a { border-left: 2px solid rgba(21, 20, 15, .28); }
  body { padding-bottom: 3.6rem; }
}

/* Etichetta autonoma: un <dt> senza <dd> non è una lista di definizioni (axe: definition-list). */
.sede__etichetta {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent-ink);
  margin-bottom: var(--space-2);
}
.banda-scura .sede__etichetta { color: var(--accent); }

/* ⚠ Il contenitore responsive del blocco nav porta un proprio box che gonfia la riga della testata:
   con logo 26px e CTA 49px la riga misurava 134. A riposo (menu chiuso) non deve occupare nulla oltre
   alle voci. Misurato: 134 -> 72px, e l'ancora scende di pari passo. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
  padding: 0; margin: 0; gap: 0;
}
.site-header .wp-block-navigation,
.site-header .wp-block-navigation__container { margin-block: 0; }
.site-header__row { align-items: center; }
.site-header__row > * { margin-block: 0; }

/* ⚠ Il blocco nav di WordPress porta un box proprio (112px) che nessun figlio giustifica: invece di
   inseguirlo, la riga della testata dichiara la PROPRIA altezza e ci centra dentro tutto. Un'altezza
   dichiarata è anche l'unica che l'ancora può conoscere in anticipo. */
/* ⚠ Un'ALTEZZA fissa sulla riga non basta: la nav resta un flex-item che va a capo, e l'hamburger del
   blocco resta visibile perché la sua soglia è il breakpoint di WP, non la nostra. La riga deve essere
   `nowrap` e l'hamburger va spento esplicitamente sopra il nostro breakpoint. */
.site-header__row { height: 86px; padding-block: 0; flex-wrap: nowrap; }
.site-header.is-scrolled .site-header__row { height: 64px; }
.site-header .site-nav { flex-wrap: nowrap; }
.site-header .site-nav ul { flex-wrap: nowrap; }
@media (min-width: 861px) {
  .site-header .wp-block-navigation__responsive-container-open { display: none !important; }
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: flex !important; position: static; width: auto; background: none;
  }
}
.site-header .site-nav,
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open),
.site-header .wp-block-navigation__responsive-container-content { min-height: 0; }
.site-header .site-nav { align-items: center; display: flex; }
@media (max-width: 860px) {
  .site-header__row { height: 68px; }
  .site-header.is-scrolled .site-header__row { height: 60px; }
}

/* La misura di lettura si dichiara sul PARAGRAFO ovunque, non solo dove ci si è ricordati. */
.officina p, .chisiamo p, .metodo p, .sede p, .contatti p, .mosaico p { max-width: 66ch; }
.officina__quesito span:last-child { max-width: 58ch; }
.metodo__nota { max-width: 56ch; }

/* ============================== tocchi di mestiere ============================== */
/* La fotografia dell'officina SCAVALCA il bordo della banda.
   ⚠ Una foto centrata non scavalca mai: il padding della sezione ne assorbe la sporgenza e la banda
   cresce con lei. Va ANCORATA a un bordo e tirata oltre con un margine maggiore del padding, così il
   suo contributo all'altezza cala e la riga la decide il testo. */
.officina { align-items: stretch; }
.officina__media { align-self: end; margin-bottom: calc(var(--section-y) * -0.42); }
.officina__media img { box-shadow: 0 30px 70px rgba(14, 13, 10, .35); }
@media (max-width: 900px) { .officina__media { margin-bottom: 0; align-self: auto; } }

/* Parallasse leggera sulla testata: la fotografia resta indietro mentre il testo sale. */
.hero__media img { will-change: transform; }

/* Il filetto d'ambra sotto i titoli si DISEGNA quando la banda entra in scena. */
.testa h2::after, .officina h2::after {
  content: ""; display: block; width: 76px; height: 4px; background: var(--accent);
  margin-top: var(--space-3); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease) .15s;
}
.is-visible .testa h2::after, .reveal.is-visible h2::after,
.testa.is-visible h2::after { transform: scaleX(1); }
/* Fail-visible: senza JavaScript il filetto c'è già. */
html:not(.js) .testa h2::after, html:not(.js) .officina h2::after { transform: scaleX(1); }

/* Reticolo tecnico appena percepibile sulle bande scure: superficie, non decorazione. */
.banda-scura::before, .banda-ferro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,193,60,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,193,60,.045) 1px, transparent 1px);
  background-size: 64px 64px;
}
.banda-scura, .banda-ferro { position: relative; }

/* La banda della sede cambia FORMA, non solo ornamento: fondo ferro e fotografia che esce dalla
   colonna fino al bordo della finestra. È il device che il template della categoria usa per rompere
   la sequenza — e qui ha materiale vero (l'esterno del capannone). */
.sede-banda--piena { overflow: hidden; }
.sede-banda--piena .sede { align-items: center; }
.sede-banda--piena .sede__media {
  margin-right: calc(50% - 50vw); margin-block: calc(var(--section-y) * -1);
}
.sede-banda--piena .sede__media img { aspect-ratio: auto; height: 100%; min-height: 30rem; object-fit: cover; }
@media (max-width: 900px) {
  .sede-banda--piena .sede__media { margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); margin-block: var(--space-5) 0; }
  .sede-banda--piena .sede__media img { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ============================== lightbox ============================== */
/* ⚠⚠ Lo stato NASCOSTO è OBBLIGATORIO. `reveal.js` crea `.fp-lb` al caricamento e la apre con
   `.is-open`, bloccando anche lo scroll del documento: un verticale che non la stila ottiene un
   overlay invisibile che intercetta i click e una pagina che non scorre più — cioè esattamente
   «clicco sull'immagine, non si apre e si blocca tutto». Non è un difetto del motore: è una resa che
   ogni verticale deve fornire, e dimenticarla non produce nessun errore. */
.fp-lb {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 13, 10, .94);
  align-items: center; justify-content: center; padding: var(--space-5);
}
.fp-lb.is-open { display: flex; }
.fp-lb__img, .fp-lb img { max-width: 92vw; max-height: 86vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.fp-lb__x {
  position: absolute; top: var(--space-5); right: var(--space-5);
  width: 52px; height: 52px; border: 2px solid var(--accent); background: transparent;
  color: var(--accent); font-size: 0; cursor: pointer;
}
.fp-lb__x::before, .fp-lb__x::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 3px; background: currentColor;
}
.fp-lb__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.fp-lb__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.fp-lb__x:hover { background: var(--accent); color: var(--on-accent); }
.fp-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 2px solid var(--accent); background: transparent; color: var(--accent);
  display: grid; place-items: center; cursor: pointer;
}
.fp-lb__nav:hover { background: var(--accent); color: var(--on-accent); }
.fp-lb__nav svg { width: 26px; height: 26px; }
.fp-lb__prev { left: clamp(.6rem, 3vw, 2rem); }
.fp-lb__next { right: clamp(.6rem, 3vw, 2rem); }
@media (max-width: 620px) {
  .fp-lb__nav { top: auto; bottom: var(--space-5); transform: none; }
  .fp-lb__prev { left: 22%; } .fp-lb__next { right: 22%; }
}