/* components.css — waste_recovery_plant. Impianto autorizzato di autodemolizione e recupero rifiuti.
   Riferimento di categoria: BeLogistics2 (testata scura col mezzo in movimento, campi pieni, spigolo vivo).
   I token vivono in tokens.css: qui si consumano.

   ⚠⚠ Regola dura del verticale, che nasce dai numeri e non dal gusto: --accent (il verde del marchio) fa
   2,82 sul bianco. È superficie, filetto e segno; l'unico testo che gli si posa sopra è --brand (5,56).
   Il verde che porta testo su chiaro è --accent-ink (7,13); su scuro --accent-lt (8,75). */

/* ============================ barra di servizio + intestazione ============================ */
/* Campo PIENO, non trasparente: nella categoria la testata è un blocco istituzionale.
   ⚠ Nessun backdrop-filter: creerebbe un containing-block per il position:fixed e limiterebbe l'overlay
   del menu all'altezza dell'header (regola 15). */
.topbar { background: var(--brand-dark); color: var(--on-dark-muted); font-size: var(--text-sm); }
.topbar__row { display: flex; align-items: center; gap: var(--space-5); min-height: var(--topbar-h); flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__spacer { margin-left: auto; }
.topbar a { color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }
.topbar a:hover { color: var(--accent-lt); }
@media (max-width: 899.98px) { .topbar { display: none; } }

.site-header { background: var(--brand); color: var(--on-dark); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--brand-mid); }
/* ⚠ Header centrato verticalmente (regola 16): `align-items:center` sulla riga NON basta — nav e CTA hanno
   un margine di blocco che WP mette e che li spinge sotto il centro. Si azzera esplicitamente. */
.site-header__row { display: flex; align-items: center; gap: var(--space-5); min-height: 76px; }
.site-header__row > * { align-self: center; margin-block: 0; }
.site-header__cta { margin-left: var(--space-4); }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--on-dark); }
.wordmark__mark { width: 44px; height: 44px; flex: none; }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark__name { font-family: var(--font-display); font-weight: 800; font-size: 1.32rem; letter-spacing: -0.01em; }
.wordmark__tag { font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-lt); }

/* ============================ navigazione ============================ */
/* ⚠⚠ A parità di specificità WP VINCE: il CSS dei blocchi è iniettato DOPO il tema. Il colore delle voci
   si dichiara perciò con un livello in più (.site-header .site-nav …), e il fondo dell'overlay
   RICOPIANDO lo schema di selettore di WP (0,4,0) — altrimenti resta bianco su bianco, che è il difetto
   ricorrente della flotta. */
.site-header .site-nav { margin-left: auto; }
.site-header .site-nav a,
.site-header .site-nav .wp-block-navigation-item__content { color: var(--on-dark); font-weight: 500; }
.site-header .site-nav a:hover,
.site-header .site-nav .wp-block-navigation-item__content:hover { color: var(--accent-lt); }
.site-header .site-nav .wp-block-navigation__responsive-container-open { color: var(--on-dark); }

/* Overlay del menu su mobile. Il fondo si vince ricopiando lo schema WP; poi si rende leggibile. */
/* ⚠⚠ MISURATO sul DOM servito, non dedotto: la regola di WP che dipinge di BIANCO l'overlay è
   `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)`
   e pesa (0,5,0). Un selettore da (0,4,0) — per quanto identico nella forma — PERDE, e il menu resta
   bianco su bianco: è il difetto ricorrente della flotta. Si vince ricopiando il suo schema e
   aggiungendo un livello, non sperando nell'ordine dei fogli (il CSS dei blocchi è iniettato DOPO il tema). */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  background-color: var(--brand-dark); color: var(--on-dark);
}
.wp-block-navigation__responsive-container.is-menu-open {
  /* ⚠ Senza altezza esplicita l'overlay si limita all'altezza dell'header quando un antenato crea un
     containing-block. Qui il filtro non c'è, ma la guardia resta: costa nulla e il difetto è muto. */
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%; align-items: stretch;
  /* Margine laterale: senza, le voci restano incollate al bordo dello schermo. */
  padding-inline: var(--gutter);
  /* ⚠ Spazio in fondo per la barra CTA fissa: senza, l'ultima voce finisce sotto la barra. */
  padding-bottom: calc(var(--ctabar-h) + var(--space-7));
}
/* ⚠⚠ Correggere il FIGLIO non serve se ad allineare è un ANTENATO. Misurato sul DOM a 390px: la
   `UL.wp-block-navigation__container` porta `items-justified-right` (viene dal `justifyContent:"right"`
   della nav in testata, che su desktop è giusto) ed è larga 135px su 390, allineata a flex-end; l'LI
   eredita `align-items:flex-end` ed è largo 56px. Il risultato è un menu spinto fuori dallo schermo e
   TAGLIATO. Dentro l'overlay la nav non è più una barra: la colonna prende tutta la larghezza. */
