/* ==========================================================================
   L'impianto visivo della direzione approvata (mockup del 28 agosto 2026).
   Il taglio smette di essere una riga sottile e torna a essere quello che il
   manuale descrive per le copertine: un bordo che divide un campo pieno.
   ========================================================================== */

/* --- Campo tagliato -------------------------------------------------------
   Un campo di colore con un bordo a 33,8° dalla verticale, inclinato in alto
   a destra. Al posto delle fotografie: il manuale è esplicito — «quando non
   c'è una fotografia adatta, meglio un campo di colore pieno con il taglio:
   una pagina blu è sempre più dignitosa di una foto sbagliata».

   Il taglio è una sfumatura con stacco netto, non un `clip-path` con
   percentuali: la sfumatura dà una riga esatta a 33,8° a qualsiasi dimensione,
   mentre un poligono in percentuale cambia inclinazione col cambiare del
   riquadro — cioè fa proprio la cosa che il manuale vieta.

   La quota dello stacco dipende dal rapporto del riquadro:
       quota = 0,557·H / (0,831·W + 0,557·H)
   Da qui i numeri fissi qui sotto, uno per rapporto. */

.fz-campo {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--wp--preset--color--blu);
	/* il colore di quello che sta dietro, che riempie la parte tagliata via */
	--fz-fuori: var(--wp--preset--color--avorio);
	--fz-quota: 33.5%;
}
.fz-campo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		calc(var(--fz-taglio) + 90deg),
		var(--fz-fuori) 0 var(--fz-quota),
		transparent var(--fz-quota) 100%
	);
}

/* rapporti previsti — la quota cambia col rapporto, l'angolo mai */
.fz-campo-3-2  { aspect-ratio: 3 / 2;  --fz-quota: 30.9%; }
.fz-campo-4-3  { aspect-ratio: 4 / 3;  --fz-quota: 33.5%; }
.fz-campo-16-9 { aspect-ratio: 16 / 9; --fz-quota: 27.4%; }

/* speculare: il campo sta a sinistra e il bordo tagliato è a destra.
   L'inclinazione resta la stessa — «mai speculare» riguarda l'angolo, non da
   che parte del riquadro cade la riga. */
.fz-campo-sinistra::after {
	background: linear-gradient(
		calc(var(--fz-taglio) + 90deg),
		transparent 0 var(--fz-quota-d, 69%),
		var(--fz-fuori) var(--fz-quota-d, 69%) 100%
	);
}
.fz-campo-sinistra.fz-campo-3-2  { --fz-quota-d: 69.1%; }
.fz-campo-sinistra.fz-campo-4-3  { --fz-quota-d: 66.5%; }
.fz-campo-sinistra.fz-campo-16-9 { --fz-quota-d: 72.6%; }

/* Un campo che accoglie del testo: il testo sta sopra il taglio. */
.fz-campo > * { position: relative; z-index: 3; }

/* Il quadrato oro come firma nell'angolo di un campo. */
.fz-campo-firma::before {
	content: "";
	position: absolute;
	z-index: 4;
	right: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--30);
	width: 14px;
	height: 14px;
	background: var(--wp--preset--color--oro);
}

/* --- Fascia tagliata ------------------------------------------------------
   Come nel mockup: la fascia blu del richiamo finale ha il bordo destro
   tagliato. Qui il riquadro è largo e basso, quindi la quota si avvicina al
   bordo. */
.fz-fascia-tagliata { position: relative; overflow: hidden; }
.fz-fascia-tagliata::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		calc(var(--fz-taglio) + 90deg),
		transparent 0 calc(100% - var(--fz-morso, 4.5%)),
		var(--fz-fuori, var(--wp--preset--color--avorio)) calc(100% - var(--fz-morso, 4.5%)) 100%
	);
}
.fz-fascia-tagliata > * { position: relative; z-index: 1; }

/* --- Titolo col filetto ---------------------------------------------------
   Un filetto oro corto sotto il titolo di sezione. È «un filetto», l'uso che
   il manuale prevede per l'oro. */
