/* PMP: stili del tema. Conversione meccanica del mockup; i valori stanno
   in theme.json. Corpo, titoli e link li fa theme.json. */



/* ==========================================================================
   LARGHEZZE: le uniche tre ammesse
   Il contenitore interno porta la misura e il gutter laterale.
   ========================================================================== */

.is-content-width,
.is-wide-width {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter-inline);
}
.is-content-width { max-width: calc(var(--wp--custom--width-content) + var(--wp--custom--gutter-inline) * 2); }
.is-wide-width    { max-width: calc(var(--wp--custom--width-wide)    + var(--wp--custom--gutter-inline) * 2); }
.is-full-width {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
/* ==========================================================================
   RITMO: gap, mai margini sui figli
   ========================================================================== */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--wp--custom--block-gap);
}
/* Stesso impianto, respiro maggiore. Serve dove dentro una sola sezione
   convivono un blocco di TESTA e un blocco di contenuto che prima stavano in
   due sezioni distinte: con --wp--custom--block-gap restano appiccicati, perché 24px sotto
   un h1 da 64px non sono la stessa cosa di 24px sotto un h2. */
.stack--loose { gap: var(--wp--preset--spacing--70); }
/* Un gradino in mezzo fra .stack e .stack--loose, per quando sotto al titolo di
   sezione non c'e' testo di corpo ma un elemento GRANDE (le tappe di chi-siamo:
   sotto l'h2 arriva l'anno in corpo xx-large). Misurato a 1440: 24px incollano,
   86 scollano, 58 separano. */
.stack--spaced { gap: var(--wp--preset--spacing--60); }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--custom--block-gap);
}
/* Utility di accessibilità: testo leggibile solo dagli screen reader.
   Sta qui e non in style.css perché richiede valori in px. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ==========================================================================
   BASE LAYER: unico punto del progetto in cui sono ammessi i tag selector
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }
/* Saltando a un'ancora la pagina SCORRE, non salta di colpo: senza, chi clicca
   una scheda dell'indice dei professionisti si ritrova altrove senza capire
   dove, perché il contesto cambia in un fotogramma.
   Dichiarato dentro prefers-reduced-motion: no-preference e non spento dopo:
   così chi ha chiesto meno movimento non lo riceve mai, nemmeno per un istante,
   e non dipende dall'ordine delle regole.
   Lo scostamento che evita di finire sotto la testata appiccicata è un'altra
   cosa e sta su .section--anchor. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Sul telefono i titoli in peso light perdono presenza: alla misura minima dei
   clamp il tratto 300 si legge come testo grande, non come titolo di pagina.
   Salgono di UN gradino nella scala, a regular. Non oltre: col semibold
   peserebbero più del logotipo, che è la cosa più forte della testata. */
@media (max-width: 781px) {
  h1, h2 { font-weight: var(--wp--custom--font-weight--regular); }
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--wp--custom--border-width--medium) solid var(--wp--preset--color--primary);
  outline-offset: var(--wp--custom--border-width--medium);
}


/* ==========================================================================
   PMP: stili del mockup
   Tutti i valori vengono da tokens.css. Solo selettori di classe.
   Due soli breakpoint, entrambi deliberati:
   * 781 → punto in cui il blocco Columns di Gutenberg impila le colonne.
   *       Progettare sullo stesso punto evita sorprese in conversione.
   * 959 → punto in cui la navigazione principale non ci sta più in riga.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sezioni
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--wp--preset--spacing--80);
}
.section--tight { padding-block: var(--wp--preset--spacing--60); }
/* Chiude il vuoto fra due sezioni consecutive che appartengono allo stesso
 * blocco di lettura: toglie il padding SOTTO e lascia intero quello sopra. */
.section--tight-end { padding-block-end: 0; }
.section--surface {
  background-color: var(--wp--preset--color--surface);
}
.section--dark {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--base);
}
/* Sulle bande scure il rosso non raggiunge il contrasto richiesto per il testo:
   i link diventano bianchi e si distinguono per sottolineatura. */
.section--dark .link,
.section--dark .news-card__title .link {
  color: var(--wp--preset--color--base);
}
/* Tutte le sezioni usano lo STESSO contenitore, --wp--custom--width-wide. La misura di
   lettura non è un contenitore: si applica agli elementi di testo dentro al
   contenitore, così il testo resta allineato al bordo sinistro della colonna
   invece di centrarsi su una larghezza propria. */
.section__header,
.measure {
  max-width: var(--wp--custom--width-content);
}
/* La misura di lettura, centrata invece che allineata a sinistra.
 *
 * Deroga voluta e circoscritta alla pagina dell'articolo, chiesta da Andrea il
 * 19 ottobre 2026. Ovunque altrove .measure resta ancorata al bordo sinistro
 * del contenitore: e' un tetto di larghezza, non un contenitore, ed e' cio' che
 * tiene tutte le sezioni allineate sulla stessa verticale. Qui la pagina e' una
 * lettura lunga e basta a se stessa, quindi la colonna si centra.
 *
 * Il contenitore NON cambia: resta `is-wide-width` da 1200px come ovunque. A
 * muoversi e' solo la colonna di testo dentro di esso. */
.measure--center {
  /* `width: 100%` non e' ridondante: il contenitore e' un flex in colonna, e
   * `margin-inline: auto` su un figlio flex ANNULLA lo stiramento implicito.
   * Senza, la colonna si stringe sul contenuto invece di arrivare alla misura
   * di lettura, e la larghezza finisce per dipendere da quanto e' lungo il
   * paragrafo piu' largo: misurato 361px al posto di 736. Il max-width resta il
   * tetto. */
  width: 100%;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Colonne: figli flex con larghezze percentuali
   -------------------------------------------------------------------------- */

/* La base delle colonne deve sottrarre il gap REALE della riga, non il gap di
 * default: --row-gap tiene allineate le due cose. Senza questo, una riga con
 * gap maggiorato manda le colonne a capo. */
.row {
  --row-gap: var(--wp--custom--block-gap);
  gap: var(--row-gap);
}
.row--gap-large { --row-gap: var(--wp--preset--spacing--60); }
.row--middle { align-items: center; }
/* min-inline-size: 0 su tutte le colonne, per lo stesso motivo documentato su
 * .column--fifth: un figlio flex ha min-width: auto, cioè non scende MAI sotto
 * la larghezza minima del proprio contenuto. Basta un elemento con una misura
 * intrinseca grande (un'immagine, oppure un <select> la cui opzione più lunga
 * è «Gestione della crisi e procedure concorsuali») perché la colonna si
 * rifiuti di stringersi e sfondi la pagina in orizzontale. Succedeva su
 * contatti.html a 375px: 81px di straripamento, invisibile sopra i 485. */
.column--half      { flex: 0 1 calc(50% - var(--row-gap) / 2);          min-inline-size: 0; }
.column--third     { flex: 0 1 calc(33.333% - var(--row-gap) * 2 / 3);  min-inline-size: 0; }
.column--two-thirds{ flex: 0 1 calc(66.666% - var(--row-gap) / 3);      min-inline-size: 0; }
.column--quarter   { flex: 0 1 calc(25% - var(--row-gap) * 3 / 4);      min-inline-size: 0; }
.column--three-quarters { flex: 0 1 calc(75% - var(--row-gap) / 4);     min-inline-size: 0; }
/* Tre quinti e due quinti: la divisione asimmetrica delle righe di testa, dove
 * il titolo sta accanto all'occhiello invece che sopra. Misurato: a metà e a
 * 55/45 il titolo dei professionisti va su QUATTRO righe, a tre quinti su tre.
 * I quinti sono già nel vocabolario del progetto (.column--fifth). */
.column--three-fifths { flex: 0 1 calc(60% - var(--row-gap) * 2 / 5); min-inline-size: 0; }
.column--two-fifths   { flex: 0 1 calc(40% - var(--row-gap) * 3 / 5); min-inline-size: 0; }
/* Colonna che resta in vista mentre la colonna accanto scorre.
 *
 * align-self: flex-start NON è decorativo, è la condizione perché sticky
 * funzioni: di default un figlio flex viene stirato all'altezza della riga, e
 * un elemento alto quanto il suo contenitore non ha nessun margine entro cui
 * scorrere. Misurato prima della correzione: colonna 1123px, riga 1123px.
 * Con flex-start la colonna torna alta quanto la foto e il resto della riga
 * diventa la sua corsa.
 *
 * Lo scostamento dall'alto scavalca la testata appiccicata, che scorrendo si
 * stringe a 58px: --wp--preset--spacing--70 le lascia margine a ogni misura.
 *
 * Perché non funzioni basta un overflow diverso da visible su un antenato
 * qualsiasi: se un domani la foto smette di restare ferma, è lì che si guarda.
 *
 * Sul telefono si disattiva: impilata, la foto è larga quanto lo schermo e
 * restare incollata in cima significherebbe mangiarsi metà schermata per tutta
 * la lettura della biografia. */
.column--sticky {
  position: sticky;
  align-self: flex-start;
  inset-block-start: var(--wp--preset--spacing--70);
}
@media (max-width: 781px) {
  .column--sticky { position: static; }
}
/* Aria in più fra due colonne, SENZA toccare il gap della riga. Allargare il gap
 * cambierebbe anche la base delle colonne (tutte le classi qui sopra sottraggono
 * --row-gap) e quindi restringerebbe l'immagine accanto. Questo invece sposta
 * solo il testo. Serve su professionisti, dove il ritratto deve restare esatto. */
.column--inset { padding-inline-start: var(--wp--preset--spacing--30); }
@media (max-width: 781px) {
  .column--half,
  .column--third,
  .column--two-thirds,
  .column--quarter,
  .column--three-quarters,
  .column--three-fifths,
  .column--two-fifths { flex-basis: 100%; }
  /* Due per riga invece di una, dove le schede sono un INDICE e non un contenuto
   * da leggere: a colonna singola quattro schede sono due schermate, a coppie si
   * vedono tutte insieme.
   *
   * Qui è GRID e non flex, ed è una deroga consapevole alla regola del progetto.
   * Il motivo è grid-auto-rows: 1fr, che rende tutte le righe alte quanto la più
   * alta. Con flex-wrap ogni riga si pareggia solo al proprio interno: misurato,
   * la prima coppia veniva 316px e la seconda 338, perché Tognetti e Tarabelloni
   * hanno la qualifica più lunga. Due schede uguali e due più alte sono
   * esattamente il difetto che si voleva togliere.
   * La sezione è già VERDICT: custom per via del CPT, quindi la deroga non cambia
   * il verdetto: in Gutenberg resta un blocco su misura comunque.
   *
   * Il corpo stringe il padding: su una colonna da ~148px resterebbero un
   * centinaio di pixel di testo. */
  .row--pairs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }
  .row--pairs .person-card__body { padding: var(--wp--preset--spacing--30); }
}
/* --------------------------------------------------------------------------
   Tipografia di servizio
   -------------------------------------------------------------------------- */

.lead {
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--font-weight--light);
  line-height: var(--wp--custom--line-height--relaxed);
}
.meta {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}
.section--dark .meta { color: var(--wp--preset--color--surface); }
/* Sottolineato perché è un link, non per decorazione: il colore da solo non
 * basta a distinguerlo dal testo attorno. */