.site-header .is-menu-open .wp-block-navigation__container,
.site-header .is-menu-open .wp-block-navigation__container.items-justified-right {
  width: 100%; align-items: stretch; justify-content: flex-start; gap: 0;
}
.site-header .is-menu-open .wp-block-navigation-item { border-bottom: 1px solid var(--brand-mid); width: 100%; align-items: stretch; }
/* ⚠ L'<a> è display:block e in una colonna flex si stringe al contenuto, finendo allineato a destra:
   con width 100% + text-align left torna a sinistra. */
.site-header .is-menu-open .wp-block-navigation-item__content {
  width: 100%; text-align: left; padding: var(--space-4) var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--on-dark);
}
/* Sotto-menu INLINE: il default WP li rende come card-dropdown, illeggibili su mobile. */
.site-header .is-menu-open .wp-block-navigation__submenu-container {
  position: static !important; border: none !important; box-shadow: none !important;
  background: none !important; padding-left: var(--space-5); width: 100%;
}
.site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-base); color: var(--on-dark-muted);
}
/* ⚠ Il bottone di CHIUSURA dell'overlay: WP non gli dà misura, quindi resta un glifo minuscolo incollato
   all'angolo e su un telefono non si prende. Misura e area di tocco si DICHIARANO (44×44 è il minimo che
   un dito trova). Vale anche per l'hamburger che apre. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
  color: currentColor; width: 44px; height: 44px; padding: var(--space-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.site-header .wp-block-navigation__responsive-container-close { color: var(--on-dark); }
.site-header .wp-block-navigation__responsive-container-close:hover { color: var(--accent-lt); }

/* ============================ bottoni ============================ */
/* Spigolo vivo: la categoria non arrotonda.
   ⚠⚠ Il fondo del bottone primario è --accent-dark, NON --accent: il verde del marchio col bianco sopra
   fa 2,82. Con --accent-dark fa 7,13. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--accent-dark); color: var(--on-dark);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-base);
  padding: .82em 1.5em; border: 2px solid var(--accent-dark); border-radius: var(--radius);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--brand); border-color: var(--brand); color: var(--on-dark); }
.btn--sm { padding: .55em 1em; font-size: var(--text-sm); letter-spacing: .02em; }
.btn--outline-light { background: transparent; border-color: var(--on-dark); color: var(--on-dark); }
.btn--outline-light:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--brand); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--accent-ink); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--accent-ink); color: var(--accent-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* ============================ testata ============================ */
.hero { position: relative; isolation: isolate; background: var(--brand); color: var(--on-dark); padding-block: clamp(3.5rem, 2rem + 6vw, 8rem); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
/* Testata a SLIDESHOW (regola 2): tre fotografie in dissolvenza incrociata, con una deriva lentissima.
   ⚠ `isolation: isolate` sull'hero + le slide a z-index negativo le tengono DIETRO il velo: senza, la
   seconda slide passerebbe sopra la sfumatura e il titolo perderebbe contrasto a metà ciclo.
   ⚠ Con reduced-motion resta ferma la PRIMA: l'animazione è decorazione, la fotografia è contenuto. */
.hero__slide { position: absolute; inset: 0; display: block; opacity: 0; animation: fp-hero-fade 27s var(--ease) infinite; }
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 9s; }
.hero__slide:nth-child(3) { animation-delay: 18s; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; animation: fp-hero-drift 27s linear infinite; }
@keyframes fp-hero-fade {
  0%, 30% { opacity: 1; }
  36%, 94% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fp-hero-drift { from { transform: scale(1); } to { transform: scale(1.055); } }
@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__slide img { animation: none; }
  .hero__slide { opacity: 0; }
  .hero__slide:first-child { opacity: 1; }
}
/* Senza JS la dissolvenza gira lo stesso (è CSS puro): nessun fail-invisible da coprire. */
/* ⚠⚠ Il velo è ciò che rende leggibile il titolo SOPRA la fotografia: il contrasto qui non viene dai
   token e va MISURATO DAL PIXEL renderizzato. La sfumatura è più densa a sinistra, dove sta il testo,
   e si alleggerisce a destra per non annegare lo scatto. */