.fz-filetto { position: relative; padding-bottom: 0.55em; }
.fz-filetto::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3.2rem;
	height: 2px;
	background: var(--wp--preset--color--oro);
}

/* --- Occhiello col quadrato ----------------------------------------------- */
.fz-occhiello-quadrato { display: flex; align-items: center; gap: 0.7em; }
.fz-occhiello-quadrato::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	background: var(--wp--preset--color--oro);
}

/* --- Link con la freccia --------------------------------------------------
   «Scopri di più →». La freccia scivola in avanti al passaggio: è l'unico
   movimento su un link, e dice dove porta. */
.fz-avanti {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--wp--preset--font-size--dati);
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--oro-testo);
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.15em;
}
.fz-avanti::after {
	content: "→";
	transition: transform 200ms var(--fz-curva, ease);
}
@media (hover: hover) {
	.fz-avanti:hover::after { transform: translateX(4px); }
}
.has-blu-background-color .fz-avanti,
.fz-campo .fz-avanti { color: var(--wp--preset--color--oro-chiaro); }

/* --- Bottone col quadrato nell'angolo -------------------------------------
   Come nel mockup: un quadratino oro appoggiato all'angolo in basso a destra
   del bottone primario. */
/* Solo sull'ultimo bottone del gruppo, cioè quello principale: due quadrati
   affiancati diventano decorazione, e il manuale l'oro lo vuole in piccole
   quantità. */
.fz-bottone-quadrato .wp-block-button:last-child .wp-block-button__link { position: relative; }
.fz-bottone-quadrato .wp-block-button:last-child .wp-block-button__link::after {
	content: "";
	position: absolute;
	right: -5px;
	bottom: -5px;
	width: 10px;
	height: 10px;
	background: var(--wp--preset--color--oro);
}

/* --- Fascia dei numeri ----------------------------------------------------
   Numeri d'apertura in Cormorant, etichetta in maiuscoletto spaziato,
   separati da filetti verticali. Il quadrato oro accompagna il numero. */
.fz-numeri {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--blu) 10%, transparent);
	background: var(--wp--preset--color--bianco);
}
.fz-numero-cella {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	text-align: center;
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--blu) 10%, transparent);
	margin: 0;
}
.fz-numero-cella:first-child { border-left: 0; }
.fz-numeri .fz-numero-valore {
	font-family: var(--wp--preset--font-family--titolo);
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--blu);
	font-variant-numeric: tabular-nums lining-nums;
	margin: 0 0 0.5rem;
	display: inline-flex;
	align-items: flex-start;
	gap: 0.35em;
}
.fz-numeri .fz-numero-valore::after {
	content: "";
	width: 9px;
	height: 9px;
	background: var(--wp--preset--color--oro);
	margin-top: 0.55em;
	flex: 0 0 auto;
}
.fz-numeri .fz-numero-etichetta a { color: inherit; text-decoration: none; }
.fz-numeri .fz-numero-etichetta a:hover { color: var(--wp--preset--color--oro-testo); text-decoration: underline; }
.fz-numeri .fz-numero-etichetta {
	font-size: var(--wp--preset--font-size--occhiello);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--grigio-testo);
	margin: 0;
	max-width: none;
}

/* --- Schede con icona ----------------------------------------------------- */
.fz-schede-icona {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
}
.fz-scheda-icona {
	background: var(--wp--preset--color--bianco);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--blu) 10%, transparent);
	padding: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
}
.fz-scheda-icona .fz-icona { color: var(--wp--preset--color--oro); margin-bottom: 0.3rem; }
.fz-scheda-icona .fz-scheda-titolo { display: flex; align-items: baseline; gap: 0.55em; }
.fz-scheda-icona .fz-scheda-titolo::before {
	content: "";
	flex: 0 0 auto;
	width: 0.42em;
	height: 0.42em;
	background: var(--wp--preset--color--oro);
	transform: translateY(-0.08em);
}
.fz-scheda-icona .fz-avanti { margin-top: auto; align-self: flex-start; }