.link {
  color: var(--wp--preset--color--primary);
  font-weight: var(--wp--custom--font-weight--semibold);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: from-font;
  transition: color var(--wp--custom--transition-base);
}
.link:hover { color: var(--wp--preset--color--accent); }
/* --------------------------------------------------------------------------
   Il simbolo del marchio come elemento di design

   La spunta è il quadrilatero (0,0) (207,190) (414,0) (207,115) in un box
   414x190, geometria ricavata dai pixel di pmp-logo.png. Rapporto 2,18:1.

   La guideline autorizza esplicitamente questo uso (p.6): "È possibile
   utilizzare il simbolo del marchio PMP (anche outline) come elemento
   decorativo". Il precedente interno è la cartellina portadocumenti (p.16),
   dove il simbolo in outline rosso è usato in funzione decorativa.

   Vietato ruotarlo o deformarlo (p.9): compare sempre con la punta in basso.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Il profilo del marchio come taglio fra due bande

   Il tracciato NON è ridisegnato a mano: è il vettoriale originale del marchio,
   estratto dalla Guideline PMP (il PDF contiene il logo come curve, non come
   immagine) e normalizzato su larghezza 400. Curve di Bézier, 10 comandi.
   Rapporto 400:185,51 = 2,1562.

   Fra gli asset consegnati non c'è nessun SVG/EPS/AI: solo PNG. Finché il
   cliente non manda il vettoriale, questa è la fonte più fedele disponibile.

   La forma è riempita del colore della sezione che sta SOPRA, così legge come
   un ritaglio e non come un oggetto appoggiato.
   -------------------------------------------------------------------------- */

/* Due varianti del profilo.
 *   hero:  il marchio intero, 2,1562:1
 *   coppa: il marchio tagliato alla quota in cui comincia l'arco interno
 *           (y 99,28 su 185,51) e con il bordo superiore chiuso dritto:
 *           restano i lati che convergono e la punta arrotondata, 2,3260:1.
 *           Senza chiudere il bordo resterebbe un filo del colore della banda
 *           incastrato fra le due labbra dell'arco.
 * --cut-right è in comune: i profili restano sulla stessa verticale. Non
 * scendere sotto, altrimenti nella hero il bordo del braccio incrocia il bordo
 * sinistro della foto e si vede uno scalino dove si toccano testo, foto e banda. */
.hero,
.section--cut {
  --cut-h: calc(var(--cut-w) / var(--cut-ratio));
  --cut-right: 6%;
}
.hero {
  --cut-w: 52vw;
  --cut-ratio: 2.1562;
}
.section--cut {
  --cut-w: 32vw;
  --cut-ratio: 2.3260;
}
/* Hero e chiusura di pagina usano la stessa misura e lo stesso scostamento dal
 * bordo destro: i due profili cadono sulla stessa verticale. */

/* Ordine di sovrapposizione, in tre livelli:
 *   0  fondi delle sezioni e immagini
 *   1  il profilo del marchio
 *   2  i testi
 * Serve posizionare esplicitamente i contenitori di testo, altrimenti restano
 * statici e un elemento assoluto come il profilo ci passerebbe sopra. */
.column--bleed-text,
.section__layer {
  position: relative;
  z-index: 2;
}
.brand-cut {
  position: absolute;
  z-index: 1;
  width: var(--cut-w);
  height: auto;
  fill: var(--wp--preset--color--base);
  pointer-events: none;
}
/* Il riempimento segue SEMPRE la sezione che sta sopra, è questa la regola che
 * fa leggere la forma come un ritaglio e non come un oggetto appoggiato.
 * Quando sopra c'è la banda antracite, una coppa bianca appare tranciata di
 * netto dal bordo scuro; riempita di antracite diventa invece la banda stessa
 * che cola nella sezione chiara. */
.brand-cut--dark { fill: var(--wp--preset--color--secondary); }
/* Nella hero il profilo scavalca il confine: la metà alta passa sopra alla
   foto, la punta scende dentro la banda grigia. */
.hero { position: relative; }
.hero .brand-cut {
  inset-inline-end: var(--cut-right);
  inset-block-end: calc(var(--cut-h) * -0.55);
}
/* La coppa ha il bordo superiore piatto: appoggia esattamente sul bordo della
   banda e scende dentro. Non sposta il contenuto, ci passa sotto. */
.section--cut { position: relative; }
/* Un pixel SOPRA il confine, non a filo. A zero, fra il bordo della sezione e il
 * bordo alto del profilo resta una cucitura chiara di un pixel: il confine fra i
 * due riquadri cade su una frazione di pixel e il browser la schiarisce con
 * l'antialiasing. Si vede come una riga bianca sotto la banda scura e come una
 * riga grigia sotto le sezioni chiare. Sovrapporre di un filo la chiude. */
.section--cut .brand-cut {
  inset-inline-end: var(--cut-right);
  inset-block-start: calc(var(--wp--custom--border-width--thin) * -1);
}
@media (max-width: 781px) {
  .hero,
  .section--cut { --cut-w: 56vw; }
  /* Il titolo della chiusura deve stare SOTTO la punta della coppa.
   * Il padding non è un numero scelto a occhio: è l'altezza reale del profilo:
   * --cut-h, cioè --cut-w diviso il rapporto, più un gradino della scala.
   * Così se un domani la coppa cambia misura, lo spazio la segue da solo.
   * Sul desktop non serve: lì la coppa è molto più stretta del contenitore e
   * il testo le passa accanto, non sotto. */
  .section--cut { padding-block-start: calc(var(--cut-h) + var(--wp--preset--spacing--50)); }
  /* Dove la coppa è nascosta (vedi sotto) quello spazio non ha più ragione di
   * esistere: la chiusura torna al padding normale. Vince per specificità. */
  .section--bleed + .section--cut { padding-block-start: var(--wp--preset--spacing--80); }
  /* La coppa sparisce quando sopra di lei c'è una sezione a sbalzo.
   *
   * Il profilo funziona perché il suo riempimento è lo stesso colore della
   * sezione che sta sopra: è questo che lo fa leggere come un ritaglio nella
   * banda e non come un oggetto appoggiato. Impilata, però, una sezione a
   * sbalzo mette per ultima la propria FOTO, che finisce a contatto con la
   * banda sotto: lì sopra non c'è più un colore con cui coincidere, e la coppa
   * diventa una macchia bianca in mezzo all'immagine.
   *
   * Il selettore di fratello adiacente dice esattamente questo e niente di
   * più: dove la sezione precedente non è a sbalzo (home, chi siamo,
   * professionisti, news, articolo) la coppa resta anche sul telefono. */
  .section--bleed + .section--cut .brand-cut { display: none; }
}
/* --------------------------------------------------------------------------
   Pulsanti: squadrati, etichetta in maiuscoletto spaziato
   -------------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
}
/* Un solo pulsante che chiude un elenco va al centro: a sinistra si leggerebbe
 * come la continuazione dell'ultima scheda invece che come il comando di tutte. */
.actions--center { justify-content: center; }
.button {
  display: inline-block;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--primary);
  border-radius: var(--wp--custom--radius--none);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--wp--custom--transition-base), border-color var(--wp--custom--transition-base), color var(--wp--custom--transition-base);
}
.wp-block-button.button > .wp-block-button__link {
  display: inline-block;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--primary);
  border-radius: var(--wp--custom--radius--none);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--wp--custom--transition-base), border-color var(--wp--custom--transition-base), color var(--wp--custom--transition-base);
}
.contact-form .ff-btn-submit.button {
  display: inline-block;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--primary);
  border-radius: var(--wp--custom--radius--none);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--wp--custom--transition-base), border-color var(--wp--custom--transition-base), color var(--wp--custom--transition-base);
}
.button:hover {
  background-color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}
.wp-block-button.button > .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}
.contact-form .ff-btn-submit.button:hover {
  background-color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}
.button--ghost {
  background-color: transparent;
  color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--contrast);
}
.wp-block-button.button--ghost > .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--contrast);
}
.button--ghost:hover {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--contrast);
}
.wp-block-button.button--ghost > .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--contrast);
}
.section--dark .button--ghost {
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--base);
}
.section--dark .wp-block-button.button--ghost > .wp-block-button__link {
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--base);
}
.section--dark .button--ghost:hover {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--secondary);
}
.section--dark .wp-block-button.button--ghost > .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--secondary);
}
/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--wp--preset--spacing--30);
  top: var(--wp--preset--spacing--30);
  z-index: 11;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  transform: translateY(-200%);
  transition: transform var(--wp--custom--transition-base);
}
.skip-link:focus { transform: translateY(0); }
/* Scala dei livelli, unica per tutto il progetto:
 *    0   fondi delle sezioni e immagini
 *    1   il profilo del marchio
 *    2   i testi
 *   10   la testata appiccicata
 *   11   il salto al contenuto
 * La testata sta prima di tutto nel DOM: a parità di livello perderebbe contro
 * qualsiasi contenuto successivo e se lo vedrebbe scorrere sopra. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--wp--preset--color--base);
  border-bottom: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--border);
  transition: box-shadow var(--wp--custom--transition-base);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
  padding-block: var(--wp--preset--spacing--30);
  transition: padding-block var(--wp--custom--transition-base);
}
/* La testata NON cambia misura scorrendo: resta sempre 88px. Richiesta del
 * cliente del 14 ottobre 2026. Prima padding e logo scendevano di un gradino
 * nella scala e l'altezza passava da 88 a 58.
 *
 * Scorrendo resta solo l'ombra, che non occupa spazio: serve a dire che la barra
 * sta sopra al contenuto e non ci è semplicemente appoggiata.
 *
 * Effetto collaterale desiderabile: sparisce anche il salto di 30px che la
 * testata provocava a tutto il contenuto sotto, perché essendo sticky occupa
 * spazio nel flusso. Il tremolio era già stato spento con due soglie distanti,
 * ma ora la causa non esiste proprio più. */
.site-header.is-scrolled { box-shadow: var(--wp--custom--shadow--sm); }
/* La testata si restringe scorrendo. Ripristinata il 27 ottobre 2026: era stata
 * tolta il 14 ottobre su richiesta del cliente, quindi va riconfermata con lui.
 * Il salto di altezza (circa 33px) deve restare ben sotto la distanza fra le due
 * soglie di motion.js (circa 67px a 1440), altrimenti torna il tremolio: la
 * testata e' sticky, restringendosi fa salire il contenuto, e se il salto supera
 * la distanza fra le soglie lo scorrimento le riattraversa da solo. */
.site-header.is-scrolled .site-header__inner { padding-block: var(--wp--preset--spacing--20); }
.site-header.is-scrolled .brand__logo { width: var(--wp--custom--width-brand-compact); }
.brand {
  display: inline-block;
  order: 1;
}
.site-header__nav { order: 2; }
.lang-switch { order: 3; }
.nav-toggle { order: 4; }
/* Il logo ha ora il suo token, --wp--custom--width-brand, invece di prendere in prestito
 * --wp--preset--spacing--80: un marchio non deve cambiare misura perché cambia la scala delle
 * spaziature. Niente transizione: la misura non cambia scorrendo. */