/* ⚠⚠ Il velo sta DENTRO `.hero__media`, che con `z-index:-2` apre un proprio contesto di
   impilamento: lì dentro `z-index:-1` lo mette DIETRO le fotografie, e il velo non vela niente.
   Il difetto è muto — la regola c'è, il gradiente è giusto, e il contrasto non cambia di un centesimo
   per quanto si scurisca. Si è visto solo misurando dal pixel prima e dopo un cambio del valore.
   Le slide prendono 0, il velo 1: l'ordine è dichiarato, non lasciato all'`auto`. */
.hero__slide { z-index: 0; }
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, var(--scrim-deep) 0%, var(--scrim-deep) 52%, var(--scrim) 88%, var(--scrim) 100%);
}
.hero--design { background: var(--brand); }
/* Trama diagonale della variante senza fotografia: dà materia senza chiedere uno scatto. */
.hero--design::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgb(var(--veil-rgb) / .09) 14px 15px);
}
.hero__body { position: relative; max-width: none; }
/* ⚠⚠ TARGA, non testo velato. Misurato dal pixel su TUTTE e tre le slide: il verde chiaro sopra la
   fotografia del cancello (media 0,55, cielo aperto) scende a 1,70 — la terza slide è il caso peggiore,
   e chi misura solo la prima non la vede mai perché reducedMotion congela lì. Un campo pieno rende il
   contrasto STRUTTURALE: 7,13 contro il bianco, qualunque fotografia ci sia sotto. */
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--on-dark); background: var(--accent-dark);
  padding: .42em .85em; margin-bottom: var(--space-4);
}
.hero h1 { max-width: 18ch; }
.hero__lead { font-size: var(--text-md); line-height: 1.5; color: var(--on-dark); max-width: 54ch; margin-top: var(--space-4); }
.hero__checks { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }
/* ⚠ Misurato dal pixel: --on-dark-muted sopra la fotografia fa 2,39. Sulla testata le spunte
   vanno al bianco pieno; il secondario resta buono sulle bande di COLORE, non sugli scatti. */
.hero__checks li { position: relative; padding-left: 1.7em; font-size: var(--text-sm); color: var(--on-dark); }
.hero__checks li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 1.05em; height: 1.05em; background: var(--accent-lt);
  -webkit-mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
  mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
}

/* ============================ intestazioni di sezione ============================ */
.section-intro { max-width: 62ch; margin-bottom: var(--space-7); }
/* ⚠ Una sezione SENZA fotografia cambia TELAIO: l'intestazione prende la larghezza piena invece di
   restare in una colonna stretta con metà schermo bianco. La misura di lettura resta sul PARAGRAFO. */
.section-intro--wide { max-width: none; }
.section-intro--wide .lead { max-width: var(--measure); }

/* ============================ mosaico delle lavorazioni ============================ */
/* Tessere a rapporto FISSO che alternano campo pieno e ritaglio di fotografia: nessuna deve reggere da
   sola, così bastano fotografie di media risoluzione. */