/* L'icona è decorativa: il titolo dice già la stessa cosa, e per questo può
   restare in oro anche dove il contrasto col bianco è sotto il 3:1 richiesto
   agli elementi grafici che portano informazione da soli. */
.fz-icona { display: block; }

/* --- Schede progetto in riga ---------------------------------------------- */
.fz-progetti-riga {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
}
.fz-progetto-riga {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: var(--wp--preset--spacing--20);
	align-items: start;
	margin: 0;
}
.fz-progetto-riga .fz-campo {
	align-self: stretch;
	aspect-ratio: auto;
	min-height: 7.5rem;
	--fz-quota: 40%;
}
.fz-progetto-riga .fz-scheda-testo { max-width: none; }

@media (max-width: 600px) {
	.fz-progetto-riga { grid-template-columns: 1fr; }
	.fz-progetto-riga .fz-campo { aspect-ratio: 3 / 2; }
}

/* --- Apertura -------------------------------------------------------------
   Il testo si allinea al margine sinistro del contenitore largo del sito; il
   campo tagliato arriva fino al bordo destro dello schermo, come nella
   direzione approvata. */
/* Le colonne si stirano, e il testo si centra da sé dentro la sua: se la
   colonna è centrata verticalmente non si stira, e il campo tagliato resta un
   riquadro a mezz'aria invece di riempire la fascia. */
.fz-apertura .wp-block-columns { gap: 0; margin: 0; align-items: stretch; }
.fz-apertura-testo { display: flex; flex-direction: column; justify-content: center; }
.fz-apertura-testo {
	padding-block: var(--wp--preset--spacing--60);
	padding-inline-start: max(var(--wp--preset--spacing--30), calc((100vw - 1200px) / 2));
	padding-inline-end: var(--wp--preset--spacing--40);
}
.fz-apertura-campo { align-self: stretch; display: flex; }
.fz-apertura-campo .fz-campo { flex: 1; aspect-ratio: auto; min-height: 27rem; --fz-quota: 32%; }
/* Tre righe come nella direzione approvata, non quattro. */
.fz-apertura h1 { max-width: 19ch; }
.fz-apertura-richiami { row-gap: var(--wp--preset--spacing--20); }

@media (max-width: 781px) {
	.fz-apertura-testo {
		padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
		padding-inline: var(--wp--preset--spacing--30);
	}
	/* Sul telefono le due colonne si impilano: il campo tagliato passa sotto
	   e si accorcia, altrimenti mangerebbe mezzo schermo prima del titolo. */
	.fz-apertura-campo .fz-campo { min-height: 0; aspect-ratio: 16 / 9; --fz-quota: 27.4%; }
}

/* --- Fascia con campo a sinistra ------------------------------------------ */
.fz-fascia-storia .wp-block-columns { gap: 0; margin: 0; align-items: stretch; }
.fz-fascia-testo { display: flex; flex-direction: column; justify-content: center; }
.fz-fascia-campo { align-self: stretch; display: flex; }
.fz-fascia-campo .fz-campo { flex: 1; aspect-ratio: auto; min-height: 24rem; --fz-quota-d: 68%; }
.fz-fascia-testo {
	padding-block: var(--wp--preset--spacing--50);
	padding-inline-start: var(--wp--preset--spacing--40);
	padding-inline-end: max(var(--wp--preset--spacing--30), calc((100vw - 1200px) / 2));
}
.fz-fascia-testo .fz-passi { gap: var(--wp--preset--spacing--20); }
.fz-fascia-testo .fz-avanti { margin-top: var(--wp--preset--spacing--20); }

@media (max-width: 781px) {
	.fz-fascia-storia .wp-block-columns { flex-direction: column-reverse; }
	.fz-fascia-testo {
		padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
		padding-inline: var(--wp--preset--spacing--30);
	}
	.fz-fascia-campo .fz-campo { min-height: 0; aspect-ratio: 16 / 9; --fz-quota-d: 72.6%; }
}

/* --- Fascia del richiamo -------------------------------------------------- */
.fz-fascia-tagliata { --fz-morso: 5%; }
@media (max-width: 781px) { .fz-fascia-tagliata { --fz-morso: 12%; } }