.brand__logo {
  width: var(--wp--custom--width-brand);
  transition: width var(--wp--custom--transition-base);
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--50);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__link {
  display: inline-block;
  padding-block: var(--wp--preset--spacing--20);
  border-bottom: var(--wp--custom--border-width--thick) solid transparent;
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--wp--custom--transition-base), color var(--wp--custom--transition-base);
}
.site-nav__link:hover { color: var(--wp--preset--color--primary); }
.site-nav__link--current {
  border-bottom-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--contrast);
}
.lang-switch {
  display: flex;
  gap: var(--wp--preset--spacing--20);
  align-items: center;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lang-switch__link {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}
.lang-switch__link--current {
  color: var(--wp--preset--color--contrast);
  font-weight: var(--wp--custom--font-weight--semibold);
}
.lang-switch__separator { color: var(--wp--preset--color--border); }
/* Tre righe che diventano una croce.
 *
 * Il nome accessibile resta la parola "Menu" in .visually-hidden: le righe sono
 * un disegno, aria-hidden, e da sole non direbbero niente a uno screen reader.
 *
 * Tutte le misure vengono dalla scala: il riquadro è 24x16, le righe sono spesse
 * quanto --wp--custom--border-width--medium, e lo spostamento verso il centro è mezzo riquadro
 * meno mezza riga, cioè calc(--wp--preset--spacing--30 / 2 - --wp--custom--border-width--medium / 2) = 7px.
 * Scritto così resta esatto anche se un domani cambiano i due token. */
/* Niente riquadro: il disegno si riconosce da solo e il filetto non aggiungeva
 * informazione, aggiungeva un rettangolo. Il padding però resta, anzi cresce di
 * un gradino: senza bordo la zona toccabile non si vede più, e deve restare
 * grande abbastanza: 56x48 contro i 24x16 del disegno.
 * Il fuoco da tastiera non si perde: l'anello è dichiarato per tutti i button
 * nel base layer di tokens.css, indipendente da questo bordo. */
.nav-toggle {
  display: none;
  padding: var(--wp--preset--spacing--30);
  background-color: transparent;
  border: 0;
  border-radius: var(--wp--custom--radius--none);
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  display: block;
  inline-size: var(--wp--preset--spacing--40);
  block-size: var(--wp--preset--spacing--30);
}
.nav-toggle__bar {
  position: absolute;
  inset-inline: 0;
  block-size: var(--wp--custom--border-width--medium);
  background-color: currentColor;
  transition: transform var(--wp--custom--transition-base), opacity var(--wp--custom--transition-base);
}
.nav-toggle__bar--alto  { inset-block-start: 0; }
.nav-toggle__bar--basso { inset-block-end: 0; }
/* La riga di mezzo è centrata sulla sua altezza, non appoggiata al 50%. */
.nav-toggle__bar--mezzo {
  inset-block-start: 50%;
  transform: translateY(-50%);
}
/* Aperto: le due esterne convergono al centro e ruotano, quella di mezzo
 * svanisce. Senza la traslazione le due righe ruoterebbero sul posto e
 * formerebbero due segni separati invece di una croce. */
.nav-toggle.is-open .nav-toggle__bar--alto {
  transform: translateY(calc(var(--wp--preset--spacing--30) / 2 - var(--wp--custom--border-width--medium) / 2)) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle__bar--basso {
  transform: translateY(calc(var(--wp--preset--spacing--30) / -2 + var(--wp--custom--border-width--medium) / 2)) rotate(-45deg);
}
.nav-toggle.is-open .nav-toggle__bar--mezzo { opacity: 0; }
/* Chi ha chiesto meno animazione vede comunque la croce, solo senza il passaggio. */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bar { transition: none; }
}
@media (max-width: 959px) {
  .nav-toggle { display: inline-block; }
  .site-header__nav { order: 5; }
  .site-header__nav {
    display: none;
    width: 100%;
    border-top: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--border);
  }
  /* Aperto, il menu prende TUTTA la pagina sotto la testata.
   *
   * È assoluto dentro .site-header, che è sticky e quindi posizionata: così
   * inset-block-start: 100% lo attacca sempre al bordo basso della barra, e il
   * 100% dentro block-size è l'altezza della barra stessa. Il pannello segue
   * quindi da solo il restringimento della testata quando si scorre, senza che
   * nessuna misura vada tenuta allineata a mano.
   *
   * Scorre dentro di sé: con il pannello dei servizi aperto l'elenco supera
   * l'altezza della finestra, e senza questo il dito finirebbe per scorrere il
   * documento sotto. overscroll-behavior: contain ferma l'incatenamento quando
   * si arriva in fondo. Uscendo dal flusso perde il padding del contenitore,
   * che va rimesso qui. */
  .site-header__nav.is-open {
    display: block;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    block-size: calc(100dvh - 100%);
    padding-block: var(--wp--preset--spacing--40);
    padding-inline: var(--wp--custom--gutter-inline);
    background-color: var(--wp--preset--color--base);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-header__inner { flex-wrap: wrap; }
  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}
/* --------------------------------------------------------------------------
   Sezioni a sbalzo
   Il dispositivo preso dal modello visivo: il testo resta allineato alla
   colonna del contenitore, la foto esce e arriva a filo del bordo della
   finestra. Divisione asimmetrica 55/45, non a metà.

   Niente margini negativi: il lato testo si prende come padding il mezzo
   scarto fra finestra e contenitore, calcolato in percentuale. Si usa 100%
   e non 100vw perché 100vw include la barra di scorrimento e produrrebbe
   un overflow orizzontale.

   In Gutenberg questo è core/media-text con align: full e mediaPosition,
   quindi la sezione resta un pattern.
   -------------------------------------------------------------------------- */

.section--bleed { padding-block: 0; }
.row--bleed {
  --row-gap: 0;
  align-items: stretch;
}
.column--bleed-text {
  flex: 0 1 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--wp--custom--block-gap);
  padding-block: var(--wp--preset--spacing--80);
  padding-inline-start: max(var(--wp--custom--gutter-inline), (100% - var(--wp--custom--width-wide)) / 2);
  padding-inline-end: var(--wp--preset--spacing--60);
}
.column--bleed-media {
  flex: 0 1 45%;
  align-self: stretch;
  /* La comparsa rientra da una scala leggermente maggiore: senza questo, una
   * foto a filo del bordo sborda e crea scorrimento orizzontale. */
  overflow: hidden;
}
/* L'immagine riempie sempre la colonna: nessun tetto sull'immagine, altrimenti
 * sopra le resta una fascia di fondo. Il freno alla crescita sta a monte: vedi
 * la nota sotto .row--bleed. */
.column--bleed-media {
  display: flex;
  /* L'immagine resta attaccata al bordo inferiore: lo spazio che avanza quando
   * scatta il tetto va tutto sopra. Attaccata sotto, la foto chiude la banda e
   * il profilo del marchio esce davvero dall'immagine invece che dal fondo. */
  align-items: flex-end;
}
.column--bleed-media .media__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Due selettori e non uno: nella colonna a sbalzo l'immagine puo' arrivare da
 * `core/image` (pagine) oppure da `core/post-featured-image` (articolo). In
 * entrambi i casi `.media__image` finisce sul <figure>, non sull'<img>, quindi
 * senza questa regola il figure si stira per tutta la colonna ma l'immagine
 * dentro resta alta quanto il suo rapporto naturale. Sull'articolo si vedeva
 * come una fascia di grigio sotto la foto: 110px a 1440. */
.column--bleed-media .wp-block-image.media__image > img,
.column--bleed-media .wp-block-post-featured-image.media__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Il lato specchiato: foto a sinistra. Le sezioni si alternano. */
.row--bleed-reverse { flex-direction: row-reverse; }
.row--bleed-reverse .column--bleed-text {
  padding-inline-start: var(--wp--preset--spacing--60);
  padding-inline-end: max(var(--wp--custom--gutter-inline), (100% - var(--wp--custom--width-wide)) / 2);
}
/* Il pannello di colore si ferma esattamente sul taglio della foto:
   è l'incastro che regge tutta la composizione. */
.row--bleed-panel .column--bleed-text { background-color: var(--wp--preset--color--surface); }
@media (max-width: 781px) {
  .column--bleed-text,
  .column--bleed-media { flex-basis: 100%; }
  .column--bleed-text {
    padding-block: var(--wp--preset--spacing--70);
    padding-inline: var(--wp--custom--gutter-inline);
  }
  .row--bleed-reverse .column--bleed-text { padding-inline: var(--wp--custom--gutter-inline); }
  /* Impilata, la colonna non ha un'altezza a cui riferirsi: rapporto fisso,
   * e il tetto non serve perché la larghezza è già quella dello schermo. */
  .column--bleed-media .media__image {
    height: auto;
    aspect-ratio: 3 / 2;
  }
  /* Impilata, la colonna non ha un'altezza a cui riferirsi: rapporto fisso,
   * e il tetto non serve perché la larghezza è già quella dello schermo. */
  .column--bleed-media .wp-block-image.media__image > img,
  .column--bleed-media .wp-block-post-featured-image.media__image > img {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}
/* --------------------------------------------------------------------------
   Titolo bicolore
   Una porzione della frase passa al rosso. Su fondo bianco fa 4.81:1,
   su antracite il rosso non è leggibile e si usa il bianco pieno.
   In Gutenberg è il formato colore testo del rich text: resta editabile.
   -------------------------------------------------------------------------- */

.headline-accent { color: var(--wp--preset--color--primary); }
.section--dark .headline-accent { color: var(--wp--preset--color--surface); }
/* --------------------------------------------------------------------------
   Il rosso piccolo non regge su grigio: 3.78:1. Sul fondo surface il testo
   rosso di dimensioni normali passa ad accent, che fa 5.43:1.
   -------------------------------------------------------------------------- */

.section--surface .link,
.section--straddle .link,
.person-card__role { color: var(--wp--preset--color--accent); }
/* Le schede dei servizi sono bianche: lì il rosso pieno è a norma. */
.service-card .link { color: var(--wp--preset--color--primary); }
/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* La hero non porta padding: lo portano le colonne a sbalzo, così la foto
 * arriva davvero a filo del bordo. Qui serve solo l'ancoraggio per il profilo
 * del marchio. */

/* --------------------------------------------------------------------------
   Banda sfalsata
   Il grigio si ferma a metà delle schede, che restano bianche e scavalcano il
   confine. È il dispositivo del sito di riferimento, dove le schede dei servizi
   stanno metà sulla foto e metà sul fondo chiaro.
   In Gutenberg è un gradiente a stop netto sul Group.
   -------------------------------------------------------------------------- */

.section--straddle {
  --straddle-stop: 55%;
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    var(--wp--preset--color--surface) 0,
    var(--wp--preset--color--surface) var(--straddle-stop),
    var(--wp--preset--color--base) var(--straddle-stop)
  );
}
/* Impilata, la banda lascerebbe la seconda e la terza scheda bianche su bianco,
 * senza più un bordo. Deve stare dopo la regola base: vince l'ordine. */
@media (max-width: 781px) {
  .section--straddle { --straddle-stop: 100%; }
}
/* --------------------------------------------------------------------------
   Card dei servizi
   -------------------------------------------------------------------------- */

.service-card {
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--base);
  border-top: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--primary);
}
.service-card__title { color: var(--wp--preset--color--contrast); }
/* È un <ul>: che si legga come tale. Senza marcatore le voci sembrano
 * paragrafi staccati e non si capisce dove finisce una e comincia l'altra.
 * Il marcatore nativo invece di un ::before: in Gutenberg è core/list con uno
 * stile di blocco, non serve markup su misura. */
.service-list {
  margin: 0;
  padding-inline-start: var(--wp--preset--spacing--30);
  list-style: disc;
}
.service-list__item {
  padding-block: var(--wp--preset--spacing--20);
  padding-inline-start: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}
.service-list__item::marker { color: var(--wp--preset--color--primary); }
/* L'area più ampia ha venti voci: in colonna unica sarebbe una colonna di testo
 * lunghissima. Le colonne CSS non sono una griglia e non cambiano il verdetto
 * del blocco: in Gutenberg restano core/list con uno stile di blocco. */
/* Il numero di colonne segue la LUNGHEZZA dell'elenco, non è fisso: con cinque
 * voci su tre colonne la terza conteneva una riga sola e restava un vuoto largo
 * un terzo di pagina. Solo l'elenco da venti voci regge tre colonne. */
.service-list--columns {
  columns: 3;
  column-gap: var(--wp--preset--spacing--60);
}
.service-list--columns-2 { columns: 2; }
.service-list--columns-1 { columns: 1; }
/* Senza questo una voce su due righe si spezza al salto di colonna: in
 * lavora-con-noi la frase "Impiegati amministrativi e figure di supporto alla
 * gestione dello Studio" restava tagliata a metà fra la seconda e la terza. */
.service-list__item { break-inside: avoid; }
@media (max-width: 959px) {
  .service-list--columns,
  .service-list--columns-2 { columns: 2; }
}
@media (max-width: 781px) {
  .service-list--columns,
  .service-list--columns-2 { columns: 1; }
}
/* --------------------------------------------------------------------------
   Mappa

   Il rapporto 4:3 è lo stesso dei due attributi width e height dell'iframe
   (600x450): tenerli d'accordo evita che la pagina sobbalzi mentre la mappa
   carica. In Gutenberg è un core/html, oppure un blocco custom se si vuole
   caricarla solo dopo il consenso ai cookie.
   -------------------------------------------------------------------------- */

