/*
Theme Name: I Santi
Theme URI: https://sanegidiosanpio.it
Author: MOMA Comunicazione
Author URI: https://momacomunicazione.it
Description: Block theme per A.S.D. Sant'Egidio e San Pio X, Mantova. Nessun JavaScript, nessuna dipendenza esterna.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Version: 2.18.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: i-santi
Tags: block-theme, sports, one-column, custom-colors
*/

/* =========================================================================
   I Santi, stili del tema.
   Regola di base: si animano solo transform e opacity, mai proprietà che
   ricalcolano il layout. Ogni animazione si azzera con prefers-reduced-motion.
   ========================================================================= */

/* --- Le misure del testo, in un posto solo -------------------------------

   Le cinque misure principali stanno in theme.json (small 1rem, medium
   1.125rem, large 1.5rem, x-large 2rem, xx-large 3rem) e si usano dal markup
   con le classi has-*-font-size. Questo blocco copre l'unico caso che
   theme.json non sa esprimere: il testo di servizio degli elementi del tema,
   cioe' didascalie, note, citazioni, etichette.

   Perche' esiste. Al controllo del 25/09/2026 quel testo era dichiarato
   diciotto volte con quattordici misure diverse fra .85rem e 1.08rem: valori
   che a schermo non si distinguono fra loro, ma che nessuno avrebbe mai
   riallineati perche' erano sparsi in tutto il foglio. Peggio, tredici di
   quelle scendevano sotto i 16px, che questo progetto vieta.

   Quindi: **il testo di servizio non si dichiara in rem, si dichiara con
   questo token.** Se un giorno va cambiato, si cambia qui e cambia ovunque. */

/* Le misure "small" e "medium" che arrivano davvero in pagina sono quelle
   predefinite di WordPress, non quelle del theme.json: con il theme.json
   versione 3 i preset di WordPress vincono su quelli del tema con lo stesso
   nome. Il sito e' stato disegnato su queste, quindi non si cambiano: si
   alzano solo i minimi, che sul telefono davano 13px e 14,5px (controllo
   del 13/11/2026). Su body e non su :root perche' gli stili globali di
   WordPress dichiarano le stesse variabili su :root, dopo questo foglio. */
body {
	--wp--preset--font-size--small: 1rem;
	--wp--preset--font-size--medium: clamp(16px, 0.875rem + ((1vw - 3.2px) * 0.698), 20px);
}

:root {
	/* 16px: il minimo di progetto, non una preferenza. Sotto questa misura
	   non scende niente che sia destinato a essere letto. */
	--santi-testo-servizio: 1rem;

	/* 14px, unica deroga, decisa il 22/09/2026 e limitata alla riga di consenso
	   privacy del modulo contatti. Non si estende ad altro. */
	--santi-testo-consenso: .875rem;
}

/* Nel tema larghezza e padding non si sommano mai: senza questo, un blocco
   largo "100% meno i margini" con un padding proprio finisce fuori dallo
   schermo di quel padding, e su telefono il testo si vede tagliato a destra.
   WordPress lo dichiara solo sui propri blocchi, non su quelli del tema. */
[class*="santi-"],
[class*="santi-"]::before,
[class*="santi-"]::after { box-sizing: border-box; }

/* --- Intestazione ------------------------------------------------------- */

/* La barra sta sopra l'hero: lo scudo sborda in basso senza spingere nulla,
   cosi' l'hero non salta quando la pagina finisce di caricare. */
.santi-header {
	position: relative;
	z-index: 10;
	padding-block: 0.7rem;
}

/* Su telefono la barra resta in alto e la pagina le scorre sotto: il menu e
   lo scudo sono l'unico modo per cambiare pagina, e dopo due schermate di
   lettura tornare in cima per raggiungerli e' una richiesta di troppo.
   Lo sfondo e' navy pieno, quindi il contenuto non traspare.

   La regola sta sul contenitore del template part, non su .santi-header:
   un elemento sticky resta fisso solo dentro i confini del proprio genitore,
   e li' il genitore e' alto quanto l'header stesso. Messo su .santi-header
   l'effetto era nullo, perche' non aveva nessuno spazio in cui scorrere. */
@media (max-width: 767px) {
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 30;
	}
}

.santi-header__interno {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: min(1180px, 100% - 2.5rem);
	margin-inline: auto;
	min-height: 56px;
}

.santi-header__scudo {
	display: block;
	flex: none;
	line-height: 0;
}

.santi-header__scudo img {
	display: block;
	width: 46px;
	height: auto;
	transition: transform .3s ease;
}

/* Sottolineatura al passaggio del mouse: quella normale del browser,
   solo gialla come nello scudo invece che bianca. */
.santi-nav a { text-decoration: none; }

.santi-nav a:hover,
.santi-nav a:focus-visible {
	text-decoration: underline;
	text-decoration-color: #FCCE3C;
	text-underline-offset: 0.35em;
}

/* I sottomenu passano sopra lo scudo, non sotto. */
.santi-nav .wp-block-navigation__submenu-container {
	z-index: 30;
	border: 0;
	padding-block: 0.35rem;
	box-shadow: 0 12px 28px rgba(14, 35, 56, .3);
}

/* Da 900px in su lo scudo diventa grande e si appoggia sull'hero. Il link
   tiene l'altezza della barra e l'immagine esce dal basso: cosi' lo spazio
   occupato nel menu resta quello della barra e le voci non ci finiscono mai
   sotto, per quante ne aggiungeranno. */
@media (min-width: 900px) {
	.santi-header__interno { min-height: 74px; }

	.santi-header__scudo {
		position: relative;
		width: clamp(86px, 8vw, 106px);
		height: 74px;
	}

	.santi-header__scudo img {
		position: absolute;
		top: -2px;
		left: 0;
		width: 100%;
		filter: drop-shadow(0 8px 16px rgba(14, 35, 56, .5));
	}

	.santi-header__scudo:hover img { transform: translateY(3px); }

	.santi-nav > .wp-block-navigation__container { justify-content: flex-end; }
}

/* Instagram in coda al menu, da tablet in su.

   Su telefono resta fuori di proposito: la barra ha gia' scudo e menu, il
   profilo e' comunque nel footer, e in fondo allo schermo ci sono gia' due
   azioni fisse. Una terza figura in alto toglierebbe spazio al menu senza
   aggiungere una strada nuova.

   Il menu prende "margin-left: auto", non "flex: 1". Sembra equivalente e non
   lo e': con flex:1 il menu si allarga fino a riempire la barra, il suo
   contenitore interno resta invece largo quanto le voci, e la regola che le
   allinea a destra (piu' avanti, da 900px) si trova senza spazio su cui agire.
   Risultato: voci appiccicate allo scudo a sinistra e icona isolata dall'altra
   parte della barra. Il margine automatico invece assorbe lo spazio libero
   senza gonfiare il menu, quindi voci e icona restano insieme a destra.

   L'icona sta un gradino sotto le voci: 20px contro i 22 di prima e opacita'
   ridotta. E' un rimando, non una sesta voce di menu, e a piena forza se la
   prendeva. */
.santi-header__social { display: none; }