/* --- Piè di pagina --------------------------------------------------------
   Marchio con payoff, denominazione, contatti con le icone: la struttura
   della direzione approvata. */
.fz-pie-marchio { width: 210px; height: auto; display: block; }
.fz-pie-identita .fz-denominazione {
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20);
	font-weight: 600;
}
.fz-pie-contatti {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0;
	display: grid;
	gap: 0.65rem;
}
.fz-pie-contatti li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 0.7rem;
	align-items: start;
	margin: 0;
	max-width: none;
}
.fz-pie-contatti .fz-icona { color: var(--wp--preset--color--oro-chiaro); margin-top: 0.1em; }
.fz-pie-fiscale {
	font-size: var(--wp--preset--font-size--occhiello);
	line-height: 1.5;
	color: color-mix(in srgb, var(--wp--preset--color--sabbia) 75%, transparent);
	margin: 0;
	max-width: none;
	font-variant-numeric: tabular-nums;
}
.fz-pie .wp-block-column h2 { margin-bottom: var(--wp--preset--spacing--20); }
.fz-pie ul.wp-block-list { list-style: none; padding-left: 0; }
.fz-pie ul.wp-block-list li { margin-bottom: 0.45rem; max-width: none; }


/* --- Il filetto sui titoli di sezione delle pagine ------------------------
   Nella direzione approvata ogni titolo di sezione porta un filetto oro corto
   sotto. Applicato qui a tutti gli h2 del contenuto, così vale su tutte e
   settanta le pagine senza doverlo scrivere in ognuna. */
.wp-block-post-content > h2 {
	position: relative;
	padding-bottom: 0.45em;
	margin-top: var(--wp--preset--spacing--40);
}
.wp-block-post-content > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3.2rem;
	height: 2px;
	background: var(--wp--preset--color--oro);
}

/* --- Schede progetto: il campo un po' più generoso ------------------------ */
.fz-progetti-riga { gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30); }
.fz-progetto-riga { grid-template-columns: 9.5rem 1fr; }
.fz-progetto-riga .fz-campo { min-height: 8.5rem; }

/* ==========================================================================
   Link — rifacimento
   Le sottolineature di prima erano dappertutto e pesanti. Ora ce ne sono solo
   dove servono davvero.

   La regola non è estetica: WCAG 1.4.1 chiede che un link dentro un blocco di
   testo si distingua per qualcosa in più del colore, a meno che il contrasto
   FRA link e testo circostante non arrivi a 3:1. Qui l'oro testo sul blu fa
   2,98:1 — un soffio sotto. Quindi nel testo corrente la sottolineatura resta,
   ma diventa un filetto sottile e staccato, in oro.

   Dove il link NON è dentro un testo — un menù, una colonna di link nel piè
   di pagina, il titolo di una scheda — la sottolineatura non serve a nulla e
   se ne va.
   ========================================================================== */

/* Niente sottolineature per impostazione predefinita. */
a { text-decoration: none; }

/* Nel testo corrente: filetto sottile, staccato, in oro. */
main :is(p, dd, figcaption) > a,
main :is(p, dd) > em > a,
main :is(p, dd) > strong > a,
main li > a:not(:only-child),
.fz-nota a,
.fz-vuoto a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--oro);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}
main :is(p, dd) > a:hover,
main li > a:not(:only-child):hover,
.fz-nota a:hover,
.fz-vuoto a:hover {
	text-decoration-thickness: 2px;
}

/* Una voce di elenco che è solo un link fa parte di un elenco di link, non di
   un testo: si riconosce dalla posizione, e sottolinearla è rumore. */
main li > a:only-child {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 0.1em;
	transition: border-color 180ms var(--fz-curva, ease), color 180ms var(--fz-curva, ease);
}
@media (hover: hover) {
	main li > a:only-child:hover { border-bottom-color: var(--wp--preset--color--oro); }
}