.map {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  border: 0;
}
/* --------------------------------------------------------------------------
   Schede con icona
   Cinque voci brevi che da elenco puntato diventano schede. L'icona è SVG
   inline e non un file: così il tratto prende il colore da un token e segue il
   rebrand. Lo spessore è --wp--custom--border-width--thin con non-scaling-stroke, quindi
   resta un filetto reale a qualunque dimensione, lo stesso del resto del progetto.
   In Gutenberg è un pattern di core/columns con un blocco custom pmp/icon-card,
   oppure core/image con SVG se si decide di caricarle in Media Library.
   -------------------------------------------------------------------------- */

/* flex-shrink a 0: le schede non si stringono mai sotto la loro misura. Sotto
 * quella soglia non vanno a capo, diventano uno slider, vedi più sotto.
 * min-width 0 lascia andare a capo il testo dentro la scheda invece di far
 * sfondare la scheda dalla parola più lunga. */
.column--fifth {
  flex: 0 0 calc(20% - var(--row-gap) * 4 / 5);
  min-width: 0;
}
/* Impianto a sovrapposizione del modello visivo: foto a filo del bordo sinistro,
 * titolo spostato a destra della foto, schede che la scavalcano.
 * La foto è un livello assoluto e le schede stanno sopra: niente margini
 * negativi, che sono vietati, e niente griglia.
 *
 * Le schede stanno nel contenitore standard, non in una fascia a percentuale.
 * È la foto ad agganciarsi al contenitore: la sua larghezza è il mezzo scarto
 * fra finestra e contenitore più tre decimi del contenitore, quindi il suo bordo
 * destro cade SEMPRE a metà della seconda scheda, a qualunque risoluzione.
 * Con la foto a percentuale della finestra il rapporto derivava: a 1280 il bordo
 * cadeva all'85% della prima scheda, a 1920 ne era già uscito. */
.showcase { position: relative; }
.showcase__media {
  position: absolute;
  /* La foto è staccata sopra e sotto invece di arrivare a filo della sezione:
   * attaccata, toccava quella della sezione successiva e le due si leggevano
   * come un unico blocco. Stesso valore ai due estremi. */
  inset-block: var(--wp--preset--spacing--80);
  inset-inline-start: 0;
  width: calc(max(var(--wp--custom--gutter-inline), (100% - var(--wp--custom--width-wide)) / 2) + var(--wp--custom--width-wide) * 0.3);
  overflow: hidden;
}
.showcase__media .media__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showcase__media .wp-block-image.media__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showcase__content {
  position: relative;
  z-index: 2;
  /* Le schede hanno bisogno di più aria del ritmo normale: con --wp--custom--block-gap
   * i paragrafi sopra e sotto ci restano attaccati. */
  gap: var(--wp--preset--spacing--60);
}
/* Il titolo comincia oltre il bordo destro della foto. */
.showcase__head {
  padding-inline-start: calc(max(var(--wp--custom--gutter-inline), (100% - var(--wp--custom--width-wide)) / 2) + var(--wp--custom--width-wide) * 0.34);
  padding-inline-end: max(var(--wp--custom--gutter-inline), (100% - var(--wp--custom--width-wide)) / 2);
}
/* Due soglie distinte.
 *
 * 1295: sotto questa larghezza il contenitore scende sotto i 1200 e le cinque
 *        schede non ci stanno più alla loro misura. Invece di stringerle o
 *        mandarle a capo, la riga diventa uno slider.
 * 959:  qui anche la foto esce dall'impianto a sovrapposizione e torna in
 *        colonna sopra al testo.
 */
@media (max-width: 1295px) {
  .showcase__cards {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--wp--preset--spacing--30);
  }
  .showcase__cards .column--fifth {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }

  /* Stessa ragione, e stessa correzione, degli slider delle news e delle
   * persone: overflow-x: auto fa calcolare al browser anche overflow-y: auto,
   * e la traslazione della comparsa allunga l'area scorribile in verticale.
   * Col dito sopra allo slider si trascina il contenuto dentro al suo riquadro
   * invece della pagina, e la fila sembra muoversi in su e in giù.
   *
   * Qui però NON è transitorio come là: le schede fuori dalla finestra non
   * intersecano mai il viewport, quindi non ricevono mai .is-visible e la loro
   * traslazione resta per sempre. Gli 8px di scorrimento verticale (24 di
   * traslazione meno i 16 di padding) non si chiudono da soli. */
  .has-js .showcase__cards .reveal { transform: none; }
}
@media (max-width: 959px) {
  .showcase__media {
    position: static;
    width: 100%;
    height: auto;
    inset-block: auto;
  }
  .showcase__media .media__image {
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .showcase__media .wp-block-image.media__image > img {
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .showcase__head { padding-inline: var(--wp--custom--gutter-inline); }
  /* Impilato, il testo partiva appiccicato al bordo basso della foto: in riga
     lo spazio lo faceva la colonna accanto, qui non c'è più niente a farlo. */
  .showcase__content { padding-block-start: var(--wp--preset--spacing--60); }
}
@media (max-width: 781px) {
  .column--fifth { flex-basis: 100%; }
}
.icon-card {
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--surface);
}
.icon-card__icon {
  display: block;
  /* 48px. Era scelto come multiplo intero di 24 perche' le UIcons erano
   * disegnate su quella griglia; con Phosphor, che disegna su 256, il vincolo
   * non c'e' piu'. La misura resta perche' e' quella giusta accanto a un testo
   * in corpo medium, non perche' sia un multiplo di qualcosa. */
  width: calc(var(--wp--preset--spacing--50) * 1.5);
  height: auto;
  /* Phosphor Icons, peso Thin, licenza MIT. Sostituita la famiglia il 27 ottobre
   * 2026: il cliente chiedeva icone piu' minimali e piu' coerenti fra loro, sul
   * modello di jpmorgan.com. UN SOLO SISTEMA, come prima: non mescolare
   * famiglie. Sono tracciati pieni e non tratti, quindi il colore si da' con
   * fill. La MIT chiude anche il problema dell'attribuzione che la licenza
   * Flaticon imponeva. */
  /* Resta per gli SVG ancora inline nei template. Nelle pagine l'icona e' un
   * core/image con un SVG della Media Library e il rosso cotto nel file:
   * dentro a un <img> il CSS non entra. */
  fill: var(--wp--preset--color--primary);
}
/* core/image mette le classi sulla <figure>: la misura va girata all'immagine,
 * altrimenti l'SVG si disegna grande quanto la scheda. */
.icon-card__icon img {
  display: block;
  width: 100%;
  height: auto;
}
.icon-card__label {
  font-size: var(--wp--preset--font-size--medium);
  line-height: var(--wp--custom--line-height--base);
}
/* --------------------------------------------------------------------------
   Numeri
   -------------------------------------------------------------------------- */

.stat__value {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: var(--wp--custom--font-weight--light);
  line-height: var(--wp--custom--line-height--tight);
  color: var(--wp--preset--color--primary);
}
.stat__label {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}

/* La scheda del contatore: fondo grigio, icona rossa, testo nero -- lo stesso
 * trattamento delle schede di chi-siamo. Il 27 ottobre erano state fatte rosse
 * con il testo bianco; il 28 il cliente ha chiesto questo stile.
 *
 * Serve il modificatore `--card` e non basta `.stat`, perché `.stat__value` e
 * `.stat__label` sono condivisi con le tappe di chi-siamo, che stanno su fondo
 * bianco e devono restare rosse.
 *
 * Il contrasto qui non è un problema: nero del marchio su `surface` è molto
 * sopra soglia. Era un vincolo da sorvegliare finché il fondo era rosso. */
.stat--card {
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--surface);
}
.stat--card .stat__value,
.stat--card .stat__label { color: var(--wp--preset--color--contrast); }

/* L'icona vale per tutte e due le copie del progetto: nel mockup è un <svg> in
 * riga e il colore arriva dal token, in WordPress è un'immagine della Media
 * Library con il rosso cotto nel file, perché dentro a un <img> il CSS non
 * entra. Nessun filtro: su fondo grigio l'icona resta del suo rosso. */
.stat__icon {
  display: block;
  /* 48px, la stessa misura di .icon-card__icon. */
  width: calc(var(--wp--preset--spacing--50) * 1.5);
  height: auto;
  fill: var(--wp--preset--color--primary);
}
.stat__icon img {
  display: block;
  width: 100%;
  height: auto;
}
/* --------------------------------------------------------------------------
   Professionisti
   -------------------------------------------------------------------------- */

/* La scheda della home è BIANCA su fondo surface: è l'inverso delle schede news,
 * che sono grigie su bianco, e vale la stessa ragione: due grigi di fila
 * farebbero sparire il confine fra scheda e sezione.
 *
 * Il ritratto arriva a filo dei tre bordi e il padding sta solo sul corpo sotto.
 * Con il padding sulla scheda intera la foto rimpicciolisce, che è l'opposto di
 * quello che serve qui: la faccia è il contenuto, non un'illustrazione.
 *
 * Ridurre la foto NON era la risposta: a 186px i ritratti diventavano francobolli.
 * La sezione lunga si accorcia facendo scorrere le schede, non rimpicciolendole. */
/* NIENTE align-self: flex-start. Le schede di una stessa riga sono TUTTE alte
 * quanto la più alta, e quella misura la detta il contenuto più lungo: qui la
 * qualifica "Consulenza contabile e fiscale", che va a capo mentre "Partner" no.
 * Con flex-start ogni scheda si accorciava sul proprio contenuto e la fila
 * diventava una scalinata di rettangoli di altezza diversa.
 * Vale per tutte le schede del progetto, non solo per queste: vedi la regola
 * in CLAUDE.md. position: relative serve al link che copre la scheda. */
.person-card {
  position: relative;
  background-color: var(--wp--preset--color--base);
}
.person-card__photo {
  display: block;
  width: 100%;
  /* I ritratti sono scontornati su un grigio cotto nel PNG: il fondo del
   * riquadro lo asseconda, così il rettangolo si legge come un pannello voluto
   * e non come un errore di scontorno. */
  background-color: var(--wp--preset--color--surface);
}
.wp-block-image.person-card__photo > img {
  display: block;
  width: 100%;
  /* I ritratti sono scontornati su un grigio cotto nel PNG: il fondo del
   * riquadro lo asseconda, così il rettangolo si legge come un pannello voluto
   * e non come un errore di scontorno. */
  background-color: var(--wp--preset--color--surface);
}
.person-card__body { padding: var(--wp--preset--spacing--40); }
/* Segno di continuità sotto l'indice delle persone: dice che la pagina prosegue
 * con le biografie, e per questo punta in basso.
 *
 * Il cerchio è la seconda forma tonda del progetto dopo i pallini dello slider,
 * e come quella è una deroga voluta al default squadrato.
 *
 * Il simbolo del marchio NON si usa qui: la guideline vieta di ruotarlo, e
 * impiegarlo come freccia direzionale sarebbe ruotarlo nei fatti.
 *
 * La freccia è 24px su griglia 24, cioè scala 1x esatta. Il token da 16px che
 * avevo usato prima dava 0,667x, fuori dai pixel pieni: lo stesso errore già
 * fatto con le icone delle schede. */
.scroll-cue {
  display: flex;
  justify-content: center;
}
.scroll-cue__circle {
  display: grid;
  place-items: center;
  inline-size: var(--wp--preset--spacing--60);
  block-size: var(--wp--preset--spacing--60);
  border: var(--wp--custom--border-width--medium) solid var(--wp--preset--color--primary);
  border-radius: 50%;
  color: var(--wp--preset--color--primary);
}
.scroll-cue__circle svg {
  display: block;
  inline-size: var(--wp--preset--spacing--40);
  block-size: auto;
  fill: currentColor;
}
/* Scheda dell'indice delle persone, su banda sfalsata.
 *
 * Il filetto rosso in testa non è decorazione: la scheda è bianca e scavalca il
 * confine della banda, quindi sulla metà bianca sparirebbe senza. È lo stesso
 * motivo per cui ce l'hanno le schede dei servizi in home, ed è l'unico caso in
 * cui il progetto ammette un filetto su una scheda.
 *
 * In hover la scheda stacca e il nome passa al rosso. L'ombra va dichiarata
 * nella STESSA regola di transizione del colore: la comparsa in entrata azzera
 * transition-property sull'elemento, e dichiarandola altrove scatterebbe secca. */