.mosaico__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tile-gap); }
.tile {
  position: relative; display: flex; flex-direction: column; min-height: 320px;
  border: 1px solid var(--line); overflow: hidden;
  transition: transform var(--dur) var(--ease);
}
.tile:hover { transform: translateY(-4px); }
.tile__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; }
.tile__icon { width: 30px; height: 30px; background: var(--accent-ink); flex: none; }
.tile__text { font-size: var(--text-sm); line-height: 1.6; }
.tile__cta { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--accent-ink); }
.tile__cta::after { content: " \2192"; }
/* Superficie CHIARA: testo inchiostro. */
.tile--photo, .tile--tint { background: var(--paper); color: var(--ink); }
.tile--tint { background: var(--accent-tint); border-color: var(--accent-tint); }
/* Superficie SCURA: testo su scuro, icona e CTA nel verde chiaro (--accent-ink lì sarebbe invisibile). */
.tile--dark { background: var(--brand); color: var(--on-dark); border-color: var(--brand); }
.tile--dark .tile__text { color: var(--on-dark-muted); }
.tile--dark .tile__icon { background: var(--accent-lt); }
.tile--dark .tile__cta { color: var(--accent-lt); }
/* Il link copre la tessera; il testo resta accessibile ma non si legge due volte. */
.tile__link { position: absolute; inset: 0; }
.tile__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tile__icon, .lav__icon {
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}
[data-icon="demolizione"] .tile__icon, .lav__icon[data-icon="demolizione"] { -webkit-mask-image: url("../assets/img/icons/demolizione.svg"); mask-image: url("../assets/img/icons/demolizione.svg"); }
[data-icon="batterie"] .tile__icon, .lav__icon[data-icon="batterie"] { -webkit-mask-image: url("../assets/img/icons/batterie.svg"); mask-image: url("../assets/img/icons/batterie.svg"); }
[data-icon="ferroso"] .tile__icon, .lav__icon[data-icon="ferroso"] { -webkit-mask-image: url("../assets/img/icons/ferroso.svg"); mask-image: url("../assets/img/icons/ferroso.svg"); }
[data-icon="generico"] .tile__icon, .lav__icon[data-icon="generico"] { -webkit-mask-image: url("../assets/img/icons/generico.svg"); mask-image: url("../assets/img/icons/generico.svg"); }

/* ============================ l'impianto ============================ */
/* Le figure sono nella STESSA griglia del testo, sfalsate: con una descrizione corta non resta un vuoto
   bianco a fondo sezione (regola 13). */