@media (min-width: 768px) {
	.santi-header__interno > .santi-nav { margin-left: auto; }

	.santi-header__social {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		/* 44x44 anche se il disegno e' 20: e' l'area tap minima di progetto,
		   e vale per il mouse quanto per il dito. */
		width: 44px;
		height: 44px;
		color: #fff;
		opacity: .78;
		transition: color .18s ease, opacity .18s ease;
	}

	.santi-header__social svg { width: 20px; height: 20px; }

	.santi-header__social:hover,
	.santi-header__social:focus-visible {
		color: var(--wp--preset--color--giallo);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.santi-header__scudo img { transition: none; }
	.santi-header__scudo:hover img { transform: none; }
	.santi-header__social { transition: none; }
}
/* --- Hero --------------------------------------------------------------- */

.santi-hero.wp-block-cover {
	min-height: 78svh;
	/* Il contenuto sta in basso a sinistra, non al centro: il blocco cover
	   di WordPress centra tutto, qui serve l'opposto. */
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0;
}
@supports not (min-height: 1svh) {
	.santi-hero.wp-block-cover { min-height: 78vh; }
}
@media (min-width: 768px) {
	.santi-hero.wp-block-cover { min-height: min(80vh, 720px); }
}

/* Il gradiente doppio, verticale per la leggibilità e orizzontale per
   staccare il testo dalla foto. Sostituisce l'overlay piatto del blocco. */
.santi-hero .wp-block-cover__background {
	background:
		linear-gradient(to top, rgba(14, 35, 56, .94) 4%, rgba(14, 35, 56, .74) 34%, rgba(24, 55, 84, .34) 68%, rgba(24, 55, 84, .52) 100%),
		linear-gradient(to right, rgba(14, 35, 56, .72) 0%, rgba(14, 35, 56, .18) 58%, rgba(14, 35, 56, 0) 100%);
	/* Il velo resta al 50% qualunque cosa scriva il blocco: il colore navy
	   del blocco arriva con !important e a opacita' piena copre tutta la
	   foto. Prima il 50% lo dava la classe has-background-dim-50, che
	   WordPress toglie quando salva la copertina dall'editor (50 e' il suo
	   valore predefinito) e la foto spariva. */
	opacity: .5 !important;
}

.santi-hero .wp-block-cover__inner-container {
	/* Il contenuto dell'hero sta sulla colonna del resto del sito (1180px
	   centrati), non ancorato al bordo dello schermo: l'hero e' il primo
	   blocco che si vede e detta il filo verticale: se parte da un'altra
	   parte, tutto quello che viene dopo sembra rientrato. Il testo resta
	   comunque su misura corta, e' il contenitore a spostarsi. */
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: clamp(1.75rem, 5vw, 4rem) clamp(3.5rem, 7vw, 4.9rem);
	text-align: left;
}

/* I figli non devono ereditare i margini automatici del layout di WordPress:
   con quelli la riga gialla finisce centrata invece che sotto il titolo. */
.santi-hero .wp-block-cover__inner-container > * {
	margin-left: 0;
	margin-right: 0;
	/* La riga di testo resta corta: il titolo e il claim non devono allungarsi
	   fino a 1180px, che e' la misura del contenitore, non della lettura. */
	max-width: min(700px, 100%);
}

/* La foto e' quella del blocco copertina, scelta dalla libreria media: chi
   la cambia dall'editor non deve sapere nulla delle classi. */
.santi-hero .wp-block-cover__image-background {
	transform-origin: 58% 62%;
	animation: santi-kenburns 24s ease-in-out infinite alternate;
}

.santi-hero__title {
	margin: 0;
	letter-spacing: -.02em;
	animation: santi-rise .6s .05s both cubic-bezier(.22, .61, .36, 1);
}

/* La riga gialla sotto il titolo e' disegnata dal CSS, non sta nel
   contenuto: nell'editor non c'e' niente da spostare o cancellare per
   sbaglio. */
.santi-hero__title::after,
.santi-hero__rule {
	content: "";
	display: block;
	height: 5px;
	width: clamp(96px, 20vw, 168px);
	background: var(--wp--preset--color--giallo);
	margin: 1rem 0 1.1rem;
	transform-origin: left center;
	animation: santi-draw .8s .5s both cubic-bezier(.22, .61, .36, 1);
}

.santi-hero__sub {
	margin: 0 0 .6rem;
	color: rgba(255, 255, 255, .82);
	animation: santi-rise .6s .16s both cubic-bezier(.22, .61, .36, 1);
}

.santi-hero__claim {
	margin: 0 0 1.9rem;
	max-width: 34ch;
	line-height: 1.45;
	animation: santi-rise .6s .26s both cubic-bezier(.22, .61, .36, 1);
}

.santi-hero__cta {
	animation: santi-rise .6s .36s both cubic-bezier(.22, .61, .36, 1);
}

.santi-hero .wp-block-button__link {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.santi-hero .wp-block-button__link:hover { transform: translateY(-2px); }
.santi-hero .wp-block-button__link:active { transform: translateY(0); }

.santi-btn-ghost .wp-block-button__link {
	border: 2px solid rgba(255, 255, 255, .7);
	color: #fff;
	background: transparent;
}
.santi-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* --- Ogni bottone cambia colore sotto il mouse --------------------------

   theme.json definisce gia' un hover per i bottoni, ma vale solo su quelli
   che si tengono il colore di default. Quando un bottone dichiara il proprio
   sfondo, WordPress stampa la classe del colore con !important e quell'hover
   viene ignorato: il bottone restava identico e l'unico segnale era il
   cursore. Qui l'hover si ridichiara per ogni variante in uso, con lo stesso
   !important sui colori, altrimenti la regola non vince.

   Le varianti sono quattro: sfondo rosso, sfondo navy, solo contorno su fondo
   chiaro e il fantasma bianco sulle fasce scure (sopra). Aggiungendone una
   nuova, l'hover va aggiunto qui insieme al colore. */

.wp-block-button__link {
	transition: background-color .18s ease, color .18s ease, border-color .18s ease,
		transform .18s ease, box-shadow .18s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible { transform: translateY(-2px); }
.wp-block-button__link:active { transform: translateY(0); box-shadow: none; }

/* L'ombra solo sui bottoni pieni: sotto un contorno vuoto si vedrebbe il
   rettangolo d'ombra attraverso il bottone. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	box-shadow: 0 8px 18px rgba(14, 35, 56, .22);
}

.wp-block-button__link.has-rosso-background-color:hover,
.wp-block-button__link.has-rosso-background-color:focus-visible {
	background-color: #8E1F25 !important;
}

.wp-block-button__link.has-navy-background-color:hover,
.wp-block-button__link.has-navy-background-color:focus-visible {
	background-color: var(--wp--preset--color--navy-scuro) !important;
}

/* Contorno su fondo chiaro: si riempie di navy invece di limitarsi a alzarsi. */
.is-style-outline:not(.santi-btn-ghost) .wp-block-button__link:hover,
.is-style-outline:not(.santi-btn-ghost) .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--navy) !important;
	border-color: var(--wp--preset--color--navy);
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible { transform: none; }
}

@keyframes santi-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes santi-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes santi-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Parallasse: solo dove il browser lo sa fare. Altrove non esiste e nessuno
   se ne accorge. */
@supports (animation-timeline: scroll()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.santi-hero .wp-block-cover__image-background {
			animation: santi-kenburns 24s ease-in-out infinite alternate, santi-drift linear;
			animation-timeline: auto, scroll();
			animation-range: normal, 0 90vh;
		}
		@keyframes santi-drift { to { translate: 0 -7%; } }
	}
}

/* --- Sigla della home ----------------------------------------------------

   Fascia a tutta larghezza sotto l'hero. 16:9 su schermi larghi, 9:16 sui
   telefoni: la media query e' la stessa del <source> dell'immagine ferma,
   nel pattern e nel contenuto della pagina Home, se ne cambi una cambia
   anche le altre.

   Solo la larghezza, niente "orientation: portrait". Il 01/11/2026 su
   iPhone, nel browser interno di WhatsApp, tornando in home dal logo
   partiva il video 16:9 dentro il riquadro 9:16, ingrandito e tagliato:
   il browser sceglie il <source> una volta sola, all'apertura, e durante
   l'animazione di apertura della pagina la finestra puo' risultare per un
   istante piu' larga che alta. La larghezza non ha questo problema.

   "cover": su un monitor largo e basso la fascia e' tenuta all'altezza
   dello schermo, e con "contain" il 16:9 si restringeva lasciando due
   bande navy ai lati (01/11/2026). Con "cover" riempie la fascia e perde
   un po' in alto e in basso, dove la sigla non ha scritte. Il timore del
   file sbagliato non c'e' piu': i due video li sceglie il CSS, sotto. */
.santi-sigla {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 100svh;
	overflow: hidden;
	background: var(--wp--preset--color--navy);
}
@supports not (height: 1svh) {
	.santi-sigla { max-height: 100vh; }
}
/* Su telefono niente tetto all'altezza dello schermo: con "contain" il
   video verticale si restringerebbe e lascerebbe due bordi navy ai lati.
   La fascia supera lo schermo di una trentina di pixel, scorrendo non si
   nota. */
@media (max-width: 767px) {
	.santi-sigla { aspect-ratio: 9 / 16; max-height: none; }
}

.santi-sigla__poster img,
.santi-sigla__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.santi-sigla__video { background: var(--wp--preset--color--navy); }

/* Due video, uno per formato, e il CSS mostra quello giusto. A differenza
   di <source media>, che il browser valuta una volta all'apertura della
   pagina, la media query qui si riapplica sempre: tornando in home su
   iPhone non puo' piu' comparire il 16:9 nel riquadro verticale. */
.santi-sigla__video--verticale { display: none; }
@media (max-width: 767px) {
	.santi-sigla__video--verticale { display: block; }
	.santi-sigla__video--orizzontale { display: none; }
}

/* Con il movimento ridotto resta solo il primo fotogramma, fermo. */
@media (prefers-reduced-motion: reduce) {
	.santi-sigla__video--verticale,
	.santi-sigla__video--orizzontale { display: none; }
}

/* --- Nastro sponsor ----------------------------------------------------- */

/* =========================================================================
   Fascia sponsor, sopra il footer.

   Sta fuori dal navy del footer: dentro, i loghi finivano nello stesso
   blocco di contatti e dati fiscali e si leggevano come un dettaglio del
   piede di pagina.

   Ogni logo sta su una scheda bianca. Non e' decorazione: i marchi arrivano
   disegnati per fondi diversi, uno bianco per sfondi scuri, uno a colori, e
   su un fondo unico meta' di loro sparirebbe. La scheda da' a tutti il fondo
   per cui sono stati fatti, e tiene la fila ordinata anche con loghi di
   proporzioni diverse.

   Il nastro scorre da solo, lentamente, e si ferma quando il mouse entra
   nella fascia: un elenco fermo di sei loghi e' una didascalia, un nastro
   che si muove si guarda. Per il ciclo continuo la sequenza e' ripetuta due
   volte e l'animazione trasla esattamente della meta'.
   ========================================================================= */

/* Titolo come tutte le altre sezioni: stessa dimensione, a sinistra, con il
   filetto sotto. L'avevo tenuto piu' piccolo e centrato per non dare alla
   fascia il peso di una sezione vera, ma una fascia che deve far vedere gli
   sponsor e si presenta con meno voce delle altre lavora contro se stessa. */
/* Tutta la fascia a sinistra, esplicito su ogni pezzo: titolo, filetto e
   nota. Il layout constrained di WordPress centra con margin auto
   !important qualunque blocco abbia una larghezza propria, e basta una
   riga di eredita' per rimettere in mezzo uno dei tre e sfalsare gli altri. */
.santi-sponsor { text-align: left; }

/* Il contenuto sta in una colonna da 1180px centrata, la stessa del resto
   del sito: la fascia e' larga quanto la finestra, e allineare a sinistra
   dentro di essa incollava titolo e nota al bordo dello schermo, fuori dal
   filo verticale su cui sta tutto il resto della pagina. */
.santi-sponsor__interno {
	max-width: 1180px;
	margin-inline: auto;
}

.santi-sponsor__titolo {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: .7rem;
	margin-left: 0 !important;
	margin-right: auto !important;
	text-align: left;
}

.santi-sponsor__titolo::after { margin-inline: 0; }

.santi-sponsor__nota {
	/* !important obbligato: il layout constrained di WordPress centra con
	   "margin-left: auto !important" tutto cio' che ha una larghezza propria. */
	margin: 0 auto 0 0 !important;
	max-width: 52ch;
	/* Stessa misura del testo corrente delle altre fasce. Piu' piccola sembrava
	   una didascalia e faceva leggere la fascia sponsor come un piede di pagina. */
	font-size: var(--wp--preset--font-size--medium);
	color: rgba(14, 35, 56, .7);
}

.santi-sponsor__viewport {
	overflow: hidden;
	margin-top: 2.4rem;
	/* I loghi entrano ed escono in dissolvenza invece di comparire tagliati
	   sul bordo della fascia. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	padding-block: .6rem;
}

.santi-sponsor__track {
	display: flex;
	align-items: stretch;
	gap: 1.1rem;
	width: max-content;
	animation: santi-sponsor-scorri 42s linear infinite;
}

@keyframes santi-sponsor-scorri {
	from { transform: translate3d(0, 0, 0); }
	/* meta' esatta: la seconda copia prende il posto della prima senza stacco */
	to { transform: translate3d(-50%, 0, 0); }
}