.person-card--surface { background-color: var(--wp--preset--color--surface); }
.person-card--linked {
  border-top: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--primary);
}
.person-card--linked:hover { box-shadow: var(--wp--custom--shadow--sm); }
/* La comparsa in entrata azzera transition-property sull'elemento, e .has-js
 * .reveal vince per specificità su qualunque transizione dichiarata sulla sola
 * classe della scheda: l'ombra dell'hover va rimessa QUI dentro, come per le
 * schede news, altrimenti scatta secca. */
.has-js .reveal.person-card--linked {
  transition:
    opacity var(--wp--custom--transition-base),
    transform var(--wp--custom--transition-base),
    box-shadow var(--wp--custom--transition-base);
}
/* La scheda intera è un bersaglio di clic, ma il link resta UNO SOLO: lo
 * pseudo-elemento si allarga su tutta la scheda invece di avvolgere il markup in
 * un <a>. Da tastiera e da screen reader si trova il nome della persona, non un
 * link che recita ritratto, nome e ruolo di fila. Stesso dispositivo delle
 * schede news. L'ancoraggio sta sopra, su .person-card. */

.person-card__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--wp--custom--transition-base);
}
.person-card__link::after {
  position: absolute;
  inset: 0;
  content: "";
}
.person-card__link:hover { color: var(--wp--preset--color--primary); }
/* Peso normale, non semibold. È la stessa ragione già scritta per i titoli delle
 * news: in corpo large il semibold pesa troppo accanto ai titoli di sezione, che
 * sono light, e il nome finisce per gridare più del titolo che lo introduce.
 * Regular è il gradino sotto nella scala del progetto: fra 600 e 400 non c'è
 * nulla, quindi "leggermente" qui vuol dire un gradino. */
.person-card__name {
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--font-weight--regular);
}
.person-card__role {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}
/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */

.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Immagine della news. Due collocazioni, una sola immagine:
 * - nell'elenco sta a sinistra e occupa un terzo della scheda;
 * - nelle schede in colonna della home sta sopra la data, a tutta larghezza.
 * Il rapporto 3/2 è lo stesso già usato dalle foto a sbalzo quando si impilano.
 * In Gutenberg è core/post-featured-image dentro core/post-template. */
.news-card__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Immagine della news. Due collocazioni, una sola immagine:
 * - nell'elenco sta a sinistra e occupa un terzo della scheda;
 * - nelle schede in colonna della home sta sopra la data, a tutta larghezza.
 * Il rapporto 3/2 è lo stesso già usato dalle foto a sbalzo quando si impilano.
 * In Gutenberg è core/post-featured-image dentro core/post-template. */
.wp-block-image.news-card__image > img,
.wp-block-post-featured-image.news-card__image > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Il contenitore ritaglia: in hover l'immagine si ingrandisce e senza questo
 * sborderebbe dalla scheda. Vale in entrambe le collocazioni. */
.news-card__media { overflow: hidden; }
/* Nell'elenco la colonna dell'immagine si allunga fino all'altezza del testo,
 * così le due colonne chiudono sulla stessa riga. Quando invece il testo è
 * poco, è il rapporto 3/2 a dettare l'altezza della scheda: senza, una news
 * dall'estratto corto diventava una striscia.
 * Solo nell'elenco: nelle schede in colonna della home l'altezza la detta il
 * rapporto, e un height: 100% su un contenitore ad altezza automatica darebbe
 * un risultato imprevedibile. */
.news-card__media--fill .news-card__image { height: 100%; }
/* Nell'elenco la colonna dell'immagine si allunga fino all'altezza del testo,
 * così le due colonne chiudono sulla stessa riga. Quando invece il testo è
 * poco, è il rapporto 3/2 a dettare l'altezza della scheda: senza, una news
 * dall'estratto corto diventava una striscia.
 * Solo nell'elenco: nelle schede in colonna della home l'altezza la detta il
 * rapporto, e un height: 100% su un contenitore ad altezza automatica darebbe
 * un risultato imprevedibile. */
.news-card__media--fill .wp-block-image.news-card__image > img,
.news-card__media--fill .wp-block-post-featured-image.news-card__image > img { height: 100%; }
/* Ingrandimento in hover. Il fattore è lo stesso 1.03 della comparsa delle
 * immagini: un solo valore di scala in tutto il progetto. La transizione sta
 * sull'immagine e non sulla scheda, che ha già la propria per ombra e
 * comparsa: vedi la nota su .has-js .reveal.news-card. */
.news-card__image { transition: transform var(--wp--custom--transition-base); }
/* Ingrandimento in hover. Il fattore è lo stesso 1.03 della comparsa delle
 * immagini: un solo valore di scala in tutto il progetto. La transizione sta
 * sull'immagine e non sulla scheda, che ha già la propria per ombra e
 * comparsa: vedi la nota su .has-js .reveal.news-card. */
.wp-block-image.news-card__image > img,
.wp-block-post-featured-image.news-card__image > img { transition: transform var(--wp--custom--transition-base); }
.news-card:hover .news-card__image { transform: scale(1.03); }
.news-card:hover .wp-block-image.news-card__image > img,
.news-card:hover .wp-block-post-featured-image.news-card__image > img { transform: scale(1.03); }
/* Scheda piena, come nel modello visivo: niente filetto in testa. È il riempimento
 * a dividere una news dall'altra e a mostrare che la scheda arriva fino al bordo
 * del contenitore: a testo nudo sembrava finire molto prima.
 * Qui il riempimento è grigio su fondo bianco, l'inverso delle schede dei servizi:
 * due bande grigie di fila farebbero sparire il confine su cui appoggia la coppa. */
.news-card {
  position: relative;
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--surface);
  cursor: pointer;
}
/* Tutta la scheda è cliccabile, ma il link resta UNO solo: il blocco si estende
 * con uno pseudo-elemento sopra la scheda invece di avvolgere tutto in un <a>.
 * Così chi naviga da tastiera o con uno screen reader trova un titolo e un link,
 * non un link che recita l'intera scheda. */
.news-card__title .link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.news-card:hover { box-shadow: var(--wp--custom--shadow--sm); }
.news-card:hover .news-card__title .link { color: var(--wp--preset--color--primary); }
/* La comparsa in entrata azzera transition-property sull'elemento: l'ombra
 * dell'hover va rimessa nella stessa dichiarazione, altrimenti scatta secca. */
.has-js .reveal.news-card {
  transition:
    opacity var(--wp--custom--transition-base),
    transform var(--wp--custom--transition-base),
    box-shadow var(--wp--custom--transition-base);
}
.news-card__meta {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
/* La categoria dentro una scheda news.
 *
 * COLORE: --color-accent e NON --color-primary. La scheda ha riempimento
 * `surface`, e li' il rosso del marchio fa 4.48:1, un soffio sotto la soglia di
 * 4.5. L'accent ne fa 6.44:1 e lascia margine. E' la stessa regola che vale per
 * i link di corpo su fondo surface.
 *
 * CORPO: 0.9em, cioe' un gradino sotto al `small` del meta che la contiene.
 * E' un RAPPORTO, non un valore nuovo: sotto `small` la scala non ha nulla, e i
 * token non si allargano di nascosto. Se serve stabilizzarlo, diventa un
 * --font-size-x-small in tokens.css.
 *
 * Non e' un link: vedi pmp_schede_news() nel tema. La scheda ha un solo
 * bersaglio di clic ed e' il titolo. */
.news-card__terms {
  color: var(--wp--preset--color--accent);
  font-size: 0.9em;
}

/* Alcuni titoli del CPT sono lunghissimi: in colonna stretta arrivano a sei o
 * sette righe e la scheda si sfonda. Quattro righe sono il limite oltre il
 * quale un titolo smette di funzionare da titolo. Il testo tagliato resta nel
 * DOM, quindi gli screen reader continuano a leggerlo per intero. */
.news-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--font-weight--regular);
}
/* Il titolo di un articolo non è una call to action: resta scuro e passa al rosso
 * solo in hover. Peso normale e non semibold: in corpo large il semibold pesa
 * troppo accanto ai titoli di sezione, che sono light. */
.news-card__title .link {
  color: var(--wp--preset--color--contrast);
  font-weight: var(--wp--custom--font-weight--regular);
  text-decoration: none;
}
.news-card__title .link:hover { color: var(--wp--preset--color--primary); }
.section--dark .news-card__title .link:hover { color: var(--wp--preset--color--surface); }
/* --------------------------------------------------------------------------
   Media + testo
   -------------------------------------------------------------------------- */

.media__image { width: 100%; }
/* --------------------------------------------------------------------------
   Media + testo
   -------------------------------------------------------------------------- */

.wp-block-image.media__image > img,
.wp-block-post-featured-image.media__image > img { width: 100%; }
.media__caption {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}
/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--base);
  padding-block: var(--wp--preset--spacing--70);
}
.site-footer__logo { width: var(--wp--preset--spacing--80); }
.footer-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav__item { padding-block: var(--wp--preset--spacing--20); }
.footer-nav__link {
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  transition: color var(--wp--custom--transition-base);
}
.footer-nav__link:hover { color: var(--wp--preset--color--surface); }
.footer-nav__title {
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--surface);
}
.site-footer__legal {
  padding-top: var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--surface);
}
.site-footer__address {
  font-style: normal;
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--custom--line-height--relaxed);
}
/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.field__label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--semibold);
  color: var(--wp--preset--color--contrast);
}
/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.field .ff-el-input--label label, .field--consent .ff-el-form-check-label span {
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--semibold);
  color: var(--wp--preset--color--contrast);
}
/* Il bordo dei controlli usa muted, non border: un filetto chiaro da 1px
   non raggiunge il 3:1 richiesto sugli elementi di interfaccia. */
.field__input {
  /* Un <select> è largo quanto la sua opzione più lunga se non glielo si
   * impedisce: senza questo torna a spingere la colonna oltre lo schermo. */
  max-inline-size: 100%;
  padding: var(--wp--preset--spacing--30);
  background-color: var(--wp--preset--color--base);
  border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--muted);
  border-radius: var(--wp--custom--radius--none);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast);
}
/* Il bordo dei controlli usa muted, non border: un filetto chiaro da 1px
   non raggiunge il 3:1 richiesto sugli elementi di interfaccia. */
.field .ff-el-form-control {
  /* Un <select> è largo quanto la sua opzione più lunga se non glielo si
   * impedisce: senza questo torna a spingere la colonna oltre lo schermo. */
  max-inline-size: 100%;
  padding: var(--wp--preset--spacing--30);
  background-color: var(--wp--preset--color--base);
  border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--muted);
  border-radius: var(--wp--custom--radius--none);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast);
}
/* La riga del consenso NON deve andare a capo. .row è flex-wrap: wrap, e un
 * flex item più largo dello spazio disponibile va a capo PRIMA di stringersi:
 * l'etichetta finiva sotto la casella invece che accanto. Con nowrap
 * l'etichetta si stringe e manda a capo il testo al suo interno, che è quello
 * che serve. min-width: 0 le permette di scendere sotto la propria larghezza
 * di contenuto. */