.impianto__grid { display: grid; grid-template-columns: 1.15fr .95fr; grid-template-rows: auto auto; gap: var(--space-6) var(--space-6); align-items: start; }
.impianto__text { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.impianto__fig { overflow: hidden; }
.impianto__fig img { width: 100%; height: 100%; object-fit: cover; }
.impianto__fig--a { grid-column: 2; grid-row: 1; height: clamp(200px, 24vw, 320px); }
.impianto__fig--b { grid-column: 2; grid-row: 2; height: clamp(150px, 17vw, 220px); }
.impianto__fig--a, .impianto__fig--b { align-self: stretch; }

/* ============================ la dotazione (banda scura, senza fotografie) ============================ */
.dotazione__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.macchina { border-top: 3px solid var(--accent); padding-top: var(--space-4); }
.macchina h3 { color: var(--on-dark); margin-bottom: var(--space-2); }
.macchina p { color: var(--on-dark-muted); font-size: var(--text-sm); line-height: 1.6; }

/* ============================ conformità (il segno del verticale) ============================ */
.conformita { background: var(--surface); }
.conformita__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.conformita__list { display: grid; gap: var(--space-4); }
.conformita__list li {
  position: relative; padding: var(--space-4) var(--space-4) var(--space-4) 3.4em;
  background: var(--paper); border-left: 4px solid var(--accent); font-size: var(--text-base);
}
.conformita__list li::before {
  content: ""; position: absolute; left: 1.15em; top: 1.15em; width: 1.4em; height: 1.4em; background: var(--accent-ink);
  -webkit-mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
  mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
}

/* ============================ fascia di chiusura ============================ */
/* ⚠ Campo di colore, non tinta piatta: la sfumatura dà profondità alla banda e lega il verde di marca al
   fondo grafite. Resta SOTTO il testo — nessun testo si posa sulla parte chiara della sfumatura. */
.cta-band {
  background: linear-gradient(118deg, var(--brand-dark) 0%, var(--brand) 58%, #26312a 100%);
  color: var(--on-dark); padding-block: var(--section-y); position: relative;
}
.cta-band__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.cta-band__text { max-width: 56ch; }
.cta-band .btn-row { margin-top: 0; }

/* ============================ testata di pagina ============================ */
/* ⚠ La page-head NON riusa la size dell'hero: è una testata di pagina, non un hero, e col grado più alto
   occuperebbe mezza schermata (regola 6). È CHIARA, quindi l'occhiello è --accent-ink, non il verde pieno. */
.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); }
.page-head h1 { font-size: var(--text-2xl); }
.page-head .lead { margin-top: var(--space-3); }
.page-head__inner { display: block; }
/* ⚠⚠ Regola dell'owner (2026-09-10): una sezione SENZA fotografia deve prendere tutta l'area e andare a
   capo da sola, mai una colonna stretta con metà schermo bianco. Le testate di pagina sono testo puro, e
   il difetto si vede solo sui monitor LARGHI (a 1440 quasi non si nota, a 1920 sì).
   La misura di lettura resta: oltre i 1240 il capoverso passa a DUE colonne invece di allungare la riga. */
.page-head .lead,
.page-head .container--narrow > p { max-width: var(--measure); }
@media (min-width: 1240px) {
  .page-head .lead,
  .page-head .container--narrow > p { columns: 2; column-gap: var(--space-7); max-width: none; }
  /* ⚠ Un lead CORTO in due colonne diventa due mozziconi: sotto le ~40 parole conviene la colonna sola.
     Non essendoci una query sul contenuto, la si dichiara per pagina con una classe. */
  .page-head--breve .lead { columns: 1; max-width: var(--measure); }
}

/* ============================ pagina Servizi (catalogo) ============================ */
.lav { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-6); align-items: center; padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.lav:last-child { border-bottom: 0; }
.lav--flip .lav__fig { order: 2; }
/* ⚠ Le fotografie del catalogo erano alte 300px su una colonna da 600: piccole in assoluto e piccole
   rispetto al viewport. Su questo mestiere la fotografia È l'argomento — cresce fino a 460. */
.lav__fig { overflow: hidden; height: clamp(240px, 30vw, 460px); }
.lav__fig img { width: 100%; height: 100%; object-fit: cover; }
.lav__icon { display: block; width: 34px; height: 34px; background: var(--accent-ink); margin-bottom: var(--space-3); }
.lav__body h2 { margin-bottom: var(--space-3); }
/* Sotto-sezione della scheda: il cliente scrive un sotto-titolo e un secondo capoverso per tre categorie
   su quattro. È un blocco a sé, staccato dal filetto d'accento, non un terzo capoverso indistinto. */
.lav__sub { margin-top: var(--space-5); padding-left: var(--space-4); border-left: 3px solid var(--accent); }
.lav__sub h3 { font-size: var(--text-base); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--space-2); }
.lav__sub p { max-width: var(--measure); }

/* ============================ gallery ============================ */
/* Rapporto FISSO 3:2: a contenitore pieno ogni tessera rende meno dei pixel nativi delle fotografie di
   questo mestiere, quindi nessuna viene ingrandita. */