.santi-sponsor__viewport:hover .santi-sponsor__track,
.santi-sponsor__viewport:focus-within .santi-sponsor__track {
	animation-play-state: paused;
}

.santi-sponsor__card {
	flex: 0 0 auto;
	width: clamp(150px, 20vw, 208px);
	min-height: 104px;
	display: grid;
	place-items: center;
	padding: 1rem 1.3rem;
	background: #fff;
	border: 1px solid rgba(24, 55, 84, .08);
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(14, 35, 56, .05);
	text-decoration: none;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

a.santi-sponsor__card:hover,
a.santi-sponsor__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 26px rgba(14, 35, 56, .13);
	border-color: rgba(24, 55, 84, .18);
}

/* Le misure del logo stanno TUTTE nella regola piu' avanti in questo foglio
   ("Nastro sponsor"). Qui c'e' solo la resa a blocco: due regole che si
   contendono altezza e larghezza dello stesso elemento sono il modo in cui il
   logo Saviatesta era finito stirato. */
.santi-sponsor__logo { display: block; }

/* Le caselle ancora libere non sono un buco da nascondere: dicono a chi legge
   che c'e' posto, e portano ai contatti come il resto della fascia. */
.santi-sponsor__card--libera {
	background: transparent;
	border: 1px dashed rgba(24, 55, 84, .22);
	box-shadow: none;
	/* .45 dava 2,47 di contrasto sul ghiaccio, sotto la soglia di 4,5 e
	   segnalato da Lighthouse il 10/10/2026. A .72 il contrasto e' 4,9 sul
	   ghiaccio e 5,1 sul bianco: la casella regge su entrambi i fondi della
	   fascia e continua a sembrare un posto ancora libero. */
	color: rgba(24, 55, 84, .72);
	font-size: var(--santi-testo-servizio);
	letter-spacing: .02em;
}

.santi-sponsor__azione {
	margin: 2rem 0 0;
	font-size: var(--santi-testo-servizio);
	text-align: left;
}

.santi-sponsor__azione a {
	color: var(--wp--preset--color--rosso);
	font-weight: 700;
	text-underline-offset: .22em;
	transition: color .18s ease;
}

/* Era l'altra chiamata all'azione senza stato: compare su tutte le pagine, in
   fondo alla fascia sponsor, e sotto il mouse restava identica. Va al rosso
   scuro, lo stesso dei bottoni pieni, cosi' il sito ha un rosso premuto solo. */
.santi-sponsor__azione a:hover,
.santi-sponsor__azione a:focus-visible { color: #8E1F25; }

/* Chi ha chiesto meno movimento vede la fila ferma, centrata e per intero. */
@media (prefers-reduced-motion: reduce) {
	.santi-sponsor__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
	.santi-sponsor__card { transition: none; }
	a.santi-sponsor__card:hover { transform: none; }
	/* senza scorrimento la copia e' solo un doppione */
	.santi-sponsor__track > [aria-hidden="true"] { display: none; }
}

/* --- Footer --------------------------------------------------------------

   I link del footer (email, telefono, modulistica, privacy, cookie) erano gli
   unici del sito a non reagire: gialli fissi, nessuno stato col mouse e
   nessuno da tastiera. Si notava poco finche' erano tutti uguali, poi accanto
   e' arrivato Instagram che invece rispondeva, e la differenza e' saltata
   fuori.

   Il giallo di quei link lo stampa WordPress, come regola di elemento del
   blocco: `.wp-elements-N a:where(:not(.wp-element-button))`. Vale (0,1,1),
   quindi il selettore qui sotto la batte gia' da solo grazie a :hover.
   L'!important resta come cintura: e' una regola generata, non scritta da noi,
   e il giorno che WordPress la irrobustisce questo hover sparirebbe in
   silenzio, senza rompere niente e senza che nessuno se ne accorga. */
.santi-footer a { transition: color .18s ease; }

.santi-footer a:hover,
.santi-footer a:focus-visible {
	color: #fff !important;
	text-decoration: underline;
	text-underline-offset: .3em;
}

@media (prefers-reduced-motion: reduce) {
	.santi-footer a { transition: none; }
}

/* I link dei contatti e delle pagine di servizio stanno in paragrafi separati
   da <br>: alti 16px, quindi aree sensibili da 16px una sopra l'altra.
   Lighthouse le segnalava il 10/10/2026 e violavano la regola 44x44 di
   progetto. inline-flex con min-height alza l'area senza spostare il testo. */
.santi-footer p.has-small-font-size a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* --- Instagram nel footer ------------------------------------------------

   L'icona e' disegnata a tratto come tutte le altre del sito, non e' il
   marchio a colori di Instagram. Due motivi: quel marchio e' una sfumatura che
   su fondo navy va messa dentro una pastiglia bianca, e diventerebbe l'oggetto
   piu' acceso di tutta la pagina per un link di servizio; e il sito non carica
   nessuna immagine da fuori, mentre il logo ufficiale vive sui server di Meta.

   Il nome del profilo e' scritto per esteso accanto all'icona: una figura sola
   non dice quale profilo si apre, e un link deve dirlo prima del clic. */
.santi-social { margin: .9rem 0 0; }

.santi-social__link {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	min-height: 44px;                       /* area tap minima di progetto */
	color: var(--wp--preset--color--giallo);
	font-size: var(--santi-testo-servizio);
	font-weight: 700;
	text-decoration: none;
	transition: color .18s ease;
}

.santi-social__link svg { flex: none; }

.santi-social__link:hover,
.santi-social__link:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: .3em;
}

/* --- Barra contatti mobile ---------------------------------------------- */

.santi-barra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 0;
}
/* Il margine azzerato non e' cosmetica. Il gruppo prende da WordPress le classi
   del layout a flusso, che mettono un margin-block-start su ogni figlio tranne
   il primo: dentro una griglia quel margine spinge giu' la seconda cella, e
   "Scrivici" usciva una ventina di pixel piu' basso di "Chiama". */
.santi-barra__link {
	margin: 0 !important;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.santi-barra__link + .santi-barra__link { border-left: 1px solid rgba(255, 255, 255, .22); }

/* Le due azioni sempre a schermo su telefono erano le uniche del sito a non
   reagire al tocco: nessuno stato premuto, nessuno stato da tastiera. Su un
   fondo navy il modo piu' leggibile e' schiarire la cella, non cambiare il
   colore del testo, che e' gia' bianco. */
.santi-barra__link:hover,
.santi-barra__link:focus-visible,
.santi-barra__link:active { background: rgba(255, 255, 255, .14); }
body { padding-bottom: 56px; }
@media (min-width: 768px) {
	.santi-barra { display: none; }
	body { padding-bottom: 0; }
}

/* --- Accessibilità ------------------------------------------------------ */

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--giallo);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.santi-hero .wp-block-cover__image-background,
	.santi-hero__scudo,
	.santi-hero__title,
	.santi-hero__title::after,
	.santi-hero__rule,
	.santi-hero__sub,
	.santi-hero__claim,
	.santi-hero__cta,
	.santi-sponsor__track {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	* { transition-duration: .01ms !important; }
}

/* --- Bottone di navigazione --------------------------------------------- */

/* Il rosso resta alle azioni che contano (scrivi, prenota, apri la mappa):
   questi portano da una pagina all'altra, quindi sono bottoni vuoti in navy
   che si riempiono al passaggio. La freccia avanza di pochi pixel: basta a
   far capire che si va da qualche parte. */
/* .santi-card__azione a e' lo stesso bottone scritto dall'editor: un
   paragrafo con un link, che chiunque modifica senza toccare classi. */
.santi-bottone,
.santi-card__azione a,
.wp-block-post-excerpt__more-link {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	min-height: 44px;
	padding: .55rem 1.15rem;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--navy);
	font-size: var(--santi-testo-servizio);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.santi-bottone::after,
.santi-card__azione a::after,
.wp-block-post-excerpt__more-link::after {
	content: "\2192";  /* freccia destra */
	font-size: 1.05em;
	line-height: 1;
	transition: transform .22s ease;
}

.santi-bottone:hover,
.santi-bottone:focus-visible,
.santi-card__azione a:hover,
.santi-card__azione a:focus-visible,
.wp-block-post-excerpt__more-link:hover,
.wp-block-post-excerpt__more-link:focus-visible {
	background: var(--wp--preset--color--navy);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(14, 35, 56, .18);
}

.santi-bottone:hover::after,
.santi-card__azione a:hover::after,
.wp-block-post-excerpt__more-link:hover::after,
.santi-bottone:focus-visible::after,
.santi-card__azione a:focus-visible::after,
.wp-block-post-excerpt__more-link:focus-visible::after { transform: translateX(4px); }

.santi-bottone:active,
.santi-card__azione a:active,
.wp-block-post-excerpt__more-link:active { transform: translateY(0); }

.santi-card__azione { margin: 1.1rem 0 0; }
/* Il border-box del tema arriva solo agli elementi con una classe santi-, e
   il link scritto dall'editor non ne ha: senza questa riga padding e bordo
   si sommano ai 44px e il bottone esce alto 65 invece di 44. */
.santi-card__azione a { box-sizing: border-box; }
.wp-block-post-excerpt__more-text { margin-top: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
	.santi-bottone,
	.santi-card__azione a,
	.wp-block-post-excerpt__more-link,
	.santi-bottone::after,
	.santi-card__azione a::after,
	.wp-block-post-excerpt__more-link::after { transition: none; }
	.santi-bottone:hover,
	.santi-card__azione a:hover,
	.wp-block-post-excerpt__more-link:hover { transform: none; }
	.santi-bottone:hover::after,
	.santi-card__azione a:hover::after,
	.wp-block-post-excerpt__more-link:hover::after { transform: none; }
}

/* --- Blocchi della home ------------------------------------------------- */

.santi-card__link { display: block; overflow: hidden; }
.santi-card__foto {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.santi-card__link:hover .santi-card__foto { transform: scale(1.04); }

/* La stessa card con il blocco immagine dell'editor: la foto si cambia
   dalla libreria e il ritaglio a 220px lo fa il CSS, qualunque formato
   abbia la foto caricata. */
.wp-block-image.santi-card__immagine { margin: 0; overflow: hidden; }
.santi-card__immagine img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform .4s ease;
}
.santi-card__immagine a:hover img { transform: scale(1.04); }