/* Piè di pagina: colonne di link, mai sottolineate. */
.fz-pie a { text-decoration: none; border-bottom: 1px solid transparent; }
.fz-pie ul.wp-block-list a { color: var(--wp--preset--color--sabbia); }
@media (hover: hover) {
	.fz-pie a:hover {
		color: var(--wp--preset--color--bianco);
		border-bottom-color: var(--wp--preset--color--oro-chiaro);
	}
}
.fz-pie-contatti a { color: var(--wp--preset--color--sabbia); }

/* «Scopri di più →»: un filetto appena accennato che si accende al passaggio. */
.fz-avanti {
	border-bottom: 0;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--oro) 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
	padding-bottom: 0;
}
@media (hover: hover) {
	.fz-avanti:hover { text-decoration-color: var(--wp--preset--color--oro); }
}

/* ==========================================================================
   Testata — rifacimento
   Marchio, menù e richiami su una riga sola, come nella direzione approvata.
   Ci stanno perché «Chiedi supporto» è un link e non un secondo bottone: due
   bottoni affiancati rubavano 150 px e mandavano il menù a capo.
   ========================================================================== */

.fz-menu .wp-block-navigation {
	font-size: 0.9375rem;
	font-weight: 500;
}
.fz-menu .wp-block-navigation-item__content {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: 0;
	text-decoration: none;
	padding-bottom: 0.35em;
	border-bottom: 2px solid transparent;
	transition: border-color 180ms var(--fz-curva, ease), color 180ms var(--fz-curva, ease);
}
/* La voce attiva e quella sotto il puntatore portano lo stesso filetto oro:
   chi naviga sa sempre dov'è. */
.fz-menu .wp-block-navigation-item__content:hover,
.fz-menu .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.fz-menu .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--oro);
	text-decoration: none;
}
/* La freccina dei sottomenù: più piccola e meno invadente. */
.fz-menu .wp-block-navigation__submenu-icon { width: 0.7em; height: 0.7em; opacity: 0.55; }
.fz-menu .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon { opacity: 1; }

/* Il pannello dei sottomenù. */
.fz-menu .wp-block-navigation__submenu-container {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--blu) 12%, transparent);
	box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--wp--preset--color--blu) 60%, transparent);
	padding: 0.35rem 0;
	min-width: 15rem;
}
.fz-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1.1rem;
	border-bottom: 0;
	border-left: 2px solid transparent;
	font-size: 0.875rem;
}
.fz-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	border-bottom: 0;
	border-left-color: var(--wp--preset--color--oro);
	background: var(--wp--preset--color--avorio);
}

/* «Chiedi supporto» come link, non come bottone. */
.fz-testata-supporto {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--blu);
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--oro);
	padding-bottom: 0.3em;
}
@media (hover: hover) {
	.fz-testata-supporto:hover { color: var(--wp--preset--color--oro-testo); }
}

@media (max-width: 1080px) {
	.fz-testata-riga { row-gap: var(--wp--preset--spacing--20); }
}

/* --- Piè di pagina: cinque colonne ---------------------------------------- */
.fz-pie-griglia { row-gap: var(--wp--preset--spacing--40); }
.fz-pie-griglia .wp-block-column { min-width: 9rem; }
.fz-pie ul.wp-block-list li { margin-bottom: 0.5rem; }
@media (max-width: 1080px) {
	/* Sotto i 1080 px cinque colonne diventano cinque colonnine: meglio due
	   file da tre, che restano leggibili. */
	.fz-pie-griglia { flex-wrap: wrap; }
	.fz-pie-griglia .wp-block-column { flex-basis: calc(33.333% - var(--wp--preset--spacing--30)) !important; }
	.fz-pie-griglia .wp-block-column:first-child { flex-basis: 100% !important; }
}
@media (max-width: 600px) {
	.fz-pie-griglia .wp-block-column { flex-basis: calc(50% - var(--wp--preset--spacing--30)) !important; }
}

/* --- Contenuto delle pagine ----------------------------------------------
   Il blocco del contenuto è largo quanto la fascia «wide», così le griglie di
   schede possono allargarsi. I blocchi normali restano stretti quanto la
   misura di lettura, ma allineati a sinistra: WordPress li centrerebbe con un
   `margin: auto !important`, e titoli e griglie partirebbero da due margini
   diversi. Serve `!important` per la stessa ragione per cui lo usa il core. */