.field--consent {
  align-items: flex-start;
  flex-wrap: nowrap;
}
.field--consent .field__label {
  flex: 1;
  min-width: 0;
}
.field--consent .field .ff-el-input--label label, .field--consent .ff-el-form-check-label span {
  flex: 1;
  min-width: 0;
}
/* La casella di default è circa 13px: troppo piccola come bersaglio e visivamente
 * incompiuta accanto a un'etichetta in semibold. --wp--preset--spacing--40 è 24px, fisso, ed
 * è la misura minima raccomandata per un controllo. accent-color porta lo stato
 * selezionato nel rosso del marchio senza ricostruire la casella da zero. */
.field__checkbox {
  flex-shrink: 0;
  width: var(--wp--preset--spacing--40);
  height: var(--wp--preset--spacing--40);
  margin: 0;
  accent-color: var(--wp--preset--color--primary);
}
/* La casella di default è circa 13px: troppo piccola come bersaglio e visivamente
 * incompiuta accanto a un'etichetta in semibold. --wp--preset--spacing--40 è 24px, fisso, ed
 * è la misura minima raccomandata per un controllo. accent-color porta lo stato
 * selezionato nel rosso del marchio senza ricostruire la casella da zero. */
.field--consent .ff-el-form-check-input {
  flex-shrink: 0;
  width: var(--wp--preset--spacing--40);
  height: var(--wp--preset--spacing--40);
  margin: 0;
  accent-color: var(--wp--preset--color--primary);
}
.contact-form { max-width: var(--wp--custom--width-content); }
/* --------------------------------------------------------------------------
   Indirizzo
   -------------------------------------------------------------------------- */

.address {
  font-style: normal;
  line-height: var(--wp--custom--line-height--relaxed);
}
/* --------------------------------------------------------------------------
   Movimento

   Due soli effetti in entrata: il contenuto sale di --wp--preset--spacing--40 comparendo,
   le immagini comparendo rientrano da una scala leggermente maggiore.

   Lo stato nascosto vive sotto .has-js, che motion.js scrive sul documento
   prima che la pagina si disegni: senza JS non si nasconde niente.

   La durata è --wp--custom--transition-base, cioè 180ms. È l'unico valore di durata nella
   scala ed è corto per una comparsa: servirebbe un --transition-slow.
   -------------------------------------------------------------------------- */

.has-js .reveal {
  opacity: 0;
  transform: translateY(var(--wp--preset--spacing--40));
  transition: opacity var(--wp--custom--transition-base), transform var(--wp--custom--transition-base);
}
.has-js .reveal--media { transform: scale(1.03); }
.has-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .has-js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Resta solo la testata: l'unica cosa che le si anima è l'ombra. Padding del
     contenitore e larghezza del logo non hanno più transizione da spegnere,
     perché non cambiano più. */
  /* Tre transizioni da spegnere, non una: ombra, padding del contenitore e
     larghezza del logo. La misura cambia comunque, qui si toglie solo
     l'animazione del passaggio. */
  .site-header,
  .site-header__inner,
  .brand__logo { transition: none; }
  /* Anche l'ingrandimento delle immagini delle news è movimento: qui si spegne
     insieme a tutto il resto. */
  .news-card__image { transition: none; }
  /* Anche l'ingrandimento delle immagini delle news è movimento: qui si spegne
     insieme a tutto il resto. */
  .wp-block-image.news-card__image > img,
  .wp-block-post-featured-image.news-card__image > img { transition: none; }
  .news-card:hover .news-card__image { transform: none; }
  .news-card:hover .wp-block-image.news-card__image > img,
  .news-card:hover .wp-block-post-featured-image.news-card__image > img { transform: none; }
}
/* --------------------------------------------------------------------------
   Pagina servizi: l'area di attività

   Tre blocchi identici a tutta larghezza (titolo, paragrafo, elenco, per tre
   volte) facevano una pagina che non diceva niente. Qui il conteggio, il
   titolo e la descrizione stanno in una colonna stretta e l'elenco occupa le
   due colonne restanti: la pagina acquista una verticale su cui appoggiarsi
   invece di tre fasce sovrapposte.

   Non serve nessun impianto nuovo: sono .column--third e .column--two-thirds
   che esistono già, quindi in Gutenberg è core/columns e la sezione resta un
   pattern. Il conteggio è .stat__value, lo stesso delle tappe di chi-siamo,
   senza conteggio in entrata: è una quantità ferma, non un numero che sale.
   -------------------------------------------------------------------------- */

/* Elenco al corpo del testo. Serve ovunque l'elenco SIA il contenuto (le aree
 * di servizi, il corpo di un articolo) e non l'assaggio dentro una scheda,
 * che resta piccolo e grigio. In Gutenberg è lo stile di blocco DI DEFAULT di
 * core/list: la variante piccola delle schede è l'eccezione, non il contrario. */
.service-list--body .service-list__item {
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast);
}
/* La testata è appiccicata: senza questo, saltando a un'ancora dal megamenù o
 * da un link interno, il titolo dell'area finisce coperto dalla barra.
 * --wp--preset--spacing--80 copre gli 88px della testata a riposo, che è il caso peggiore. */
.section--anchor { scroll-margin-block-start: var(--wp--preset--spacing--80); }
/* --------------------------------------------------------------------------
   Megamenù dei servizi

   È il perno del progetto: il cliente vuole vedere le tre macrocategorie e le
   33 voci a colpo d'occhio senza entrare nella pagina.

   Le 33 voci NON sono link. Il brief è esplicito: nessuna pagina singola per
   sottoservizio. Sono etichette, e i link sono i tre titoli di categoria, che
   portano alle ancore di servizi.html. Trentatré link verso tre sole
   destinazioni renderebbero il pannello illeggibile da tastiera e da screen
   reader; così l'albero di accessibilità contiene tre link e trentatré voci.

   Apertura al clic e non al passaggio del mouse: fra la voce di menu e il
   pannello c'è il padding verticale della testata, e attraversandolo il :hover
   si interrompe e il pannello si richiude in faccia all'utente. Il clic è anche
   l'unico comportamento che funzioni sui dispositivi tattili, ed è quello che
   fa core/navigation in WordPress.

   Il pannello si aggancia alla TESTATA e non alla voce, così arriva da bordo a
   bordo: .site-header è sticky, quindi è già il contenitore di riferimento per
   un elemento assoluto. Resta dentro il suo livello 10 e non ne serve uno nuovo.
   -------------------------------------------------------------------------- */

/* gap a zero, non per avarizia di spazio: fra la parola e il disegno ce ne sono
 * già due, il padding del pulsante e il vuoto dentro il tracciato, che comincia
 * a 5,5 unità su 24. Sommati al gap facevano 22px e il chevron sembrava una voce
 * a sé invece dell'indicatore di "Servizi". Il padding del pulsante NON si
 * tocca: è quello che tiene la zona cliccabile. */
.site-nav__item--mega {
  display: flex;
  align-items: center;
  gap: 0;
}
.mega-toggle {
  display: inline-flex;
  align-items: center;
  padding: var(--wp--preset--spacing--20);
  background-color: transparent;
  border: 0;
  border-radius: var(--wp--custom--radius--none);
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
}
/* 24px: la griglia di disegno è 24, quindi scala 1x esatta e tracciati su pixel
 * pieni. --wp--preset--spacing--40 è l'unico token da 24px ed è fisso, non fluido: su
 * un'icona un clamp sfuocherebbe il tracciato.
 *
 * Il riquadro resta 24 anche se il chevron si è alleggerito: il disegno occupa
 * meno spazio DENTRO il riquadro (13 unità su 24 invece di 17, spessore 1,4
 * invece di 3). Rimpicciolire il riquadro a 16px lo avrebbe portato a scala
 * 0,667x, cioè fuori dai pixel pieni, e sarebbe tornato sfocato: è lo stesso
 * errore già fatto una volta con le icone delle schede. */
.mega-toggle__icon {
  display: block;
  width: var(--wp--preset--spacing--40);
  height: auto;
  fill: currentColor;
  transition: transform var(--wp--custom--transition-base);
}
.site-nav__item--mega.is-open .mega-toggle__icon { transform: rotate(180deg); }
.mega-toggle:hover { color: var(--wp--preset--color--primary); }
.mega {
  /* Un solo valore per DUE distanze che devono restare uguali: lo stacco fra
   * un'area e la successiva, e quello sopra la prima area. Separate, la prima
   * area finiva a 24px dal bordo del pannello contro i 64 delle altre, e il suo
   * titolo sembrava appiccicato in alto.
   * Non è un numero nuovo: è la somma di due gradini della scala, 32 più 16.
   * Serviva un valore fra --wp--preset--spacing--50 e --wp--preset--spacing--60, che nella scala non
   * esiste, e inventarne uno sciolto avrebbe rotto la regola dei token. */
  --mega-stacco: calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--30));
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  display: none;
  background-color: var(--wp--preset--color--base);
  border-block-start: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--border);
  /* L'unico uso previsto di --wp--custom--shadow--md: un livello sovrapposto al flusso. */
  box-shadow: var(--wp--custom--shadow--md);
}
.site-nav__item--mega.is-open .mega { display: block; }
/* Trentatré voci in corpo di lettura non stanno sempre in una finestra bassa: il
   pannello si ferma al fondo dello schermo e scorre invece di uscirne. Il 100% è
   l'altezza di .site-header, che è il contenitore di riferimento del pannello. */
.mega {
  max-block-size: calc(100dvh - 100%);
  overflow-y: auto;
  /* Lo spazio della barra di scorrimento va riservato sempre. Senza, su uno
   * schermo basso il pannello diventa scorrevole, la barra compare, l'elenco
   * perde quei pixel e scende da quattro colonne a tre -- e a tre colonne
   * l'elenco e' PIU' ALTO, quindi serve ancora piu' scorrimento. Misurato a
   * 1280x720: quattro colonne senza barra, tre con. */
  scrollbar-gutter: stable;
}
.mega__inner { padding-block: var(--mega-stacco); }
/* Il titolo di categoria è l'unico link del pannello: sottolineato, perché la
 * sottolineatura qui è informazione e non decorazione. */
.mega__title-link {
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--font-weight--semibold);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: from-font;
  transition: color var(--wp--custom--transition-base);
}
.mega__title-link:hover { color: var(--wp--preset--color--primary); }
/* Niente marcatori: è navigazione, non un elenco di contenuto. Con trentatré
 * dischi rossi su tre colonne il pannello diventa rumore. */
.mega__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega__item {
  padding-block: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}
.mega__item { break-inside: avoid; }
/* Pannello Servizi. Ricalca lo schema consegnato dal cliente ("Schema servizi
 * generale"): le TRE aree impilate una sotto l'altra, e sotto ogni titolo le
 * sue voci distribuite su quattro colonne. Prima erano tre colonne verticali
 * di peso diverso (venti voci, cinque, otto): leggibile, ma non era la
 * struttura del cliente, e le tre aree non si leggevano più come pari grado. */
.mega__main  { flex: 0 1 calc(68% - var(--row-gap) / 2); }
/* La colonna di destra è una SCHEDA, non una colonna di testo: si chiude con
 * il riempimento, come le schede news, le schede icona e la firma
 * dell'articolo. Il sito non delimita mai con un filetto ciò che può
 * delimitare con un fondo: vedi "parsimonia di filetti" nel CLAUDE.md.
 * L'immagine resta a filo dei bordi della scheda e il padding sta solo sul
 * corpo sotto: con il padding sulla scheda intera l'immagine rimpiccioliva,
 * che è l'opposto di quello che serviva. */
/* La colonna di destra porta il padding che abbassa la scheda, ma NON il
 * riempimento: quello sta su .mega__card. Se il fondo stesse qui, il padding
 * diventerebbe una fascia grigia sopra l'immagine invece che spazio vuoto.
 * Il padding e non un margine, perché il ritmo verticale di questo progetto
 * non usa margini sui figli. */