.santi-foto { width: 100%; height: auto; display: block; }
.wp-block-image.santi-foto { margin: 0; }
.santi-foto img { display: block; width: 100%; height: auto; }

/* Il box evento si nota perché è l'unico fondo giallo della pagina. */
/* --- Box evento (open day) ---------------------------------------------- */

/* La foto sta accanto al testo, non dietro: su fondo giallo un'immagine di
   sfondo con velo sopra mangerebbe il contrasto del navy, che e' l'unico
   colore leggibile su questo fondo. Due colonne, e su schermo stretto la
   foto passa sopra. */
.santi-evento { text-align: center; }

.santi-evento__interno {
	display: grid;
	gap: clamp(1.4rem, 4vw, 2.8rem);
	align-items: center;
}

.santi-evento__foto { margin: 0; }

.santi-evento__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.santi-evento__occhiello {
	margin: 0 0 .5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

.santi-evento .santi-titolo { margin-top: 0; }

/* Sul giallo il filetto giallo del titolo sparisce: qui diventa rosso, come
   in tutti i blocchi su fondo chiaro. */
.santi-evento .santi-titolo::after {
	background: #B2282F;
	margin-inline: auto;
}

.santi-evento__dettagli {
	margin: 0 0 1.6rem;
	color: var(--wp--preset--color--navy);
}

.santi-evento__azione { margin: 0; }

/* I gruppi dell'editor mettono un margine sopra ogni figlio: in una griglia
   spinge giu' la seconda cella, e nel box il bottone deve stare dove lo
   mette .santi-evento__dettagli, non 1,5rem piu' in basso. */
.santi-evento__interno > *,
.santi-evento__testo > .santi-evento__azione { margin-block: 0; }
.wp-block-buttons.santi-evento__azione { justify-content: center; }

@media (min-width: 760px) {
	.santi-evento__interno { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.santi-evento__testo { text-align: left; }
	.wp-block-buttons.santi-evento__azione { justify-content: flex-start; }
	.santi-evento .santi-titolo::after { margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.santi-card__foto,
	.santi-card__immagine img { transition: none !important; }
	.santi-card__link:hover .santi-card__foto,
	.santi-card__immagine a:hover img { transform: none !important; }
	.wp-block-post-featured-image img { transition: none !important; }
	.wp-block-post-featured-image a:hover img { transform: none !important; }
}

/* --- Struttura di pagina ------------------------------------------------ */

/* WordPress mette un margine automatico fra i blocchi di primo livello:
   fra intestazione e hero si vede come una riga bianca. Gli spazi verticali
   qui li decide il padding di ogni sezione, non un margine globale.

   Vale anche per le sezioni dentro <main>: fra la fascia gialla dell'evento e
   il fondo ghiaccio delle news quel margine apriva una striscia bianca, e due
   fondi colorati separati da una riga bianca sembrano un errore di montaggio.
   Le sezioni si toccano, lo spazio verticale ce l'hanno dentro. */
.wp-site-blocks > *,
main.wp-block-group > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* La home e' una pagina dell'editor: le sezioni stanno dentro il contenuto
   del post, che ha lo stesso margine automatico fra i figli. */
.santi-home > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Il main non deve aggiungere spazio proprio: ogni pattern ha gia il suo. */
.wp-site-blocks > main { padding-block: 0; }

/* Nessuno scorrimento laterale, qualunque cosa sbordi: "clip" e non "hidden"
   perche' hidden creerebbe un contenitore di scorrimento e il menu fisso in
   cima smetterebbe di funzionare. */
.wp-site-blocks { overflow-x: clip; }

/* Lo scudo nel blocco di presentazione: riempie il bianco sotto il titolo
   nella colonna di sinistra, senza aggiungere testo che nessuno leggerebbe. */
.santi-intro__scudo {
	display: block;
	width: clamp(110px, 12vw, 158px);
	height: auto;
	margin-top: 1.75rem;
}
@media (max-width: 781px) {
	.santi-intro__scudo { margin: 1.25rem auto 0; }
}
/* Nella home dell'editor lo scudo e' un blocco immagine: la misura la
   decide la regola sopra sul contenitore, non lo stile scritto nel blocco. */
.wp-block-image.santi-intro__scudo { margin-bottom: 0; }
.santi-intro__scudo img { display: block; width: 100% !important; height: auto !important; }

/* Un logo non si deforma mai. Serve che siano MASSIMI tutti e due: con
   "height" fissa e "max-width: 100%" un marchio largo si trova l'altezza
   bloccata e la larghezza compressa, e si allunga. Succedeva a Saviatesta su
   telefono, dove la scheda e' piu' stretta del logo.
   "object-fit: contain" e' la rete di sicurezza per il giorno in cui un file
   arriva con gli attributi width e height scritti nel markup. */
.santi-sponsor__logo {
	max-height: 44px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .85;
	transition: filter .2s ease, opacity .2s ease;
}
.santi-sponsor__logo:hover { filter: none; opacity: 1; }

/* Loghi quasi quadrati, o comunque larghi meno del doppio dell'altezza.
   Il tetto dei 44px e' tarato sui marchi lunghi e distesi come Saviatesta
   (rapporto 3,3 a 1): applicato a un marchio compatto come Afrodite (1,9 a 1)
   lo lascia largo 84 pixel in una scheda che ne offre 150, e la riga piccola
   sotto il nome diventa un filo grigio. Qui l'altezza sale a 60: la scheda e'
   alta 104 e ha un rem di respiro sopra e sotto, quindi non cresce. */
.santi-sponsor__logo--compatto { max-height: 60px; }
@media (prefers-reduced-motion: reduce) {
	.santi-sponsor__logo { transition: none !important; }
}

/* La seconda sequenza di loghi serve solo a far girare il nastro senza
   stacchi su smartphone. Da tablet in su il nastro e fermo, quindi la
   copia va nascosta: altrimenti manda i loghi su due file. */
@media (min-width: 768px) {
	.santi-sponsor__doppio { display: none !important; }
}

.santi-sponsor__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

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

/* La fascia navy sotto la barra: e' lo sfondo su cui si appoggia lo scudo
   che sborda dall'intestazione, quindi ha il padding alto necessario. */
.santi-testata {
	padding-block: clamp(2.8rem, 6vw, 4.4rem) clamp(1.8rem, 4vw, 2.6rem);
	padding-inline: 1.25rem;
}

.santi-testata__titolo { margin: 0; }

/* La stessa riga gialla dell'hero, per tenere insieme home e pagine. */
.santi-testata__titolo::after {
	content: "";
	display: block;
	width: 88px;
	height: 5px;
	margin-top: 1.15rem;
	background: #FCCE3C;
}

.santi-testata__occhiello {
	margin-top: 1.2rem;
	max-width: 62ch;
	opacity: .92;
}

.santi-testata__categoria { margin: 0 0 .8rem; }
.santi-testata__categoria a { color: #FCCE3C; text-decoration: none; }
.santi-testata__categoria a:hover { text-decoration: underline; }
.santi-testata__data { margin: 1rem 0 0; opacity: .82; }

.santi-contenuto {
	padding-block: clamp(2.4rem, 5vw, 3.6rem) clamp(3rem, 6vw, 4.5rem);
	padding-inline: 1.25rem;
}

/* Il contenitore delle pagine e' largo quanto quello di home e archivi
   (1180px): a 760px, su un monitor da 1440, meta' pagina restava bianca e i
   blocchi visivi, schede e widget, lavoravano in uno spazio da colonna.

   Il testo scorrevole pero' non lo segue fino in fondo. A 1180px una riga a
   18px arriva a circa 125 caratteri e l'occhio perde il segno tornando a
   capo; a 980px ne conta un centinaio, il limite oltre il quale non si va
   senza rendere faticosa la lettura su schermo. Paragrafi,
   titoli, elenchi, citazioni e modulo restano quindi su colonna, mentre
   immagini, schede, riquadri e widget occupano tutta la larghezza. Stessa
   sorte per i blocchi del tema fatti di sole parole: elenco, organigramma,
   nota e racconto per anni.

   La misura sta in una variabile: e' l'unico numero da toccare se un domani
   la colonna va stretta o larga. */
.santi-contenuto { --santi-colonna: 980px; }

/* Il modulo contatti no: campi larghi un metro sono scomodi da compilare e
   fanno sembrare vuota la scheda. Resta sulla misura della colonna di prima. */
.santi-contenuto .wp-block-post-content > .fluentform { max-width: 820px; }

.santi-contenuto .wp-block-post-content > :is(
	p, h2, h3, h4, h5, h6, ul, ol, dl,
	.wp-block-quote, .wp-block-table, .wp-block-buttons,
	.wp-block-embed, .fluentform,
	.santi-elenco, .santi-ruoli, .santi-nota, .santi-tempo
):not(.alignwide):not(.alignfull) {
	max-width: var(--santi-colonna);
	/* A sinistra, non centrata: centrata rientrerebbe di 180px rispetto a
	   immagini, schede e widget, e ogni titolo sembrerebbe fuori squadra
	   rispetto al blocco sopra. Il filo verticale della pagina e' uno solo.

	   !important obbligato: il layout constrained di WordPress stampa
	   "margin-left: auto !important" nella pagina, e senza pareggiarlo
	   qualunque margine dichiarato qui viene ignorato. */
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Nel corpo del testo i titoli hanno bisogno di aria sopra, non sotto. */
.santi-contenuto h2 { margin-top: 2.6rem; }
.santi-contenuto h3 { margin-top: 1.9rem; }
.santi-contenuto > *:first-child { margin-top: 0; }

/* --- News --------------------------------------------------------------- */

/* Gli articoli non stanno dentro schede: filetto sopra, foto, occhiello
   della categoria e titolo grande. Stesso trattamento delle altre pagine. */
.santi-news__griglia { gap: clamp(2rem, 4vw, 3rem) !important; }

/* Niente filetto sopra i singoli articoli: con due o tre notizie si legge
   come una riga fuori posto invece che come un elemento di impaginazione.
   A separarli bastano la foto e lo spazio. */
.santi-elenco-news .wp-block-post-template > li { padding-top: 0; }

.santi-news__foto img {
	border-radius: 3px;
	width: 100%;
}

/* Stesso movimento delle schede squadra in home: la foto e' gia' un link, e
   un'immagine che si allarga appena dice che lo e' meglio di qualsiasi
   didascalia. Lo zoom sta dentro il riquadro, che ritaglia quello che esce. */
.wp-block-post-featured-image a {
	display: block;
	overflow: hidden;
	border-radius: 3px;
}

.wp-block-post-featured-image img {
	display: block;
	width: 100%;
	transition: transform .4s ease;
}

.wp-block-post-featured-image a:hover img,
.wp-block-post-featured-image a:focus-visible img {
	transform: scale(1.04);
}

.santi-news__categoria { margin: 1rem 0 .35rem; }

.santi-news__categoria a {
	color: #B2282F;
	text-decoration: none;
	font-weight: 800;
}

.santi-elenco-news .wp-block-post-title {
	margin: 0 0 .55rem;
	line-height: 1.2;
}

.santi-elenco-news .wp-block-post-title a { text-decoration: none; }
.santi-elenco-news .wp-block-post-title a:hover { color: #B2282F; }

.santi-elenco-news .wp-block-post-excerpt {
	color: rgba(14, 35, 56, .84);
	line-height: 1.55;
}

.santi-paginazione { margin-top: 3.5rem; }
.santi-articolo__copertina { margin-block: 2.5rem; }
.santi-articolo__copertina img { border-radius: 3px; }

/* Collage negli articoli (13/11/2026): galleria con la classe santi-collage.
   Tutte le foto su una sola riga ad altezza fissa, come fosse una foto
   unica: la prima, di solito orizzontale, prende il doppio dello spazio
   delle altre. Le foto vengono ritagliate per riempire la propria cella. */
.wp-block-gallery.santi-collage {
	display: grid !important;
	grid-auto-flow: column;
	grid-template-columns: 2fr;
	grid-auto-columns: 1fr;
	gap: 6px !important;
	height: clamp(200px, 42vw, 440px);
	margin-block: 2.5rem;
	border-radius: 3px;
	overflow: hidden;
}
.wp-block-gallery.santi-collage > .wp-block-image {
	width: auto !important;
	height: 100%;
	margin: 0 !important;
	min-width: 0;
}
.wp-block-gallery.santi-collage > .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}
.santi-separatore { margin-block: 3rem 2rem; opacity: .25; }

/* Il paragrafo di apertura: piu' grande del corpo, e' quello che decide se
   il visitatore continua a leggere o esce. */
.santi-occhiello {
	font-size: clamp(1.08rem, 1rem + .5vw, 1.32rem);
	line-height: 1.5;
	font-weight: 500;
}

.santi-citazione {
	border-left: 5px solid #FCCE3C;
	padding: .3rem 0 .3rem 1.6rem;
	margin-block: 2.4rem;
	font-style: normal;
}
.santi-citazione p { font-size: 1.08rem; line-height: 1.6; }
.santi-citazione cite {
	display: block;
	margin-top: .9rem;
	font-style: normal;
	font-weight: 700;
	font-size: var(--santi-testo-servizio);
	opacity: .75;
}

.santi-box { border-radius: 3px; margin-block: 2.6rem; }
.santi-box h3 { margin-top: 0; }
.santi-box p:last-child { margin-bottom: 0; }

/* --- Pagina squadra ----------------------------------------------------- */

/* L'hero usa l'immagine in evidenza della pagina: la societa' cambia la foto
   di squadra dall'editor, senza toccare il tema. Senza immagine resta il
   fondo navy, quindi la pagina regge anche prima che la foto arrivi. */
.santi-hero-squadra.wp-block-cover {
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0;
	/* L'altezza cresce con la larghezza invece di essere una quota fissa di
	   schermo: una foto orizzontale in un banner a tutta pagina viene sempre
	   ritagliata, e in vw il ritaglio resta costante su ogni monitor. */
	min-height: clamp(260px, 29vw, 520px);
}

/* Il ritaglio parte dall'alto, non dal centro: nelle foto di gruppo i volti
   stanno nella meta' superiore, ed e' quello che non si deve perdere. */
.santi-hero-squadra .wp-block-cover__image-background {
	object-position: center 30%;
}

/* Il velo scuro serve solo dove poggia il titolo: sopra resta quasi
   trasparente, cosi' la foto si vede davvero. */
.santi-hero-squadra .wp-block-cover__background {
	background:
		linear-gradient(to top, rgba(14, 35, 56, .93) 4%, rgba(14, 35, 56, .62) 30%, rgba(14, 35, 56, .22) 62%, rgba(14, 35, 56, .12) 100%);
	opacity: 1;
}

.santi-hero-squadra .wp-block-cover__inner-container {
	width: min(1180px, 100% - 2.5rem);
	margin-inline: auto;
	padding-block: clamp(2rem, 5vw, 3.4rem);
}

.santi-hero-squadra__titolo {
	margin: 0;
	animation: santi-rise .6s .05s both cubic-bezier(.22, .61, .36, 1);
}

.santi-hero-squadra__titolo::after {
	content: "";
	display: block;
	width: 88px;
	height: 5px;
	margin-top: 1.15rem;
	background: #FCCE3C;
	transform-origin: left;
	animation: santi-draw .8s .4s both cubic-bezier(.22, .61, .36, 1);
}

/* --- Nastro di testo che scorre ----------------------------------------- */

/* Uno stile solo, in tutto il sito: fondo navy, parole grandi che si
   alternano bianche e gialle. Niente contorno: a questo peso il contorno
   si mangia i tratti delle lettere e il testo diventa illeggibile. */
.santi-nastro {
	overflow: hidden;
	background: #183754;
	color: #fff;
	padding-block: clamp(.5rem, 1.4vw, .9rem);
}

.santi-nastro__pista {
	display: flex;
	align-items: center;
	gap: clamp(1.6rem, 3.2vw, 3.2rem);
	width: max-content;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .015em;
	line-height: 1.12;
	font-size: clamp(1.9rem, 1rem + 4.4vw, 4rem);
	animation: santi-nastro-scorre 34s linear infinite;
}

.santi-nastro__piena { color: #fff; }
.santi-nastro__vuota { color: #FCCE3C; }

/* Il giro si chiude solo se la seconda meta' e' identica alla prima: il
   markup ripete due volte la stessa sequenza e qui si scorre di meta'
   esatta. Con un numero dispari di copie si vedrebbe il salto. */
@keyframes santi-nastro-scorre {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Nel corpo del testo il nastro esce dalla colonna e arriva ai bordi. Si
   annulla il padding del contenitore invece di usare 100vw: il viewport
   comprende la barra di scorrimento, il contenitore no, e la differenza si
   vede come un bordo storto o come una riga che sborda. */
.santi-contenuto .santi-nastro {
	max-width: none;
	width: auto;
	margin-inline: -1.25rem;
	margin-block: clamp(2.6rem, 6vw, 4rem);
}

@media (prefers-reduced-motion: reduce) {
	.santi-nastro__pista { animation: none; }
}

/* --- Frase in evidenza -------------------------------------------------- */

/* Fascia a tutta pagina su navy, testo a sinistra: il box grigio centrato
   e' la soluzione che si vede su qualunque template. */
/* Blocco a tutta larghezza dentro una colonna: esce dal contenitore con un
   margine negativo pari alla meta' della differenza fra colonna e schermo.

   Il margine porta !important perche' il layout constrained di WordPress
   stampa "margin-left: auto !important" su ogni figlio del contenuto: senza
   pareggiarlo, il blocco largo 100vw restava incollato a sinistra e sbordava
   a destra del padding della colonna. Da telefono si vedeva come una pagina
   che si sposta di lato e una riga bianca sul bordo destro. */
.santi-frase {
	max-width: none !important;
	margin-inline: calc(50% - 50vw) !important;
	width: 100vw;
	margin-block: clamp(3rem, 7vw, 5rem);
	padding-block: clamp(3rem, 7vw, 5.5rem);
	/* Il respiro laterale sta qui, sul contenitore, e non come larghezza dei
	   figli. Motivo: 100vw comprende la barra di scorrimento e il contenitore
	   no, quindi la fascia parte qualche pixel fuori dallo schermo a sinistra.
	   Con la larghezza sui figli quei pixel se li mangiava il testo, che su
	   telefono finiva a filo del bordo (segnalato il 10/10/2026, misurato: il
	   paragrafo partiva a -7px). Con il padding sul contenitore il testo ha il
	   suo margine comunque, qualunque cosa faccia la barra. */
	padding-inline: clamp(1.75rem, 5vw, 3rem);
	background: #183754;
	color: #fff;
	position: relative;
	overflow: hidden;
}

/* Le virgolette enormi in filigrana: danno profondita' senza aggiungere
   niente da leggere. */
.santi-frase::before {
	content: "C";
	position: absolute;
	top: -.28em;
	left: .04em;
	font-size: clamp(12rem, 30vw, 22rem);
	line-height: 1;
	color: #FCCE3C;
	opacity: .13;
	pointer-events: none;
}

.santi-frase__testo,
.santi-frase__nota {
	max-width: 1180px;
	margin-inline: auto;
	position: relative;
}

.santi-frase__testo {
	font-size: clamp(1.9rem, 1rem + 4vw, 3.6rem);
	line-height: 1.02;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	max-width: 22ch;
	text-wrap: balance;
}

/* La seconda riga in giallo: il contrasto interno alla frase e' quello che
   la fa leggere come un titolo e non come un paragrafo grosso. */
.santi-frase__testo br + * { color: #FCCE3C; }

.santi-frase__nota {
	margin-top: clamp(1.2rem, 3vw, 2rem);
	max-width: 56ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
	border-left: 3px solid #FCCE3C;
	padding-left: 1.2rem;
}

@media (min-width: 1240px) {
	.santi-contenuto .santi-frase__testo,
	.santi-contenuto .santi-frase__nota { margin-inline: auto; }
}

/* --- Linea del tempo ---------------------------------------------------- */

.santi-tempo {
	margin-block: clamp(2.4rem, 5vw, 3.4rem);
	border-top: 1px solid rgba(14, 35, 56, .14);
}

/* Due colonne: l'anno fa da ancora visiva, il racconto sta a destra. La
   riga di separazione fa il resto: niente pallini, niente linea disegnata. */
.santi-tempo__tappa {
	display: grid;
	grid-template-columns: 1fr;
	gap: .4rem 2rem;
	padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
	border-bottom: 1px solid rgba(14, 35, 56, .14);
}

@media (min-width: 700px) {
	.santi-tempo__tappa { grid-template-columns: minmax(8rem, 11rem) 1fr; }
}

.santi-tempo__anno {
	display: block;
	font-weight: 800;
	font-size: clamp(1.15rem, .9rem + 1.1vw, 1.7rem);
	line-height: 1.1;
	letter-spacing: -.01em;
	color: #B2282F;
	font-variant-numeric: tabular-nums;
}

.santi-tempo__tappa h3 {
	margin: 0 0 .55rem;
	font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
	line-height: 1.2;
	color: #183754;
}

@media (min-width: 700px) {
	.santi-tempo__tappa h3 { grid-column: 2; }
	.santi-tempo__tappa p { grid-column: 2; }
	.santi-tempo__anno { grid-row: span 2; text-align: right; padding-top: .15rem; }
}

.santi-tempo__tappa p { margin: 0; max-width: 62ch; }

/* --- Organigramma ------------------------------------------------------- */

.santi-ruoli { margin-block: 1.8rem; }

.santi-ruolo {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1rem;
	padding: .85rem 0;
	border-bottom: 1px solid rgba(14, 35, 56, .12);
}

.santi-ruolo__titolo {
	flex: 0 0 15rem;
	font-weight: 700;
}

.santi-ruolo__nome { flex: 1; min-width: 12rem; }
.santi-ruolo__nome em { opacity: .6; font-style: normal; }

@media (prefers-reduced-motion: reduce) {
	.santi-nastro__pista { animation: none; }
	.santi-hero-squadra__titolo,
	.santi-hero-squadra__titolo::after { animation: none; }
}

.santi-nota {
	font-size: var(--santi-testo-servizio);
	opacity: .75;
	margin-top: 1rem;
}

/* --- Schede, elenchi con icona, galleria -------------------------------- */

/* Le icone sono SVG disegnati inline nel contenuto: nessun font di icone da
   scaricare, nessuna richiesta in piu', e prendono il colore del testo. */
.santi-icona {
	flex: none;
	color: #B2282F;
}

.santi-schede {
	display: grid;
	gap: clamp(2.4rem, 4.5vw, 3.6rem) clamp(1.8rem, 3.5vw, 2.8rem);
	grid-template-columns: 1fr;
	margin-block: 2.4rem;
	padding-top: 1.8rem;
	counter-reset: scheda;
	border-top: 2px solid #183754;
}

@media (min-width: 760px) {
	.santi-schede { grid-template-columns: repeat(3, 1fr); }
	.santi-schede--due { grid-template-columns: repeat(2, 1fr); }
}

/* Niente rettangoli con bordo e ombra: le schede sono colonne separate da
   un filetto, con il numero d'ordine come elemento grafico. Il numero non
   sta nel testo, lo conta il browser: aggiungerne una non richiede nulla. */
/* Niente filetti fra una scheda e l'altra: quando la griglia va a capo,
   per esempio tre schede su due colonne, la terza finisce in prima colonna
   e si porta dietro una linea che non separa niente. A dividerle bastano
   lo spazio e il numero d'ordine. */
.santi-scheda {
	display: block;
	position: relative;
	padding: .2rem 0 0;
	text-decoration: none;
	color: inherit;
	transition: background .2s ease;
}

/* Il numero d'ordine e' l'elemento grafico della sezione, non un'etichetta:
   grande, in navy quasi trasparente, e il titolo gli risale sopra. E'
   decorazione, quindi il contrasto basso e' voluto; il contenuto informativo
   resta titolo e testo, pieni. Il browser lo conta da solo: aggiungere una
   scheda non richiede di scrivere niente. */
.santi-scheda::before {
	counter-increment: scheda;
	content: "0" counter(scheda);
	display: block;
	font-size: clamp(3.4rem, 2rem + 4vw, 5rem);
	font-weight: 800;
	line-height: .78;
	letter-spacing: -.045em;
	color: rgba(24, 55, 84, .13);
	/* Il titolo sale sul numero: senza la sovrapposizione sono due blocchi
	   impilati, con la sovrapposizione diventa un unico segno. */
	margin-bottom: -.32em;
	pointer-events: none;
}

/* Sopra il numero, non sotto: il titolo viene dopo nel DOM, ma senza
   position il fondo trasparente del numero lo velerebbe comunque. */
.santi-scheda h3 { position: relative; }

a.santi-scheda:hover::before { color: rgba(178, 40, 47, .22); }

@media (prefers-reduced-motion: no-preference) {
	.santi-scheda::before { transition: color .2s ease; }
}

.santi-scheda .santi-icona {
	position: absolute;
	top: .35rem;
	right: 0;
	width: 34px;
	height: 34px;
	color: rgba(24, 55, 84, .28);
}

/* Nella home le schede sono gruppi dell'editor: senza azzerarlo, il margine
   automatico di WordPress spinge giu' tutte le celle tranne la prima. */
.santi-schede > * { margin-block: 0; }

/* Le icone delle schede scritte dall'editor: stessi tracciati di
   i_santi_icona() in functions.php, usati come maschera. Una classe sul
   gruppo sceglie l'icona; il colore e la posizione sono quelli dell'SVG
   inline. */
.santi-scheda[class*="santi-icona-"]::after {
	content: "";
	position: absolute;
	top: .35rem;
	right: 0;
	width: 34px;
	height: 34px;
	background: #183754;
	-webkit-mask: var(--santi-icona) center / contain no-repeat;
	mask: var(--santi-icona) center / contain no-repeat;
}
/* Navy e rosso a scacchiera (1 e 4 navy, 2 e 3 rosse): scelta del cliente
   del 13/11/2026, unica eccezione decorativa alla regola del rosso solo per
   le azioni. Su due colonne nessuna colonna resta di un colore solo. */
.santi-schede > .santi-scheda:nth-child(4n+2)[class*="santi-icona-"]::after,
.santi-schede > .santi-scheda:nth-child(4n+3)[class*="santi-icona-"]::after { background: #B2282F; }
.santi-icona-pallone { --santi-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m12 7.3 3.6 2.6-1.4 4.2H9.8L8.4 9.9z'/%3E%3Cpath d='M12 3.5v3.8M4.2 9.6l4.2.3M19.8 9.6l-4.2.3M7.6 19.6l2.2-5.5M16.4 19.6l-2.2-5.5'/%3E%3C/svg%3E"); }
.santi-icona-stella { --santi-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.8 2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 10l5.9-.9z'/%3E%3C/svg%3E"); }
.santi-icona-documento { --santi-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h8l4 4v13H6z'/%3E%3Cpath d='M14 3.5v4h4'/%3E%3Cpath d='M9 12h6M9 15.5h6'/%3E%3C/svg%3E"); }
.santi-icona-casa { --santi-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5'/%3E%3Cpath d='M6 10v10h12V10'/%3E%3Cpath d='M10.5 20v-5h3v5'/%3E%3C/svg%3E"); }

.santi-scheda h3 {
	margin: 0 0 .55rem;
	font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
	line-height: 1.2;
	color: #183754;
}

.santi-scheda p {
	margin: 0;
	font-size: var(--santi-testo-servizio);
	line-height: 1.58;
	color: rgba(14, 35, 56, .86);
}

a.santi-scheda:hover h3 { color: #B2282F; }
a.santi-scheda:hover .santi-icona { color: #B2282F; }

a.santi-scheda h3::after {
	content: " \2192";
	color: #B2282F;
}

.santi-elenco {
	list-style: none;
	margin: 1.8rem 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.santi-elenco li {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	line-height: 1.55;
}

.santi-elenco .santi-icona { margin-top: .15rem; }

.santi-galleria { margin-block: 2rem; }
.santi-galleria img { border-radius: 3px; }

/* --- Carosello foto (pagine squadra) -------------------------------------

   E' il blocco Galleria di WordPress con la classe santi-carosello: le foto
   si cambiano dall'editor come in qualunque galleria. Una foto alla volta,
   in un riquadro che ha il formato della maggior parte delle foto
   (--santi-car-r, lo scrive functions.php): niente fondo attorno e frecce
   sopra la foto. Le foto dell'altro formato (data-santi-fuori-formato)
   restano intere sopra una copia sfocata di se stesse.
   Si scorre col dito su telefono e con le frecce ovunque:
   le frecce e il contatore li aggiunge functions.php
   (i_santi_carosello_frecce), sono link alla foto vicina, niente
   JavaScript. Il clic sulla foto la apre a schermo intero con la funzione
   nativa di WordPress.

   Gli !important battono le regole della galleria di WordPress, che usano
   un selettore con #id (:not(#individual-image)) e fissano le larghezze in
   percentuale. */
.wp-block-gallery.santi-carosello {
	--santi-car-r: 1.5;
	/* su telefono l'intestazione resta in alto e la barra contatti in basso:
	   la foto deve stare tutta nello spazio tra le due */
	--santi-car-su: 5rem;
	--santi-car-giu: 3.5rem;
	/* altezza massima del riquadro: la larghezza si stringe di conseguenza */
	--santi-car-max: calc(100svh - var(--santi-car-su) - var(--santi-car-giu) - 1.5rem);
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	max-width: min(100%, calc(var(--santi-car-max) * var(--santi-car-r))) !important;
	margin-inline: auto !important;
	margin-block: 1.5rem 2.2rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: 4px;
}
.wp-block-gallery.santi-carosello::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
	.wp-block-gallery.santi-carosello { --santi-car-su: 0px; --santi-car-giu: 0px; --santi-car-max: min(620px, 75svh); }
}
.wp-block-gallery.santi-carosello > .wp-block-image {
	position: relative;
	flex: 0 0 100% !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--santi-car-r);
	margin: 0 !important;
	overflow: hidden;
	/* solo in orizzontale: Safari usa questo valore anche per la posizione
	   verticale quando si segue la freccia, e "center" la spostava in basso */
	scroll-snap-align: none center;
	scroll-snap-stop: always;
	/* il link della freccia porta la foto al centro dello schermo, non in
	   cima sotto l'intestazione (altezza stimata dalla larghezza schermo) */
	scroll-margin-top: calc(var(--santi-car-su) + (100svh - var(--santi-car-su) - var(--santi-car-giu) - min(var(--santi-car-max), (100vw - 2.5rem) / var(--santi-car-r))) / 2);
}
.wp-block-gallery.santi-carosello > .wp-block-image img {
	position: relative;
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
/* La copia sfocata dietro la foto (la scrive functions.php). Nascosta,
   e quindi mai scaricata, dove non serve. */
.wp-block-gallery.santi-carosello > .wp-block-image img.santi-carosello__sfondo {
	position: absolute;
	inset: 0;
	display: none;
	object-fit: cover !important;
	filter: blur(18px) brightness(.75);
	transform: scale(1.15);
}
.wp-block-gallery.santi-carosello > .wp-block-image[data-santi-fuori-formato] img.santi-carosello__sfondo { display: block; }
.wp-block-gallery.santi-carosello > .wp-block-image[data-santi-fuori-formato] img {
	object-fit: contain !important;
}

/* Desktop: riquadro largo quanto la pagina e alto fisso, ogni foto intera
   al centro e ai lati la sua copia sfocata. Stesse foto e stesso markup del
   telefono, cambia solo l'impaginazione (01/11/2026: il riquadro col formato
   delle foto, sul desktop, per gli Allievi diventava una colonna stretta). */
@media (min-width: 768px) {
	.wp-block-gallery.santi-carosello { max-width: 100% !important; }
	.wp-block-gallery.santi-carosello > .wp-block-image {
		aspect-ratio: auto;
		height: var(--santi-car-max) !important;
	}
	.wp-block-gallery.santi-carosello > .wp-block-image img { object-fit: contain !important; }
	.wp-block-gallery.santi-carosello > .wp-block-image img.santi-carosello__sfondo {
		display: block;
		object-fit: cover !important;
	}
}

/* Visore a schermo intero di WordPress. Sotto la foto grande mette una copia
   presa da quella in pagina; se quella in pagina non e' mai stata caricata
   (lazy, foto del carosello non ancora vista) la copia resta senza indirizzo
   e il browser disegna l'icona rotta con il testo alternativo dietro la foto
   vera (13/11/2026, scorrendo le foto degli Allievi). */
.wp-lightbox-overlay .lightbox-image-container img:not([src]),
.wp-lightbox-overlay .lightbox-image-container img[src=""] {
	visibility: hidden;
}

/* Gli !important e il selettore lungo servono contro la regola della
   galleria "is-cropped" di WordPress, che porta ogni <a> dentro una foto a
   width e height 100%: senza, la freccia diventava un cerchio grande come
   la foto (01/11/2026). */
.wp-block-gallery.santi-carosello figure.wp-block-image:not(#individual-image) .santi-carosello__freccia,
.santi-carosello__freccia {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	flex: none !important;
	width: 3rem !important;
	height: 3rem !important;
	margin: -1.5rem 0 0 !important;
	border: 0;
	border-radius: 4px;
	background: none;
	color: #fff;
	text-decoration: none;
}
/* Solo la freccia, niente cerchio (01/11/2026). L'ombra la tiene leggibile
   sulle foto chiare; l'area da toccare resta di 48px, trasparente. */
.santi-carosello__freccia svg {
	width: 2.25rem;
	height: 2.25rem;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7));
}
.santi-carosello__freccia--prec { left: .25rem; right: auto; }
.santi-carosello__freccia--succ { right: .25rem; left: auto; }
.santi-carosello__freccia:hover { transform: scale(1.06); }
.santi-carosello__freccia:focus-visible { outline: 3px solid var(--wp--preset--color--giallo, #FCCE3C); outline-offset: 2px; }
.santi-carosello__conta {
	position: absolute;
	left: 50%;
	bottom: .75rem;
	z-index: 2;
	transform: translateX(-50%);
	padding: .15rem .7rem;
	border-radius: 999px;
	background: rgba(24, 55, 84, .85);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
}
@media (prefers-reduced-motion: no-preference) {
	.santi-carosello__freccia { transition: transform .15s ease; }
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-gallery.santi-carosello { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
	.santi-scheda { transition: none; }
	a.santi-scheda:hover { transform: none; }
}

/* --- Foto d'epoca ------------------------------------------------------- */

/* Intera, non ritagliata: una foto storica si guarda, non fa da sfondo. */
/* Dentro la tappa la foto attraversa tutte e due le colonne: nella colonna
   dell'anno sarebbe larga un francobollo. */
.santi-foto-epoca {
	margin: 1.6rem 0 0;
	grid-column: 1 / -1;
}

.santi-foto-epoca img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

.santi-foto-epoca figcaption {
	margin-top: .6rem;
	font-size: var(--santi-testo-servizio);
	line-height: 1.45;
	color: rgba(14, 35, 56, .68);
}

/* --- Titoli di sezione -------------------------------------------------- */

/* Stesso trattamento su tutto il sito: allineati a sinistra con la riga
   gialla sotto. I titoli centrati sono la firma dei template. */
.santi-titolo {
	margin-bottom: 1.6rem;
	text-align: left;
	line-height: 1.15;
}

.santi-titolo::after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	margin-top: .9rem;
	background: #FCCE3C;
}

/* Nei blocchi su fondo navy la riga resta gialla, sul chiaro diventa rossa:
   il giallo su bianco non si vede. */
.has-ghiaccio-background-color .santi-titolo::after,
.santi-contenuto .santi-titolo::after { background: #B2282F; }

/* --- Riquadro del club partner ------------------------------------------ */

.santi-partner {
	display: flex;
	align-items: center;
	gap: clamp(1.4rem, 3vw, 2.4rem);
	flex-wrap: wrap;
	background: #183754;
	color: #fff;
	border-radius: 4px;
	padding: clamp(1.6rem, 3.5vw, 2.4rem);
	margin-block: clamp(2.4rem, 5vw, 3.4rem);
}

/* Il logo su fondo scuro: gli stemmi calcistici hanno quasi sempre il
   contorno chiaro, quindi si stacca da se'. Un filo d'ombra aiuta. */
.santi-partner__logo {
	flex: none;
	width: clamp(78px, 12vw, 110px);
	height: auto;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3));
}

.santi-partner__testo { flex: 1; min-width: 15rem; }

.santi-partner h3 {
	margin: 0 0 .7rem;
	color: #FCCE3C;
	font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
	line-height: 1.2;
}

.santi-partner p {
	margin: 0;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
}

/* =========================================================================
   Modulo contatti, Fluent Forms.
   Le classi ff-* le genera il plugin: si vestono qui e non nel pannello del
   plugin, cosi' lo stile resta nel tema e viaggia con git.
   ========================================================================= */

.frm-fluent-form .ff-el-group { margin-bottom: 1.25rem; }

.frm-fluent-form .ff-el-input--label label {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin-bottom: .4rem;
}

.frm-fluent-form .ff-el-form-control {
	width: 100%;
	min-height: 52px;
	padding: .75rem 1rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--navy);
	background: #fff;
	border: 1px solid #d5dce4;
	border-radius: 4px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.frm-fluent-form textarea.ff-el-form-control {
	min-height: 160px;
	line-height: 1.6;
}

.frm-fluent-form .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--navy);
	box-shadow: 0 0 0 3px rgba(24, 55, 84, .15);
	outline: none;
}

/* Consenso privacy. L'etichetta del campo e' vuota e lascerebbe un asterisco
   orfano sopra la casella: si nasconde l'intero contenitore dell'etichetta.
   Il testo scende a 14px: e' un'eccezione voluta alla regola dei 16px minimi,
   decisa il 22/09/2026 e annotata nel CLAUDE.md. Vale solo per questa riga. */
.santi-consenso > .ff-el-input--label { display: none; }

.santi-consenso .ff-el-form-check-label {
	font-size: var(--santi-testo-consenso);
	line-height: 1.45;
	color: #5a6b7d;
}

.santi-consenso .ff-el-form-check-input { margin-top: .3rem; }

/* Fluent Forms stampa nella pagina una regola piu' specifica della nostra
   (form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style)) che colora il
   pulsante con una propria variabile. Invece di rincorrere la specificita'
   a colpi di !important, si ridefinisce quella variabile sul form: il valore
   piu' vicino all'elemento vince e il plugin colora di rosso da solo. */
.frm-fluent-form { --fluentform-primary: #B2282F; }

/* Pulsante di invio: stesse regole degli altri pulsanti del sito.
   Rosso perche' e' un'azione, l'unico uso ammesso per questo colore. */
.frm-fluent-form .ff-btn.ff-btn-submit.ff_btn_style {
	min-height: 52px;
	padding: 0 1.75rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	background: var(--wp--preset--color--rosso);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* Stesso rosso premuto dei bottoni del blocco core (#8E1F25, dichiarato in
   theme.json). Prima qui c'era #96212a: due rossi diversi per la stessa azione
   su due pulsanti che l'utente vede nella stessa pagina. */
.frm-fluent-form .ff-btn.ff-btn-submit.ff_btn_style:hover {
	background: #8E1F25;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(178, 40, 47, .25);
}

.frm-fluent-form .ff-btn.ff-btn-submit.ff_btn_style:active { transform: translateY(0); }

.frm-fluent-form .ff-btn.ff-btn-submit.ff_btn_style:focus-visible {
	outline: 3px solid var(--wp--preset--color--giallo);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.frm-fluent-form .ff-btn.ff-btn-submit.ff_btn_style,
	.frm-fluent-form .ff-el-form-control { transition: none; }
	.frm-fluent-form .ff-btn.ff-btn-submit.ff_btn_style:hover { transform: none; }
}

/* =========================================================================
   Widget Tuttocampo.

   Tre vincoli tecnici decidono questo blocco:

   1. I widget non comunicano la propria altezza (nessun postMessage), quindi
      l'altezza va dichiarata a mano: calcolata non si puo', e lasciarla
      all'iframe significa 150px di default. Il valore e' misurato sul
      contenuto reale del girone e vive in --santi-widget-h, una variabile
      sola per pattern: gironi con meno squadre la abbassano.
   2. Il fondo del documento Tuttocampo e' trasparente. Se l'iframe ha un
      colore proprio, ogni pixel di altezza in eccesso diventa un rettangolo
      pieno sotto la tabella. Resta quindi trasparente e l'eccedenza sparisce
      dentro il bianco della scheda.
   3. Classifica e risultati hanno la stessa altezza dichiarata: affiancate
      devono chiudere sulla stessa riga, altrimenti la griglia sbanda.
   ========================================================================= */

.santi-widget-fascia {
	/* Altezze misurate sul contenuto reale, con un margine di sicurezza:
	   l'eccedenza e' bianco dentro la scheda e non si vede, un taglio si'.
	   Classifica: 14 squadre. Risultati: giornata piena, 7 partite. */
	--santi-h-classifica: 660px;
	--santi-h-risultati: 620px;
	background: var(--wp--preset--color--navy);
	border-radius: 4px;
	padding: clamp(1.4rem, 3.5vw, 2.4rem);
	margin-block: clamp(2.4rem, 5vw, 3.4rem);
}

/* Girone piu' corto: 13 squadre invece di 14, una riga di tabella in meno. */
.santi-widget-fascia--allievi { --santi-h-classifica: 620px; }

/* Niente align-items: le schede restano stirate all'altezza della riga, cosi'
   classifica e risultati chiudono sulla stessa quota anche se i due iframe
   hanno altezze diverse. */
.santi-widget-gruppo {
	display: grid;
	gap: clamp(1.2rem, 2.5vw, 1.8rem);
}

.santi-widget {
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

/* La partita sta in cima a tutta larghezza: e' un blocco largo e basso, e
   messo in colonna lascerebbe un buco accanto alla classifica. */
.santi-widget--partita {
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
}

.santi-widget__titolo {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--navy);
	margin: 0;
	padding: .85rem 1.1rem;
	border-bottom: 3px solid var(--wp--preset--color--giallo);
	line-height: 1.25;
}

.santi-widget iframe {
	width: 100%;
	border: 0;
	display: block;
	background: transparent;
}

.santi-widget--partita iframe { height: 330px; }
.santi-widget--classifica iframe { height: var(--santi-h-classifica); }
.santi-widget--risultati iframe { height: var(--santi-h-risultati); }

/* Rete di sicurezza, non il comportamento normale.

   Dal 10/10/2026 gli iframe hanno un src diretto e si vedono sempre, quindi
   questo messaggio resta nascosto. Compare solo se qualcosa toglie loro il
   src: un plugin di consenso che li blocca, o una modifica futura. In quel
   caso, invece di tre schede bianche vuote che sembrano un sito rotto, il
   visitatore legge perche' non vede la classifica e trova il link al girone.
   Niente JavaScript: e' :has() sull'assenza dell'attributo src. */
.santi-widget__bloccato { display: none; }

.santi-widget-fascia:has(iframe:not([src])) .santi-widget-gruppo { display: none; }
.santi-widget-fascia:has(iframe:not([src])) .santi-widget__bloccato { display: block; }

.santi-widget__bloccato {
	background: #fff;
	border-radius: 4px;
	padding: clamp(1.4rem, 3vw, 2rem);
	color: var(--wp--preset--color--navy);
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.santi-widget__bloccato p { margin: 0 0 .7rem; }
.santi-widget__bloccato p:last-child { margin-bottom: 0; }

.santi-widget__bloccato-titolo {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}

.santi-widget__bloccato-azione a {
	color: var(--wp--preset--color--rosso);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Segnaposto mostrato da Complianz finche' manca il consenso: senza queste
   regole eredita lo stile del plugin e stona con il resto della pagina. */
.santi-widget .cmplz-placeholder-element,
.santi-widget .cmplz-blocked-content-notice {
	border-radius: 0;
	background: var(--wp--preset--color--ghiaccio);
	color: var(--wp--preset--color--navy);
	font-family: inherit;
}

@media (min-width: 900px) {
	.santi-widget-gruppo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.santi-widget--partita { grid-column: 1 / -1; }
}

/* --- Il Migliaretto dall'alto (video drone) ------------------------------

   Il video e' verticale come e' stato girato: ingrandito a tutta larghezza
   su desktop sarebbe sgranato. Blocco Video di WordPress, quindi si cambia
   dall'editor; accanto c'e' un'immagine ferma che prende il suo posto per
   chi ha chiesto meno movimento. */
.santi-drone { max-width: 420px; margin-inline: auto; }
/* Su desktop sta accanto all'elenco "Cosa trovi al campo": in 9:16 era alto
   il doppio del testo e lasciava un vuoto bianco. In 4:5 si taglia un po' di
   cielo ma si pareggia con la colonna di testo, e il video resta nitido
   perche' non viene ingrandito. */
@media (min-width: 782px) {
	.santi-drone { max-width: 380px; }
}
.santi-drone > * { margin-block: 0 !important; }
.santi-drone .wp-block-video,
.santi-drone__fermo { margin: 0; }
.santi-drone video,
.santi-drone__fermo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: 4px;
}
/* Dopo la regola sopra, non prima: a parita' di selettore vince l'ultima.
   L'!important serve per il video, su cui WordPress scrive il formato
   direttamente nell'elemento (style="aspect-ratio: 720 / 1280"). */
@media (min-width: 782px) {
	.santi-drone video,
	.santi-drone__fermo img { aspect-ratio: 4 / 5 !important; }
}
.santi-drone__fermo { display: none; }
@media (prefers-reduced-motion: reduce) {
	.santi-drone .wp-block-video { display: none; }
	.santi-drone__fermo { display: block; }
}

/* --- Comparsa allo scorrimento -------------------------------------------

   Titoli, schede, card e foto entrano con un piccolo movimento quando
   arrivano sullo schermo. Solo CSS: l'animazione segue lo scorrimento
   (animation-timeline), niente JavaScript. Dove il browser non la supporta
   (oggi Firefox) i contenuti compaiono normali, senza buchi.

   "translate" e "scale" invece di "transform": si sommano al transform dei
   passaggi del mouse invece di sostituirlo, e a fine animazione non
   bloccano gli effetti delle schede.

   Fuori di proposito: l'hero (e' il primo elemento che si carica e deve
   esserci subito) e le foto dentro il carosello, che scorre di lato e ha
   un suo scorrimento. Un'animazione per elemento, non di piu'. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.santi-titolo,
		.santi-contenuto h2.wp-block-heading,
		.santi-scheda,
		.santi-card,
		.santi-evento__interno,
		.santi-contenuto .wp-block-post-content > .wp-block-image,
		.santi-contenuto .wp-block-gallery,
		.santi-drone {
			animation: santi-entra linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}

		/* Le icone arrivano un attimo dopo il loro testo, con un mezzo giro. */
		.santi-scheda[class*="santi-icona-"]::after,
		.santi-scheda .santi-icona,
		.santi-elenco .santi-icona {
			animation: santi-icona-entra linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 30%;
		}
	}
}

@keyframes santi-entra {
	from { opacity: 0; translate: 0 28px; }
	to   { opacity: 1; translate: 0 0; }
}
@keyframes santi-icona-entra {
	from { opacity: 0; scale: .4; rotate: -35deg; }
	to   { opacity: 1; scale: 1; rotate: 0deg; }
}

/* Icone al passaggio del mouse: un piccolo saltello sulla scheda o sulla
   voce dell'elenco che si sta leggendo. Con "transform" e non con scale e
   rotate: quelle le tiene l'animazione di entrata, e un'animazione vince
   sempre su una regola normale, quindi il passaggio del mouse non si
   vedrebbe. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.santi-scheda[class*="santi-icona-"]::after,
	.santi-scheda .santi-icona,
	.santi-elenco .santi-icona { transition: transform .25s ease; }
	.santi-scheda:hover[class*="santi-icona-"]::after,
	.santi-scheda:hover .santi-icona,
	.santi-elenco li:hover .santi-icona { transform: scale(1.15) rotate(-8deg); }
}

/* --- Numeri della home ---------------------------------------------------

   Fascia navy con tre numeri gialli (il giallo vive solo su navy), scritta
   dallo shortcode [santi_numeri] in functions.php. I numeri contano da zero
   quando la fascia entra nello schermo: una proprieta' CSS registrata come
   intero (@property) si anima da 0 al valore, e un contatore la scrive.
   Niente JavaScript. Dove il browser non lo supporta resta il numero vero,
   scritto nella pagina. "/ ''" nel content: il numero disegnato non viene
   letto dagli screen reader, che leggono gia' il testo.

   Solo nei browser Chromium (Chrome, Edge, Android): il controllo su
   interpolate-size, che hanno solo loro, esclude Safari. Il 01/11/2026 in
   WebKit la proprieta' intera si animava con i decimali, il contatore
   restava a 0 e la cifra disegnata usciva minuscola. Su Safari e Firefox si
   vede il numero vero, fermo. */
.santi-numeri {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	max-width: 1180px;
	margin: 0 auto;
	text-align: center;
}
.santi-numero { margin: 0; color: #fff; }
.santi-numero__cifra {
	display: block;
	color: var(--wp--preset--color--giallo);
	font-size: clamp(2.6rem, 8vw, 4.5rem);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.santi-numero__etichetta {
	display: block;
	margin-top: .5rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
@media (max-width: 599px) {
	.santi-numeri { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Il conteggio parte una volta e resta sul numero finale (01/11/2026: legato
   allo scorrimento, il numero saliva e scendeva con la pagina). Due
   animazioni: quella a tempo conta da 0 al valore in due secondi e parte
   ferma; quella legata allo scorrimento, sul paragrafo, porta --santi-gioca
   a "running" quando la fascia entra e ce la lascia (fill forwards). Se si
   torna su prima della fascia il conteggio si mette in pausa, ma non torna
   indietro: a quel punto e' gia' finito. */
@property --santi-n {
	syntax: "<integer>";
	inherits: true;
	initial-value: 0;
}
@property --santi-gioca {
	syntax: "paused | running";
	inherits: true;
	initial-value: paused;
}
@supports (animation-timeline: view()) and (interpolate-size: allow-keywords) {
	@media (prefers-reduced-motion: no-preference) {
		.santi-numero {
			animation: santi-avvia linear forwards;
			animation-timeline: view();
			animation-range: entry 40% entry 100%;
		}
		.santi-numero__cifra {
			font-size: 0;
			animation: santi-conta 2s cubic-bezier(.2, .7, .3, 1) both;
			animation-play-state: var(--santi-gioca);
		}
		.santi-numero__cifra::before {
			counter-reset: santi-n var(--santi-n);
			content: var(--santi-pre) counter(santi-n) / "";
			font-size: clamp(2.6rem, 8vw, 4.5rem);
		}
	}
}
@keyframes santi-conta { from { --santi-n: 0; } }
@keyframes santi-avvia { from, to { --santi-gioca: running; } }