.wp-block-post-content.is-layout-constrained > :not(.alignwide):not(.alignfull) {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* ==========================================================================
   Pagine interne a due colonne
   Il sito è largo; il testo no. Allungare le righe fino al bordo dello schermo
   sarebbe la cosa più semplice e la peggiore: il manuale fissa 60-70 battute
   perché oltre si perde il segno tornando a capo. Quindi la larghezza in più
   la prende una colonna che serve a qualcosa — dove sei, cosa c'è accanto.
   ========================================================================== */

.fz-pagina { display: block; }

@media (min-width: 1100px) {
	.fz-pagina {
		display: grid;
		/* Il testo a sinistra, la colonna a destra, e lo spazio in mezzo che
		   cresce con lo schermo: così la pagina occupa tutta la larghezza —
		   che è quello che si chiede a un sito — senza allungare le righe di
		   testo oltre le 70 battute, che è quello che si chiede a un testo. */
		grid-template-columns: minmax(0, 44rem) minmax(16rem, 21rem);
		justify-content: space-between;
		gap: var(--wp--preset--spacing--50);
		align-items: start;
	}
	.fz-colonna { position: sticky; top: var(--wp--preset--spacing--30); }
}

/* Dentro la colonna del testo il flusso è normale: i paragrafi si fermano
   alla misura, le griglie prendono tutta la colonna. */
.fz-pagina .wp-block-post-content > * { max-width: none; }
.fz-pagina .wp-block-post-content :is(p, li, dd) { max-width: var(--wp--custom--riga--massima); }
.fz-pagina .wp-block-post-content > :is(h2, h3) { max-width: 26ch; }

.fz-colonna {
	font-size: var(--wp--preset--font-size--didascalia);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-content: start;
}
.fz-colonna-occhiello {
	font-size: var(--wp--preset--font-size--occhiello);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oro-testo);
	margin: 0 0 0.6rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wp--preset--color--oro);
	max-width: none;
}
.fz-colonna-madre { margin: 0 0 0.5rem; font-weight: 600; max-width: none; }
.fz-colonna-madre a { color: var(--wp--preset--color--blu); }
.fz-colonna-voci { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.fz-colonna-voci li { margin: 0; max-width: none; }
.fz-colonna-voci a {
	display: block;
	padding: 0.4rem 0 0.4rem 0.9rem;
	border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--blu) 12%, transparent);
	color: var(--wp--preset--color--grigio-testo);
	text-decoration: none;
	transition: border-color 180ms var(--fz-curva, ease), color 180ms var(--fz-curva, ease);
}
@media (hover: hover) {
	.fz-colonna-voci a:hover { border-left-color: var(--wp--preset--color--oro); color: var(--wp--preset--color--blu); }
}
.fz-colonna-voci .fz-qui > a {
	border-left-color: var(--wp--preset--color--oro);
	color: var(--wp--preset--color--blu);
	font-weight: 600;
}
.fz-colonna-richiamo {
	background: var(--wp--preset--color--bianco);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--blu) 12%, transparent);
	padding: var(--wp--preset--spacing--30);
}
.fz-colonna-richiamo p { margin: 0 0 0.5rem; max-width: none; color: var(--wp--preset--color--grigio-testo); }
.fz-colonna .fz-colonna-titolo {
	font-family: var(--wp--preset--font-family--titolo);
	font-size: var(--wp--preset--font-size--titolo-s);
	font-weight: 600;
	color: var(--wp--preset--color--blu);
	line-height: 1.2;
}
.fz-colonna-richiamo-oro { border-color: var(--wp--preset--color--oro); }

/* --- Griglie più larghe: quattro colonne, non sei ------------------------- */
@media (min-width: 1200px) {
	.fz-griglia-aree,
	.fz-schede-icona { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.fz-griglia { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
	.fz-pagina .fz-griglia { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}