/* 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);
  /* ⚠ L'accento TESTUALE dentro una banda scura. Non può essere `--accent` grezzo: vale finché
     l'accento del verticale è chiaro (l'ambra fa 11,98 sul piè), ma un accento di marca più scuro —
     un rosso #e40613 fa 3,29 — qui sarebbe sotto AA su ogni occhiello di ogni banda scura, e nessun
     gate di rendering lo vede. Passa da `--accent-on-dark`, che per default È `--accent`: il sito del
     primo cliente rende esattamente come prima. */
  --accent-ink: var(--accent-on-dark);
  --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-on-dark); }

.site-header__row {
  display: flex; align-items: center; gap: var(--space-4);
  /* ⚠ Il marchio e' cresciuto da 34 a 48px e la riga si stringe di altrettanto: l'altezza della
     testata non deve cambiare, perche' e' quella che l'ancora deve scavalcare (--header-h). */
  padding-block: var(--space-2);
  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: 38px; }
.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: 48px; 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-on-dark); }

.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-on-dark); 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: 34px; }
}

/* --- 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-on-dark);
}
.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-on-dark);
  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: var(--misura-titolo);
}
.hero__title em { font-style: normal; color: var(--accent-on-dark); }
.hero__lead {
  color: var(--on-dark-muted); margin-top: var(--space-4); max-width: var(--misura-hero-lead); 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-on-dark); }
.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: var(--misura-testa); }
.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-on-dark); }
.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: var(--misura-lead); }
.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: var(--misura-prosa); }
.testa__lead { max-width: var(--misura-lead); }
.tessere__cella p, .servizio p, .chisiamo__blocco p { max-width: var(--misura-tessera); }
.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) ============================== */
/* ⚠⚠ Le due colonne devono FINIRE INSIEME. Con testo a sinistra e fotografia+schede a destra la
   destra misurava 780px contro 225: 555px di vuoto sotto il testo, il buco più vistoso del sito.
   Le schede scendono nella colonna SINISTRA sotto il testo e la fotografia prende tutta l'altezza
   della colonna destra: stessa materia, stessa griglia, nessun elemento sfalsato. */
.chisiamo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-7); align-items: start; }
.chisiamo__testo { grid-column: 1; grid-row: 1; }
.chisiamo__media { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
.chisiamo__blocchi { grid-column: 1; grid-row: 2; display: grid; gap: var(--space-5); margin-top: var(--space-6); align-content: start; }
.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%; height: 100%; min-height: 22rem; aspect-ratio: auto; object-fit: cover; }
@media (max-width: 900px) {
  /* In colonna sola l'ordine torna quello della lettura: testo, fotografia, schede. */
  .chisiamo { grid-template-columns: 1fr; gap: var(--space-5); }
  .chisiamo__testo, .chisiamo__media, .chisiamo__blocchi { grid-column: 1; grid-row: auto; }
  .chisiamo__media img { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ============================== 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-on-dark); }
.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-on-dark); }
.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-on-dark); 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-on-dark); }
.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-on-dark); }

/* ⚠ 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: var(--misura-colonna); }
.officina__quesito span:last-child { max-width: var(--misura-quesito); }
.metodo__nota { max-width: var(--misura-nota); }

/* ============================== 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. */
/* ⚠ La fotografia si allinea al CENTRO del blocco di testo, non al suo piede. Ancorata in basso
   (com'era, con lo scavalco negativo della banda) lasciava sopra di sé un vuoto pari alla differenza
   d'altezza fra le due colonne — misurato 191px su 493 — e la sezione leggeva sbilanciata.
   La colonna della figura si stira e la figura ci sta dentro centrata: due colonne che finiscono
   insieme, che è la definizione di allineato. */
.officina { align-items: stretch; }
.officina__media { align-self: stretch; display: grid; align-content: center; }
.officina__media img { box-shadow: 0 30px 70px rgba(14, 13, 10, .35); max-height: 100%; }
@media (max-width: 900px) { .officina__media { display: block; } }

/* 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-on-dark); 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-on-dark);
  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%; }
}

/* ============================== bande delle pagine di progetto ==============================
   ⚠ Un blocco di testo con la figura IMPILATA sotto lascia il vuoto a destra del testo e una figura
   piccola sperduta in mezzo alla banda (misurato: Block Shaft 200px in un contenitore da 1200).
   Qui testo e figura stanno sulla STESSA RIGA, centrati fra loro: la banda si riempie, la figura ha
   una colonna sua e non deve essere ingrandita oltre la propria risoluzione per non sembrare persa.
   ⚠ Classi usate SOLO dalle pagine di progetto: un verticale a pagina unica non le emette mai. */
/* ⚠⚠ Le due colonne si STIRANO e il contenuto si centra DENTRO ognuna. Centrando le colonne (com'era)
   la più corta restava alta quanto il proprio contenuto e sotto le rimaneva un vuoto pari alla
   differenza — misurato fino a 243px su 416. Stirando i box e centrando dentro, la figura resta
   otticamente al centro del testo (che è ciò che serve) e le due colonne finiscono insieme. */
.banda-duo { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-7); align-items: stretch; }
.banda-duo__testo { display: grid; align-content: center; }
.banda-duo--stretta { grid-template-columns: 1.25fr .75fr; }
.banda-duo__testo > *:first-child { margin-top: 0; }
.banda-duo__testo > *:last-child { margin-bottom: 0; }
/* ⚠ Centrando il contenuto nella colonna i margini fra titolo e testo si erano persi e le due cose
   risultavano incollate: il ritmo verticale va dichiarato, non ereditato dal flusso. */
.banda-duo__testo > * + * { margin-top: var(--space-4); }
.banda-duo__testo h2 + * { margin-top: var(--space-3); }
.banda-duo__testo .btn { margin-top: var(--space-5); justify-self: start; }
.banda-duo__figura { display: grid; align-content: center; justify-items: center; }
.banda-duo__figura img { width: 100%; height: auto; max-width: 100%; display: block; }
/* Le grafiche dei partner hanno il TESTO IMPRESSO: mai ritagliate, e su fondo bianco perché sono
   nate su bianco — su una banda chiara sparirebbe il bordo, su una scura stonerebbero. */
/* ⚠ La figura si CONTIENE: senza tetto una grafica alta rende la riga alta quanto lei, e il testo —
   centrato — si ritrova aria sopra e sotto. È lo stesso vuoto di prima, spostato dentro la colonna.
   Col tetto la riga la decide il testo quando il testo è lungo, e la figura quando è corto. */
.banda-duo__figura figure { margin: 0; width: 100%; background: #fff; padding: var(--space-4); max-height: 26rem; display: grid; }
.banda-duo__figura figure img { max-height: 100%; object-fit: contain; }
.banda-scura .banda-duo__figura figure, .banda-ferro .banda-duo__figura figure { box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
@media (max-width: 900px) {
  .banda-duo, .banda-duo--stretta { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* Nastro di figure a piena riga: quando le grafiche sono più di una e vanno confrontate a colpo
   d'occhio (i marchi del noleggio, le due versioni di un antifurto). Colonne UGUALI: allineate. */
.fp-strisce { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); align-items: stretch; }
.fp-strisce figure { margin: 0; }
.fp-strisce img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* L'indirizzo del piè è un DATO, non prosa: non deve spezzarsi lasciando «(RM)» orfano su una riga
   sua. `text-wrap: balance` distribuisce le righe invece di riempire la prima e abbandonare il resto. */
.site-footer .sede__dl dd, .sede__dl dd { text-wrap: balance; }