.galleria__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tile-gap); }
/* La prima tessera occupa due colonne: una gallery tutta a francobolli non ha impatto. */
.galleria__grid .foto:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 3 / 2; }
.foto { overflow: hidden; aspect-ratio: 3 / 2; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.foto:hover img { transform: scale(1.04); }

/* --- Varianti SENZA fotografia (demo dichiarato, o cliente senza scatti). Mai una foto finta né un
   contenitore vuoto: la banda diventa un campo di colore, che è già il linguaggio della categoria. --- */
/* ⚠ Il telaio cambia, non solo il contenuto: senza figure il testo prende la larghezza piena e va a due
   colonne, invece di restare in una colonna stretta con metà schermo bianco. */
.impianto__grid--solo { grid-template-columns: 1fr; }
.impianto__grid--solo .impianto__text { grid-column: 1; grid-row: 1; }
/* Idem per una scheda di servizio senza figura: una sola colonna, non due di cui una vuota. */
.lav--auto:not(:has(.lav__fig)) { grid-template-columns: 1fr; }
.lav--auto:not(:has(.lav__fig)) .lav__body .prose > p { max-width: var(--measure); }
/* Tessera di gallery senza fotografia: campo pieno con la trama diagonale del verticale. */
.foto--campo {
  background: var(--surface-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgb(var(--veil-rgb) / .18) 12px 13px);
  border: 1px solid var(--line);
}

/* ============================ pagina dei documenti (downloads.json, project-side) ============================ */
/* Il guscio lo rende build-downloads; il vestito è del verticale. Ogni scheda è un documento: copertina,
   titolo e la riga di identificazione (autorità, categoria, protocollo) che il progetto mette in
   `category` — su questo mestiere è l'informazione che fa la differenza fra un elenco e una prova. */
.cat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-7); }
.cat {
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat:hover { transform: translateY(-4px); border-color: var(--accent); }
.cat__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cat__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cat__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); padding: var(--space-4) var(--space-4) var(--space-2); }
.cat__dl { margin-top: auto; padding: 0 var(--space-4) var(--space-4); font-size: var(--text-sm); color: var(--accent-ink); font-weight: 600; }
/* La pagina dei documenti ha molte righe di testo e nessuna fotografia grande: l'intestazione prende la
   larghezza piena e il capoverso tiene la propria misura di lettura. */
.cat-band .page-head .lead, .page-head .container--narrow > p { max-width: var(--measure); }

/* ============================ pagina Contatti ============================ */
.contact-hero { height: clamp(200px, 26vw, 380px); overflow: hidden; }
.contact-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.contact-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-7); align-items: start; }
.contact-form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field > span { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
/* ⚠ Il bordo di un CONTROLLO non è decorazione: usa il filetto forte (3,04 su bianco), non --line (1,34). */
.field input, .field textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: .7em .85em; width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* ⚠ `.consent` è un flex: se il testo contiene un <a> e non è tutto dentro un solo <span>, si spezza in
   più flex-item e il link va a capo da solo. */
.consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }
.consent input { margin-top: .28em; flex: none; }
.consent a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
/* ⚠ Aside per fondo CHIARO: riusare la dl della fascia scura della home invertirebbe i colori. */
.contact-info { background: var(--surface); border-top: 3px solid var(--accent); padding: var(--space-6); }
.contact-info h2 { margin-bottom: var(--space-4); }
.contact-info dl { display: grid; gap: var(--space-4); }
.contact-info dt { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-1); }
.contact-info dd { margin: 0; }
.contact-info a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-info .btn { margin-top: var(--space-5); }

/* ============================ orari ============================ */
.hours-list { display: grid; gap: var(--space-2); }
.hours-list li { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); }

/* ============================ profili social ============================ */
/* Icone con un anello che pulsa: il richiamo si vede senza gridare, e le voci pulsano SFALSATE così non
   battono all'unisono. ⚠ L'url() della maschera si risolve rispetto al FOGLIO, mai da uno style inline
   nel post_content. ⚠ Si ferma con reduced-motion: è decorazione, non informazione. */