.mega__aside {
  flex: 0 1 calc(32% - var(--row-gap) / 2);
  padding-block-start: var(--wp--preset--spacing--60);
  /* Alta quanto il suo contenuto, non quanto l'elenco accanto: allungata fino
   * in fondo lasciava sotto al pulsante una colonna di grigio vuoto più alta
   * della scheda stessa. */
  align-self: flex-start;
}
/* La scheda vera e propria: è questa a chiudersi con il fondo. */
.mega__card { background-color: var(--wp--preset--color--surface); }
.mega__promo-body { padding: var(--wp--preset--spacing--40); }
/* Lo stacco fra due aree deve restare chiaramente maggiore di quello fra due
 * voci: dopo aver arieggiato le voci, --wp--preset--spacing--60 non bastava più a far
 * leggere le tre aree come tre blocchi distinti. */
/* Lo stacco fra le aree è sceso a --wp--preset--spacing--50 su richiesta del cliente: su un
 * portatile piccolo il pannello superava l'altezza della finestra. Resta il
 * doppio dei 16px che separano due voci, che è il minimo perché le tre aree si
 * continuino a leggere come tre blocchi e non come un elenco unico. Sotto
 * questo valore il confine fra le aree sparisce. */
/* Tre distanze, e devono crescere in quest'ordine:
 *   12px  fra una voce e l'altra  (.mega__item, tre quarti di --wp--preset--spacing--20 per lato)
 *   32px  fra il titolo e il suo elenco  (--wp--preset--spacing--40 più il padding della voce)
 *   48px  fra un'area e l'altra, e sopra la prima  (--mega-stacco)
 * Erano 16 / 8 / 32: il secondo valore era più PICCOLO del primo, quindi il
 * titolo si leggeva incollato alla prima voce invece che come testa del gruppo,
 * e le tre aree non si staccavano abbastanza fra loro. È lo stesso errore di
 * rapporto già corretto una volta dentro le voci che vanno a capo: conta la
 * progressione, non il valore singolo.
 * Da 96 si è scesi a 64 e poi a 48: a 96 lo stacco fra le aree era tre volte
 * quello fra titolo ed elenco e il pannello si sfilacciava. A 48 il rapporto è
 * 1,5 a 1, che basta ancora a separarle. Sotto non si può scendere: a 32
 * eguaglierebbe lo stacco fra titolo ed elenco e la gerarchia si appiattirebbe. */
.mega__area + .mega__area { padding-block-start: var(--mega-stacco); }
/* Quattro colonne come le quattro colonne del foglio. Qui columns riempie per
 * colonna e non per riga: l'elenco non ha un ordine di lettura, quindi la cosa
 * non cambia nulla, e in cambio le colonne restano della stessa altezza.
 * La forma breve porta sia la larghezza minima sia il numero massimo: sotto i
 * 1200px il browser scende da solo a tre e poi a due colonne, senza un terzo
 * punto di rottura da mantenere.
 *
 * padding-block-start stacca l'elenco dal titolo dell'area: erano attaccati e il
 * titolo non si leggeva più come testa delle voci che seguono. */
.mega__list--quad {
  padding-block-start: var(--wp--preset--spacing--40);
  padding-inline-start: var(--wp--preset--spacing--30);
  list-style: disc;
  columns: var(--wp--custom--width-column-min) 4;
  column-gap: var(--wp--preset--spacing--50);
}
/* Le voci del pannello Servizi sono CONTENUTO, non un indice: il pannello mostra
 * i trentatré servizi per intero. Valgono quindi le stesse regole dell'elenco
 * della pagina Servizi: corpo di lettura, colore del testo e marcatore vero nel
 * rosso del marchio. In corpo small e in grigio si leggevano come paragrafi
 * staccati e si perdevano, che è esattamente il motivo per cui .service-list ha
 * il marcatore.
 * Il marcatore sta SOLO su questo elenco: in #mega-studio le voci sono link di
 * navigazione e restano senza. */
/* Due distanze, e conta il RAPPORTO fra loro, non il valore assoluto. Dentro una
 * voce che va a capo l'interlinea è stretta; fra una voce e l'altra c'è lo
 * spazio del padding. Finché la seconda è più grande della prima, una voce su
 * due righe si legge come un blocco solo.
 *
 * Il padding è --wp--preset--spacing--20 e non --wp--preset--spacing--30: a 16px per lato le voci stavano
 * 32px l'una dall'altra e l'elenco si sfilacciava, soprattutto sul telefono dove
 * va a colonna singola e si vedono poche voci per schermata. A 8px per lato lo
 * stacco è 16px, cioè ancora molto più dei 2px di interlinea dentro la voce: il
 * rapporto regge e l'elenco si legge come un elenco. */
.mega__list--quad .mega__item {
  padding-inline-start: var(--wp--preset--spacing--20);
  /* Tre quarti del gradino più piccolo della scala: 6px per lato, 12 fra una
   * voce e l'altra. Sotto --wp--preset--spacing--20 la scala non ha altri gradini, e qui
   * serviva scendere ancora un poco: una frazione di un token resta dentro la
   * scala, un numero sciolto no. */
  padding-block: calc(var(--wp--preset--spacing--20) * 0.75);
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--custom--line-height--tight);
  color: var(--wp--preset--color--contrast);
}
.mega__list--quad .mega__item::marker { color: var(--wp--preset--color--primary); }

/* --------------------------------------------------------------------------
   Megamenu su schermi bassi
   --------------------------------------------------------------------------
   Il pannello deve mostrare i trentatre' servizi PER INTERO: e' la ragione per
   cui esiste. Su un portatile 1366x768 il viewport utile e' 681px e il tetto
   del pannello (100dvh meno la testata) scende a 583: il contenuto ne misurava
   708 e il pannello si metteva a scorrere.

   Le tre distanze scendono tutte insieme, perche' e' il RAPPORTO fra loro a far
   leggere il pannello: da 12 / 32 / 48 a 8 / 16 / 32. La progressione resta,
   voce < titolo-elenco < area. Toccarne una sola rifa' l'errore gia' corretto
   due volte su questo pannello.

   Soglia sull'ALTEZZA e non sulla larghezza: il problema e' lo spazio
   verticale, e un 1920x900 ne ha poco quanto un 1366x768. */
@media (min-width: 960px) and (max-height: 820px) {
  .mega { --mega-stacco: var(--wp--preset--spacing--50); }
  .mega__inner { padding-block: var(--wp--preset--spacing--40); }
  .mega__list--quad { padding-block-start: var(--wp--preset--spacing--30); }
  .mega__list--quad .mega__item { padding-block: calc(var(--wp--preset--spacing--20) * 0.5); }
}
/* Le immagini del pannello sono di repertorio e decorative: alt vuoto, perché
 * il link accanto dice già dove si va. NESSUNA classe di comparsa: il pannello
 * parte in display none e IntersectionObserver non scatta su un elemento
 * nascosto così, le immagini resterebbero invisibili per sempre. */
.mega__promo-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Il blocco di destra non deve leggersi come una quinta colonna dell'elenco.
 * Si stacca con lo spazio, non con un filetto: il distacco fra le due metà del
 * pannello passa da --wp--custom--block-gap a --wp--preset--spacing--70. */
/* Era --wp--preset--spacing--70: a 1440 vale 86px e toglieva all'elenco i 27px
 * che servivano alla QUARTA colonna, facendo crescere il pannello di 40px in
 * altezza. Chi tocca questo valore deve ricontare le colonne. */
.mega__inner .row { --row-gap: var(--wp--preset--spacing--60); }
.mega__promo-text {
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast);
}
/* Impilato dentro il menu mobile il pannello non è più un livello sovrapposto:
   torna nel flusso, perde ombra e filetto e va a capo sotto la voce. */
@media (max-width: 959px) {
  .site-nav__item--mega { flex-wrap: wrap; }
  /* Dentro il menu mobile il pannello è nel flusso: il tetto di altezza e lo
     scorrimento interno creerebbero una seconda area che scorre dentro la
     pagina, che già scorre. */
  .mega {
    position: static;
    flex-basis: 100%;
    max-block-size: none;
    overflow-y: visible;
    box-shadow: var(--wp--custom--shadow--none);
    border-block-start: 0;
  }
  /* Tre confini, e devono crescere in questo ordine: fra una voce e l'altra,
   * fra l'elenco e la scheda finale, fra la FINE del pannello e la voce di menu
   * successiva.
   * Prima l'ultimo valeva ZERO: il pannello finiva e "Lavora con noi" cominciava
   * attaccato, quindi il confine più importante dei tre era l'unico senza spazio
   * e la voce di menu si leggeva come una coda dell'elenco dei servizi. */
  .mega__inner {
    padding-inline: 0;
    padding-block-end: var(--wp--preset--spacing--70);
  }
  /* A una colonna sola. La lista è align-items: flex-start, quindi una colonna
     larga quanto il suo contenuto sfonderebbe la pagina in orizzontale. */
  .mega__main,
  .mega__aside { flex-basis: 100%; }
  /* Le immagini del pannello non servono dentro il menu mobile: allungano lo
     scorrimento senza aggiungere informazione. */
  .mega__promo-image { display: none; }
  /* Lo stacco fra elenco e scheda finale si riduce.
   * --wp--preset--spacing--70 serve in orizzontale, dove separa due COLONNE affiancate e
   * deve impedire che la scheda si legga come una quinta colonna dell'elenco.
   * Impilati quel pericolo non c'è, e tutto quel vuoto faceva solo sembrare che
   * il pannello fosse finito prima della scheda. */
  .mega__inner .row { --row-gap: var(--wp--preset--spacing--50); }
}
/* --------------------------------------------------------------------------
   Corpo dell'articolo

   È l'unico punto del sito in cui il markup non lo decidiamo noi: esce da
   core/post-content, cioè da quello che scrive il redattore. Qui serve solo la
   dotazione minima che il tema deve coprire; titoli, paragrafi ed elenchi
   prendono già tutto dal base layer e da .service-list.

   Il ritmo verticale fra i blocchi è quello uniforme di .stack, cioè
   --wp--custom--block-gap: è esattamente ciò che Gutenberg produce con blockGap, quindi il
   mockup mostra il vero risultato e non una spaziatura che poi non si otterrà.
   Se si vorrà più aria sopra i titoli, è una regola di theme.json
   (styles.blocks.core/heading.spacing.margin.top), non una classe da inventare qui.
   -------------------------------------------------------------------------- */

/* La citazione non ha virgolette disegnate: si distingue per corpo (usa .lead)
 * e per la barra di accento. È l'uso che --wp--custom--border-width--thick ha nella scala,
 * "voce attiva, barra accento", ed è un filetto che fa un lavoro che
 * nient'altro farebbe: segnala che quelle righe sono parola riportata. */
.quote {
  margin: 0;
  padding-inline-start: var(--wp--preset--spacing--40);
  border-inline-start: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--primary);
}
/* --------------------------------------------------------------------------
   Slider delle news sul telefono

   Tre schede impilate a tutta larghezza, ognuna con la sua immagine, facevano
   una sezione lunga quanto tre schermate per tre notizie. Stesso dispositivo
   già usato dalle schede dello showcase: scorrimento orizzontale con
   scroll-snap, e la scheda successiva che si affaccia per dire che ce n'è
   dell'altra.

   I pallini NON sono comandi, sono un indicatore: lo scorrimento si fa con il
   dito o con la tastiera, e tre pulsanti che rifanno la stessa cosa
   aggiungerebbero rumore all'albero di accessibilità. Per questo il
   contenitore è aria-hidden e i pallini li crea lo script, uno per scheda:
   scritti a mano resterebbero tre anche il giorno in cui le notizie diventano
   quattro.
   -------------------------------------------------------------------------- */

.slider-dots {
  display: none;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
}
/* Tondo: è l'unica forma circolare del progetto, ed è voluta: un "pallino"
 * squadrato non si legge come indicatore di posizione. La scala dei raggi
 * resta quella che è, qui serve una percentuale. */
