/*
Theme Name: FSGB
Theme URI: https://fsgb.it
Template: hello-elementor
Author: Revolution
Author URI: https://www.revnet.it
Description: Tema figlio di Hello Elementor per la Fondazione San Giovanni
  Battista. Hello non porta stili di proposito, così Elementor non trova
  niente da scavalcare: qui dentro sta solo ciò che Elementor non sa fare da
  sé — i caratteri ospitati in casa e le poche regole trasversali.
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fsgb
*/

/* ------------------------------------------------------------------ *
 * Caratteri ospitati in casa
 *
 * Elementor sa caricare i font da Google, ed è la scorciatoia che quasi
 * tutti prendono. Per un ente pubblico italiano è la scelta sbagliata:
 * ogni visita manda l'indirizzo IP del visitatore a un server negli Stati
 * Uniti, ed è la ragione per cui più di un garante privacy europeo ha
 * sanzionato siti che lo facevano. Questi file stanno sul nostro server.
 *
 * Nelle impostazioni globali di Elementor i font vanno indicati per nome —
 * "Archivo", "Source Serif 4" — e sono queste dichiarazioni a fornirli.
 * Va quindi disattivato il caricamento da Google in Elementor →
 * Impostazioni → Avanzate → Google Fonts: Disattivato.
 * ------------------------------------------------------------------ */

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	/* Carattere variabile con l'asse della dimensione ottica: il disegno si
	   adatta al corpo da solo — grazie più robuste nel piccolo, contrasto più
	   netto nel grande — invece di essere lo stesso disegno ingrandito. */
	src: url('assets/fonts/fraunces-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/fraunces-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/source-serif-4-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/source-serif-4-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ *
 * La dorsale
 *
 * Il monogramma del logo è costruito attorno a un'asta verticale. Quella
 * stessa asta apre le sezioni. In Elementor si applica scrivendo `dorsale`
 * nella classe CSS dell'elemento (scheda Avanzate → Classi CSS), così chi
 * compone le pagine può usarla senza rifarla a mano ogni volta.
 * ------------------------------------------------------------------ */

.dorsale {
	border-left: 3px solid var(--e-global-color-primary, #86162b);
	padding-left: clamp(1rem, 0.5rem + 2vw, 2rem);
	/* L'apertura si stringe qui e non con una larghezza di sezione diversa:
	   così il suo bordo sinistro resta allineato a quello di tutte le altre
	   sezioni, e la dorsale sembra la spina della pagina invece di un tratto
	   messo a caso. */
	max-width: 52rem;
	margin-inline-end: auto;
}

/* Sopra i 900px la dorsale esce nel margine: così il testo dell'apertura si
   allinea a quello di tutte le altre sezioni e il filo resta appeso fuori,
   come la spina della pagina. Sotto, lo spazio non c'è e rientra. */
@media (min-width: 900px) {
	.dorsale {
		margin-left: -2rem;
		padding-left: 2rem;
	}
}

/* Il titolo della pagina lo stampa Hello: sulle pagine composte in Elementor
   è un doppione del titolo che c'è già nel contenuto. */
.page .entry-title,
.home .entry-title { display: none; }

/* Dentro la dorsale il filo dell'occhiello sarebbe il secondo della stessa
   riga: la colonna ne porta già uno, più alto, che regge titolo e sommario.
   Due linee parallele a un centimetro di distanza si leggono come un errore
   di impaginazione. */
.dorsale .occhiello {
	border-left: 0;
	padding-left: 0;
}

.occhiello {
	font-family: 'Archivo', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-left: 3px solid var(--e-global-color-primary, #86162b);
	padding-left: 0.75rem;
}

/* ------------------------------------------------------------------ *
 * Qualità di base
 *
 * Elementor non se ne occupa, e sono le prime cose che un collaudo di
 * accessibilità contesta a un sito di un ente.
 * ------------------------------------------------------------------ */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--e-global-color-primary, #86162b);
	outline-offset: 2px;
}

h1, h2, h3 {
	text-wrap: balance;
	/* Fraunces porta l'asse della dimensione ottica: lasciarlo automatico
	   è il motivo per cui si è scelto un carattere variabile. */
	font-optical-sizing: auto;
}

p {
	text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------ *
 * Cornice del sito: testata e piè di pagina
 *
 * Stanno in codice perché con Elementor Free il Theme Builder non c'è. La
 * conseguenza buona è che questa parte si aggiorna con un deploy, mentre le
 * pagine si compongono nel builder.
 * ------------------------------------------------------------------ */

.fsgb-contenitore {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem);
}

/* --- barra di servizio --- */

.fsgb-servizio {
	background: var(--e-global-color-primary, #86162b);
	color: #fff;
	font-family: 'Archivo', sans-serif;
	font-size: 0.75rem;
}

.fsgb-servizio .fsgb-contenitore {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	padding-block: 0.45rem;
}

.fsgb-servizio p { margin: 0; }

.fsgb-servizio a {
	color: #fff;
	text-decoration: none;
}

/* Sul fondo bordeaux il colore non è più disponibile per segnalare il
   passaggio del mouse — è già tutto bianco. Resta la sottolineatura, con lo
   stesso scarto delle voci di menu perché non tocchi le lettere. */
.fsgb-servizio a:hover,
.fsgb-servizio a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 2px;
}

/* Il separatore fra i recapiti va tenuto sotto al testo, altrimenti tre
   puntini bianchi pieni competono con gli indirizzi. */
.fsgb-servizio__recapiti span[aria-hidden] { color: rgba(255, 255, 255, 0.5); }

/* La riga di servizio resta una riga anche sul telefono: non va a capo,
   e man mano che lo spazio manca perde l'indirizzo e poi la mail, che
   stanno comunque nel piè di pagina e in Contatti. Resta il telefono, e
   «Segnala una violazione», che è un obbligo. */
.fsgb-servizio .fsgb-contenitore { flex-wrap: nowrap; }
.fsgb-servizio p { white-space: nowrap; }

@media (max-width: 900px) {
	.fsgb-servizio__indirizzo { display: none; }
}

@media (max-width: 560px) {
	.fsgb-servizio__mail { display: none; }
}

/* --- testata --- */

.fsgb-testata__principale {
	background: #fff;
	border-bottom: 1px solid var(--e-global-color-filo, #e2e5e9);
}

.fsgb-testata__principale .fsgb-contenitore {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
}

.fsgb-logo img { max-width: 210px; height: auto; display: block; }

.fsgb-logo__testo {
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	text-decoration: none;
	color: var(--e-global-color-text, #0d0608);
}

/* --- navigazione --- */

.fsgb-navigazione__voci {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.9rem, 0.2rem + 1.1vw, 1.8rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fsgb-navigazione a {
	font-family: 'Archivo', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--e-global-color-text, #0d0608);
}

.fsgb-navigazione a:hover,
.fsgb-navigazione a:focus-visible {
	color: var(--e-global-color-primary, #86162b);
}

/* La linea sotto la voce corrente e sotto il puntatore.
 *
 * Era un'ombra interna incollata al bordo del link, che non ha modo di
 * staccarsi dal testo. Una sottolineatura vera governa distanza e spessore
 * per conto suo, e lo scarto è in `em`: sul menu grande del mobile cresce
 * insieme al carattere invece di restare appiccicato.
 *
 * Sta lì sempre, trasparente, così il colore può entrare in dissolvenza:
 * la comparsa di una sottolineatura non è animabile, quella di un colore sì.
 * Non occupa spazio, quindi il menu non si sposta di un pixel.
 *
 * Solo le voci di primo livello: dentro il pannello a tendina una riga
 * spessa staccata dal testo toccherebbe la voce sotto. */

.fsgb-navigazione__voci > li > a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.65em;
	text-decoration-skip-ink: none;
	transition: text-decoration-color 0.15s ease;
}

.fsgb-navigazione__voci > li > a:hover,
.fsgb-navigazione__voci > li > a:focus-visible,
.fsgb-navigazione__voci > .current-menu-item > a,
.fsgb-navigazione__voci > .current-menu-parent > a,
.fsgb-navigazione__voci > .current-menu-ancestor > a {
	text-decoration-color: var(--e-global-color-primary, #86162b);
}

@media (prefers-reduced-motion: reduce) {
	.fsgb-navigazione__voci > li > a { transition: none; }
}

/* --- la ricerca: il tasto nella testata e il pannello sotto ---
 *
 * L'icona sta in fondo alla riga della testata, dopo il menu; sotto i
 * 1100px prima del pulsante del menu. Il pannello scende sopra la pagina
 * come il menu: è una sovrapposizione temporanea, non un pezzo di pagina. */

.fsgb-testata { position: relative; z-index: 30; }

.fsgb-cerca-tasto {
	order: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 auto;
	border-radius: 50%;
	color: var(--e-global-color-text, #0d0608);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.fsgb-cerca-tasto:hover,
.fsgb-cerca-tasto:focus-visible,
.fsgb-cerca-tasto[aria-expanded='true'] {
	color: var(--e-global-color-primary, #86162b);
	background: var(--e-global-color-nebbia, #eef2f5);
}

.fsgb-cerca-pannello {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-bottom: 1px solid var(--e-global-color-filo, #e2e5e9);
	box-shadow: 0 12px 28px rgba(13, 6, 8, 0.10);
	padding-block: 1.25rem;
}

.fsgb-cerca__modulo {
	display: flex;
	gap: 0.6rem;
	max-width: 42rem;
}

.fsgb-cerca__campo {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--e-global-color-filo, #e2e5e9);
	border-radius: var(--raggio-tasto, 6px);
	background: #fff;
	font-family: 'Archivo', sans-serif;
	font-size: 1rem;
	color: var(--e-global-color-text, #0d0608);
}

.fsgb-cerca__campo:focus {
	border-color: var(--e-global-color-primary, #86162b);
	outline: 3px solid var(--e-global-color-primary, #86162b);
	outline-offset: 2px;
}

/* Il tasto «Cerca» prende fondo, carattere e raggio dal kit, come ogni
   `button`: qui solo misure e forma. */
.fsgb-cerca__invia {
	flex: 0 0 auto;
	padding: 0.6rem 1.1rem;
	border: 0;
	cursor: pointer;
}

/* --- la pagina dei risultati --- */

.fsgb-ricerca__conto {
	margin: 0.75rem 0 0;
	font-family: 'Archivo', sans-serif;
	font-size: 0.875rem;
	color: var(--e-global-color-grigio, #5f6368);
}

.fsgb-ricerca .fsgb-archivio__apertura .fsgb-cerca__modulo { margin-top: 1.5rem; }

.fsgb-ricerca__vuoto { max-width: 42rem; }

/* Nei risultati la pagina porta un'etichetta al posto della data: grigia
   e non vermiglia, perché non è una data e non deve sembrarlo. */
.fsgb-notizia__data--pagina {
	background: var(--e-global-color-grigio, #5f6368);
}

/* --- il pulsante del menu, solo sotto i 1100px --- */

/* Il fondo bordeaux e il colore del testo arrivano dal kit di Elementor,
 * che dipinge ogni `button` della pagina: dichiararli anche qui creerebbe due
 * fonti di verità per lo stesso colore, e la meno specifica perderebbe in
 * silenzio. Qui restano solo forma e ingombro, che il kit non tocca. */

.fsgb-menu-tasto {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	cursor: pointer;
}

.fsgb-menu-tasto__segno,
.fsgb-menu-tasto__segno::before,
.fsgb-menu-tasto__segno::after {
	display: block;
	width: 1.15rem;
	height: 2px;
	margin-inline: auto;
	/* Le tre linee seguono il colore del testo del tasto invece di fissarne
	   uno proprio: se un domani il fondo cambia, non restano invisibili. */
	background: currentColor;
	content: '';
}

.fsgb-menu-tasto__segno::before { transform: translateY(-6px); }
.fsgb-menu-tasto__segno::after { transform: translateY(4px); }

@media (max-width: 1100px) {
	.fsgb-menu-tasto { display: block; order: 2; }

	/* Il pannello scende SOPRA il contenuto, non lo spinge in basso.
	   Aprendo un menu di sedici voci in mezzo al flusso, l'apertura della
	   pagina finirebbe a due schermate di distanza e chi chiude il menu si
	   ritrova altrove: un menu è una sovrapposizione temporanea, non un
	   pezzo di pagina. */
	.fsgb-testata__principale { position: relative; z-index: 30; }

	.fsgb-navigazione {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid var(--e-global-color-filo, #e2e5e9);
		border-bottom: 1px solid var(--e-global-color-filo, #e2e5e9);
		box-shadow: 0 12px 28px rgba(13, 6, 8, 0.10);
		padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem);
		/* Sedici voci su uno schermo basso non ci stanno: il pannello
		   scorre per conto suo invece di sbordare fuori dallo schermo. */
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.fsgb-menu-tasto[aria-expanded='true'] + .fsgb-navigazione { display: block; }

	.fsgb-navigazione__voci {
		flex-direction: column;
		gap: 0;
	}

	.fsgb-navigazione__voci li { border-top: 1px solid var(--e-global-color-filo, #e2e5e9); }
	.fsgb-navigazione__voci > li:first-child { border-top: 0; }
	.fsgb-navigazione__voci a { display: block; padding: 0.9rem 0; }
}

/* --- piè di pagina --- */

.fsgb-piede {
	background: var(--e-global-color-primary, #86162b);
	color: #fff;
	margin-top: clamp(3rem, 2rem + 4vw, 6rem);
	font-size: 0.9375rem;
}

/* Il riempimento sta sul corpo e non sul piede, così la striscia del
   copyright può attaccarsi al bordo inferiore senza bande colorate. */
.fsgb-piede__corpo {
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.fsgb-piede__griglia {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2.5rem;
}

/* Il logo ha il fondo trasparente e il marchio è bordeaux: sul piede
   bordeaux sparirebbe, e la scritta azzurra resterebbe a contrasto basso.
   La piastra bianca lo rende una scelta invece di un incidente. */
.fsgb-piede .custom-logo-link {
	display: inline-block;
	background: #fff;
	padding: 0.6rem 0.8rem;
	border-radius: var(--raggio-scheda, 10px);
	margin-bottom: 0.25rem;
}

.fsgb-piede img { max-width: 180px; height: auto; display: block; }

.fsgb-piede ul { list-style: none; margin: 0; padding: 0; }
.fsgb-piede li + li { margin-top: 0.35rem; }

.fsgb-piede a { color: #fff; text-decoration: none; }

/* Sul bordeaux il colore non è più libero per segnalare il passaggio del
   mouse: resta la sottolineatura, staccata dalle lettere. */
.fsgb-piede a:hover,
.fsgb-piede a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 2px;
}

/* Il filo dell'occhiello è bordeaux: qui si perderebbe nel fondo. */
/* I titoli di colonna vanno in grassetto e in bianco pieno: sul fondo
   bordeaux un 600 attenuato all'82% si appiattisce sui collegamenti sotto,
   e la colonna perde la sua testa. */
.fsgb-piede .occhiello {
	color: #fff;
	font-weight: 700;
	border-left-color: rgba(255, 255, 255, 0.55);
}

.fsgb-piede a:focus-visible { outline-color: #fff; }

/* La coda: una striscia nera a tutta larghezza sotto il piede. */
.fsgb-piede__coda {
	/* Più scuro dell'inchiostro del testo: sotto il bordeaux del piede serve
	   uno stacco netto, e il nero di lettura non basta a darlo. */
	background: #0d0608;
	padding-block: 0.9rem;
}

.fsgb-piede__nota {
	margin: 0;
	font-family: 'Archivo', sans-serif;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------------ *
 * Elenco notizie — lo stampa lo shortcode [fsgb_notizie]
 *
 * Elenco datato e non schede: una notizia è una data più un titolo, e
 * l'archivio ne conta 256. L'elenco si scorre, le schede si guardano.
 * ------------------------------------------------------------------ */

.fsgb-notizie { list-style: none; margin: 0; padding: 0; }

.fsgb-notizia {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 2rem;
	padding-block: 1.15rem;
	border-top: 1px solid var(--e-global-color-filo, #e2e5e9);
}

.fsgb-notizie .fsgb-notizia:last-child { border-bottom: 1px solid var(--e-global-color-filo, #e2e5e9); }

/* La colonna di sinistra porta solo la miniatura. */
.fsgb-notizia__lato {
	flex: 0 0 8.5rem;
}

/* La data è un'etichetta sopra il titolo, su fondo vermiglio. Bianco su
   #d43f37 dà 4,6:1: sopra il minimo, senza margine — per questo il peso è
   pieno e non c'è trasparenza. */
.fsgb-notizia__data {
	display: inline-block;
	margin-bottom: 0.55rem;
	padding: 0.3em 0.65em;
	border-radius: var(--raggio-minimo, 4px);
	background: var(--e-global-color-secondary, #d43f37);
	color: #fff;
	font-family: 'Archivo', sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.fsgb-notizia__testo { flex: 1 1 20rem; }

/* Due classi e non una: la regola del kit è `.elementor-kit-48 h2`, che con
   un elemento in più batte una classe sola. */
.fsgb-notizie .fsgb-notizia__titolo,
.fsgb-notizia .fsgb-notizia__titolo {
	/* Un titolo, quindi Fraunces come gli altri: Archivo resta alle
	   etichette di servizio, qui accanto la data. */
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.25rem;
	/* Un rem e un quarto: qui il peso serve, o il titolo scivola nel
	   sommario, che è anch'esso un graziato. */
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
}

.fsgb-notizia__titolo a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--e-global-color-primary, #86162b), var(--e-global-color-primary, #86162b));
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 180ms ease-out;
}

.fsgb-notizia__titolo a:hover,
.fsgb-notizia__titolo a:focus-visible {
	background-size: 100% 2px;
	color: var(--e-global-color-primary, #86162b);
}

.fsgb-notizia__sommario {
	margin: 0.4rem 0 0;
	font-size: 0.9375rem;
	color: var(--e-global-color-grigio, #5f6368);
}

/* Sotto i 640px la miniatura si stringe e resta accanto al testo: senza
   più la data sotto, non avrebbe motivo di occupare una riga da sola. */
@media (max-width: 640px) {
	.fsgb-notizia__lato { flex-basis: 5.5rem; }
	.fsgb-notizia__testo { flex: 1 1 0; }
}

/* ------------------------------------------------------------------ *
 * Pagine interne
 * ------------------------------------------------------------------ */

/* Il testo lungo va tenuto entro una misura leggibile: su uno schermo largo
   una riga da 1200px non si segue. */
.misura-lettura { max-width: 42rem; }

/* --- cronologia (pagina Storia) ---
 *
 * Qui la numerazione ha senso: gli anni portano un'informazione che serve al
 * lettore, non sono un ornamento. Una spina centrale e le schede che si
 * alternano ai suoi lati, come nel sito precedente — la forma che la
 * Fondazione conosce e che si legge da sola come «linea del tempo».
 *
 * Il markup lo genera bin/costruisci-pagine.py: ogni riga è una sezione
 * interna `cronologia__riga` con una colonna sola — l'anno, un titolo con
 * classe `cronologia__anno`, e il testo. Qui sta solo la forma: il
 * movimento è «Ingresso animazione» di Elementor, impostato su ogni riga
 * e sui ritratti, così chi compone la pagina lo governa dal pannello.
 *
 * La spina non è una linea sola: ogni riga porta il proprio segmento, così
 * la riga — e la sua parte di spina — è un pezzo che si sposta insieme. */

.cronologia {
	--spina: 50%;
	--stacco: 2.5rem;
	position: relative;
	max-width: 56rem;
	padding-top: 1rem;
}

.cronologia__riga {
	position: relative;
	padding: 0.85rem 0 1.4rem;
}

/* Il segmento di spina. */
.cronologia__riga::before {
	content: '';
	position: absolute;
	left: var(--spina);
	top: 0;
	bottom: 0;
	width: 1px;
	margin-left: -0.5px;
	background: var(--e-global-color-filo, #e2e5e9);
}

/* Il punto sulla spina, all'altezza della freccia della scheda. */
.cronologia__riga::after {
	content: '';
	position: absolute;
	left: var(--spina);
	top: calc(0.85rem + 1.55rem);
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	border-radius: 50%;
	background: var(--e-global-color-primary, #86162b);
	box-shadow: 0 0 0 3px #fff;
	z-index: 1;
}

/* La scheda: il contenitore della riga, largo metà meno lo stacco dalla
   spina. Le regole di Elementor sul contenitore vanno battute con lo
   stesso peso, per questo il selettore è così lungo. */
.cronologia .cronologia__riga > .elementor-container {
	width: calc(50% - var(--stacco));
	max-width: none;
	margin: 0;
}

.cronologia .cronologia__riga:nth-child(even) > .elementor-container {
	margin-left: auto;
}

.cronologia .cronologia__riga .elementor-column > .elementor-widget-wrap {
	position: relative;
	padding: 1.75rem 1.5rem 1.35rem;
	border-radius: var(--raggio-scheda);
	background: var(--e-global-color-nebbia, #eef2f5);
}

/* La freccia verso la spina: un quadrato ruotato, mezzo fuori dal bordo. */
.cronologia .cronologia__riga .elementor-column > .elementor-widget-wrap::before {
	content: '';
	position: absolute;
	top: calc(1.55rem - 6px);
	right: -6px;
	width: 12px;
	height: 12px;
	background: inherit;
	transform: rotate(45deg);
}

.cronologia .cronologia__riga:nth-child(even) .elementor-column > .elementor-widget-wrap::before {
	right: auto;
	left: -6px;
}

/* L'anno è un'etichetta che sporge dal bordo superiore della scheda, la
   stessa delle date nelle notizie: bianco su vermiglio, Archivo, maiuscolo.
   Cinque classi: Elementor scrive nel CSS della pagina un colore per ogni
   titolo — `.elementor-444 .elementor-element.elementor-element-x
   .elementor-heading-title`, quattro pesi — e con meno l'anno esce nero. */
.cronologia .cronologia__anno { position: absolute; top: 0; left: 1.5rem; margin: 0; }

.fsgb-pagina .cronologia .cronologia__riga .cronologia__anno .elementor-heading-title {
	display: inline-block;
	margin: 0;
	padding: 0.35em 0.7em;
	transform: translateY(-50%);
	border-radius: var(--raggio-minimo, 4px);
	background: var(--e-global-color-secondary, #d43f37);
	color: #fff;
	font-family: 'Archivo', sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.cronologia .cronologia__riga .elementor-widget-text-editor { margin: 0; }
.cronologia .cronologia__riga p { margin: 0; }
.cronologia .cronologia__riga p + p { margin-top: 0.6em; }

/* Sotto i 768px la spina va a sinistra e tutte le schede stanno alla sua
   destra: due colonne di schede da 40% non si leggono. */
@media (max-width: 767px) {
	.cronologia {
		--spina: 0.75rem;
		--stacco: 1.5rem;
	}

	.cronologia .cronologia__riga > .elementor-container,
	.cronologia .cronologia__riga:nth-child(even) > .elementor-container {
		width: auto;
		margin: 0 0 0 calc(var(--spina) + var(--stacco));
	}

	.cronologia .cronologia__riga:nth-child(odd) .elementor-column > .elementor-widget-wrap::before {
		right: auto;
		left: -6px;
	}
}

/* --- Contatti: le schede, la mappa, il modulo ---
 *
 * Le schede sono il widget Icon Box di Elementor: qui la veste — fondo
 * nebbia, angoli delle schede, icona bordeaux — così chi le modifica dal
 * pannello cambia il testo e non la forma. */

/* Con il markup ottimizzato Elementor non stampa più il contenitore del
   widget: la scheda è il widget stesso. */
.fsgb-contatti .elementor-column > .elementor-widget-wrap { height: 100%; }

.elementor-widget.fsgb-contatto {
	height: 100%;
	margin: 0;
	padding: 1.75rem 1.5rem 1.6rem;
	border-radius: var(--raggio-scheda);
	background: var(--e-global-color-nebbia, #eef2f5);
}

.fsgb-contatto .elementor-icon-box-icon { margin-bottom: 1rem; }

.fsgb-contatto .elementor-icon {
	color: var(--e-global-color-primary, #86162b);
	font-size: 1.75rem;
}

.fsgb-contatto .elementor-icon-box-title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	color: var(--e-global-color-text, #0d0608);
}

.fsgb-contatto .elementor-icon-box-description {
	font-size: 1rem;
	line-height: 1.55;
}

/* La mappa — il widget Google Maps di Elementor — dentro un angolo
   arrotondato, con il filo come bordo. */
.elementor-widget.fsgb-mappa {
	overflow: hidden;
	border: 1px solid var(--e-global-color-filo, #e2e5e9);
	border-radius: var(--raggio-scheda);
	line-height: 0;
	background: var(--e-global-color-nebbia, #eef2f5);
}

.fsgb-mappa iframe { display: block; width: 100%; border: 0; }

.fsgb-mappa__nota {
	margin: 0.75rem 0 0;
	font-family: 'Archivo', sans-serif;
	font-size: 0.875rem;
	color: var(--e-global-color-grigio, #5f6368);
}

/* Il modulo: i campi larghi quanto la colonna, il tasto in fondo. Non le
   caselle di spunta: larghe quanto la colonna finivano sole su una riga,
   in mezzo, sopra il loro testo. */
.fsgb-scrivici .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.fsgb-scrivici .wpcf7 textarea { width: 100%; }

.fsgb-scrivici .wpcf7 textarea { min-height: 9rem; }

/* Il consenso: la casella accanto al testo, allineata alla prima riga. */
.wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.25em 0 0;
	accent-color: var(--e-global-color-primary, #86162b);
}

@media (max-width: 767px) {
	.fsgb-contatti .elementor-column + .elementor-column { margin-top: 1rem; }
}

/* --- i tre ritratti (pagina Storia) ---
 *
 * Una griglia propria e non le colonne di Elementor: nella colonna con la
 * barra laterale le colonne esterne perdono il riempimento e verrebbero
 * più larghe di quella in mezzo, e tre ritratti di misura diversa in fila
 * sembrano un errore. Quattro pesi nel selettore: la larghezza della
 * colonna Elementor la scrive nel CSS della pagina, con tre. */

.storia-foto > .elementor-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.75rem, 2vw, 1.5rem);
}

.fsgb-pagina .storia-foto > .elementor-container > .elementor-column { width: auto; }
.storia-foto > .elementor-container > .elementor-column > .elementor-element-populated { padding: 0; }

.storia-foto .elementor-widget-image { margin: 0; }

.storia-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--raggio-scheda);
	background: var(--e-global-color-filo, #e2e5e9);
}

/* --- schede persona (pagina Organi) --- */

.elementor-widget-image-box .elementor-image-box-img img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

.elementor-widget-image-box .elementor-image-box-title {
	margin-top: 1rem;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.elementor-widget-image-box .elementor-image-box-description {
	margin-top: 0.35rem;
}

/* --- schede di dettaglio (centri SAI, stati della graduatoria) ---
 *
 * Sono dati di servizio: chi arriva su queste pagine cerca un indirizzo, un
 * responsabile, un numero. L'etichetta piccola in maiuscolo li rende
 * scorribili senza leggere, che è il modo in cui si consultano davvero. */

.scheda {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: 0.45rem 1.25rem;
	margin: 0.75rem 0 0;
}

.scheda dt {
	font-family: 'Archivo', sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--e-global-color-grigio, #5f6368);
	padding-top: 0.3rem;
}

.scheda dd {
	margin: 0;
	font-size: 0.9375rem;
}

@media (max-width: 560px) {
	.scheda { grid-template-columns: 1fr; gap: 0.15rem; }
	.scheda dd { margin-bottom: 0.6rem; }
	.scheda dt { padding-top: 0; }
}

/* --- elenchi di documenti ---
 *
 * Rendicontazioni e graduatorie: sono atti, e vanno trattati come tali —
 * righe distinte, formato dichiarato, nessuna icona decorativa. Chi li cerca
 * li cerca apposta. */

.elenco-documenti {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	max-width: 34rem;
}

.elenco-documenti li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--e-global-color-filo, #e2e5e9);
}

.elenco-documenti li:first-child {
	border-top: 1px solid var(--e-global-color-filo, #e2e5e9);
}

.elenco-documenti a {
	text-decoration: none;
	color: var(--e-global-color-text, #0d0608);
}

.elenco-documenti a:hover,
.elenco-documenti a:focus-visible {
	color: var(--e-global-color-primary, #86162b);
	text-decoration: underline;
}

.elenco-documenti .tipo {
	flex: 0 0 auto;
	font-family: 'Archivo', sans-serif;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--e-global-color-grigio, #5f6368);
	border: 1px solid var(--e-global-color-filo, #e2e5e9);
	padding: 0.15rem 0.4rem;
}

/* --- galleria della mostra Percezioni ---
 *
 * Gli scatti hanno proporzioni diverse fra loro: senza un rapporto imposto
 * la griglia si sfrangia e la mostra sembra un archivio disordinato. Il
 * ritaglio è lo stesso che usava la mostra originale. */

.galleria .elementor-widget-image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
	display: block;
	background: var(--e-global-color-filo, #e2e5e9);
}

.galleria figcaption,
.galleria .widget-image-caption {
	font-family: 'Archivo', sans-serif;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--e-global-color-grigio, #5f6368);
	margin-top: 0.6rem;
	text-align: left;
}

.galleria figcaption a,
.galleria .widget-image-caption a {
	color: var(--e-global-color-primary, #86162b);
	text-decoration: none;
}

.galleria figcaption a:hover,
.galleria .widget-image-caption a:hover {
	text-decoration: underline;
}

/* Le copertine nella pagina madre: stesso ritaglio, così l'indice della
   mostra si legge come una mostra. */
.fsgb-progetto .elementor-widget-image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* Le voci in fondo a una scheda di «Cosa facciamo»: un piccolo indice
   della sezione, in Archivo maiuscolo, una per riga con il filetto sopra.
   Sono i soli collegamenti quando la scheda non ha una pagina sua. */
.fsgb-progetto__voci {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.fsgb-progetto__voci li { border-top: 1px solid var(--e-global-color-filo, #e2e5e9); }

.fsgb-progetto__voci a {
	display: block;
	padding: 0.65rem 0;
	font-family: 'Archivo', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--e-global-color-primary, #86162b);
}

.fsgb-progetto__voci a:hover,
.fsgb-progetto__voci a:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; }

/* --- elenchi puntati e citazioni nelle pagine di progetto --- */

.misura-lettura ul { padding-left: 1.1rem; }
.misura-lettura li { margin-bottom: 0.5rem; }

blockquote {
	margin: 1rem 0 0;
	padding-left: clamp(1rem, 0.5rem + 2vw, 2rem);
	border-left: 3px solid var(--e-global-color-primary, #86162b);
	font-size: 1.125rem;
	line-height: 1.55;
}

/* Chi ha detto una cosa conta quanto la cosa detta: la fonte non è una nota
   a piè di pagina, è parte della citazione. */
blockquote .fonte {
	margin-top: 0.75rem;
	font-family: 'Archivo', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--e-global-color-grigio, #5f6368);
}

/* --- galleria delle attività ---
 *
 * Una fotografia per articolo, con il titolo sotto: la griglia racconta
 * molte iniziative diverse invece di riempirsi con venti scatti dello stesso
 * campo estivo. Il titolo non è una didascalia decorativa — dice a cosa
 * porta il collegamento. */

.fsgb-galleria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.75rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fsgb-galleria a { text-decoration: none; display: block; }

.fsgb-galleria img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: var(--e-global-color-filo, #e2e5e9);
}

.fsgb-galleria__didascalia {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--e-global-color-text, #0d0608);
}

.fsgb-galleria a:hover .fsgb-galleria__didascalia,
.fsgb-galleria a:focus-visible .fsgb-galleria__didascalia {
	color: var(--e-global-color-primary, #86162b);
}

/* ------------------------------------------------------------------ *
 * Archivi e singolo articolo
 *
 * Non passano da Elementor: sono template del tema, quindi versionati e
 * pubblicabili con un deploy. Con Elementor Free il Theme Builder non c'è,
 * ma per gli archivi è un vantaggio — la forma di 256 notizie non deve
 * dipendere da una pagina composta a mano.
 * ------------------------------------------------------------------ */

.fsgb-archivio,
.fsgb-articolo {
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0;
}

/* La fascia fotografica della pagina delle notizie: stessa misura e
   stesso ritaglio delle fasce delle pagine (.banner-pagina), a tutta
   larghezza sotto il menu — quindi prima del riempimento in alto. */
/* Hello stringe `main` a 1140px fuori da Elementor: con la fascia il
   limite se ne va, il contenuto sotto ha già il suo contenitore. */
body main.fsgb-archivio:has(> .fsgb-archivio__fascia) {
	max-width: none;
	padding-top: 0;
}

.fsgb-archivio__fascia {
	position: relative;
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
	min-height: clamp(200px, 24vw, 300px);
	line-height: 0;
	background: var(--e-global-color-filo, #e2e5e9);
}

.fsgb-archivio__fascia img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	display: block;
}

/* La velatura dal basso, la stessa delle fasce delle pagine. */
.fsgb-archivio__fascia::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 6, 8, 0.10), rgba(13, 6, 8, 0.70));
}

.fsgb-archivio__fascia-testo {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: inherit;
	padding-block: 2.5rem 2rem;
	line-height: 1.3;
}

.fsgb-archivio__fascia .occhiello { color: #fff; border-left: 0; padding-left: 0; }

.fsgb-archivio__fascia .entry-title {
	margin: 0.5rem 0 0;
	color: #fff;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	text-shadow: 0 1px 2px rgba(13, 6, 8, 0.25);
}

/* Senza titolo sotto, l'apertura è solo un eventuale sommario. */
.fsgb-archivio__fascia + .fsgb-contenitore .fsgb-archivio__apertura:empty { display: none; }

.fsgb-archivio__apertura,
.fsgb-articolo__apertura {
	max-width: 46rem;
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.fsgb-archivio__apertura .entry-title,
.fsgb-articolo__apertura .entry-title {
	margin: 0.35rem 0 0;
}

.fsgb-articolo__data {
	font-family: 'Archivo', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--e-global-color-grigio, #5f6368);
}

.fsgb-articolo__apice {
	margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.fsgb-articolo__apice img {
	width: 100%;
	height: auto;
	display: block;
}

/* La misura di lettura vale per il testo, non per le immagini: quelle
   possono uscire dalla colonna, il testo no. */
.fsgb-articolo__testo {
	max-width: 42rem;
}

.fsgb-articolo__testo img {
	max-width: 100%;
	height: auto;
}

/* --- la coda dell'articolo ---
 *
 * Le categorie come etichette, poi i due vicini come schede: l'etichetta
 * piccola sopra («Precedente», «Successivo») e il titolo in Fraunces
 * sotto. Erano due link nudi, uno sotto l'altro. */

.fsgb-articolo__coda {
	max-width: 42rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--e-global-color-filo, #e2e5e9);
}

.fsgb-articolo__etichetta {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--e-global-color-grigio, #5f6368);
}

.fsgb-articolo__categorie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.6rem;
	margin: 0;
}

.fsgb-articolo__categorie .fsgb-articolo__etichetta { margin-right: 0.4rem; }

.fsgb-articolo__categoria {
	display: inline-block;
	padding: 0.3em 0.7em;
	border: 1px solid var(--e-global-color-filo, #e2e5e9);
	border-radius: var(--raggio-minimo, 4px);
	font-family: 'Archivo', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--e-global-color-text, #0d0608);
}

.fsgb-articolo__categoria:hover,
.fsgb-articolo__categoria:focus-visible {
	border-color: var(--e-global-color-primary, #86162b);
	color: var(--e-global-color-primary, #86162b);
}

.fsgb-articolo__navigazione {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--e-global-color-filo, #e2e5e9);
}

.fsgb-articolo__vicino {
	text-decoration: none;
	color: inherit;
}

.fsgb-articolo__vicino--dopo { text-align: right; }

/* Un solo vicino, quello dopo: sta a destra lo stesso. */
.fsgb-articolo__vicino--dopo:only-child { grid-column: 2; }

.fsgb-articolo__vicino-titolo {
	display: block;
	margin-top: 0.4rem;
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
	transition: color 160ms ease-out;
}

.fsgb-articolo__vicino:hover .fsgb-articolo__vicino-titolo,
.fsgb-articolo__vicino:focus-visible .fsgb-articolo__vicino-titolo {
	color: var(--e-global-color-primary, #86162b);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

@media (max-width: 560px) {
	.fsgb-articolo__navigazione { grid-template-columns: 1fr; }
	.fsgb-articolo__vicino--dopo { text-align: left; }
	.fsgb-articolo__vicino--dopo:only-child { grid-column: auto; }
}

/* Paginazione: numeri, non frecce. Con 256 notizie sapere a che punto si è
   conta più che poter andare avanti di uno. */
.fsgb-archivio .navigation.pagination {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--e-global-color-filo, #e2e5e9);
	font-family: 'Archivo', sans-serif;
	font-size: 0.8125rem;
}

.fsgb-archivio .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
}

.fsgb-archivio .page-numbers {
	text-decoration: none;
	padding: 0.25rem 0.1rem;
}

.fsgb-archivio .page-numbers.current {
	font-weight: 700;
	box-shadow: inset 0 -2px 0 var(--e-global-color-primary, #86162b);
}

.fsgb-archivio .page-numbers:not(.current):hover {
	color: var(--e-global-color-primary, #86162b);
}

/* --- avviso di revisione ---
 *
 * Sta sopra i documenti legali riportati dal sito vecchio ed elenca cosa non
 * corrisponde. Deve leggersi come un promemoria di lavorazione e non come
 * parte del documento: da qui il bordo pieno, il fondo diverso e il corpo
 * più piccolo. Va rimosso quando i testi vengono rifatti — finché c'è, il
 * sito non va pubblicato.
 */

.avviso-revisione {
	border: 2px solid var(--e-global-color-primary, #86162b);
	padding: clamp(1rem, 0.75rem + 1vw, 1.75rem);
	background: #fff;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.avviso-revisione p { margin: 0 0 0.75rem; }
.avviso-revisione p:last-child { margin-bottom: 0; }

.avviso-revisione ul {
	margin: 0 0 0.75rem;
	padding-left: 1.1rem;
}

.avviso-revisione li { margin-bottom: 0.4rem; }

.avviso-revisione p:last-child {
	font-family: 'Archivo', sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	color: var(--e-global-color-grigio, #5f6368);
}

/* ------------------------------------------------------------------ *
 * Apertura fotografica della home
 *
 * La fotografia sta sotto il menu e regge le parole. Il velo non è un
 * filtro piatto — quello spegne l'immagine e basta — ma una sfumatura da
 * sinistra: dove c'è il testo copre, dove non c'è lascia respirare la foto.
 *
 * La velatura è il nero del sito, #0d0608, a trasparenza variabile: più
 * scura del vecchio #1b0a0e, quindi il contrasto del bianco sopra — già
 * oltre 7:1 sul punto peggiore — può solo salire.
 * ------------------------------------------------------------------ */

.apertura-foto {
	position: relative;
	background-color: var(--e-global-color-text, #0d0608);
	isolation: isolate;
}

.apertura-foto::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(13, 6, 8, 0.94) 0%,
		rgba(13, 6, 8, 0.90) 46%,
		rgba(13, 6, 8, 0.52) 74%,
		rgba(13, 6, 8, 0.28) 100%
	);
}

/* Sopra la fotografia il filo bordeaux sparirebbe: qui la dorsale si fa
   chiara, così resta lo stesso segno del resto del sito. */
.apertura-foto .dorsale {
	border-left-color: rgba(255, 255, 255, 0.55);
}

.apertura-foto .elementor-heading-title,
.apertura-foto .elementor-widget-text-editor,
.apertura-foto p {
	color: #fff;
}

.apertura-foto .occhiello .elementor-heading-title {
	color: rgba(255, 255, 255, 0.82);
	border-left-color: rgba(255, 255, 255, 0.55);
}

.apertura-foto a:focus-visible {
	outline-color: #fff;
}

/* Sotto i 700px la fotografia perde il soggetto se resta un fondo: diventa
   una fascia propria sopra il testo, così si vede per intero. */
@media (max-width: 700px) {
	.apertura-foto::before {
		background: linear-gradient(
			180deg,
			rgba(13, 6, 8, 0.55) 0%,
			rgba(13, 6, 8, 0.88) 55%,
			rgba(13, 6, 8, 0.94) 100%
		);
	}
}

/* --- fotografie nelle schede della home ---
 *
 * Rapporto imposto perché gli scatti hanno proporzioni diverse fra loro e
 * una fila di riquadri sfrangiati fa più danno dell'assenza di immagini. Il
 * filo nero sopra il titolo resta: è quello che tiene insieme le schede
 * fotografiche con quelle di testo nel resto del sito. */

.fsgb-progetto .elementor-widget-image {
	margin-bottom: 1.25rem;
}

.fsgb-progetto .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	background: var(--e-global-color-filo, #e2e5e9);
	transition: opacity 180ms ease-out;
}

.fsgb-progetto:hover .elementor-widget-image img {
	opacity: 0.92;
}

/* Il filo nero resta fra fotografia e titolo: con l'immagine sopra funziona
   da separatore, e tiene insieme le schede fotografiche con quelle di solo
   testo nel resto del sito. */

/* ------------------------------------------------------------------ *
 * Sottomenu
 *
 * Ogni voce di primo livello punta a una pagina vera, non a un cancelletto:
 * su un telefono un genitore non cliccabile che apre solo una tendina è una
 * trappola, e chi tocca «La Fondazione» aspettandosi di andare da qualche
 * parte resta fermo. La tendina è quindi un di più, non l'unico modo.
 * ------------------------------------------------------------------ */

.fsgb-navigazione .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 1101px) {
	.fsgb-navigazione__voci > li {
		position: relative;
	}

	.fsgb-navigazione .sub-menu {
		position: absolute;
		top: 100%;
		left: -0.9rem;
		z-index: 20;
		min-width: 15rem;
		padding: 0.35rem 0;
		background: #fff;
		border: 1px solid var(--e-global-color-filo, #e2e5e9);
		/* Ombra appena accennata: serve a staccare il pannello dal
		   contenuto, non a farsi notare. */
		box-shadow: 0 8px 24px rgba(13, 6, 8, 0.08);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 120ms;
	}

	/* `focus-within` tiene aperta la tendina mentre ci si muove dentro da
	   tastiera: senza, il primo Tab la chiude e le sottovoci diventano
	   irraggiungibili. */
	.fsgb-navigazione__voci > li:hover > .sub-menu,
	.fsgb-navigazione__voci > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Le ultime voci aprono verso sinistra: allineate a sinistra come le
	   altre, il pannello uscirebbe dal bordo destro della finestra —
	   misurato, «Arte e Media» sforava di quarantacinque pixel. */
	.fsgb-navigazione__voci > li:nth-last-child(-n+2) .sub-menu {
		left: auto;
		right: -0.9rem;
	}

	/* Una fascia invisibile sotto la voce: senza, spostando il mouse verso
	   la tendina si attraversa un vuoto di qualche pixel e il pannello si
	   chiude in faccia. */
	.fsgb-navigazione__voci > li:has(.sub-menu)::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 0.9rem;
	}

	.fsgb-navigazione .sub-menu a {
		display: block;
		padding: 0.5rem 1.1rem;
		text-transform: none;
		letter-spacing: 0;
		font-size: 0.8125rem;
		font-weight: 500;
	}

	.fsgb-navigazione .sub-menu a:hover,
	.fsgb-navigazione .sub-menu a:focus-visible {
		background: var(--e-global-color-nebbia, #eef2f5);
		color: var(--e-global-color-primary, #86162b);
	}
}

/* Sotto i 1100px il menu è già una colonna: le sottovoci restano visibili e
   rientrate. Nascondere due livelli dietro due tocchi, su un menu di sedici
   voci, serve solo a far perdere le persone. */
@media (max-width: 1100px) {
	.fsgb-navigazione .sub-menu a {
		padding-left: 1.25rem;
		text-transform: none;
		letter-spacing: 0;
		font-weight: 500;
		color: var(--e-global-color-grigio, #5f6368);
	}

	.fsgb-navigazione .sub-menu li {
		border-top: 1px solid var(--e-global-color-filo, #e2e5e9);
	}
}

/* --- miniatura nell'elenco notizie ---
 *
 * Aggiunta dopo aver ripristinato le immagini in evidenza: il 96% degli
 * articoli ne ha una, quindi l'elenco di solo testo era una rinuncia, non
 * una scelta. Sta fra data e titolo: l'elenco resta scorribile per data —
 * che è come si cerca una notizia in un archivio di 256 — e guadagna il peso
 * visivo che gli mancava.
 *
 * È nascosta agli screen reader e sottratta al percorso di tabulazione: il
 * titolo accanto porta allo stesso posto, e farlo annunciare due volte è
 * rumore. */

.fsgb-notizia__miniatura {
	display: block;
	line-height: 0;
}

.fsgb-notizia__miniatura img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--e-global-color-filo, #e2e5e9);
	transition: opacity 160ms ease-out;
}

.fsgb-notizia:hover .fsgb-notizia__miniatura img { opacity: 0.9; }

/* Il segnaposto non è una fotografia: non si scurisce al passaggio. */
.fsgb-notizia:hover .fsgb-notizia__miniatura--vuota img { opacity: 1; }



/* --- fascia fotografica di apertura pagina ---
 *
 * A tutta larghezza sotto il menu, bassa: è un'intestazione, non
 * l'apertura della home. La fotografia è lo sfondo della sezione (dal
 * generatore, `fascia()`), con una velatura scura dal basso perché
 * occhiello e titolo bianchi si leggano su qualsiasi immagine. Il titolo
 * sta qui e non si ripete sotto. */

.fascia-pagina {
	min-height: clamp(200px, 24vw, 300px);
}

/* Il testo sta in fondo alla fascia, a sinistra. */
.fascia-pagina > .elementor-container { align-items: flex-end; }

.fascia-pagina .elementor-column > .elementor-widget-wrap {
	align-content: flex-end;
}

/* La dorsale sopra la fotografia: bianca, come il testo. */
.dorsale--chiara { border-left-color: #fff; }

.fascia-pagina .elementor-heading-title,
.fascia-pagina h1 {
	color: #fff;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	text-shadow: 0 1px 2px rgba(13, 6, 8, 0.25);
}

/* La vecchia fascia solo fotografica, per le pagine che qualcuno avesse
   composto così dall'editor. */
.banner-pagina .elementor-widget-image { margin: 0; }

.banner-pagina img {
	width: 100%;
	aspect-ratio: 3 / 1;
	object-fit: cover;
	object-position: center 40%;
	display: block;
	background: var(--e-global-color-filo, #e2e5e9);
}

/* ═══ angoli ═══════════════════════════════════════════════════════════
 *
 * Tre misure sole, non una per elemento. Un raggio piccolo ammorbidisce
 * senza togliere serietà: sopra i 12px un ente pubblico comincia a
 * sembrare un'app di consegne.
 *
 * Restano squadrate due cose, di proposito: la fascia fotografica e
 * l'apertura della home. Toccano i bordi dello schermo, e un angolo
 * arrotondato contro il bordo lascia due spicchi di fondo che sembrano un
 * errore di caricamento. */

:root {
	--raggio-tasto: 6px;
	--raggio-scheda: 10px;
	--raggio-minimo: 4px;
}

/* --- tasti e campi ---
 * Il raggio dei tasti Elementor sta nel kit, non qui: è un globale, e
 * cambiarlo lì lo propaga anche ai moduli e ai widget futuri. Qui restano
 * i tasti del tema e i campi dei moduli, che il kit non tocca. */

.fsgb-menu-tasto,
.fsgb-archivio .page-numbers,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	border-radius: var(--raggio-tasto);
}

.elenco-documenti .tipo { border-radius: var(--raggio-minimo); }

/* --- immagini dentro il contenuto ---
 * Tutte quelle che stanno in una griglia o in una scheda, cioè quelle che
 * hanno un bordo visibile contro il fondo bianco. */

.elementor-widget-image-box .elementor-image-box-img img,
.galleria .elementor-widget-image img,
.fsgb-progetto .elementor-widget-image img,
.fsgb-galleria img,
.fsgb-notizia__miniatura img,
.fsgb-articolo__apice img,
.fsgb-articolo__testo img {
	border-radius: var(--raggio-scheda);
}

/* --- pannelli --- */

.avviso-revisione,
.fsgb-navigazione .sub-menu {
	border-radius: var(--raggio-scheda);
}

/* Il sotto-menu è un pannello sospeso: senza ritaglio gli angoli delle
   voci in cima e in fondo sporgono dal bordo arrotondato. */
.fsgb-navigazione .sub-menu { overflow: hidden; }

/* --- i tre tasti dell'apertura, come una serie ---
 *
 * Le colonne di Elementor sono 33/33/34 e i tasti si dimensionano sul testo:
 * risultato, tre larghezze diverse e — quando l'etichetta più lunga va a capo
 * — tre altezze diverse. Tre azioni dello stesso rango devono avere lo stesso
 * ingombro, altrimenti la differenza si legge come una gerarchia che non c'è.
 */

.apertura-foto .elementor-inner-section .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 3.5rem;
	text-align: center;
}

/* Da tablet in su i tasti stanno in fila e devono pareggiare fra loro.
 * Sotto i 768px Elementor impila le colonne a larghezza piena: lì basta il
 * `width: 100%` qui sopra, mentre un `flex: 1 1 0` li rimetterebbe in riga
 * schiacciati. */

@media (min-width: 768px) {
	.apertura-foto .elementor-inner-section > .elementor-container > .elementor-column {
		flex: 1 1 0;
		width: auto;
		max-width: 17rem;
	}

	/* Elementor impila i widget in cima alla colonna: senza questo il tasto
	 * resta alto quanto il suo testo, e quello che va a capo sporge di una
	 * riga. Così l'altezza la detta il più alto, oggi e dopo un cambio di
	 * etichetta. */
	.apertura-foto .elementor-inner-section .elementor-widget-wrap { align-content: stretch; }

	.apertura-foto .elementor-inner-section .elementor-widget-button,
	.apertura-foto .elementor-inner-section .elementor-widget-button > .elementor-widget-container {
		display: flex;
		width: 100%;
	}
}

/* ═══ movimento ════════════════════════════════════════════════════════
 *
 * Le animazioni d'ingresso sono quelle di Elementor, impostate elemento
 * per elemento nei generatori (bin/costruisci-home.py e
 * bin/costruisci-pagine.py): chi compone le pagine le vede e le governa
 * dal pannello. Qui restano due cose sole: l'avvicinamento delle fotografie
 * al passaggio del mouse, che è stile e non ingresso, e la regola per chi
 * ha chiesto meno movimento.
 */

/* --- fotografie delle schede: avvicinamento al passaggio del mouse ---
 * `transform` e non `width`: la seconda ridisegnerebbe la pagina a ogni
 * fotogramma. Il ritaglio tiene l'immagine dentro l'angolo arrotondato. */

.fsgb-progetto .elementor-widget-image {
	overflow: hidden;
	border-radius: var(--raggio-scheda, 10px);
}

.fsgb-progetto .elementor-widget-image img {
	transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            opacity 180ms ease-out;
}

.fsgb-progetto:hover .elementor-widget-image img {
	transform: scale(1.04);
}

/* --- chi ha chiesto meno movimento ---
 *
 * Non è una gentilezza: per chi soffre di disturbi vestibolari
 * un'animazione può provocare nausea e vertigini. Elementor da solo non
 * se ne occupa — tiene l'elemento invisibile finché non entra nello
 * schermo e poi lo anima. Qui si mostra tutto subito, e fermo. */

@media (prefers-reduced-motion: reduce) {
	.elementor-invisible { visibility: visible; }
	.animated { animation: none !important; }

	.fsgb-progetto .elementor-widget-image img { transition: none; }
	.fsgb-progetto:hover .elementor-widget-image img { transform: none; }
}

/* ------------------------------------------------------------------ *
 * Indirizzo non trovato
 * ------------------------------------------------------------------ */

.fsgb-errore {
	padding-block: clamp(3rem, 2rem + 4vw, 6rem) 0;
}

.fsgb-errore__apertura {
	max-width: 40rem;
}

.fsgb-errore__apertura .entry-title {
	margin: 0.35rem 0 0;
}

.fsgb-errore__spiegazione {
	margin-top: 1rem;
}

.fsgb-errore__azioni {
	margin-top: 1.75rem;
}

.fsgb-errore__griglia {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 2.5rem;
	margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
	padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
	border-top: 1px solid var(--e-global-color-filo, #e2e5e9);
	max-width: 52rem;
}

/* Il modulo di ricerca è quello condiviso (.fsgb-cerca__modulo, sotto
   «la ricerca»); qui solo lo stacco dall'occhiello. */
.fsgb-errore__blocco .fsgb-cerca__modulo { margin-top: 1rem; }

.fsgb-errore__sezioni {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.fsgb-errore__sezioni li + li {
	margin-top: 0.4rem;
}

.fsgb-errore__sezioni a {
	color: var(--e-global-color-text, #0d0608);
	text-decoration: none;
}

.fsgb-errore__sezioni a:hover,
.fsgb-errore__sezioni a:focus-visible {
	color: var(--e-global-color-primary, #86162b);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ═══ fasce a fondo pieno ══════════════════════════════════════════════
 *
 * Due bande a tutta larghezza spezzano la home: il vermiglio sul servizio
 * civile, il quasi-nero sulle notizie. Dentro ci finiscono elementi
 * disegnati per il fondo bianco — filetti grigi, date grigie, tasti
 * vermigli — che lì sopra sbiadiscono o spariscono del tutto. Vanno
 * rivestiti tutti, non solo il testo: un filetto grigio chiaro su
 * quasi-nero è un filetto che non c'è.
 *
 * Contrasti misurati, bianco su fondo:
 *   #0D0608  19,6:1   ampiamente sopra il minimo
 *   #D43F37   4,6:1   sopra il 4,5:1 richiesto, ma senza margine — per
 *                     questo sul vermiglio il testo resta bianco pieno,
 *                     senza trasparenze che lo porterebbero sotto soglia.
 */

.fascia-vermiglio,
.fascia-scura {
	color: #fff;
}

/* Solo i paragrafi: i titoli di Elementor NON si colorano da qui. Ogni
   widget Titolo porta un colore globale scritto nel dato, e la regola
   per-elemento che ne esce pareggia questa e vince per ordine di carico.
   Il bianco dei titoli sulle fasce sta in costruisci-home.py. */
.fascia-vermiglio p,
.fascia-vermiglio .fsgb-notizia__sommario,
.fascia-scura p {
	color: #fff;
}

.fascia-scura .fsgb-notizia__sommario {
	color: rgba(255, 255, 255, 0.82);
}

/* L'occhiello e il suo filo: il grigio e il bordeaux qui non si vedono.
 *
 * Sul vermiglio il bianco resta pieno. Al primo tentativo era all'85%, come
 * sul nero, e sembrava una scelta di garbo: misurato dà 3,7:1 contro il
 * 4,5:1 che serve a un testo di dodici pixel. Su un fondo che parte da
 * 4,6:1 non c'è margine da spendere in trasparenze — è il prezzo di un
 * colore acceso, e si paga sui dettagli piccoli. */
/* Il colore del testo arriva dal globale «Bianco», scritto nel widget da
   costruisci-home.py: la regola per-elemento di Elementor pareggia in
   specificità qualunque cosa si scriva qui, e vince perché caricata dopo.
   Qui resta il filo, che è roba di questo foglio. */
.fascia-vermiglio .occhiello { border-left-color: rgba(255, 255, 255, 0.6); }
.fascia-scura .occhiello { border-left-color: rgba(255, 255, 255, 0.55); }

/* Elenco notizie: filetti, date e titoli. */
.fascia-vermiglio .fsgb-notizia,
.fascia-vermiglio .fsgb-notizie .fsgb-notizia:last-child,
.fascia-scura .fsgb-notizia,
.fascia-scura .fsgb-notizie .fsgb-notizia:last-child {
	border-color: rgba(255, 255, 255, 0.25);
}

/* Sulla fascia scura l'etichetta resta com'è: vermiglio pieno sul nero. Sul
   vermiglio si invertirebbe in nulla — bianca con testo vermiglio, se mai
   l'elenco tornasse lì. */
.fascia-vermiglio .fsgb-notizia__data {
	background: #fff;
	color: var(--e-global-color-secondary, #d43f37);
}

/* Il titolo si sottolinea in bianco: la riga bordeaux del fondo chiaro
   sparirebbe sul vermiglio e si spegnerebbe sul nero. */
.fascia-vermiglio .fsgb-notizia__titolo a,
.fascia-scura .fsgb-notizia__titolo a {
	color: #fff;
	background-image: linear-gradient(#fff, #fff);
}

.fascia-vermiglio .fsgb-notizia__titolo a:hover,
.fascia-vermiglio .fsgb-notizia__titolo a:focus-visible,
.fascia-scura .fsgb-notizia__titolo a:hover,
.fascia-scura .fsgb-notizia__titolo a:focus-visible {
	color: #fff;
}

/* I collegamenti in fondo alla fascia («Tutte le notizie»): il bordeaux
   del kit su questi fondi non si legge. */
.fascia-vermiglio a,
.fascia-scura a {
	color: #fff;
}

.fascia-vermiglio a:focus-visible,
.fascia-scura a:focus-visible {
	outline-color: #fff;
}

/* La miniatura ha un fondo grigio chiaro mentre carica: su questi fondi
   lampeggerebbe. */
.fascia-vermiglio .fsgb-notizia__miniatura img,
.fascia-scura .fsgb-notizia__miniatura img {
	background: rgba(255, 255, 255, 0.15);
}

/* --- fascia centrata (servizio civile in home) ---
 *
 * L'occhiello perde il filo a sinistra: centrato, un filo laterale segnala
 * un allineamento che non c'è. I due tasti stanno in colonne 50/50 di
 * Elementor: da tablet in su le colonne si stringono sul contenuto e il
 * contenitore le centra, così i tasti sono una coppia e non due estremi.
 * Sotto i 768px Elementor le impila e ogni tasto è già centrato dal dato. */

.fascia-centrata .occhiello {
	border-left: 0;
	padding-left: 0;
	text-align: center;
}

@media (min-width: 768px) {
	.fascia-centrata .elementor-inner-section > .elementor-container {
		justify-content: center;
	}
	.fascia-centrata .elementor-inner-section > .elementor-container > .elementor-column {
		width: auto;
		flex: 0 0 auto;
	}
}

/* ------------------------------------------------------------------ *
 * Barra laterale — le pagine di sezione e gli articoli collegati
 *
 * Accanto al contenuto — composto in Elementor per le pagine, il template
 * del tema per gli articoli — stanno le pagine della sezione e le ultime
 * notizie (template-parts/lato.php). Dove compare lo decide la redazione
 * da Aspetto → Personalizza. La fascia fotografica in apertura resta a
 * tutta larghezza: la barra parte dal titolo, sotto.
 *
 * Il trucco è uno solo. Il contenitore di Elementor viene sciolto
 * (display: contents), così le sue sezioni diventano figlie dirette della
 * griglia: la fascia occupa tutta la riga, le altre sezioni la colonna del
 * testo, la barra la colonna a destra. Le righe non hanno spazio fra loro:
 * ce l'hanno già le sezioni, con il loro riempimento.
 *
 * Le misure sono quelle della cornice del sito — 78rem in tutto, con lo
 * stesso margine di .fsgb-contenitore — così testo e barra si allineano
 * alla testata.
 *
 * Sotto i 900px — dove anche la dorsale rientra — la griglia è a una
 * colonna e la barra va in fondo, dopo il contenuto. Sopra, cinque
 * colonne: margine, testo, vuoto, barra, margine.
 * ------------------------------------------------------------------ */

.fsgb-con-lato {
	--margine: clamp(1rem, 0.5rem + 2vw, 2rem);
	--lato: 19rem;
	--vuoto: 3.5rem;
	/* Il riempimento in cima alle sezioni, dal kit di Elementor: la barra
	   parte alla stessa altezza dell'occhiello. */
	--sopra: 70px;
	display: grid;
	grid-template-columns:
		minmax(var(--margine), 1fr)
		minmax(0, calc(78rem - 2 * var(--margine)))
		minmax(var(--margine), 1fr);
}

.fsgb-con-lato > .elementor { display: contents; }

.fsgb-con-lato > .elementor > .elementor-top-section { grid-column: 2; }
.fsgb-con-lato > .elementor > .banner-pagina,
.fsgb-con-lato > .elementor > .fascia-pagina { grid-column: 1 / -1; }

.fsgb-lato {
	grid-column: 2;
	padding-bottom: var(--sopra);
}

@media (min-width: 900px) {
	.fsgb-con-lato {
		grid-template-columns:
			minmax(var(--margine), 1fr)
			minmax(0, calc(78rem - 2 * var(--margine) - var(--vuoto) - var(--lato)))
			var(--vuoto)
			var(--lato)
			minmax(var(--margine), 1fr);
	}

	/* Dalla prima riga in giù, per un numero di righe che nessuna pagina
	   raggiunge: le righe in più restano vuote e alte zero. Sono la sola
	   maniera, in una griglia a righe implicite, di dire «fino in fondo». */
	.fsgb-lato {
		grid-column: 4;
		grid-row: 1 / span 60;
		/* Più i 10px con cui la colonna di Elementor stacca l'occhiello dal
		   bordo della sezione: così i due occhielli stanno sulla stessa riga. */
		padding-top: calc(var(--sopra) + 10px);
		padding-bottom: 0;
	}

	/* Se la pagina apre con la fascia fotografica, la barra parte dalla
	   riga sotto. Nella prima riga la fascia deve essere sola. */
	.fsgb-con-lato:has(> .elementor > .banner-pagina) .fsgb-lato,
	.fsgb-con-lato:has(> .elementor > .fascia-pagina) .fsgb-lato {
		grid-row: 2 / span 60;
	}

	/* La barra segue lo scorrimento finché il contenuto è più lungo di lei. */
	.fsgb-lato__interno {
		position: sticky;
		top: 1.5rem;
	}

	/* Un articolo non ha né fascia né sezioni di Elementor: la barra parte
	   dalla prima riga, alla stessa altezza della data. */
	.fsgb-con-lato--articolo .fsgb-lato { padding-top: 0; }
}

/* L'articolo con la barra: il testo nella colonna, che porta già i
   margini del contenitore. Hello stringe `main` a 1140px negli articoli
   (`body:not([class*="elementor-page-"]) .site-main`): con la griglia
   dentro, la barra finirebbe stretta e fuori asse rispetto alla testata.
   Stesso peso di quella regola più uno, e il limite se ne va. */
.fsgb-con-lato__articolo { grid-column: 2; }

body main.fsgb-articolo:has(> .fsgb-con-lato) {
	max-width: none;
}

/* Le colonne di Elementor portano 10px di riempimento per fare da grondaia
   fra loro: sul bordo esterno, però, staccano il testo dalla testata. */
.fsgb-con-lato .elementor-top-section > .elementor-container > .elementor-column:first-child > .elementor-element-populated { padding-left: 0; }
.fsgb-con-lato .elementor-top-section > .elementor-container > .elementor-column:last-child > .elementor-element-populated { padding-right: 0; }

/* Una sezione con lo sfondo, dentro la colonna, è un pannello: gli angoli
   arrotondati delle schede, e il testo non può stare attaccato al suo
   bordo. Elementor segnala lo sfondo in data-settings, ed è la sola
   traccia che lascia nel markup. A tutta larghezza, fuori dalla colonna,
   i pannelli restano squadrati: toccano i bordi dello schermo. */
.fsgb-con-lato .elementor-top-section[data-settings*="background_background"]:not(.fascia-pagina) {
	border-radius: var(--raggio-scheda);
	overflow: hidden;
}

.fsgb-con-lato .elementor-top-section[data-settings*="background_background"]:not(.fascia-pagina) > .elementor-container {
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.fsgb-lato__blocco + .fsgb-lato__blocco { margin-top: 3rem; }

/* I titoli dei blocchi sono etichette, non occhielli: grigie, senza
   l'asta. L'asta vermiglia, qui, la porta la voce della pagina corrente —
   con la stessa asta sul titolo i due segni si confondevano, e l'etichetta
   sembrava una terza voce del menu.

   È un h2 per l'ordine dei titoli. Elemento e due classi, perché la regola
   del kit — `.elementor-kit-48 h2`, in Fraunces e grande — batte la sola
   classe. */
.fsgb-lato h2.fsgb-lato__titolo {
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
	font-family: 'Archivo', sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--e-global-color-grigio, #5f6368);
}

/* Le pagine della sezione: un elenco appeso a un filo, come la dorsale
   del sito, in minuscolo e senza righe fra le voci. Era un riquadro pieno
   di vermiglio: in una colonna pesava più di tutto il resto della pagina.
   La pagina corrente è in bordeaux e porta l'asta sul filo. */
.fsgb-lato__voci {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1rem;
	border-left: 1px solid var(--e-global-color-filo, #e2e5e9);
}

.fsgb-lato__voci li { position: relative; }

.fsgb-lato__voci a {
	display: block;
	padding: 0.4rem 0;
	font-family: 'Archivo', sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	color: var(--e-global-color-text, #0d0608);
}

.fsgb-lato__voci a:hover,
.fsgb-lato__voci a:focus-visible {
	color: var(--e-global-color-primary, #86162b);
}

.fsgb-lato__voci .corrente a {
	color: var(--e-global-color-primary, #86162b);
	font-weight: 600;
}

/* L'asta copre il filo per l'altezza della voce. */
.fsgb-lato__voci .corrente::before {
	content: '';
	position: absolute;
	left: calc(-1rem - 2px);
	top: 0.35rem;
	bottom: 0.35rem;
	width: 3px;
	background: var(--e-global-color-primary, #86162b);
}

/* Le notizie nella barra: miniatura piccola, data e titolo, senza
   sommario — in 19rem il titolo basta. La miniatura resta perché senza
   l'elenco sembrava monco rispetto a quello della pagina. */
.fsgb-lato .fsgb-notizia { gap: 0.25rem 0.9rem; padding-block: 0.9rem; flex-wrap: nowrap; }
.fsgb-lato .fsgb-notizia__lato { flex: 0 0 4.5rem; }
.fsgb-lato .fsgb-notizia__testo { flex: 1 1 0; min-width: 0; }
.fsgb-lato .fsgb-notizie .fsgb-notizia__titolo { font-size: 1rem; }
.fsgb-lato .fsgb-notizia__data { margin-bottom: 0.4rem; font-size: 0.625rem; }

.fsgb-lato__tutte {
	display: inline-block;
	margin-top: 1.1rem;
	font-family: 'Archivo', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #86162b);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.fsgb-lato__tutte:hover,
.fsgb-lato__tutte:focus-visible { color: var(--e-global-color-text, #0d0608); }