.social { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.social--footer { display: flex; margin-top: var(--space-5); }
.social__link { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.social__ico {
  position: relative; display: inline-flex; width: 34px; height: 34px; flex: none;
  background: var(--surface-2); border: 1px solid var(--line-strong);
}
.social__ico::before { content: ""; margin: auto; width: 17px; height: 17px; background: var(--accent-ink); }
.social__ico::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  animation: fp-social-pulse 2.8s ease-in-out infinite;
}
.social__link:nth-of-type(2) .social__ico::after { animation-delay: .93s; }
.social__link:nth-of-type(3) .social__ico::after { animation-delay: 1.86s; }
.social__link:hover .social__ico { background: var(--accent-ink); border-color: var(--accent-ink); }
.social__link:hover .social__ico::before { background: var(--on-dark); }
.social__link:hover .social__ico::after { animation-play-state: paused; }
.social__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.social__ico[data-social="instagram"]::before { -webkit-mask: url("../assets/img/icons/social-instagram.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-instagram.svg") no-repeat center / contain; }
@keyframes fp-social-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(var(--veil-rgb) / .5); }
  70%  { box-shadow: 0 0 0 12px rgb(var(--veil-rgb) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--veil-rgb) / 0); }
}
@media (prefers-reduced-motion: reduce) { .social__ico::after { animation: none; } }
/* Nel piè il fondo è scuro: icona e anello si ribaltano sul verde chiaro. */
.site-footer .social__link { color: var(--on-dark); }
.site-footer .social__ico { background: var(--brand-mid); border-color: var(--brand-mid); }
.site-footer .social__ico::before { background: var(--accent-lt); }
.site-footer .social__link:hover .social__ico { background: var(--accent-lt); border-color: var(--accent-lt); }
.site-footer .social__link:hover .social__ico::before { background: var(--brand-dark); }

/* ============================ piè di pagina ============================ */
.site-footer { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 42%); color: var(--on-dark-muted); padding-block: var(--space-8) var(--space-5); margin-top: auto; }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: var(--space-6); }
.site-footer h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--on-dark); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--space-4); }
.site-footer ul { display: grid; gap: var(--space-2); }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: var(--accent-lt); }
.site-footer .wordmark__name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--on-dark); }
.site-footer .wordmark__tag { font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-lt); }
.site-footer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--brand-mid); font-size: var(--text-sm);
}
.powered { display: inline-flex; align-items: center; gap: var(--space-2); }
.powered img { width: 20px; height: 20px; }

/* ============================ barra CTA mobile ============================ */
.cta-bar { display: none; }
@media (max-width: 899.98px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--brand-dark); border-top: 1px solid var(--brand-mid); min-height: var(--ctabar-h);
  }
  .cta-bar a { display: flex; align-items: center; justify-content: center; color: var(--on-dark); font-family: var(--font-display); font-weight: 700; padding: var(--space-4); }
  .cta-bar a.is-accent { background: var(--accent-dark); }
  /* Spazio in fondo alla pagina perché la barra non copra il piè. */
  .wp-site-blocks { padding-bottom: var(--ctabar-h); }
}

/* ============================ 404 ============================ */
.err404 { padding-block: var(--section-y); text-align: center; }

/* ============================ rotture ============================ */
@media (max-width: 1099.98px) {
  .mosaico__grid { grid-template-columns: repeat(2, 1fr); }
  .dotazione__grid { grid-template-columns: repeat(2, 1fr); }
  .cat-row { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899.98px) {
  .conformita__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .contact-cols { grid-template-columns: 1fr; }
  .galleria__grid { grid-template-columns: repeat(2, 1fr); }
  .impianto__grid { grid-template-columns: 1fr; }
  .impianto__text, .impianto__fig--a, .impianto__fig--b { grid-column: 1; grid-row: auto; }
  .lav, .lav--flip { grid-template-columns: 1fr; }
  .lav--flip .lav__fig { order: 0; }
  .site-header .site-header__cta { display: none; }
}
@media (max-width: 599.98px) {
  .mosaico__grid, .dotazione__grid, .galleria__grid, .cat-row, .site-footer__grid { grid-template-columns: 1fr; }
  .contact-form .row { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
}