.slider-dots__dot {
  inline-size: var(--wp--preset--spacing--20);
  block-size: var(--wp--preset--spacing--20);
  border-radius: 50%;
  background-color: var(--wp--preset--color--border);
  transition: background-color var(--wp--custom--transition-base);
}
.slider-dots__dot.is-active { background-color: var(--wp--preset--color--muted); }
@media (max-width: 781px) {
  .news-slider,
  .people-slider {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* L'ombra della scheda in hover verrebbe tranciata dal bordo dell'area che
     * scorre: questo le lascia il posto. */
    padding-block-end: var(--wp--preset--spacing--20);
  }
  /* Non 100%: la fetta di scheda che resta in vista è ciò che dice che si può
   * scorrere. Vince sulle classi di colonna per specificità, non per ordine. */
  .news-slider .column--third,
  .people-slider .column--quarter {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  /* Dentro uno slider la comparsa è di SOLA opacità, senza traslazione.
   *
   * Motivo, misurato: overflow-x: auto fa calcolare al browser anche
   * overflow-y: auto, da specifica. Finché la comparsa non è finita le schede
   * hanno translateY, che allunga l'area scorribile di 16px in verticale, e lo
   * slider diventa scorrevole in su. Scorrendo la pagina col dito proprio sopra
   * allo slider si trascinava il contenuto dentro al suo riquadro invece della
   * pagina, e la fila sembrava scomparire sotto la sezione di sopra. Al rilascio
   * tornava a posto, e finita la comparsa non succedeva più: si vedeva una volta
   * sola, alla prima lettura della pagina.
   *
   * Non si risolve con overflow-y: hidden, che tranceREBBE l'ombra della scheda
   * in hover. Si risolve togliendo la causa, cioè la traslazione: l'opacità da
   * sola non produce overflow, e la comparsa resta. */
  .has-js .news-slider .reveal,
  .has-js .people-slider .reveal { transform: none; }
  .slider-dots { display: flex; }
}
/* Il titolo dell'area, sulla pagina servizi, porta più peso del solito.
 * Gli h2 del sito sono light perché accanto hanno sempre dell'altro — un
 * occhiello, un numero, una foto. Qui no: tolto il conteggio che gli stava
 * sopra, nella colonna stretta resta il titolo e basta, e a peso light su una
 * misura così larga si sfilacciava. Semibold è il gradino successivo della
 * scala, non un valore inventato. */
.area__title { font-weight: var(--wp--custom--font-weight--semibold); }


/* ==========================================================================
   ADATTATORE A WORDPRESS
   --------------------------------------------------------------------------
   Nessun valore nuovo: i valori stanno tutti nelle regole qui sopra, che sono
   quelle del mockup. Qui ci sono solo i selettori in più che servono perché i
   blocchi core mettono le nostre classi su elementi diversi, e l'annullamento
   del ritmo verticale che WordPress aggiunge da sé.
   È l'unico punto del progetto con selettori di tag e di figlio diretto.
   ========================================================================== */

/* WordPress separa i blocchi fratelli con un margine; il progetto li separa con
   il gap del contenitore. Sommati, ogni spazio veniva contato due volte:
   misurato, home 7612px contro i 6273 del mockup.

   `.editor-styles-wrapper` non e' un di piu': e' il <body> della tela
   dell'editor, e dentro non esiste ne' `.wp-site-blocks` ne', nell'editor del
   post, un `.site-main`. Senza questa terza voce la regola vale sul sito e non
   nel backend, e il backend smette di somigliare al sito proprio sul ritmo
   verticale -- l'errore piu' difficile da vedere e piu' facile da inseguire
   correggendo la sezione sbagliata. */
.wp-site-blocks *,
.editor-styles-wrapper *,
.site-main * { margin-block: 0; }

/* Perché così largo: il progetto non usa MAI margini sui figli, il ritmo
   verticale lo fa il gap del contenitore (regola scritta in CLAUDE.md).
   WordPress invece separa i blocchi con margini, e li mette anche dove i nostri
   contenitori non arrivano: misurato, un margin-block-start di 42,88px sull'h1
   della hero e di 24px sull'occhiello, dentro .column--bleed-text che non e'
   ne' .stack ne' .row. Azzerarli tutti e' sicuro proprio perche' nessuna nostra
   regola si appoggia a un margine. */

.site-main, .entry-content { max-width: none; }

/* L'unica dichiarazione della regola body del mockup che theme.json non sa
   esprimere. Fondo, colore, famiglia, corpo, peso e interlinea li fa
   theme.json; questa no, e senza, su macOS Chrome passa all'antialiasing
   subpixel e TUTTI i testi si ingrossano. A confronto con il mockup sembrava
   che fossero cambiati i pesi, mentre i font-weight erano identici. */
body { -webkit-font-smoothing: antialiased; }

/* core/image avvolge l'immagine in una figura: la figura prende il posto che
   aveva l'immagine e non deve aggiungere ne' margini ne' altezza propria. */
.wp-block-image { margin: 0; }

/* La figura resta NEL FLUSSO, come ci stava l'immagine nel mockup.
   Avevo provato a toglierla con position: absolute per impedirle di imporre le
   proprie proporzioni, ed era sbagliato: in una sezione a sbalzo l'altezza la
   detta il PIÙ ALTO fra testo e immagine, non sempre il testo. Sulla sezione
   "Una tradizione che si rinnova" è la foto di gruppo a comandare, e fuori dal
   flusso la sezione perdeva 123px. */
.column--bleed-media .wp-block-image { display: block; inline-size: 100%; }

/* core/buttons: il gap lo decide .actions, e i pulsanti non si stirano. */
.wp-block-buttons.actions { align-items: flex-start; }

/* L'involucro del pulsante e' inline e contiene un link inline: fra i due
   l'interlinea del corpo testo lascia uno spazio sotto la riga, e l'involucro
   viene 90px mentre il pulsante ne misura 56. A flex quello spazio non esiste e
   l'involucro combacia con il pulsante. */
/* L'involucro porta la stessa classe del pulsante, quindi le regole di .button
   colpiscono ANCHE lui: padding, sfondo e bordo venivano disegnati due volte,
   uno dentro l'altro, e l'involucro misurava 90px contro i 56 del pulsante.
   Qui l'involucro torna a essere solo un involucro. */
.wp-block-button {
  display: flex;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}


/* --------------------------------------------------------------------------
   Il modulo di contatti: Fluent Forms
   --------------------------------------------------------------------------
   Il modulo e' un plugin, quindi il markup non e' nostro e nemmeno le classi.
   Qui non si riscrive nessun valore del modulo: aspetto, corpi e colori dei
   campi restano quelli delle regole .field__* qui sopra, raggiunte con un
   secondo selettore generato dagli ALIAS. In questo blocco ci sta solo cio'
   che l'alias non puo' dare: la riga a capo dei campi e il consenso, che in
   Fluent Forms ha una struttura diversa da quella del mockup.
   -------------------------------------------------------------------------- */

/* I campi sono figli del <fieldset> che Fluent Forms mette dentro al <form>,
   quindi e' il fieldset a dover fare la riga: con il flex sul <form> i
   .column--half restavano uno sotto l'altro.
   --row-gap non e' decorativo: .column--half lo usa dentro al proprio calc(),
   e dove non e' dichiarato il calc() diventa invalido e la colonna torna
   larga quanto il contenuto. */
.contact-form fieldset {
  --row-gap: var(--wp--custom--block-gap);
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap);
}

/* Il titolo del modulo per gli screen reader e' un <legend> alto zero. Resta
   nell'albero di accessibilita', ma come elemento flex occuperebbe una riga
   propria e aggiungerebbe un gap sopra al primo campo. */
.contact-form .ff_screen_reader_title { position: absolute; }

/* Un campo che occupa la riga intera: e' il corrispondente di .column--half
   per i campi che nel mockup stavano fuori dalle due .row appaiate. */
.field--full { flex: 0 1 100%; min-inline-size: 0; }

/* Fluent Forms incolonna da se' etichetta e campo in due involucri: lo stacco
   fra i due lo decide .field.stack, come nel mockup, quindi gli involucri non
   devono aggiungere spazio proprio. */
.field .ff-el-input--label,
.field .ff-el-input--content,
.field--consent .ff-el-form-check { margin: 0; }

/* Il consenso e' l'unico punto in cui le due strutture non combaciano: nel
   mockup casella ed etichetta sono fratelli dentro una .row, in Fluent Forms
   la casella sta DENTRO l'etichetta. La riga flex e' quindi l'etichetta, e il
   testo che deve stringersi e' lo <span> al suo interno. */
.field--consent .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--custom--block-gap);
  margin: 0;
}

.field--consent .ff-el-form-check-label span { flex: 1; min-inline-size: 0; }

/* Messaggi di validazione: il mockup non ne aveva, perche' il modulo era
   finto. Il rosso e' accent e non primary perche' il modulo appoggia su
   surface, dove primary fa 4.48:1 e accent 6.44:1. */
.contact-form .error {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--accent);
}

.contact-form .ff-message-success {
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast);
}

/* Fluent Forms separa i gruppi con un margine proprio e chiude ognuno con un
   clearfix. Il clearfix sono due pseudo-elementi con display: table, che
   dentro un contenitore flex diventano due elementi flex veri e il gap del
   contenitore li conta: misurato, 24px prima dell'etichetta e 24 dopo il
   campo, con ogni campo alto 153px invece di 100. Lo stesso clearfix spingeva
   il pulsante 16px a destra dentro .actions. */
.contact-form .ff-el-group { margin: 0; }

.contact-form .ff-el-group::before,
.contact-form .ff-el-group::after { content: none; }

/* L'etichetta e' inline-block dentro un involucro che ha l'interlinea del
   corpo: la riga veniva 27px per un testo alto 22, e lo scarto si sommava a
   ogni campo. A blocco l'involucro combacia con l'etichetta, come nel mockup
   dove l'etichetta era un blocco larga quanto il campo. */
.field .ff-el-input--label label { display: block; }

/* Fluent Forms porta i controlli e il pulsante a line-height: 1, mentre nel
   mockup erano all'interlinea di default del browser: il textarea veniva
   136px invece di 154 e il pulsante 55 invece di 50. Non e' un valore della
   scala, e' il default che il plugin aveva sovrascritto. */
.contact-form .ff-el-form-control,
.contact-form .ff-btn-submit { line-height: normal; }

/* Fluent Forms alza la casella di 2px con position: relative + top, per
   allinearla alla propria etichetta in riga. Qui la riga la fa il flex con
   align-items: flex-start, quindi quei 2px sono solo un disallineamento:
   senza posizionamento il top non ha piu' effetto.
   Il selettore e' lungo per forza: quello del plugin pesa tre classi, e con un
   peso pari avrebbe vinto l'ordine di caricamento, che non controlliamo. */
.contact-form .field--consent .ff-el-form-check-label .ff-el-form-check-input {
  position: static;
}

/* core/post-featured-image avvolge l'immagine in una <figure>, che di suo
 * porta margini: dentro la scheda scollerebbero l'immagine dal bordo. */
.news-card__media .wp-block-post-featured-image { margin: 0; }

/* Il corpo dell'articolo ha un ritmo suo, piu' largo del --block-gap del resto
 * del sito. Con un unico valore per tutto, un titolo di paragrafo sta dal testo
 * che lo precede esattamente quanto due paragrafi fra loro, e la gerarchia non
 * si legge: il testo lungo sembra un blocco unico.
 *
 * Lo stacco PRIMA dei titoli e' maggiore di quello fra i paragrafi, che e' la
 * regola tipografica di sempre: un titolo appartiene al testo che apre, non a
 * quello che chiude.
 *
 * Qui si usano selettori di tag, che il progetto altrove vieta. E' una deroga
 * consapevole e circoscritta: il corpo dell'articolo lo scrive il cliente
 * nell'editor, quindi sui suoi titoli non si puo' contare su nessuna classe.
 * Vale solo dentro .article-body. */
.article-body { gap: var(--wp--preset--spacing--50); }
.article-body h2 { margin-block-start: var(--wp--preset--spacing--40); }
.article-body h3 { margin-block-start: var(--wp--preset--spacing--30); }