/**
 * Scuola Tessieri - foglio di stile del tema.
 *
 * I colori, i font e la scala tipografica NON sono definiti qui: arrivano da
 * theme.json come custom properties (--wp--preset--*). Questo file usa quei
 * token e non ne inventa di nuovi. Se serve un valore nuovo, va in theme.json.
 */

:root {
	/* Altezza dell'header sticky delle pagine interne e della barra indice
	   sotto di lui: le leggono l'indice stesso e gli elementi sticky della
	   pagina, cosi' quando l'header si riduce seguono tutti. */
	--st-header-h: 100px;
	/* L'altezza dell'header nel flusso: non cambia mai, neanche compatto. */
	--st-header-pieno: 100px;
	--st-indice-h: 70px;
	/* Lo stacco fra header e barra indice: la barra galleggia staccata,
	   come in home dal bordo alto dello schermo (Mattia, 29-09-2026:
	   "ora sono appiccicati"). Resta uguale con l'header compatto. */
	--st-indice-stacco: 0.75rem;
}

@media (max-width: 700px) {
	:root {
		--st-indice-stacco: var(--wp--preset--spacing--10);
	}
}

/* ---------------------------------------------------------------- Reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	text-wrap: balance;
}

p {
	margin: 0 0 1rem;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
}

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

.st-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.st-skip-link {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	transform: translate(-50%, -110%);
	transition: transform 0.2s;
}

.st-skip-link:focus {
	transform: translate(-50%, 0);
}

/*
 * Dove arrivano "Vai al contenuto" (il main) e "Torna su" (il body): main.js
 * da' loro il fuoco per un momento, senza anello. Sulle pagine interne il
 * main comincia sotto l'header sticky: con il margine l'ancora non scorre di
 * 100 px, che nascondevano sotto l'header la testata e le briciole (il primo
 * link che il Tab raggiunge dopo il salto).
 */
body:focus,
#contenuto:focus {
	outline: none;
}

#contenuto {
	scroll-margin-top: var(--st-header-h);
}

/* ------------------------------------------------------------- Layout */

.st-container {
	width: 100%;
	max-width: calc(1140px + 2 * var(--wp--preset--spacing--30));
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

.st-section {
	padding-block: var(--wp--preset--spacing--60);
}

.st-section--tight {
	padding-block: var(--wp--preset--spacing--50);
}

.st-section--dark {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------- Tipografia utility */

/*
 * Il titolo bicolore e' la firma tipografica del sito: prima riga scura,
 * seconda riga rossa. Nel sito attuale era uno <span style="color:#E2241D">
 * scritto a mano dentro Elementor; qui e' una classe.
 */
.st-accent {
	color: var(--wp--preset--color--red);
}

.st-eyebrow {
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--red);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.st-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-xl);
	font-weight: 400;
	line-height: 1.15;
}

.st-prose > *:last-child {
	margin-bottom: 0;
}

.st-prose strong {
	font-weight: 600;
}

/* --------------------------------------------------------------- Bottoni */

/*
 * I bottoni sono "magnetici": il JS scrive --mx/--my quando il cursore si
 * avvicina e il bottone gli scivola incontro; --ms e' la scala, che alla
 * pressione si comprime. Tutto passa da un solo transform, con una molla
 * come curva di ritorno. Senza JS o con meno movimento restano fermi.
 */
.st-button {
	transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--ms, 1));
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		background-color 0.2s, color 0.2s, border-color 0.2s;
	will-change: transform;
}

.st-button:active {
	--ms: 0.93;
	transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
	.st-button {
		transform: none;
		transition: background-color 0.2s, color 0.2s;
	}
}

.st-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 0.75rem 1.5rem;
	border: 2px solid transparent;
	border-radius: 50px;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/*
 * L'hover e' un'onda radiale che parte dal punto in cui il cursore entra
 * nel bottone (--rx/--ry, scritte dal JS): un cerchio che si espande fino a
 * coprire tutto. Il testo sta in uno span sopra l'onda.
 */
.st-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.st-button::before {
	content: "";
	position: absolute;
	top: var(--ry, 50%);
	left: var(--rx, 50%);
	z-index: 0;
	width: 250%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--st-onda, var(--wp--preset--color--red));
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.st-button:hover::before,
.st-button:focus-visible::before {
	transform: translate(-50%, -50%) scale(1);
}

.st-button__testo {
	position: relative;
	z-index: 1;
}

.st-button:hover,
.st-button:focus-visible {
	color: var(--wp--preset--color--white);
	border-color: var(--st-bordo-hover, var(--wp--preset--color--black));
}

.st-button--red {
	background: var(--wp--preset--color--red);
	--st-onda: var(--wp--preset--color--black);
}

.st-button--ghost {
	border-color: currentcolor;
	background: transparent;
	color: inherit;
	--st-onda: var(--wp--preset--color--red);
}

.st-button--ghost:hover,
.st-button--ghost:focus-visible {
	border-color: var(--st-bordo-hover, var(--wp--preset--color--black));
}

/*
 * L'anello dei bottoni in hover segue il fondo della sezione: bianco sui
 * fondi scuri o fotografici, nero sui fondi chiari (dove il tasto che si
 * riempie di rosso tiene l'anello nero). Richiesta del cliente.
 */
.st-hero,
.st-band,
.st-section--dark,
.st-cards--photo,
.st-cta,
.st-pagehead,
.st-footer {
	--st-bordo-hover: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: reduce) {
	.st-button::before {
		transition: none;
	}
}

/* ---------------------------------------------------------------- Header */

.st-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 20;
	color: var(--wp--preset--color--white);
}

.st-header--solid {
	position: sticky;
	top: 0;
	background: var(--wp--preset--color--black);
}

.st-header__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--st-header-pieno);
}

.st-brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

/* Il logo e' l'immagine ufficiale (lockup completo, 1042x225). */
.st-brand__logo {
	width: auto;
	height: 56px;
}

/* Telefoni stretti (320 px): con il logo a 56 px il pulsante Menu usciva
   dallo schermo di 54 px e ogni pagina si spostava di lato (23-09). */
@media (max-width: 400px) {
	.st-header__inner {
		gap: 1rem;
	}

	.st-header .st-brand__logo {
		height: 44px;
	}
}

.st-nav {
	margin-inline-start: auto;
}

.st-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.25rem, 0.9vw, 0.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * La voce della sezione corrente (is-corrente, vedi st_menu_corrente) ha un
 * anello: il riscontro "sei qui" chiesto da Mattia il 10-09-2026. E' un
 * ::after sulla voce intera, fuori dal flusso: racchiude anche la freccia
 * della tendina e non occupa spazio. Lo spazio e' contato: a tutta
 * larghezza al menu restano 750 px (1140 meno logo, pulsante Menu e i due
 * spazi) e con le frecce ne usa circa 740; oltre, le voci si stringono e
 * vanno a capo su due righe (23-09).
 */
.st-nav__list a {
	display: inline-block;
	padding: 0.35em 0.85em;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s;
}

.st-nav__list > li::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	pointer-events: none;
	transition: border-color 0.2s;
}

/* Dopo la freccia lo stesso respiro che c'e' prima del testo. */
.st-nav__list > li.menu-item-has-children::after {
	inset-inline-end: -0.3rem;
}

.st-nav__list > li.is-corrente::after {
	border-color: rgb(255 255 255 / 55%);
}

.st-nav__list > li.is-corrente:hover::after {
	border-color: var(--wp--preset--color--red);
}

.st-nav__list a:hover {
	color: var(--wp--preset--color--red);
}

.st-menu-toggle {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 0.5rem;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/*
 * Tre barre vere (niente box-shadow): cosi' possono ruotare in una X quando
 * il menu e' aperto. Il pulsante sta sopra il pannello (z-index piu' alto),
 * quindi e' lui stesso il pulsante di chiusura.
 */
.st-menu-toggle {
	position: relative;
	z-index: 70;
}

.st-menu-toggle__icona {
	position: relative;
	display: block;
	width: 34px;
	height: 18px;
	margin-bottom: 6px;
}

.st-menu-toggle__icona span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentcolor;
	transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.st-menu-toggle__icona span:nth-child(1) { top: 0; }
.st-menu-toggle__icona span:nth-child(2) { top: 8px; }
.st-menu-toggle__icona span:nth-child(3) { top: 16px; }

.st-menu-toggle[aria-expanded="true"] .st-menu-toggle__icona span:nth-child(1) {
	top: 8px;
	transform: rotate(45deg);
}

.st-menu-toggle[aria-expanded="true"] .st-menu-toggle__icona span:nth-child(2) {
	opacity: 0;
}

.st-menu-toggle[aria-expanded="true"] .st-menu-toggle__icona span:nth-child(3) {
	top: 8px;
	transform: rotate(-45deg);
}

/* A menu aperto il pulsante sta sopra il pannello rosso: resta bianco. */
.st-menu-toggle[aria-expanded="true"] {
	color: var(--wp--preset--color--white);
}

/*
 * L'header crea uno stacking context (z-index 20): senza questo rialzo la X
 * resterebbe intrappolata sotto il pannello del menu, invisibile e non
 * cliccabile. A menu aperto l'header sale sopra il pannello e la nav
 * orizzontale si sfuma, per non doppiare le voci della colonna.
 */
body.st-menu-aperto .st-header {
	z-index: 70;
}

body.st-menu-aperto .st-nav {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.st-nav {
	transition: opacity 0.25s ease;
}

.st-menu-toggle__label {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/*
 * Sotto i 1101 px il menu orizzontale sparisce, e con lui il margine
 * automatico che spingeva a destra il pulsante Menu (e' su .st-nav): il
 * pulsante restava attaccato al logo (Mattia, 29-09-2026: "il tasto del
 * menu deve stare a destra"). Qui la spinta la da' il logo.
 */
@media (max-width: 1100px) {
	.st-nav {
		display: none;
	}

	.st-header .st-brand {
		margin-inline-end: auto;
	}
}

/*
 * Il tondo con la cornetta accanto a Menu (Mattia, 29-09-2026, al posto del
 * pulsante "Contatti"): solo sotto i 1101 px, dove il menu orizzontale non
 * si vede. Chiama la scuola. A menu esteso aperto sparisce: il pannello ha
 * gia' i contatti e sul suo rosso il tondo non si vedrebbe.
 */
.st-header__chiama {
	display: none;
}

@media (max-width: 1100px) {
	.st-header__inner {
		gap: var(--wp--preset--spacing--10);
	}

	.st-header__chiama {
		display: grid;
		flex-shrink: 0;
		place-items: center;
		width: 40px;
		height: 40px;
		/* Area di tocco di 44 px senza ingrandire il tondo. */
		margin: 2px;
		color: var(--wp--preset--color--white);
		background: var(--wp--preset--color--red);
		border-radius: 50%;
		transition: background-color 0.2s, color 0.2s, opacity 0.25s ease, visibility 0.25s;
	}

	.st-header__chiama svg {
		width: 18px;
		height: 18px;
	}

	.st-header__chiama:hover {
		color: var(--wp--preset--color--red);
		background: var(--wp--preset--color--white);
	}

	.st-header__chiama:focus-visible {
		outline: 2px solid var(--wp--preset--color--white);
		outline-offset: 3px;
	}

	body.st-menu-aperto .st-header__chiama {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	/* Se non c'e' posto per tutti si stringe il logo, senza deformarsi
	   (object-fit): il tondo e Menu restano interi. */
	.st-header .st-brand,
	.st-header .st-brand__logo {
		flex-shrink: 1;
		min-width: 0;
	}

	.st-header .st-brand__logo {
		object-fit: contain;
		object-position: left center;
		/* Un 20% piu' piccolo su telefono e tablet (Mattia, 29-09-2026):
		   56 -> 45 px. */
		height: 45px;
	}
}

/* Telefoni stretti: 44 -> 35 px, sempre il 20% in meno. */
@media (max-width: 400px) {
	.st-header .st-brand__logo {
		height: 35px;
	}
}

/* ---------------------------------------------- Tendine del menu principale */

/*
 * Chieste da Mattia il 23-09: Alta Formazione, Per le Aziende, Chi siamo e
 * Open day hanno una freccia e una tendina con le sottovoci (le stesse del
 * menu esteso). Si apre passando sulla voce, solo con il mouse; la freccia
 * la apre da tastiera e col dito (main.js). Cliccando la voce si va alla sua
 * pagina. Chiusura con un attimo di ritardo, e un ponte invisibile fra voce e
 * tendina, cosi' scendendo col mouse non si chiude.
 */
.st-nav__list > li {
	position: relative;
	display: flex;
	align-items: center;
}

/*
 * Il link delle voci con la tendina finisce col testo e la freccia gli sta
 * accanto: un bersaglio di 24 px che non copre il link (WCAG 2.5.8,
 * collaudo del 23-09), a cui il testo lascia il posto della sua spaziatura.
 */
.st-nav__list > li.menu-item-has-children > a {
	padding-inline-end: 0;
}

.st-nav__freccia {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: inherit;
	cursor: pointer;
	opacity: 0.7;
	transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s;
}

.st-nav__freccia svg {
	width: 0.85rem;
	height: 0.85rem;
}

.st-nav__freccia:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
	opacity: 1;
}

.st-nav__list > li.is-aperto > .st-nav__freccia {
	opacity: 1;
	transform: rotate(180deg);
}

.st-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 0;
	z-index: 30;
	min-width: 17rem;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	background: var(--wp--preset--color--white);
	border-radius: 18px;
	box-shadow: 0 18px 44px rgb(0 0 0 / 24%);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease 0.15s, transform 0.18s ease 0.15s, visibility 0s linear 0.33s;
}

/* Le ultime voci aprono verso sinistra, per non uscire dallo schermo. */
.st-nav__list > li:nth-last-child(-n + 3) > .sub-menu {
	left: auto;
	right: 0;
}

/* Il ponte fra la voce e la tendina. */
.st-nav__list .sub-menu::before {
	content: "";
	position: absolute;
	inset: -0.9rem 0 100%;
}

@media (hover: hover) {
	.st-nav__list > li:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.st-nav__list > li:hover > .st-nav__freccia {
		opacity: 1;
		transform: rotate(180deg);
	}

	/* La voce resta rossa, freccia compresa, anche mentre si scende nella tendina. */
	.st-nav__list > li:hover > a,
	.st-nav__list > li:hover > .st-nav__freccia {
		color: var(--wp--preset--color--red);
	}
}

.st-nav__list > li.is-aperto > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* Le sottovoci: scure su bianco, a misura fissa anche con l'header compatto. */
html .st-header .st-nav__list .sub-menu > li > a {
	display: block;
	padding: 0.6rem 0.9rem;
	border-radius: 12px;
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}

html .st-header .st-nav__list .sub-menu > li > a:hover,
html .st-header .st-nav__list .sub-menu > li > a:focus-visible,
html .st-header .st-nav__list .sub-menu > li.is-corrente > a {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--red);
}

@media (prefers-reduced-motion: reduce) {
	.st-nav__list .sub-menu,
	.st-nav__freccia {
		transition: none;
	}
}

/*
 * Desktop stretto: sotto i 1188 px l'header si restringe e il menu intero
 * non ci sta piu', le voci andavano a capo su due righe (collaudo del
 * 23-09). Logo un po' piu' piccolo e spazi piu' stretti, voci invariate.
 * Fino a 1219 px e non 1187: con la barra di scorrimento classica
 * (Windows) la pagina e' 17 px piu' stretta di quanto dice la media query.
 */
@media (min-width: 1101px) and (max-width: 1219px) {
	.st-header__inner {
		gap: 1.25rem;
	}

	.st-header .st-brand__logo {
		height: 48px;
	}

	.st-nav__list {
		gap: 0.4rem;
	}
}

/* ------------------------------------------------------------------ Hero */

.st-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(900px, 100svh);
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	isolation: isolate;
}

.st-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.st-hero__media img,
.st-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Foto verticali, come i ritratti degli chef (masterclass, 24-09): il volto
   sta nel terzo alto, al centro si vedrebbe il petto. */
.st-hero__slide--verticale img {
	object-position: 50% 20%;
}

/*
 * Il sito attuale scurisce l'immagine con un gradiente dall'alto chiaro al
 * basso scuro. Lo riproduciamo in CSS invece che con un'immagine sovrapposta.
 */
.st-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgb(0 0 0 / 35%) 0%,
		rgb(0 0 0 / 50%) 40%,
		rgb(0 0 0 / 72%) 72%,
		rgb(0 0 0 / 90%) 100%
	);
}

.st-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.st-hero__title {
	max-width: 16ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	line-height: 0.95;
	text-transform: uppercase;
}

/* Come nel sito attuale: la prima parola piccola, la seconda enorme. */
.st-hero__title-sopra {
	display: block;
	font-size: clamp(1.75rem, 3.5vw, 3rem);
	letter-spacing: 0.04em;
}

.st-hero__title-grande {
	display: block;
	/*
	 * Come prima (fra 3.25rem e 7.5rem), ma mai piu' grande di quanto serve
	 * perche' la parola piu' lunga stia nello schermo (--st-parola, la sua
	 * larghezza in em, dal render; 3.5rem = i margini dell'hero, 24 px per
	 * lato a 320 px) e perche' un titolo di molti caratteri
	 * (--st-lunghezza) non spinga i pulsanti sotto la piega. Senza le due
	 * variabili non cambia niente.
	 */
	font-size: max(
		1.75rem,
		min(
			clamp(3.25rem, 9vw, 7.5rem),
			calc((100vw - 3.5rem) / var(--st-parola, 1)),
			clamp(3.5rem, calc(7.5rem * 24 / var(--st-lunghezza, 1)), 7.5rem)
		)
	);
	margin-left: -0.03em;
}

/*
 * Titolo breve su una riga sola: niente a capo, e la misura del carattere
 * tiene conto anche della larghezza del contenitore (1140 px), non solo dello
 * schermo. Il titolo puo' uscire dai 16ch del blocco.
 */
.st-hero__title:has(.st-hero__title-grande--riga) {
	max-width: none;
}

.st-hero__title-grande--riga {
	white-space: nowrap;
	font-size: max(
		1.75rem,
		min(
			clamp(3.25rem, 9vw, 7.5rem),
			calc(min(100vw - 3.5rem, 1140px) / var(--st-parola, 1)),
			clamp(3.5rem, calc(7.5rem * 24 / var(--st-lunghezza, 1)), 7.5rem)
		)
	);
}

/* Rete di sicurezza solo sul telefono: su desktop spezzerebbe a meta' le
   parole piu' larghe dei 16ch del titolo, che invece possono sforare. */
@media (max-width: 700px) {
	.st-hero__title-grande {
		overflow-wrap: anywhere;
	}
}

.st-hero__subtitle {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.st-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
}

/* ------------------------------------------- Sezione numerata (01, 02, ...) */

.st-numbered {
	position: relative;
}

.st-numbered__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.st-numbered--reverse .st-numbered__grid {
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.st-numbered--reverse .st-numbered__media {
	order: 2;
}

.st-numbered__media {
	position: relative;
}

/*
 * Nel sito attuale il numero di sezione e' un PNG (nero01.png, rosso02.png...).
 * Qui e' testo vero in Abril Fatface: scala senza sfocare, non costa una
 * richiesta HTTP, ed e' nascosto agli screen reader perche' e' decorativo.
 */
.st-numbered__number {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--numero);
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	transform: translate(-0.06em, -0.62em);
	pointer-events: none;
	user-select: none;
}

.st-numbered__number--red {
	color: var(--wp--preset--color--red);
}

.st-numbered__number--white {
	color: var(--wp--preset--color--white);
}

.st-numbered__image {
	width: 100%;
	aspect-ratio: 19 / 28;
	object-fit: cover;
	border-radius: 18px;
}

/*
 * Scatto di prodotto su fondo bianco: nessun ritaglio.
 * max-height evita che l'immagine detti un'altezza esagerata alla colonna
 * quando il browser risolve sizes="auto" prima di conoscere il layout.
 * revert-layer toglie il 19/28 della regola sopra e lascia il rapporto che
 * il browser prende da width e height dell'img: con "auto" la foto era alta
 * 0 finche' non caricava, poi 560 px, e le ancore piu' in basso (il form
 * dove porta "Scrivici" sulle pagine corso) arrivavano corte (29-09-2026).
 */
.st-numbered__image--intera {
	aspect-ratio: revert-layer;
	height: auto;
	max-height: 560px;
	width: 100%;
	object-fit: contain;
	object-position: center;
}

.st-numbered__body {
	padding-top: clamp(1rem, 4vw, 3.5rem);
}

/* Solo testo (un docente senza ritratto): una colonna, larga da leggere. */
.st-numbered--solo-testo .st-numbered__grid,
.st-numbered--solo-testo.st-numbered--reverse .st-numbered__grid {
	grid-template-columns: minmax(0, 1fr);
}

.st-numbered--solo-testo .st-numbered__body {
	max-width: 72ch;
	padding-top: 0;
}

.st-numbered__title {
	margin-bottom: var(--wp--preset--spacing--40);
}

.st-numbered__actions {
	margin-top: var(--wp--preset--spacing--40);
}

/*
 * Sfondo "card": la griglia diventa una card grigia, un tono piu' scura
 * della card chiara delle CTA (95% bianco), con lo stesso filo rosso in testa.
 * E' compatta e sta attaccata alla sezione sopra (in home, sotto i percorsi
 * su carta): stesso fondo, niente margine in alto, due colonne alla pari.
 */
.st-numbered--card {
	padding-top: 0;
	background: var(--wp--preset--color--paper);
}

.st-numbered--card .st-numbered__grid,
.st-numbered--card.st-numbered--reverse .st-numbered__grid {
	grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
	gap: clamp(1.5rem, 3.5vw, 3rem);
	max-width: 1040px;
	margin-inline: auto;
}

.st-numbered--card .st-numbered__body {
	padding-top: 0;
}

.st-numbered--card .st-title {
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

/* Titolo su una riga sola, cosi' il testo non diventa piu' alto del video. */
.st-numbered--card .st-title br {
	display: none;
}

.st-numbered--card .st-title .st-accent::before {
	content: " ";
}

.st-numbered--card .st-numbered__title {
	margin-bottom: var(--wp--preset--spacing--30);
}

.st-numbered--card .st-numbered__actions {
	margin-top: var(--wp--preset--spacing--30);
}

.st-numbered--card .st-numbered__grid {
	position: relative;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--wp--preset--color--white) 90%, var(--wp--preset--color--black)) 0%,
		color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--white) 90%, var(--wp--preset--color--black)) 95%, var(--wp--preset--color--red)) 100%
	);
	border-radius: 22px;
	box-shadow: 0 24px 60px color-mix(in srgb, var(--wp--preset--color--black) 10%, transparent);
	align-items: center;
}

@media (max-width: 860px) {
	.st-numbered--card .st-numbered__grid,
	.st-numbered--card.st-numbered--reverse .st-numbered__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.st-numbered--card .st-numbered__grid::before {
	content: "";
	position: absolute;
	top: 0;
	right: 28px;
	left: 28px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--red), transparent);
}

@media (max-width: 860px) {
	.st-numbered__grid,
	.st-numbered--reverse .st-numbered__grid {
		grid-template-columns: 1fr;
	}

	.st-numbered--reverse .st-numbered__media {
		order: 0;
	}

	.st-numbered__number {
		transform: translate(-0.04em, -0.3em);
	}
}

/* ----------------------------------------------------- Sezione a tutta banda */

.st-band {
	position: relative;
	color: var(--wp--preset--color--white);
	isolation: isolate;
	/* Il velo dietro al testo sborda di 6rem: sul telefono usciva dallo
	   schermo e la home si spostava di lato di 72 px (23-09). */
	overflow: hidden;
}

.st-band__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.st-band__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Nel sito il testo della banda sta a sinistra su fondo scuro che sfuma
 * verso la foto: il gradiente parte quindi da sinistra, non dall'alto.
 */
.st-band__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgb(0 0 0 / 88%) 0%,
		rgb(0 0 0 / 62%) 38%,
		rgb(0 0 0 / 12%) 72%,
		rgb(0 0 0 / 0%) 100%
	);
}

.st-band__inner {
	position: relative;
	z-index: 2;
	display: grid;
	align-items: center;
	min-height: min(640px, 82svh);
	padding-block: var(--wp--preset--spacing--60);
}

.st-band__body {
	position: relative;
	isolation: isolate;
	max-width: 48ch;
}

/*
 * Velo di rinforzo dietro al blocco di testo: il rosso del titolo non regge
 * sulle zone chiare della foto, dove lo scrim scende sotto il 60%. L'ombra
 * morbida sborda oltre il blocco cosi' non ha bordi visibili; isolation
 * tiene lo pseudo-elemento (z-index negativo) dentro il blocco stesso.
 */
.st-band__body::before {
	content: "";
	position: absolute;
	inset: -4rem -6rem;
	z-index: -1;
	background: radial-gradient(
		ellipse 100% 100% at 40% 50%,
		rgb(0 0 0 / 62%) 0%,
		rgb(0 0 0 / 40%) 55%,
		rgb(0 0 0 / 0%) 78%
	);
	pointer-events: none;
}

.st-band__number {
	position: absolute;
	left: max(var(--wp--preset--spacing--30), calc((100vw - 1140px) / 2));
	top: var(--wp--preset--spacing--30);
	z-index: 2;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--numero);
	line-height: 1;
	color: var(--wp--preset--color--white);
	pointer-events: none;
}

/* ----------------------------------------------------------------- Griglie */

.st-grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.st-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.st-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.st-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.st-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.st-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.st-grid--4,
	.st-grid--3,
	.st-grid--2 {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------- Card */

.st-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 380px;
	padding: var(--wp--preset--spacing--30);
	overflow: hidden;
	border-radius: 18px;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	isolation: isolate;
}

.st-card__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.st-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Il terzo basso e' deciso: il testo della card deve reggere anche
	   sulle foto chiare (richiesta del cliente sulla sezione aziende). */
	background: linear-gradient(
		180deg,
		rgb(0 0 0 / 8%) 30%,
		rgb(0 0 0 / 42%) 62%,
		rgb(0 0 0 / 88%) 100%
	);
	transition: background 0.3s ease;
}

.st-card:hover .st-card__image,
.st-card:focus-visible .st-card__image {
	transform: scale(1.04);
}

.st-card:hover::after,
.st-card:focus-visible::after {
	background: linear-gradient(
		180deg,
		rgb(226 36 29 / 15%) 20%,
		rgb(0 0 0 / 55%) 62%,
		rgb(0 0 0 / 90%) 100%
	);
}

.st-card__title {
	position: relative;
	z-index: 2;
	margin: 0 0 0.35em;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--titolo-s);
	font-weight: 600;
	line-height: 1.25;
}

.st-card__link {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.875rem;
	font-weight: 500;
}

.st-card__link::after {
	content: "\2192";
	transition: transform 0.2s;
}

.st-card:hover .st-card__link::after {
	transform: translateX(4px);
}

/* ---------------------------------------------- Elenco delle masterclass */

.st-mc-elenco .st-grid {
	margin-top: var(--wp--preset--spacing--40);
}

.st-mc-elenco__anno {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-s);
	font-weight: 400;
}

.st-mc-elenco__anno + .st-grid {
	margin-top: var(--wp--preset--spacing--20);
}

.st-mc-elenco__actions {
	margin-top: var(--wp--preset--spacing--40);
}

.st-card--compatta {
	min-height: 260px;
}

.st-card--compatta .st-card__title {
	font-size: var(--wp--preset--font-size--base);
}

.st-card__data,
.st-card__docenti,
.st-card__prezzo {
	position: relative;
	z-index: 2;
	margin: 0 0 0.35em;
	font-size: 0.875rem;
}

.st-card__data {
	order: -1;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.st-card__prezzo {
	font-weight: 600;
}

.st-card__stato {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--red);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ------------------------------------------------------- Rassegna stampa */

.st-press__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * I loghi delle testate sono quadrati 1080x1080 con il marchio piccolo al
 * centro e molto bianco attorno. Vanno quindi mostrati grandi: e' il bianco
 * a fare da spaziatura, non il gap.
 */
.st-press__logo {
	width: auto;
	height: clamp(84px, 9vw, 120px);
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: opacity 0.2s, filter 0.2s;
	mix-blend-mode: multiply;
}

.st-press__item:hover .st-press__logo {
	filter: grayscale(0);
	opacity: 1;
}

/* ----------------------------------------------------------- CTA con form */

/*
 * Rifatta su richiesta del cliente ("cosi' nera non mi piace"): niente nero
 * piatto ma un fondale caldo con bagliori del rosso brand, la foto ridotta a
 * texture, i recapiti con le icone accanto al form, e il form dentro una
 * card vetrosa con il filo rosso in testa. Tutti i colori derivano dai
 * token via color-mix: nessun valore nuovo.
 */
.st-cta {
	position: relative;
	color: var(--wp--preset--color--white);
	isolation: isolate;
	background: linear-gradient(
		165deg,
		color-mix(in srgb, var(--wp--preset--color--black) 86%, var(--wp--preset--color--red)) 0%,
		var(--wp--preset--color--black) 55%,
		color-mix(in srgb, var(--wp--preset--color--black) 88%, var(--wp--preset--color--red)) 100%
	);
}

/* La foto non e' piu' il fondo: e' una texture appena percettibile. */
.st-cta__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.14;
}

.st-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
}

/* Sopra la texture, i bagliori del rosso brand. */
.st-cta__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(60rem 40rem at 88% 0%, color-mix(in srgb, var(--wp--preset--color--red) 26%, transparent), transparent 62%),
		radial-gradient(50rem 36rem at 0% 100%, color-mix(in srgb, var(--wp--preset--color--red) 16%, transparent), transparent 58%);
}

.st-cta__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-block: var(--wp--preset--spacing--60);
}

.st-cta__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-xl);
	font-weight: 400;
	line-height: 1.15;
}

.st-cta__lead {
	margin-top: var(--wp--preset--spacing--20);
}

/* --- Recapiti con icona accanto al form --- */

.st-cta__canali {
	display: grid;
	gap: 1rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.st-cta__canale {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	color: inherit;
	text-decoration: none;
}

.st-cta__icona {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--red) 55%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--red) 14%, transparent);
	transition: background-color 0.25s, border-color 0.25s, transform 0.25s;
}

.st-cta__icona svg {
	width: 20px;
	height: 20px;
}

a.st-cta__canale:hover .st-cta__icona,
a.st-cta__canale:focus-visible .st-cta__icona {
	background: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
	transform: translateY(-2px);
}

.st-cta__dato {
	display: grid;
	font-weight: 500;
	line-height: 1.35;
}

.st-cta__dato small {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
}

/* --- La card del form --- */

.st-cta__form {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent);
	border-radius: 18px;
	box-shadow: 0 32px 70px color-mix(in srgb, var(--wp--preset--color--black) 50%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Il filo rosso in testa alla card: sfuma verso i bordi arrotondati. */
.st-cta__form::before {
	content: "";
	position: absolute;
	top: -1px;
	right: 20px;
	left: 20px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--red), transparent);
}

/* Campi in due colonne: il form respira e la card resta compatta. */
.st-cta .st-form {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20) 0.9rem;
}

.st-cta .st-form__field--full,
.st-cta .st-form__consent,
.st-cta .st-form > .st-button {
	grid-column: 1 / -1;
}

.st-cta .st-form__label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
}

.st-cta .st-form__input,
.st-cta .st-form__textarea {
	border-color: color-mix(in srgb, var(--wp--preset--color--white) 16%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--white) 5%, transparent);
	color: var(--wp--preset--color--white);
}

.st-cta .st-form__input:focus,
.st-cta .st-form__textarea:focus {
	border-color: var(--wp--preset--color--red);
	background: color-mix(in srgb, var(--wp--preset--color--white) 9%, transparent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--red) 30%, transparent);
}

/* Il menu nativo della select si apre chiaro: le voci restano leggibili. */
.st-cta .st-form__input option {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
}

.st-cta .st-form__consent {
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
}

.st-cta .st-form__consent input {
	accent-color: var(--wp--preset--color--red);
}

.st-cta .st-form > .st-button {
	width: 100%;
	margin-top: 0.4rem;
}

@media (max-width: 860px) {
	.st-cta__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.st-cta .st-form {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ Form */

.st-form {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.st-form__field {
	display: grid;
	gap: 0.35rem;
}

.st-form__label {
	font-size: 0.8125rem;
	font-weight: 500;
}

.st-form__input,
.st-form__textarea {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
	font-size: 1rem;
}

.st-form__input:focus,
.st-form__textarea:focus {
	border-color: var(--wp--preset--color--red);
	outline: none;
}

.st-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.8125rem;
	line-height: 1.4;
}

/* Trappola antispam: invisibile all'utente, visibile ai bot. */
.st-form__trap {
	position: absolute;
	left: -9999px;
}

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

.st-footer {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	padding-block: 0 var(--wp--preset--spacing--30);
}

/* Nastro dei partner in testa al footer. */
.st-footer__partners {
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid rgb(255 255 255 / 25%);
}

.st-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
}

.st-footer__brand .st-brand__logo {
	height: 48px;
}

.st-footer__cert {
	margin-top: var(--wp--preset--spacing--30);
	font-size: 0.875rem;
	line-height: 1.6;
}

.st-footer__cert a {
	text-decoration: underline;
}

.st-footer__social {
	display: flex;
	gap: 0.875rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.st-footer__social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--wp--preset--color--white);
	transition: opacity 0.2s;
}

.st-footer__social a:hover {
	opacity: 0.7;
}

.st-footer__social svg {
	width: 20px;
	height: 20px;
	fill: currentcolor;
}

.st-footer__heading {
	margin-bottom: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 700;
}

.st-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.st-footer__list a {
	font-size: 0.9375rem;
	text-decoration: none;
}

/*
 * Nel footer i link restano bianchi anche al passaggio del mouse: l'hover
 * generale del sito li fa rossi, e rosso su rosso telefono, email,
 * certificato ISO e lingue sparivano (Mattia, 06-10-2026). Si sottolineano.
 * I bottoni della fascia "Area clienti" hanno il loro hover.
 */
.st-footer a:not(.st-button):hover,
.st-footer a:not(.st-button):focus-visible {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.st-footer address {
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.st-footer address a {
	text-decoration: none;
}


.st-footer__langs {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

/*
 * Fascia "Area clienti" con il pulsante di recesso (art. 54-bis Codice del
 * Consumo: funzione "ben visibile"). Fondo rosso scurito, due bottoni:
 * "Accedi" pieno bianco, "Recedi dal contratto qui" col solo bordo.
 */
.st-footer__clienti {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--30) + 0.25rem);
	border-radius: 16px;
	background: rgb(0 0 0 / 14%);
}

.st-footer__clienti h2 {
	margin: 0 0 0.25rem;
	font-size: 1.75rem;
	line-height: 1.2;
}

.st-footer__clienti p {
	margin: 0;
	font-size: 0.9375rem;
}

.st-footer__clienti-azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.st-footer__clienti .st-button {
	font-weight: 600;
	white-space: nowrap;
}

.st-footer__clienti .st-button svg {
	position: relative;
	z-index: 1;
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.st-footer__accedi {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--red);
	--st-onda: var(--wp--preset--color--black);
}

.st-footer__recedi {
	border-color: var(--wp--preset--color--white);
	background: transparent;
	color: var(--wp--preset--color--white);
	--st-onda: var(--wp--preset--color--white);
}

.st-footer__recedi:hover,
.st-footer__recedi:focus-visible {
	color: var(--wp--preset--color--red);
}

@media (max-width: 560px) {
	.st-footer__clienti {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	}

	.st-footer__clienti-azioni {
		flex-direction: column;
		width: 100%;
	}

	.st-footer__clienti .st-button {
		white-space: normal;
	}
}

/* Riga in fondo: copyright e documenti legali a sinistra, lingue a destra. */
.st-footer__copy {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--wp--preset--spacing--30);
	align-items: center;
}

.st-footer__copy p {
	margin: 0;
}

.st-footer__legali {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-footer__legali a {
	text-decoration: none;
}

.st-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgb(255 255 255 / 25%);
	font-size: 0.8125rem;
}

/*
 * In fondo alla pagina i tondi fissi in basso a destra (Menu, "Torna su":
 * inc/contatto-flottante.php) coprivano "Italiano" finche' il contenitore
 * arriva a filo dello schermo (fino a circa 1284 px). L'ultima riga lascia
 * libera la colonna dei tondi (48 px e il loro respiro): le lingue si
 * spostano a sinistra e sul telefono vanno a capo sotto il copyright.
 */
@media (max-width: 1300px) {
	.st-footer__bottom {
		padding-inline-end: calc(48px + var(--wp--preset--spacing--20));
	}
}

@media (max-width: 900px) {
	.st-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.st-footer__grid {
		grid-template-columns: 1fr;
	}
}

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

.st-cards__header {
	position: relative;
	margin-bottom: var(--wp--preset--spacing--50);
	max-width: 72ch;
}

.st-cards__number {
	display: block;
	margin-block: -0.12em 0.02em;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--numero);
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--red);
}

.st-section--dark .st-cards__number {
	color: var(--wp--preset--color--white);
}

.st-cards__intro {
	margin-top: var(--wp--preset--spacing--30);
}

.st-cards__actions,
.st-press__actions {
	margin-top: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------- Rassegna stampa */

.st-press__title {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* -------------------------------------------------------- Esito del form */

.st-form__esito {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0.875rem 1rem;
	border-left: 4px solid currentcolor;
	background: rgb(255 255 255 / 92%);
	font-size: 0.9375rem;
}

.st-form__esito--ok {
	color: #1a7f37;
}

.st-form__esito--ko {
	color: var(--wp--preset--color--red);
}

/*
 * Pannello scuro: i campi bianchi ci galleggiano sopra con molto piu'
 * contrasto e piu' aria. Il bordo sottile e la sfocatura lo staccano
 * dalla foto di sfondo.
 */
.st-cta__form {
	padding: clamp(1.75rem, 3.5vw, 3rem);
	background: rgb(10 10 10 / 88%);
	color: var(--wp--preset--color--white);
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 22px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.st-cta__form .st-form {
	gap: var(--wp--preset--spacing--30);
}

.st-cta__form .st-form__field {
	gap: 0.5rem;
}

.st-cta__form .st-form__label {
	color: rgb(255 255 255 / 82%);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.st-cta__form .st-form__input,
.st-cta__form .st-form__textarea {
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 1rem 1.125rem;
}

.st-cta__form .st-form__input:focus,
.st-cta__form .st-form__textarea:focus {
	border-color: var(--wp--preset--color--red);
	box-shadow: 0 0 0 3px rgb(226 36 29 / 30%);
}

.st-cta__form .st-form__consent {
	opacity: 0.85;
}

.st-cta__form .st-form__consent a {
	color: var(--wp--preset--color--white);
}

.st-cta__form .st-button {
	width: 100%;
}

/* ------------------------------------------------------------ Menu esteso */

/*
 * Menu esteso: colonna rossa che entra da destra, sopra un fondale scuro
 * che chiude al click. Le voci con figli sono fisarmoniche: il click sul
 * genitore apre l'elenco delle pagine figlie.
 */
.st-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	visibility: hidden;
	transition: visibility 0s 0.45s;
}

.st-menu-overlay.is-aperto {
	visibility: visible;
	transition: none;
}

.st-menu-overlay__sfondo {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 45%);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.st-menu-overlay.is-aperto .st-menu-overlay__sfondo {
	opacity: 1;
}

.st-menu-overlay__pannello {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(480px, 100vw);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	padding: 6.5rem clamp(1.5rem, 5vw, 3rem) 2rem;
	transform: translateX(100%);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Il menu sta al centro del pannello e i contatti in fondo. Il centraggio
 * usa i margini auto e non justify-content: con il contenuto piu' alto del
 * pannello, justify-content center taglierebbe la parte alta rendendola
 * irraggiungibile anche scrollando.
 */
.st-menu-overlay__pannello nav {
	margin-block: auto;
}

.st-menu-overlay.is-aperto .st-menu-overlay__pannello {
	transform: none;
}

.st-menu-overlay__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-menu-overlay__list > li {
	border-bottom: 1px solid rgb(255 255 255 / 16%);
}

.st-menu-overlay__list > li:last-child {
	border-bottom: 0;
}

.st-menu-overlay__list > li > a,
.st-menu-overlay__cerca {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	font-size: 1.375rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--white);
}

.st-menu-overlay__list > li.is-corrente > a,
.st-menu-overlay__list .sub-menu > li.is-corrente > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.st-menu-overlay__list > li > a:hover,
.st-menu-overlay__cerca:hover {
	color: var(--wp--preset--color--white);
	opacity: 0.85;
}

/*
 * "Ricerca", prima voce del menu (inc/ricerca.php, Mattia 12-10-2026): un
 * pulsante con la veste delle altre voci. La lente sta nel tondo dove le
 * voci con sottomenu hanno il +; accanto, dove c'e' una tastiera, il
 * promemoria della scorciatoia. Anello del fuoco bianco: rosso sul rosso
 * non si vedrebbe.
 */
.st-menu-overlay__cerca {
	width: 100%;
	border: 0;
	background: none;
	font-family: inherit;
	line-height: inherit;
	text-align: start;
	cursor: pointer;
}

.st-menu-overlay__cerca:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

.st-menu-overlay__cerca-lato {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.st-menu-overlay__cerca svg {
	box-sizing: border-box;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0.45rem;
	border: 1px solid rgb(255 255 255 / 45%);
	border-radius: 50%;
}

.st-menu-overlay__cerca kbd {
	display: none;
	font: 500 0.75rem/1 var(--wp--preset--font-family--body);
	letter-spacing: 0.06em;
}

@media (min-width: 1101px) and (hover: hover) {
	.st-menu-overlay__cerca kbd {
		display: block;
	}
}

/* Un + dentro un cerchio sottile sulle voci con sottomenu: diventa - da aperto. */
.st-menu-overlay__list > li.menu-item-has-children > a::after {
	content: "+";
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	flex-shrink: 0;
	border: 1px solid rgb(255 255 255 / 45%);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.3s ease, background-color 0.2s ease;
}

.st-menu-overlay__list > li.is-aperto > a::after {
	content: "\2212";
	background: rgb(255 255 255 / 14%);
	transform: rotate(180deg);
}

/*
 * Fisarmonica: chiusa di default. Il fondo del sottomenu e' un rosso molto
 * piu' scuro, arrotondato, che stacca le pagine figlie dalla colonna.
 */
.st-menu-overlay__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	background: rgb(0 0 0 / 32%);
	border-radius: 14px;
	transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.35s ease;
}

.st-menu-overlay__list li.is-aperto > .sub-menu {
	max-height: 32rem;
	opacity: 1;
	margin-bottom: 1rem;
}

.st-menu-overlay__list .sub-menu > li:first-child {
	padding-top: 0.75rem;
}

.st-menu-overlay__list .sub-menu a {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55rem 1.25rem;
	font-size: 1.0625rem;
	font-weight: 400;
	text-decoration: none;
	color: var(--wp--preset--color--white);
	opacity: 0.88;
	transition: opacity 0.15s, transform 0.2s ease;
}

.st-menu-overlay__list .sub-menu a::before {
	content: "\2192";
	font-size: 0.8em;
	opacity: 0;
	margin-left: -1em;
	transition: opacity 0.2s, margin 0.2s;
}

.st-menu-overlay__list .sub-menu a:hover {
	color: var(--wp--preset--color--white);
	opacity: 1;
	transform: translateX(2px);
}

.st-menu-overlay__list .sub-menu a:hover::before {
	opacity: 1;
	margin-left: 0;
}

.st-menu-overlay__list .sub-menu > li:last-child {
	padding-bottom: 0.75rem;
}

/* Piede del pannello: i contatti essenziali, discreti. */
.st-menu-overlay__info {
	border-top: 1px solid rgb(255 255 255 / 18%);
	padding-top: var(--wp--preset--spacing--30);
	font-size: 0.875rem;
	line-height: 1.7;
	opacity: 0.85;
}

.st-menu-overlay__info a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.st-menu-overlay__info a:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.st-menu-overlay__pannello,
	.st-menu-overlay__sfondo,
	.st-menu-overlay__list .sub-menu {
		transition: none;
	}
}


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


/* ------------------------------------------------------- Slideshow hero */

.st-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.st-hero__slide.is-active {
	opacity: 1;
}

.st-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------- Sezione marchio (T di sfondo) */

.st-tmark {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--white);
}

/*
 * La T calligrafica del marchio, in rosa, che sborda dal lato sinistro:
 * e' la grafica Group-71.png del sito attuale, servita come asset del tema.
 */
/*
 * La T e' intera, senza dissolvenze: il PNG e' rifilato sul bordo sinistro,
 * quindi sta a filo del bordo pagina, cosi' il rifilo del file coincide col
 * taglio della pagina e il tratto sembra proseguire oltre. Richiesta del
 * cliente: "la T deve essere completa, anche se tagliata dalla pagina".
 */
.st-tmark__mark {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	height: min(72%, 460px);
	width: auto;
	/* Centrata con i margini, non col transform: il transform viene
	   sovrascritto dall'animazione di entrata e la T finirebbe fuori. */
	margin-block: auto;
	pointer-events: none;
	user-select: none;
}

.st-tmark__inner {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	text-align: center;
	padding-block: var(--wp--preset--spacing--60);
}

.st-tmark__contenuto {
	max-width: 60ch;
}

/* Il titolo della sezione marchio e' il piu' grande dopo l'hero. */
.st-tmark .st-title {
	font-size: clamp(2.5rem, 5.5vw, 4.25rem);
}

.st-tmark__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--30);
}

/*
 * Il video (o il suo segnaposto) sotto il contenuto: 16:9, arrotondato come
 * le card. Il segnaposto usa l'immagine della sezione con un badge play che
 * pulsa, cosi' e' chiaro che li' arrivera' un video.
 */
.st-tmark__video {
	width: min(920px, 100%);
	margin-top: var(--wp--preset--spacing--50);
}

.st-tmark__video video,
.st-tmark__video-segnaposto {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 18px;
	background: var(--wp--preset--color--ink);
}

.st-tmark__video-segnaposto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
}

.st-tmark__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 86px;
	height: 86px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 0 0 0 rgb(255 255 255 / 45%);
	animation: st-play-pulsa 2.2s ease-out infinite;
}

.st-tmark__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 14px 0 14px 24px;
	border-color: transparent transparent transparent var(--wp--preset--color--red);
}

@keyframes st-play-pulsa {
	to {
		box-shadow: 0 0 0 26px rgb(255 255 255 / 0%);
	}
}

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

.st-tmark__number {
	position: absolute;
	left: max(var(--wp--preset--spacing--30), calc((100vw - 1140px) / 2));
	top: var(--wp--preset--spacing--30);
	z-index: 1;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--numero);
	line-height: 1;
	color: var(--wp--preset--color--ink);
	pointer-events: none;
}

.st-tmark__actions {
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 860px) {
	.st-tmark__mark {
		height: 46%;
		left: 0;
		opacity: 0.55;
	}
}

/* ------------------------------------- Sezione aziende: foto in trasparenza */

.st-cards--photo {
	position: relative;
	overflow: hidden;
}

.st-cards__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/*
 * Due copie della stessa immagine, quindi una sola richiesta di rete:
 * sotto la versione in bianco e nero, sopra quella a colori mascherata in
 * modo che compaia gradualmente da destra. Il risultato e' una foto sempre
 * visibile che passa da bianco e nero a colore.
 */
.st-cards__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.st-cards__photo img:first-child {
	filter: grayscale(1);
}

.st-cards__photo img:last-child {
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		rgb(0 0 0 / 4%) 26%,
		rgb(0 0 0 / 28%) 48%,
		rgb(0 0 0 / 68%) 70%,
		rgb(0 0 0 / 94%) 88%,
		rgb(0 0 0) 100%
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		rgb(0 0 0 / 4%) 26%,
		rgb(0 0 0 / 28%) 48%,
		rgb(0 0 0 / 68%) 70%,
		rgb(0 0 0 / 94%) 88%,
		rgb(0 0 0) 100%
	);
}

/*
 * Velo uniforme al 10% su tutta la sezione, piu' un rinforzo che vive solo
 * dietro la colonna di testo e si spegne prima della meta'.
 *
 * Il rinforzo serve: la foto ha luminanza 0,54 dove passa il paragrafo, e il
 * bianco su quel fondo da' un contrasto di 1,77:1 contro il 4,5:1 minimo.
 * Con il rinforzo si arriva sopra soglia lasciando comunque la foto leggibile
 * a sinistra. Per tornare al solo 10% basta togliere il secondo gradiente.
 */
.st-cards__velo {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			90deg,
			rgb(0 0 0 / 74%) 0%,
			rgb(0 0 0 / 66%) 26%,
			rgb(0 0 0 / 30%) 46%,
			rgb(0 0 0 / 0%) 60%
		),
		rgb(0 0 0 / 10%);
	pointer-events: none;
}

.st-cards--photo .st-container {
	position: relative;
	z-index: 2;
}

.st-cards--photo .st-cards__header {
	max-width: 62ch;
}

.st-cards__cta-inline {
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--50);
}

/*
 * Card staccate dalla foto (Mattia, 28-09-2026: "si sovrappone tutto"). La
 * foto resta solo dietro il titolo e sfuma in un fondo nero pieno: le card,
 * che sono foto anche loro, poggiano sul nero e non sulla foto. In piu' un
 * bordo chiaro sottile e un'ombra le separano dal fondo.
 */
.st-cards--photo {
	background: var(--wp--preset--color--ink);
}

.st-cards--photo .st-cards__photo,
.st-cards--photo .st-cards__velo {
	bottom: auto;
	height: min(100%, clamp(260px, 24vw, 380px));
	mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
}

/* Padding e non margine: il margine si fonderebbe con quello del titolo. */
.st-cards--photo .st-grid {
	padding-top: var(--wp--preset--spacing--40);
}

.st-cards--photo .st-card {
	border: 1px solid rgb(255 255 255 / 22%);
	box-shadow: 0 24px 50px rgb(0 0 0 / 55%);
}

/* --------------------------------------------------- Sezione su carta */

.st-section--paper {
	background: var(--wp--preset--color--paper);
}

/* -------------------------------------------------- Nastro che scorre */

/*
 * Il nastro non e' piu' una pura animazione CSS: e' un contenitore che
 * scorre da solo (autoscroll via JS), trascinabile con mouse e dito, con
 * due frecce per andare piu' veloci. La lista e' duplicata e il JS riavvolge
 * a meta', quindi il loop non ha mai una fine visibile.
 */
.st-slider {
	position: relative;
}

.st-marquee {
	overflow-x: auto;
	scrollbar-width: none;
	cursor: grab;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.st-marquee::-webkit-scrollbar {
	display: none;
}

.st-marquee.is-trascinato {
	cursor: grabbing;
}

.st-marquee.is-trascinato * {
	user-select: none;
}

/* Il drag deve muovere il nastro, mai staccare l'immagine. */
.st-marquee img {
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
}

.st-marquee__track {
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-slider__freccia {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid currentcolor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transform: translateY(-50%);
	opacity: 0.55;
	transition: opacity 0.2s, background-color 0.2s;
}

.st-slider__freccia:hover,
.st-slider__freccia:focus-visible {
	opacity: 1;
	background: rgb(0 0 0 / 6%);
}

.st-slider__freccia--prev {
	left: 0.25rem;
}

.st-slider__freccia--next {
	right: 0.25rem;
}

.st-slider__freccia svg {
	width: 18px;
	height: 18px;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	/* Con meno movimento: niente autoscroll (JS) e niente frecce, il nastro
	   diventa una griglia statica. */
	.st-slider__freccia {
		display: none;
	}

	.st-marquee__track {
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}

	.st-marquee__track > *:nth-child(n + 13) {
		display: none;
	}
}

/* Il nastro della rassegna stampa: loghi grandi e in grigio. */
.st-press .st-marquee {
	margin-block: var(--wp--preset--spacing--20);
}

.st-press .st-marquee__track {
	gap: clamp(0.25rem, 1vw, 1rem);
}

.st-press__logo {
	width: auto;
	height: clamp(150px, 19vw, 280px);
	filter: grayscale(1);
	opacity: 0.75;
	transition: opacity 0.2s, filter 0.2s;
}

.st-press__item:hover .st-press__logo {
	filter: grayscale(0);
	opacity: 1;
}

/*
 * Il nastro dei partner nel footer: loghi bianchi su rosso, grandi e lenti,
 * senza frecce (Mattia, 23-09). Animazione CSS a velocita' costante: 18 px al
 * secondo su qualsiasi schermo (prima 0,6 px a fotogramma: il doppio sugli
 * schermi a 120 Hz), e non si ferma mentre si scorre la pagina. La lista e'
 * doppia e ogni logo ha lo spazio dopo di se' (non il gap del flex): le due
 * meta' sono identiche e il giro si chiude senza salto. --st-loghi-giro (px
 * di un giro a scala 1) lo calcola footer.php.
 */
.st-loghi {
	--st-loghi-scala: 1;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.st-loghi__nastro {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: st-loghi calc(var(--st-loghi-giro, 3000) * var(--st-loghi-scala) / 18 * 1s) linear infinite;
}

.st-loghi__nastro > li {
	flex: none;
	padding-inline-end: calc(4rem * var(--st-loghi-scala));
}

.st-loghi:hover .st-loghi__nastro {
	animation-play-state: paused;
}

@keyframes st-loghi {
	to {
		transform: translateX(-50%);
	}
}

.st-footer__partner-logo {
	display: block;
	width: auto;
	height: calc(var(--st-logo-h, 44px) * var(--st-loghi-scala));
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

@media (max-width: 700px) {
	.st-loghi {
		--st-loghi-scala: 0.7;
	}
}

/* Senza animazioni: il nastro fermo, si scorre a mano. */
@media (prefers-reduced-motion: reduce) {
	.st-loghi {
		overflow-x: auto;
	}

	.st-loghi__nastro {
		animation: none;
	}
}

/* ------------------------------------------------ Animazioni in entrata */

/*
 * Le classi si attivano solo se il JS e' presente (html.js): senza JS il
 * contenuto resta visibile. Con prefers-reduced-motion tutto e' statico.
 */
.js .st-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.65s ease, transform 0.65s ease;
	transition-delay: var(--st-delay, 0s);
}

.js .st-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.js .st-reveal--media {
	transform: translateY(0) scale(0.97);
}

.js .st-reveal--media.is-visible {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .st-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------- Pulsante "Scrivici" fisso */

/*
 * In basso a destra su tutte le pagine tranne le landing
 * (inc/contatto-flottante.php). Il contenitore e' fisso e fa entrare e
 * uscire il pulsante; dentro c'e' un bottone rosso come gli altri (onda e
 * magnetismo compresi, che lavorano sul transform del link). main.js
 * accende is-visibile dopo l'apertura della pagina e lo spegne quando si
 * vedono il form della pagina o il footer. Nascosto e' anche fuori dal giro
 * del Tab (visibility). --st-fab-sotto: lo spazio da lasciare sotto, per un
 * banner fisso in basso (il banner dei cookie di st-consent lo imposti).
 */
.st-fab {
	position: fixed;
	right: max(var(--wp--preset--spacing--20), env(safe-area-inset-right));
	bottom: calc(var(--wp--preset--spacing--20) + env(safe-area-inset-bottom) + var(--st-fab-sotto, 0px));
	/* Sopra il contenuto e l'header (20), sotto il menu esteso (60). */
	z-index: 50;
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--wp--preset--spacing--20));
	transition: opacity 0.3s ease, transform 0.35s ease, visibility 0s linear 0.35s;
	pointer-events: none;
}

.st-fab.is-visibile {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.3s ease, transform 0.35s ease, visibility 0s;
	pointer-events: auto;
}

/* Col fuoco dentro resta visibile anche se nel frattempo si dovrebbe
   nascondere (Tab dall'ultima card fino a lui, con il footer a schermo):
   niente fuoco su un elemento invisibile. */
.st-fab:focus-within {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

body.st-menu-aperto .st-fab {
	opacity: 0;
	visibility: hidden;
}

/* Tondo come la freccia sopra (Mattia, 29-09-2026: "tutti tondi"): solo il
   fumetto, il nome nell'aria-label e nell'etichetta al passaggio. */
.st-fab__link {
	width: 48px;
	height: 48px;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
	box-shadow: 0 10px 28px rgb(0 0 0 / 22%);
	--st-bordo-hover: var(--wp--preset--color--white);
}

.st-fab__icona {
	position: relative;
	z-index: 1;
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
}

/*
 * Su desktop il nome dei tondi compare accanto, a sinistra, al passaggio
 * del mouse e col fuoco da tastiera (data-etichetta, lo stesso testo
 * dell'aria-label). Sta sul contenitore di "Scrivici" perche' il link, come
 * ogni bottone con l'onda, taglia quello che sborda.
 */
.st-fab::before,
.st-su::before {
	content: attr(data-etichetta);
	position: absolute;
	top: 50%;
	right: calc(100% + 0.625rem);
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	transform: translate(0.375rem, -50%);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.st-fab:has(:focus-visible)::before,
.st-su:focus-visible::before {
	opacity: 1;
	transform: translate(0, -50%);
}

@media (hover: hover) and (pointer: fine) {
	.st-fab:hover::before,
	.st-su:hover::before {
		opacity: 1;
		transform: translate(0, -50%);
	}
}

@media (min-width: 901px) {
	.st-fab {
		right: max(var(--wp--preset--spacing--30), env(safe-area-inset-right));
		bottom: calc(var(--wp--preset--spacing--30) + env(safe-area-inset-bottom) + var(--st-fab-sotto, 0px));
	}
}

@media print {
	.st-fab {
		display: none;
	}
}

/*
 * I tondi sopra "Scrivici" (dall'alto: Menu, "Torna su"): stessa colonna,
 * 48 px l'uno, 0,75rem fra l'uno e l'altro. --st-posto e' il posto nella
 * pila contando dal basso (0 = dove sta "Scrivici"): lo scrive main.js
 * contando i tondi visibili sotto, cosi' quando uno si nasconde quelli
 * sopra scendono (con la transizione su bottom).
 */
.st-su,
.st-menu-tondo {
	--st-tondo-base: var(--wp--preset--spacing--20);
	position: fixed;
	right: max(var(--wp--preset--spacing--20), env(safe-area-inset-right));
	bottom: calc(var(--st-tondo-base) + env(safe-area-inset-bottom) + var(--st-fab-sotto, 0px) + var(--st-posto, 1) * (48px + 0.75rem));
	z-index: 50;
}

@media (min-width: 901px) {
	.st-su,
	.st-menu-tondo {
		--st-tondo-base: var(--wp--preset--spacing--30);
		right: max(var(--wp--preset--spacing--30), env(safe-area-inset-right));
	}
}

/*
 * "Torna su" (Mattia, 29-09-2026): un tondo bianco sopra "Scrivici", con un
 * anello rosso che si riempie mentre si scorre (--st-su-avanzamento da 0 a
 * 100, lo scrive main.js). Resta anche sopra il footer e sul form, dove
 * "Scrivici" si nasconde: allora scende al suo posto.
 */
.st-su {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 10px 28px rgb(0 0 0 / 18%);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--wp--preset--spacing--20));
	transition: opacity 0.3s ease, transform 0.35s ease, bottom 0.35s ease, visibility 0s linear 0.35s;
}

.st-su[hidden] {
	display: none;
}

.st-su.is-visibile {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.3s ease, transform 0.35s ease, bottom 0.35s ease, visibility 0s;
}

.st-su:hover {
	color: var(--wp--preset--color--red);
}

.st-su:focus-visible {
	outline: 3px solid var(--wp--preset--color--red);
	outline-offset: 3px;
}

.st-su__anello {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.st-su__traccia,
.st-su__avanzamento {
	fill: none;
	stroke-width: 3;
}

.st-su__traccia {
	stroke: var(--wp--preset--color--line);
}

.st-su__avanzamento {
	stroke: var(--wp--preset--color--red);
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: calc(100 - var(--st-su-avanzamento, 0));
}

.st-su__freccia {
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
}

body.st-menu-aperto .st-su {
	opacity: 0;
	visibility: hidden;
}

/*
 * Il tondo del menu (Mattia, 29-09-2026: "in qualsiasi punto della pagina
 * fosse facile aprire il menu"), sopra "Torna su", solo sotto i 1101 px,
 * dove il menu orizzontale non c'e'. Nero come l'header, con un filo chiaro
 * che lo stacca dalle fasce nere; le tre righe diventano la X come nel
 * pulsante dell'header. Se apre lui il menu, sale sopra il pannello (60) e
 * scende in basso: e' lui il pulsante per chiudere, anche in home a meta'
 * pagina, dove l'header non e' sticky e la sua X resta fuori schermo.
 */
.st-menu-tondo {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--black);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 20%), 0 10px 28px rgb(0 0 0 / 22%);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--wp--preset--spacing--20));
	transition: opacity 0.3s ease, transform 0.35s ease, bottom 0.35s ease, visibility 0s linear 0.35s;
}

.st-menu-tondo[hidden] {
	display: none;
}

.st-menu-tondo.is-visibile {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.3s ease, transform 0.35s ease, bottom 0.35s ease, visibility 0s;
}

.st-menu-tondo:hover {
	color: var(--wp--preset--color--red);
}

.st-menu-tondo:focus-visible {
	outline: 3px solid var(--wp--preset--color--red);
	outline-offset: 3px;
}

.st-menu-tondo__icona {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
}

.st-menu-tondo__icona span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background: currentcolor;
	transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.st-menu-tondo__icona span:nth-child(1) { top: 0; }
.st-menu-tondo__icona span:nth-child(2) { top: 6px; }
.st-menu-tondo__icona span:nth-child(3) { top: 12px; }

.st-menu-tondo[aria-expanded="true"] .st-menu-tondo__icona span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}

.st-menu-tondo[aria-expanded="true"] .st-menu-tondo__icona span:nth-child(2) {
	opacity: 0;
}

.st-menu-tondo[aria-expanded="true"] .st-menu-tondo__icona span:nth-child(3) {
	top: 6px;
	transform: rotate(-45deg);
}

/*
 * A menu aperto "Torna su" e "Scrivici" spariscono, e cosi' il tondo se il
 * menu l'ha aperto l'header (la X e' lassu'). Se l'ha aperto il tondo
 * (st-menu-dal-tondo, main.js) resta lui la X: scende in basso, sopra il
 * pannello rosso, con l'anello del fuoco bianco.
 */
body.st-menu-aperto .st-menu-tondo {
	opacity: 0;
	visibility: hidden;
}

body.st-menu-aperto.st-menu-dal-tondo .st-menu-tondo {
	z-index: 70;
	bottom: calc(var(--st-tondo-base) + env(safe-area-inset-bottom) + var(--st-fab-sotto, 0px));
	opacity: 1;
	visibility: visible;
}

body.st-menu-aperto .st-menu-tondo:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/*
 * Aperto dal tondo, il pannello che scorre finisce sopra una striscia rossa
 * alta quanto il tondo e il suo respiro, dove sta la X: le voci e i
 * contatti non le passano mai sotto, anche quando il pannello e' piu' alto
 * dello schermo. La striscia e' l'ombra piena del pannello spostata in giu':
 * scorre dentro e fuori con lui e non prende i tocchi (sotto c'e' il
 * fondale, che chiude il menu come la X). Il filo chiaro in cima (la prima
 * ombra, spostata di 1 px) e' il bordo di cio' che scorre: senza, il testo
 * tagliato a meta' riga sembrava un difetto.
 */
@media (max-width: 1100px) {
	body.st-menu-dal-tondo .st-menu-overlay__pannello {
		--st-riserva: calc(2 * var(--wp--preset--spacing--20) + env(safe-area-inset-bottom) + var(--st-fab-sotto, 0px) + 48px);
		bottom: var(--st-riserva);
		padding-bottom: var(--wp--preset--spacing--30);
		box-shadow: 0 1px 0 rgb(255 255 255 / 18%), 0 var(--st-riserva) 0 var(--wp--preset--color--red);
	}
}

@media (min-width: 901px) and (max-width: 1100px) {
	body.st-menu-dal-tondo .st-menu-overlay__pannello {
		--st-riserva: calc(2 * var(--wp--preset--spacing--30) + env(safe-area-inset-bottom) + var(--st-fab-sotto, 0px) + 48px);
	}
}

@media (min-width: 1101px) {
	.st-menu-tondo {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.st-su,
	.st-su.is-visibile,
	.st-menu-tondo,
	.st-menu-tondo.is-visibile,
	.st-menu-tondo__icona span {
		transition: none;
	}
}

@media print {
	.st-su,
	.st-menu-tondo {
		display: none;
	}
}

/* ------------------------------------------------ Indice delle sezioni */

/*
 * Barra flottante che compare solo dopo l'hero: e' fissa e fuori dal flusso,
 * quindi non occupa spazio e non sposta il contenuto quando appare. La classe
 * is-visibile la accende il JS quando l'hero esce dallo schermo.
 */
.st-indice {
	position: fixed;
	inset: 0 0 auto;
	/* Sotto l'header (z-index 20): quando compare, sbuca da dietro di lui. */
	z-index: 15;
	display: flex;
	justify-content: center;
	padding: var(--st-indice-stacco) var(--wp--preset--spacing--20);
	opacity: 0;
	transform: translateY(-130%);
	transition: opacity 0.3s ease, transform 0.35s ease;
	pointer-events: none;
}

.st-indice.is-visibile {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Col fuoco da tastiera dentro (Tab dall'hero) la barra si vede anche in
   cima alla pagina, dove sarebbe nascosta: niente fuoco invisibile. Solo
   focus-visible: dopo un clic con il mouse su una voce, tornando in cima,
   la barra deve sparire come sempre. */
.st-indice:has(:focus-visible) {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/*
 * Sulle pagine interne l'header e' pieno e sticky (alto --st-header-h,
 * che si riduce quando l'header diventa compatto): la barra si aggancia
 * sotto di lui, staccata di --st-indice-stacco, invece di coprirlo. Lo
 * stacco sta in top e non nel padding: il contenitore e' largo quanto lo
 * schermo e la sua parte trasparente prende i clic. In home l'header sta
 * solo sull'hero e la barra puo' occupare la cima dello schermo.
 */
body:not(.home) .st-indice {
	top: calc(var(--st-header-h) + var(--st-indice-stacco));
	padding-top: 0;
	transition: opacity 0.3s ease, transform 0.35s ease, top 0.3s ease;
}

/*
 * Ogni sezione con un'ancora si ferma sotto header, stacco e barra. Per
 * tag e non per classe: fino al 29-09 era un elenco di classi e le sezioni
 * rimaste fuori (lo stage, st-elenco; i docenti di Chi siamo, st-persone;
 * il video della Gelateria) finivano sotto la barra.
 */
body:not(.home) #contenuto section[id] {
	scroll-margin-top: calc(var(--st-header-h) + var(--st-indice-stacco) + var(--st-indice-h));
}

.st-indice__scorrimento {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	/* Niente backdrop-filter: sotto il menu, in Chrome su Mac, tremolava
	   quando cambiava quello che c'e' dietro (23-09). Fondo quasi pieno. */
	background: rgb(255 255 255 / 96%);
	border: 1px solid rgb(0 0 0 / 8%);
	border-radius: 999px;
	box-shadow: 0 8px 28px rgb(0 0 0 / 14%);
}

.st-indice__scorrimento::-webkit-scrollbar {
	display: none;
}

/*
 * width max-content + min-width 100% e' il modo per avere due comportamenti
 * con una regola sola: se le voci ci stanno, la lista occupa tutta la barra e
 * justify-content le centra; se non ci stanno, la lista cresce e scorre.
 */
.st-indice__lista {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0.25rem;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 0.3rem;
	list-style: none;
}

.st-indice__voce {
	display: flex;
	align-items: baseline;
	gap: 0.45em;
	padding: 0.55rem clamp(0.7rem, 1.2vw, 1.05rem);
	border-radius: 999px;
	white-space: nowrap;
	text-decoration: none;
	scroll-snap-align: center;
	transition: background-color 0.2s, color 0.2s;
}

/* theme.json colora i link di rosso all'hover: qui il colore lo decidiamo noi. */
.st-indice__voce,
.st-indice__voce:hover,
.st-indice__voce:focus-visible {
	color: var(--wp--preset--color--ink);
}

.st-indice__numero {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--red);
	transition: color 0.2s;
}

.st-indice__testo {
	font-size: 0.8125rem;
	font-weight: 500;
}

.st-indice__voce:hover,
.st-indice__voce:focus-visible {
	background: rgb(0 0 0 / 6%);
}

/*
 * L'evidenziatore e' una pillola unica che scivola da una voce all'altra:
 * il JS la posiziona sulla voce corrente e la transizione fa il viaggio.
 * Niente dissolvenze per-voce.
 */
.st-indice__evidenzia {
	position: absolute;
	top: 0.3rem;
	bottom: 0.3rem;
	z-index: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--red);
	opacity: 0;
	transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.25s ease;
	pointer-events: none;
}

.st-indice__evidenzia.is-attiva {
	opacity: 1;
}

.st-indice__voce {
	position: relative;
	z-index: 1;
}

.st-indice__voce.is-corrente,
.st-indice__voce.is-corrente:hover {
	color: var(--wp--preset--color--white);
	background: transparent;
}

.st-indice__voce.is-corrente .st-indice__numero {
	color: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: reduce) {
	.st-indice__evidenzia {
		transition: opacity 0.2s ease;
	}
}

/*
 * Pagine dei corsi: a sinistra della barra un'etichetta nera col bordo
 * rosso che dice in quale corso si e' (Mattia, 25-09-2026). Compare e
 * scompare con la barra, perche' sta dentro lo stesso contenitore.
 */
.st-indice--corso {
	gap: 0.5rem;
}

.st-indice__corso {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding: 0 1.1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--white);
	white-space: nowrap;
	background: var(--wp--preset--color--black);
	border: 2px solid var(--wp--preset--color--red);
	border-radius: 999px;
	box-shadow: 0 8px 28px rgb(0 0 0 / 14%);
}

.st-indice--corso .st-indice__scorrimento {
	min-width: 0;
}

/*
 * L'etichetta e' un pulsante con la freccia: apre la tendina degli altri
 * corsi e delle Masterclass (Mattia, 29-09-2026). La tendina ha la veste di
 * quelle del menu principale (bianca, angoli 18 px, ombra) e sta fuori dal
 * contenitore che scorre, quindi non viene tagliata. La apre main.js
 * (is-aperto); senza JS compare col fuoco dentro, da tastiera.
 */
.st-corsi {
	position: relative;
	z-index: 1;
	display: flex;
	flex-shrink: 0;
}

.st-corsi__pulsante {
	/* L'etichetta ferma non si stringe (flex-shrink 0): il pulsante si',
	   dentro .st-corsi, se no sul telefono il testo non va a capo. */
	flex-shrink: 1;
	gap: 0.45rem;
	margin: 0;
	font-family: inherit;
	text-align: start;
	cursor: pointer;
	transition: background-color 0.2s;
}

.st-corsi__pulsante > span {
	min-width: 0;
}

@media (hover: hover) {
	.st-corsi__pulsante:hover {
		background: var(--wp--preset--color--red);
	}
}

.st-corsi__freccia {
	flex-shrink: 0;
	width: 0.85rem;
	height: 0.85rem;
	transition: transform 0.2s ease;
}

.st-corsi__pulsante[aria-expanded="true"] .st-corsi__freccia {
	transform: rotate(180deg);
}

.st-corsi__menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	width: max-content;
	min-width: 100%;
	/* Sul telefono il pulsante sta a 8 px dal bordo: la tendina puo' essere
	   piu' larga di lui, ma non esce dallo schermo. */
	max-width: calc(100vw - 2 * var(--wp--preset--spacing--10));
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	background: var(--wp--preset--color--white);
	border-radius: 18px;
	box-shadow: 0 18px 44px rgb(0 0 0 / 24%);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.st-corsi.is-aperto .st-corsi__menu,
html:not(.js) .st-corsi:focus-within .st-corsi__menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* Le Masterclass non sono un corso: in fondo, dopo un filetto. */
.st-corsi__separata {
	margin-top: 0.35rem;
	padding-top: 0.35rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.st-corsi__voce {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 0.9rem;
	border-radius: 12px;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

/* theme.json colora i link di rosso all'hover: qui il colore lo decidiamo noi. */
.st-corsi__voce,
.st-corsi__voce:hover {
	color: var(--wp--preset--color--ink);
}

/* Al passaggio e col fuoco il fondo carta, ma il testo resta scuro: il
   rosso su carta e' 4,25:1, sotto il 4,5:1 del testo normale. */
.st-corsi__voce:focus-visible {
	outline-offset: -3px;
	background: var(--wp--preset--color--paper);
}

@media (hover: hover) {
	.st-corsi__voce:hover {
		background: var(--wp--preset--color--paper);
	}
}

/* Il posto del pallino c'e' su ogni voce, cosi' i testi restano allineati;
   si accende sul corso in cui si e'. */
.st-corsi__voce::before {
	content: "";
	flex-shrink: 0;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
}

/* Il corso corrente e' rosso su bianco (4,66:1) anche al passaggio: la
   voce non porta altrove, sceglierla chiude la tendina. */
.st-corsi__voce[aria-current="page"] {
	font-weight: 600;
	color: var(--wp--preset--color--red);
	background: none;
}

.st-corsi__voce[aria-current="page"]::before {
	background: currentcolor;
}

/* Le ancore devono fermarsi sotto la barra, non finirci dietro. */
.st-hero,
.st-numbered,
.st-band,
.st-tmark,
.st-cards,
.st-press,
.st-cta {
	scroll-margin-top: 76px;
}

@media (max-width: 700px) {
	.st-indice {
		padding-inline: var(--wp--preset--spacing--10);
	}

	.st-indice__voce {
		padding: 0.5rem 0.7rem;
	}

	/* Sul telefono l'etichetta va a capo e resta stretta: la barra scorre. */
	.st-indice__corso {
		padding: 0.3rem 0.8rem;
		font-size: 0.6875rem;
		white-space: normal;
		border-radius: 18px;
	}

	.st-indice > .st-indice__corso {
		max-width: 38%;
	}

	/* Con la freccia serve un po' di posto in piu': a 320 px "Gastronomica"
	   piu' la freccia non stava nel 38% e toccava la barra. */
	.st-corsi {
		max-width: 40%;
	}

	.st-corsi__pulsante {
		gap: 0.3rem;
		padding-inline-end: 0.6rem;
	}

	.st-corsi__freccia {
		width: 0.75rem;
		height: 0.75rem;
	}

	.st-corsi__voce {
		font-size: 0.875rem;
		white-space: normal;
	}
}



/* ------------------------------------------------------------ Preloader */

/*
 * Sipario rosso mostrato una volta per sessione: il marchio entra dal basso,
 * poi l'intero sipario esce verso l'alto scoprendo la pagina. La classe
 * st-preloading viene messa sull'<html> da uno script inline nell'head,
 * prima del primo paint, cosi' non c'e' nessun lampo di pagina nuda.
 */
.st-preloader {
	display: none;
}

/* Sotto il sipario la pagina e' ferma. Con "riduci movimento" il sipario
   non c'e' (piu' sotto), e la pagina scorre da subito. */
@media (prefers-reduced-motion: no-preference) {
	html.st-preloading {
		overflow: hidden;
	}
}

html.st-preloading .st-preloader {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--red);
	animation: st-preloader-esci 0.6s cubic-bezier(0.65, 0, 0.35, 1) 1.5s forwards;
}

.st-preloader__insieme {
	--altezza-logo: clamp(64px, 10vw, 96px);
	display: flex;
	align-items: center;
	gap: calc(var(--altezza-logo) * 0.3);
	opacity: 0;
	transform: translateY(56px);
	animation: st-preloader-entra 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

/* Il quadrato del T e' nero, per contrastare col fondale rosso. */
.st-preloader__quadro {
	display: grid;
	place-items: center;
	width: var(--altezza-logo);
	height: var(--altezza-logo);
	/* Crema del lockup ufficiale sul fondale rosso; spigoli vivi come nel logo. */
	background: #f9e7e1;
	flex-shrink: 0;
}

.st-preloader__quadro img {
	grid-area: 1 / 1;
	width: 66%;
	height: auto;
	/* la T del tema portata al rosso brand (da nero a #E2241D) */
	filter: brightness(0) saturate(100%) invert(22%) sepia(80%) saturate(3800%) hue-rotate(356deg) brightness(96%) contrast(92%);
}

/*
 * La scritta e' il lockup ufficiale (logo-bianco.png) senza la sua "T."
 * iniziale: il glifo finisce al 23,4% della larghezza del file, quindi il
 * contenitore mostra solo la parte restante. Cosi' la T vive una volta sola,
 * dentro il quadrato nero.
 */
.st-preloader__scritta {
	display: block;
	overflow: hidden;
	height: var(--altezza-logo);
	width: calc(var(--altezza-logo) * 3.546);
}

.st-preloader__scritta img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	margin-left: calc(var(--altezza-logo) * -1.084);
}

@keyframes st-preloader-entra {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes st-preloader-esci {
	to {
		transform: translateY(-100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.st-preloading .st-preloader {
		display: none;
	}
}


/* ------------------------------------------------- Testata pagina interna */

/*
 * Le pagine interne non hanno l'hero: l'header sticky nero e' seguito da
 * questa fascia col titolo, poi i blocchi occupano tutta la larghezza.
 */
.st-pagehead {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.st-pagehead__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-xl);
	font-weight: 400;
	line-height: 1.05;
}

.st-pagehead__eyebrow {
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--red);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ------------------------------------------------------ Briciole di pane */

/*
 * Chieste da Mattia il 23-09 (inc/briciole.php): una riga piccola e bianca
 * sopra il titolo, nell'hero o nella testata nera. L'ultima voce e' la
 * pagina stessa, non cliccabile e piu' tenue; se e' lunga (i titoli delle
 * news) si tronca coi puntini, tanto il titolo intero e' subito sotto.
 */
/* contain: le briciole prendono la larghezza che trovano. Senza, nella
   griglia dell'hero la voce lunga su una riga allargava la pagina sul
   telefono (381 px su 375). */
.st-briciole {
	contain: inline-size;
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.5;
}

/* Sulla foto un'ombra leggera: le giacche bianche passano anche sotto la velatura. */
.st-hero .st-briciole {
	margin-bottom: var(--wp--preset--spacing--30);
	text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}

.st-briciole__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-briciole__voce {
	display: flex;
	gap: 0.5rem;
	min-width: 0;
	max-width: 100%;
}

/* Il separatore chiude la voce: andando a capo, la riga nuova parte dal nome. */
.st-briciole__voce:not(:last-child)::after {
	content: "›";
	content: "›" / "";
	color: rgb(255 255 255 / 45%);
}

.st-briciole a {
	color: rgb(255 255 255 / 85%);
	text-decoration: none;
	transition: color 0.2s;
}

.st-briciole a:hover {
	color: var(--wp--preset--color--red);
}

.st-briciole__corrente {
	max-width: 40ch;
	overflow: hidden;
	color: rgb(255 255 255 / 70%);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------------------- Numeri di sezione: in pausa */

/*
 * Su richiesta: per ora la home non mostra i numeri decorativi delle
 * sezioni. Restano nel markup e nell'editor; per riaccenderli basta
 * eliminare questo blocco.
 */
.home .st-numbered__number,
.home .st-band__number,
.home .st-cards__number,
.home .st-tmark__number {
	display: none;
}

/* ------------------------------------------ Sezione galleria (tre scatti) */

.st-galleria__testo {
	max-width: 100ch;
	margin-top: var(--wp--preset--spacing--30);
}

.st-galleria__griglia {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.st-galleria__griglia--due {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.st-galleria__foto {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 18px;
}

.st-galleria__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 860px) {
	.st-galleria__griglia {
		grid-template-columns: 1fr;
	}

	.st-galleria__actions {
		justify-content: flex-start;
	}
}

/* ------------------------------------------------------ Schede persone */

.st-persone__testo {
	max-width: 72ch;
	margin-top: var(--wp--preset--spacing--20);
}

/* Nelle griglie (Docenti, Comitato) il paragrafo e' piu' largo: sopra c'e'
   tutta la pagina, non una colonna (Mattia, 19-10-2026; poi 150 px in
   meno, circa 890 px su computer). */
.st-persone--griglia .st-persone__testo {
	max-width: calc(92ch - 150px);
}

.st-marquee--schede .st-marquee__track {
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	align-items: stretch;
}

.st-persona {
	display: block;
	width: 250px;
	text-decoration: none;
	color: inherit;
}

.st-persona__foto {
	display: block;
	width: 100%;
	/* Ritratto verticale, su richiesta del cliente (era 4/3). */
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 16px;
	background: var(--wp--preset--color--line);
	transition: transform 0.3s ease;
}

/* Hover e focus solo sulle schede che si aprono (link, docenti con
   biografia): le altre sono ferme e non devono sembrare cliccabili. */
.st-persona[data-st-docente]:hover .st-persona__foto {
	transform: translateY(-4px);
}

.st-persona__nome {
	display: block;
	margin-top: 0.7rem;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.25;
}

.st-persona[data-st-docente]:hover .st-persona__nome {
	color: var(--wp--preset--color--red);
}

.st-persona[data-st-docente]:focus-visible {
	outline: 3px solid var(--wp--preset--color--red);
	outline-offset: 4px;
	border-radius: 18px;
}

.st-persona__ruolo {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------- Scheda e pagina docente */

.st-docente {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.st-docente__img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 18px;
	background: var(--wp--preset--color--paper);
}

.st-docente__nome {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-m);
	font-weight: 400;
	line-height: 1.1;
}

.st-docente__materia {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	line-height: 1.35;
}

.st-docente__bio {
	margin-top: var(--wp--preset--spacing--30);
}

.st-docente__azioni:not(:empty) {
	margin-top: var(--wp--preset--spacing--40);
}

.st-docente-pagina {
	padding-block: var(--wp--preset--spacing--60);
}

@media (max-width: 760px) {
	.st-docente {
		grid-template-columns: minmax(0, 1fr);
	}

	.st-docente__foto {
		max-width: 360px;
	}
}

/* ------------------------------------------------ Modale dei docenti */

/* Classi sue: .st-modale e' gia' delle finestre del blocco mappa. La
   finestra con la sezione di un'altra pagina (.st-finestra, inc/finestra.php)
   ha la stessa veste: le regole qui valgono per tutte e due. */

.st-modale-docente,
.st-finestra {
	--st-modale-margine: clamp(1rem, 5vh, 2.5rem);
	/* Una colonna sola (28-09-2026): larga quanto una colonna di lettura,
	   circa 65 caratteri per riga di biografia, piu' i margini. */
	width: min(760px, calc(100vw - 2rem));
	max-width: none;
	/* Alta quanto il contenuto, con il bordo in alto fermo e non centrata:
	   centrata, cambiando altezza da un docente all'altro, le frecce
	   scappavano da sotto il mouse e il secondo clic cadeva sul fondale e
	   chiudeva (collaudo 23-09). Cosi' le frecce restano dove sono e una
	   biografia corta non lascia mezza finestra vuota. Non "auto": il
	   dialog e' fisso con top e bottom a 0, e si allungherebbe fino in fondo. */
	height: fit-content;
	max-height: calc(100dvh - 2 * var(--st-modale-margine));
	margin: var(--st-modale-margine) auto auto;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
	box-shadow: 0 40px 80px color-mix(in srgb, var(--wp--preset--color--black) 40%, transparent);
	overflow: hidden;
}

.st-modale-docente[open],
.st-finestra[open] {
	display: flex;
	flex-direction: column;
}

/* Stesso fondale delle finestre "Come raggiungerci" (blocco mappa). */
/* Niente backdrop-filter (29-09-2026): la sfocatura si ricalcola a ogni
   fotogramma sopra i nastri che scorrono dietro e in Chrome su Mac la pagina
   tremolava all'apertura. Fondale solo piu' scuro. */
.st-modale-docente::backdrop,
.st-finestra::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--black) 65%, transparent);
}

/* Con una finestra aperta i nastri dietro si fermano: nessuno li vede e
   non costringono il browser a ridisegnare sotto il fondale. */
html.st-modale-aperta .st-loghi__nastro,
html.st-modale-aperta .st-press__nastro-lista {
	animation-play-state: paused;
}

.st-modale-docente__barra {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.st-modale-docente__conta {
	margin-left: 0.25rem;
	margin-right: auto;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

.st-modale-docente__nav,
.st-modale-docente__chiudi,
.st-finestra__chiudi {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.st-modale-docente__nav svg,
.st-modale-docente__chiudi svg,
.st-finestra__chiudi svg {
	width: 18px;
	height: 18px;
}

.st-modale-docente__nav:hover,
.st-modale-docente__chiudi:hover,
.st-finestra__chiudi:hover {
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--red);
}

.st-modale-docente__nav:focus-visible,
.st-modale-docente__chiudi:focus-visible,
.st-finestra__chiudi:focus-visible {
	outline: 3px solid var(--wp--preset--color--red);
	outline-offset: 2px;
}

/* Un docente solo: niente frecce. */
.st-modale-docente--sola .st-modale-docente__nav {
	display: none;
}

.st-modale-docente__corpo,
.st-finestra__corpo {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	transition: opacity 0.15s;
}

.st-modale-docente__corpo[aria-busy="true"] {
	opacity: 0.5;
}

/* Sotto la modale la pagina non scorre. */
html.st-modale-aperta {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.st-modale-docente[open],
	.st-finestra[open] {
		animation: st-modale-entra 0.25s ease-out;
	}
}

/*
 * La finestra con la sezione di un'altra pagina: piu' larga della scheda di
 * un docente, perche' dentro ci sono le quote affiancate e il video accanto
 * al testo. Niente barra: con la sola X era una striscia bianca vuota. La X
 * e' un tondo fermo nell'angolo, fuori dal riquadro che scorre, e il testo
 * le passa sotto. La sezione porta il suo fondo (carta) e ha meno respiro
 * che in pagina.
 */
.st-finestra {
	width: min(1040px, calc(100vw - 2rem));
}

.st-finestra__barra {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
}

.st-finestra__chiudi {
	background: var(--wp--preset--color--white);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--wp--preset--color--black) 14%, transparent);
}

.st-finestra__corpo {
	padding: 0;
}

.st-finestra__corpo > .st-section {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

.st-finestra__corpo .st-container {
	max-width: none;
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* Il titolo non va sotto la X. */
.st-finestra__corpo .st-eyebrow,
.st-finestra__corpo .st-title {
	padding-inline-end: 3rem;
}

.st-finestra__corpo .st-quote__prezzi {
	margin-top: var(--wp--preset--spacing--40);
}

.st-finestra__corpo .st-quote__finanziamenti {
	margin-top: var(--wp--preset--spacing--50);
}

@keyframes st-modale-entra {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

/*
 * Finestra con un testo da leggere (inc/finestra.php, st_finestra_testo():
 * l'informativa privacy dei form ActiveCampaign, Mattia 06-10-2026).
 * Larga una colonna di lettura e alta quanto lo schermo fin dall'inizio:
 * quando il testo arriva non cambia misura. In testa una barra con il
 * titolo e una X grande (48 px); sotto il testo, che scorre da solo (anche
 * da tastiera: il corpo prende il fuoco col Tab).
 */
.st-finestra--testo {
	width: min(760px, calc(100vw - 2rem));
	height: calc(100dvh - 2 * var(--st-modale-margine));
}

.st-finestra--testo .st-finestra__barra {
	position: static;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0.75rem 0.75rem clamp(1.25rem, 4vw, 2.5rem);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.st-finestra__titolo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-m);
	font-weight: 400;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
}

.st-finestra--testo .st-finestra__chiudi {
	flex: none;
	width: 48px;
	height: 48px;
	background: var(--wp--preset--color--paper);
	box-shadow: none;
}

.st-finestra--testo .st-finestra__chiudi svg {
	width: 24px;
	height: 24px;
}

.st-finestra--testo .st-finestra__corpo {
	padding: clamp(1.25rem, 4vw, 2.5rem);
}

.st-finestra--testo .st-finestra__corpo:focus-visible {
	outline: 3px solid var(--wp--preset--color--red);
	outline-offset: -3px;
}

.st-finestra__stato,
.st-finestra__errore {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.st-finestra__errore a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/*
 * Il testo letto dalla pagina privacy (.st-legale__inner) ha la tipografia
 * del suo blocco (st/documento-legale, foglio accodato da st-ac con la
 * finestra): qui solo i titoli un gradino sotto, sotto il titolo della
 * finestra.
 */
.st-finestra--testo .st-legale__testo h2 {
	font-size: var(--wp--preset--font-size--titolo-m);
}

.st-finestra--testo .st-legale__testo h3 {
	font-size: var(--wp--preset--font-size--titolo-s);
}

.st-finestra--testo .st-legale__testo h4 {
	font-size: var(--wp--preset--font-size--lead);
}

/*
 * Comparsa: sale dal basso dissolvendosi, e in chiusura riscende (main.js
 * aspetta la fine di is-uscita prima di chiudere). Con meno movimento solo
 * la dissolvenza. Il fondale si scurisce e si schiarisce con la finestra.
 */
@media (prefers-reduced-motion: no-preference) {
	.st-finestra--testo[open] {
		animation: st-finestra-sale 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.st-finestra--testo.is-uscita {
		animation: st-finestra-scende 0.22s ease-in forwards;
	}
}

@media (prefers-reduced-motion: reduce) {
	.st-finestra--testo[open] {
		animation: st-finestra-appare 0.15s linear;
	}

	.st-finestra--testo.is-uscita {
		animation: st-finestra-sparisce 0.15s linear forwards;
	}
}

.st-finestra--testo[open]::backdrop {
	animation: st-finestra-appare 0.32s ease-out;
}

.st-finestra--testo.is-uscita::backdrop {
	animation: st-finestra-sparisce 0.22s ease-in forwards;
}

@keyframes st-finestra-sale {
	from {
		opacity: 0;
		transform: translateY(2rem);
	}
}

@keyframes st-finestra-scende {
	to {
		opacity: 0;
		transform: translateY(2rem);
	}
}

@keyframes st-finestra-appare {
	from {
		opacity: 0;
	}
}

@keyframes st-finestra-sparisce {
	to {
		opacity: 0;
	}
}

/* La scheda nella modale: in testa il ritratto piccolo accanto a
   occhiello, nome e materia; sotto, dopo un filetto, la biografia. Una
   colonna a ogni larghezza. */
.st-docente--modale {
	display: block;
}

.st-docente__testa {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 1.75rem);
}

.st-docente--modale .st-docente__foto {
	flex: 0 0 clamp(88px, 24vw, 176px);
	max-width: none;
}

.st-docente--modale .st-docente__img {
	border-radius: 16px;
}

.st-docente__intro {
	min-width: 0;
}

.st-docente__intro .st-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--10);
}

.st-docente--modale .st-docente__nome {
	font-size: var(--wp--preset--font-size--titolo-l);
	overflow-wrap: break-word;
}

.st-docente--modale .st-docente__corpo {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

.st-docente--modale .st-docente__bio {
	max-width: 68ch;
	margin-top: 0;
}

/* --- Filtri della griglia docenti e delle News (per testata) --- */

.st-persone__filtri,
.st-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: var(--wp--preset--spacing--40);
}

.st-persone__filtro,
.st-filtri__filtro {
	padding: 0.55rem 1.15rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50px;
	background: transparent;
	color: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Le testate delle News sono link (funzionano anche senza JavaScript). */
.st-filtri__filtro {
	text-decoration: none;
}

.st-persone__filtro:hover,
.st-filtri__filtro:hover {
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--red);
}

.st-persone__filtro[aria-pressed="true"],
.st-filtri__filtro[aria-current="true"] {
	border-color: var(--wp--preset--color--red);
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
}

/* Le schede escluse dal filtro hanno l'attributo hidden (main.js). */
.st-persona[hidden] {
	display: none;
}

.st-persone--griglia .st-persone__griglia {
	/* Posizionata: le copie delle schede che escono si fermano sul posto
	   mentre svaniscono. Righe in alto: mentre l'altezza si anima le righe
	   non si allungano (le schede che scivolano sbaglierebbero arrivo). Lo
	   scroll anchoring non si aggancia alle schede che si spostano. */
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-content: start;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
	overflow-anchor: none;
}

.st-persone--griglia .st-persona {
	width: auto;
	/* Alta quanto il suo contenuto: allungata alla riga, quella senza
	   materia o accanto a una materia su due righe scendeva di 12 px. */
	align-self: start;
	/* I vecchi indirizzi dei docenti senza pagina arrivano qui
	   (#docente-{slug}): la scheda non finisce sotto l'header. */
	scroll-margin-top: calc(var(--st-header-h) + var(--st-indice-stacco) + var(--st-indice-h) + var(--wp--preset--spacing--20));
}

/* Copia di una scheda che esce dal filtro: ferma dov'era, svanisce. */
.st-persona--fantasma {
	position: absolute;
	margin: 0;
	pointer-events: none;
}

/* Durante il riordino la sezione ritaglia: le schede che svaniscono in
   fondo non passano sopra la sezione dopo, e niente scorrimento laterale. */
.st-persone--griglia.is-filtrando {
	overflow: hidden;
	overflow: clip;
}

/* La CTA sta subito sotto il paragrafo introduttivo, allineata a sinistra. */
.st-persone__actions {
	display: flex;
	justify-content: flex-start;
	margin-top: var(--wp--preset--spacing--30);
}

/* Resident Chef con i filtri Cucina e Pasticceria: tre per riga su tutta
   la larghezza, una riga per area (Lucia, 16-10-2026). Schede piu' grandi,
   quindi foto meno allungate (Mattia, 17-10): 4:5 invece di 3:4, tagliate
   piu' in basso che in alto per non perdere la testa. Tre colonne anche
   sul tablet, cosi' ogni riga resta una sola area. */
@media (min-width: 701px) {
	/* Piu' specifica della regola a due colonne sotto i 1000 px, che viene dopo. */
	.st-persone--griglia.st-persone--aree .st-persone__griglia {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.st-persone--aree .st-persona__foto {
	aspect-ratio: 4 / 5;
	object-position: 50% 30%;
}

@media (max-width: 1000px) {
	.st-persone--griglia .st-persone__griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.st-persone--griglia .st-persone__griglia {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------ Sezione video */

.st-video__cornice {
	width: 100%;
	margin-top: var(--wp--preset--spacing--40);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 18px;
	background: var(--wp--preset--color--ink);
}

.st-video__cornice iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------- Video YouTube con facciata */

.st-yt {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 18px;
	background: var(--wp--preset--color--ink);
}

.st-yt__apri {
	display: block;
	width: 100%;
	height: 100%;
}

.st-yt__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.st-yt__apri:hover .st-yt__poster,
.st-yt__apri:focus-visible .st-yt__poster {
	transform: scale(1.03);
}

/*
 * L'anello del focus e' un ::after sopra l'anteprima: un outline sul link
 * finiva sotto l'immagine, che col transform si dipinge sopra (collaudo del
 * 22-09: da tastiera il focus non si vedeva).
 */
.st-yt__apri:focus-visible {
	outline: none;
}

.st-yt__apri:focus-visible::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 3px solid var(--wp--preset--color--red);
	border-radius: 18px;
	pointer-events: none;
}

/* Stesso play del video nella sezione marchio della home. */
.st-yt__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 0 0 0 rgb(255 255 255 / 45%);
	animation: st-play-pulsa 2.2s ease-out infinite;
}

.st-yt__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--wp--preset--color--red);
}

.st-yt iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

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

	.st-yt__poster {
		transition: none;
	}
}

/* ------------------------------------ Dicono di noi: nastro e news (home) */

/*
 * Stile "righe" (home): titolo, un paragrafo, le testate su una riga che
 * scorre a tutta larghezza e sotto tre news piccole. Fondo carta con un filo
 * in alto, per staccarla da Open Day (25-09-2026). Mattia, 29-09-2026:
 * sezione piu' bassa, loghi in una riga sola "entrano da fuori a
 * scorrimento", grandi come prima.
 */
.st-press--righe {
	padding-block: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--paper);
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Il nastro delle testate chiude la sezione: sotto non resta la striscia
   di carta, la fascia bianca tocca la sezione dopo (Mattia, 12-10-2026).
   Senza loghi il respiro in basso resta. */
.st-press--righe:has(> .st-press__nastro) {
	padding-bottom: 0;
}

.st-press--righe .st-press__title {
	margin-bottom: 0;
}

.st-press__intro {
	max-width: 60ch;
	margin-top: var(--wp--preset--spacing--20);
}

/*
 * Il nastro: animazione CSS come quello dei partner nel footer (keyframes
 * st-loghi, -50%), la lista e' doppia (render.php). Ogni logo e' largo
 * quanto una delle quattro colonne di prima (al massimo 250 px): i loghi
 * sono quadrati con il marchio piccolo al centro, ritagliati in 5:2. Sul
 * telefono prima erano ingranditi del 35% dentro la colonna: stessa scala
 * qui, senza ritaglio. La durata dipende dai loghi in un giro
 * (--st-press-giro): un logo ogni 9 secondi. Fermo al passaggio del mouse.
 */
.st-press__nastro {
	--st-press-logo: min(calc((100cqi - 2 * var(--wp--preset--spacing--30)) / 4), 250px);
	container-type: inline-size;
	max-width: 1600px;
	/* In fondo alla sezione, sotto "Scopri tutte le news" (29-09-2026). */
	margin: var(--wp--preset--spacing--40) auto 0;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.st-press__nastro-lista {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Fascia bianca: i loghi sono jpg su fondo bianco e stanno bene cosi',
	   senza mix-blend-mode su un livello in movimento (29-09-2026: col
	   multiply animato la pagina tremolava in Chrome su Mac). */
	background: var(--wp--preset--color--white);
	will-change: transform;
	animation: st-loghi calc(var(--st-press-giro, 7) * 9s) linear infinite;
}

.st-press__nastro:hover .st-press__nastro-lista {
	animation-play-state: paused;
}

.st-press__nastro .st-press__item {
	flex: none;
	width: var(--st-press-logo);
}

.st-press__nastro .st-press__logo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 2;
	object-fit: cover;
}

@media (max-width: 700px) {
	.st-press__nastro {
		--st-press-logo: calc((100cqi - 2 * var(--wp--preset--spacing--30)) / 4 * 1.35);
	}
}

/* Senza animazioni: il nastro fermo, si scorre a mano, niente copie. */
@media (prefers-reduced-motion: reduce) {
	.st-press__nastro {
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.st-press__nastro-lista {
		animation: none;
	}

	.st-press__nastro-lista > [aria-hidden="true"] {
		display: none;
	}
}

/*
 * Le news: tre card piccole, foto bassa, testata e titolo (parts/card-news.php
 * con "compatta"). Sul telefono una lista: miniatura accanto al titolo.
 */
.st-press--righe .st-press__news {
	margin-top: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.st-news__card--compatta .st-news__foto {
	aspect-ratio: 5 / 2;
}

.st-news__card--compatta .st-news__corpo {
	gap: 0.3rem;
	padding: var(--wp--preset--spacing--20);
}

.st-news__card--compatta .st-news__meta {
	font-size: 0.75rem;
}

.st-news__card--compatta .st-news__titolo {
	display: -webkit-box;
	overflow: hidden;
	font-size: 1.125rem;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.st-press--righe .st-press__actions {
	margin-top: var(--wp--preset--spacing--30);
}

@media (max-width: 700px) {
	.st-press--righe {
		padding-block: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 560px) {
	.st-press--righe .st-press__news {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}

	.st-news__card--compatta .st-news__link {
		flex-direction: row;
		align-items: center;
	}

	.st-news__card--compatta .st-news__foto {
		flex: none;
		width: 6.5rem;
		align-self: stretch;
		aspect-ratio: auto;
		min-height: 5.5rem;
	}

	.st-news__card--compatta .st-news__corpo {
		padding: 0.75rem var(--wp--preset--spacing--20);
	}

	.st-news__card--compatta .st-news__titolo {
		font-size: 1rem;
	}
}

/* --------------------------------------------- Partner in griglia scura */

.st-press--griglia {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.st-press__griglia {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	align-items: center;
	justify-items: center;
	margin-top: var(--wp--preset--spacing--50);
}

.st-press__griglia img {
	max-height: 58px;
	width: auto;
	max-width: 100%;
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

.st-press__coda {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--50);
}

@media (max-width: 1000px) {
	.st-press__griglia {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.st-press__griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------- View transition fra pagine */

/*
 * Navigazioni interne senza taglio secco: un sipario rosso pieno attraversa
 * lo schermo dal basso verso l'alto — lo stesso gesto del preloader — e in
 * una sola corsa copre la pagina che lascia e scopre la nuova. Niente
 * dissolvenze: due fronti netti con il rosso del brand in mezzo, sfalsati
 * di un decimo di secondo. L'header vive in un gruppo suo: il sipario non
 * lo tocca e il menu non lampeggia mai.
 *
 * Solo browser con view transition cross-document (Chrome 126+, Safari
 * 18.2+): altrove la navigazione resta quella classica, nessun costo.
 */
@view-transition {
	navigation: auto;
}

/* Il rosso del sipario e' il fondo dell'overlay: vive tra i due fronti. */
::view-transition {
	background: var(--wp--preset--color--red);
}

/* La pagina che lascia viene coperta dal fronte che sale. */
::view-transition-old(root) {
	animation: st-vt-copre 0.28s cubic-bezier(0.65, 0, 0.35, 1) both;
}

/* La nuova viene scoperta dal fronte successivo, stessa corsa. */
::view-transition-new(root) {
	animation: st-vt-scopre 0.28s cubic-bezier(0.65, 0, 0.35, 1) 0.09s both;
}

.st-header {
	view-transition-name: st-header;
}

::view-transition-group(st-header) {
	animation-duration: 0.3s;
}

@keyframes st-vt-copre {
	from {
		clip-path: inset(0 0 0 0);
	}

	to {
		clip-path: inset(0 0 100% 0);
	}
}

@keyframes st-vt-scopre {
	from {
		clip-path: inset(100% 0 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

/*
 * Il menu esteso viene chiuso dal JS un attimo prima dello scatto dello
 * stato vecchio (evento pageswap): qui si azzerano le sue transizioni,
 * cosi' nella foto il menu e' gia' chiuso davvero, non a meta' chiusura.
 */
html.st-vt-scatto .st-menu-overlay,
html.st-vt-scatto .st-menu-overlay *,
html.st-vt-scatto .st-menu-toggle *,
html.st-vt-scatto .st-menu-tondo,
html.st-vt-scatto .st-menu-tondo * {
	transition: none !important;
	animation: none !important;
}

/* Chi preferisce meno movimento naviga come sempre: nessuna animazione. */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ---------------------------------------- Landing (pagine di campagna) */

/*
 * Le landing non hanno menu: in testa una barra fissa con logo e un solo
 * pulsante verso il form, in coda una riga legale. Tutto il resto sono i
 * blocchi normali del tema.
 */
.st-landing__barra {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.st-landing__barra-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	min-height: 76px;
}

.st-landing__barra .st-brand__logo {
	height: 44px;
}

.st-landing__barra .st-button {
	min-height: 40px;
	padding: 0.6rem 1.2rem;
	white-space: nowrap;
}

.st-landing__barra {
	--st-bordo-hover: var(--wp--preset--color--white);
}

/* L'hero nasce sotto un header trasparente: in landing la barra e' solida
   e sta sopra, quindi l'hero parte subito. */
.st-landing .st-hero {
	padding-top: 0;
}

.st-landing__footer {
	padding-block: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--ink);
	color: color-mix(in srgb, var(--wp--preset--color--white) 72%, transparent);
	font-size: 0.8125rem;
	text-align: center;
	line-height: 1.7;
}

.st-landing__footer p {
	margin: 0;
}

.st-landing__footer a {
	color: var(--wp--preset--color--white);
}

@media (max-width: 560px) {
	.st-landing__barra .st-brand__logo {
		height: 36px;
	}

	.st-landing__barra .st-button {
		padding-inline: 0.9rem;
		font-size: 0.85rem;
	}
}

/* ------------------------------------------------------ Date in calendario */

.st-date__intro {
	max-width: 62ch;
	margin-top: var(--wp--preset--spacing--20);
}

.st-date__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.st-date__card {
	display: grid;
	gap: 0.3rem;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 18px 40px color-mix(in srgb, var(--wp--preset--color--black) 7%, transparent);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.st-date__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 50px color-mix(in srgb, var(--wp--preset--color--black) 12%, transparent);
}

.st-section--dark .st-date__card {
	border-color: color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
	box-shadow: none;
}

.st-date__quando {
	display: grid;
}

.st-date__giorno {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 6vw, 4.5rem);
	line-height: 0.95;
	color: var(--wp--preset--color--red);
}

.st-date__mese {
	margin-top: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.st-date__ora {
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
}

.st-section--dark .st-date__ora {
	color: color-mix(in srgb, var(--wp--preset--color--white) 65%, transparent);
}

.st-date__testo {
	margin-top: 0.4rem;
	font-weight: 500;
	line-height: 1.35;
}

.st-date--corsi .st-date__giorno {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
}

.st-date__actions {
	display: flex;
	margin-top: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------- Avviso */

.st-avviso__card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--red) 25%, transparent);
	border-radius: 18px;
	background: color-mix(in srgb, var(--wp--preset--color--red) 7%, var(--wp--preset--color--white));
}

.st-avviso__icona {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
}

.st-avviso__icona svg {
	width: 26px;
	height: 26px;
}

.st-avviso__corpo {
	flex: 1 1 320px;
}

.st-avviso__titolo {
	margin: 0 0 0.25em;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 400;
	line-height: 1.15;
}

.st-avviso__corpo .st-prose p {
	margin: 0;
}

/* -------------------------------------------------------------- Mappa */

.st-mappa__testo {
	max-width: 62ch;
	margin-top: var(--wp--preset--spacing--20);
}

.st-mappa__cornice {
	position: relative;
	/* Altezza fluida, non aspect-ratio: con aspect-ratio l'altezza minima si
	   trasferirebbe alla larghezza e la cornice sborderebbe dal mobile. */
	height: clamp(340px, 40vw, 560px);
	margin-top: var(--wp--preset--spacing--40);
	overflow: hidden;
	border-radius: 18px;
	background: var(--wp--preset--color--ink);
}

.st-mappa__cornice iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Il velo prima del click: stesso fondale caldo della sezione contatti. */
.st-mappa__velo {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--white);
	text-align: center;
	background:
		radial-gradient(40rem 26rem at 80% 10%, color-mix(in srgb, var(--wp--preset--color--red) 28%, transparent), transparent 62%),
		radial-gradient(34rem 24rem at 10% 100%, color-mix(in srgb, var(--wp--preset--color--red) 16%, transparent), transparent 58%),
		linear-gradient(165deg, color-mix(in srgb, var(--wp--preset--color--black) 86%, var(--wp--preset--color--red)), var(--wp--preset--color--black));
}

.st-mappa__velo-inner {
	display: grid;
	gap: 0.9rem;
	justify-items: center;
	max-width: 42ch;
}

.st-mappa__pin {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--red) 55%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--red) 14%, transparent);
}

.st-mappa__pin svg {
	width: 26px;
	height: 26px;
}

.st-mappa__indirizzo {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
}

.st-mappa__link {
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
}

.st-mappa__link:hover {
	color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------ Elenco di voci */

.st-elenco__intro {
	max-width: 62ch;
	margin-top: var(--wp--preset--spacing--20);
}

.st-elenco__lista {
	--st-colonne: 3;
	display: grid;
	grid-template-columns: repeat(var(--st-colonne), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.st-elenco__lista[data-colonne="2"] {
	--st-colonne: 2;
}

.st-elenco__lista[data-colonne="4"] {
	--st-colonne: 4;
}

.st-elenco__voce {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--white);
}

.st-section--dark .st-elenco__voce {
	border-color: color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
}

.st-elenco__numero {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	line-height: 1;
	color: var(--wp--preset--color--red);
}

.st-elenco__titolo {
	margin: 0 0 0.35em;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.st-elenco__testo {
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
}

.st-section--dark .st-elenco__testo {
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
}

/* Etichette: solo i titoli, in fila, come i moduli di un programma. */
.st-elenco--pill .st-elenco__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.st-elenco--pill .st-elenco__voce {
	padding: 0.6rem 1.1rem;
	border-radius: 50px;
}

.st-elenco--pill .st-elenco__titolo {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 500;
}

.st-elenco__actions {
	display: flex;
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 900px) {
	.st-elenco__lista[data-colonne="3"],
	.st-elenco__lista[data-colonne="4"] {
		--st-colonne: 2;
	}
}

@media (max-width: 560px) {
	.st-elenco__lista,
	.st-elenco__lista[data-colonne="2"],
	.st-elenco__lista[data-colonne="3"],
	.st-elenco__lista[data-colonne="4"] {
		--st-colonne: 1;
	}
}

/* Le liste dentro ai testi delle sezioni: puntino rosso, rientro contenuto. */
.st-prose ul {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}

.st-prose li {
	margin-bottom: 0.35rem;
}

.st-prose li::marker {
	color: var(--wp--preset--color--red);
}

/* ------------------------------------------ Revisioni Open Day (cliente) */

/* Card data: giorno in rosso, "/mese" in nero, mese per esteso in grassetto;
   in hover un bagliore rosso sotto la card. */
.st-date__giorno-mese {
	color: var(--wp--preset--color--ink);
	font-size: 0.55em;
}

.st-section--dark .st-date__giorno-mese {
	color: var(--wp--preset--color--white);
}

.st-date__mese {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.st-section--dark .st-date__mese {
	color: var(--wp--preset--color--white);
}

.st-date__card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--red) 35%, transparent);
	box-shadow:
		0 28px 48px -14px color-mix(in srgb, var(--wp--preset--color--red) 55%, transparent),
		0 12px 30px color-mix(in srgb, var(--wp--preset--color--black) 8%, transparent);
}

/* Elenco con foto: card con l'immagine in testa, testo sotto. */
.st-elenco--foto .st-elenco__voce {
	padding: 0;
	overflow: hidden;
}

.st-elenco__foto {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.st-elenco--foto .st-elenco__corpo {
	padding: var(--wp--preset--spacing--30);
}

.st-elenco--foto .st-elenco__titolo {
	font-size: 1.375rem;
}

.st-elenco--foto .st-elenco__testo {
	color: var(--wp--preset--color--body);
}

/* Testata centrata, come nel riferimento del cliente. */
.st-elenco--centro .st-eyebrow,
.st-elenco--centro .st-title {
	text-align: center;
}

.st-elenco--centro .st-elenco__intro {
	max-width: 72ch;
	margin-inline: auto;
	text-align: center;
}

.st-elenco--centro .st-elenco__actions {
	justify-content: center;
}

/* La card con il video: il 16:9 sta sopra titolo e testo, a filo della card. */
.st-elenco__voce--video .st-yt {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Mappa: due colonne, la mappa e la scheda con l'Italia stilizzata. */
.st-mappa__griglia {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.st-mappa__griglia .st-mappa__cornice {
	height: auto;
	min-height: 420px;
	margin-top: 0;
}

.st-mappa__scheda {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--30);
	border-radius: 18px;
	color: var(--wp--preset--color--white);
	text-align: center;
	background:
		radial-gradient(30rem 20rem at 85% 0%, color-mix(in srgb, var(--wp--preset--color--red) 26%, transparent), transparent 62%),
		linear-gradient(165deg, color-mix(in srgb, var(--wp--preset--color--black) 86%, var(--wp--preset--color--red)), var(--wp--preset--color--black));
}

.st-mappa__italia {
	width: min(100%, 280px);
}

.st-italia {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.st-italia__regione {
	fill: color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent);
	stroke: color-mix(in srgb, var(--wp--preset--color--white) 22%, transparent);
	stroke-width: 1;
	stroke-linejoin: round;
}

.st-italia__regione--toscana {
	fill: var(--wp--preset--color--red);
	stroke: var(--wp--preset--color--red);
}

.st-italia__alone {
	fill: var(--wp--preset--color--white);
	opacity: 0.25;
	animation: st-italia-pulsa 2.4s ease-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.st-italia__pin {
	fill: var(--wp--preset--color--white);
	stroke: var(--wp--preset--color--red);
	stroke-width: 3;
}

@keyframes st-italia-pulsa {
	0% {
		transform: scale(0.4);
		opacity: 0.45;
	}

	100% {
		transform: scale(1.4);
		opacity: 0;
	}
}

.st-mappa__regione {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	line-height: 1;
}

.st-mappa__scheda .st-mappa__indirizzo {
	font-size: 1rem;
	color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
}

@media (max-width: 900px) {
	.st-mappa__griglia {
		grid-template-columns: 1fr;
	}

	.st-mappa__griglia .st-mappa__cornice {
		min-height: 320px;
	}
}

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

/* ---------------------------------------- Date in evidenza (due colonne) */

/*
 * Con "evidenzia" la sezione date va a due colonne: a sinistra titolo,
 * testo e pulsante; a destra la prossima data come card grande con
 * l'etichetta rossa, e sotto le altre, compatte e a tutta larghezza.
 */
.st-date--evidenza .st-date__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.st-date--evidenza .st-date__intro {
	max-width: 46ch;
}

.st-date--evidenza .st-date__testa .st-date__actions {
	margin-top: var(--wp--preset--spacing--30);
}

.st-date__card--prossimo {
	position: relative;
	padding: var(--wp--preset--spacing--40);
	box-shadow: 0 28px 48px -14px color-mix(in srgb, var(--wp--preset--color--red) 35%, transparent);
}

.st-date__etichetta {
	display: inline-block;
	margin-bottom: 0.9rem;
	padding: 0.35rem 0.85rem;
	border-radius: 50px;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.st-date__card--prossimo .st-date__giorno {
	font-size: clamp(3.5rem, 6vw, 5rem);
}

.st-date__card--prossimo .st-date__testo {
	font-size: 1.0625rem;
}

/* Le date a ruota: una per riga, data a sinistra e dettagli a destra. */
.st-date__lista--seguenti {
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.st-date__lista--seguenti .st-date__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 1.25rem;
	row-gap: 0;
	padding: 0.9rem 1.25rem;
}

.st-date__lista--seguenti .st-date__quando {
	grid-row: 1 / span 2;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.st-date__lista--seguenti .st-date__giorno {
	font-size: 2.25rem;
}

.st-date__lista--seguenti .st-date__ora {
	margin: 0;
}

.st-date__lista--seguenti .st-date__testo {
	margin: 0;
}

@media (max-width: 900px) {
	.st-date--evidenza .st-date__layout {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 560px) {
	.st-date__lista--seguenti .st-date__quando {
		flex-wrap: wrap;
		gap: 0 0.5rem;
	}
}

/* L'etichetta e' una pillola stretta, non si allarga con la card. */
.st-date__card--prossimo .st-date__etichetta {
	align-self: flex-start;
	width: max-content;
	justify-self: start;
}

/* Sotto i 560px le card compatte tornano su una colonna: data sopra,
   ora e testo sotto, senza andare a capo parola per parola. */
@media (max-width: 560px) {
	.st-date__lista--seguenti .st-date__card {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		row-gap: 0.15rem;
	}

	.st-date__lista--seguenti .st-date__quando {
		grid-row: auto;
	}
}

/* -------------------------------- Bordo animato della card in evidenza */

/*
 * Il glow gira attorno alla card: un gradiente conico sul bordo (via
 * background-clip: il bianco copre il padding-box, il gradiente resta nel
 * bordo) e una copia sfocata dietro, mascherata ad anello. L'angolo e' una
 * custom property registrata, cosi' si anima davvero. Senza @property
 * resta un bordo rosso fermo; con meno movimento idem.
 */
@property --st-angolo {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}

.st-date__card--prossimo {
	--st-angolo: 0deg;
	border: 2px solid transparent;
	background:
		linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box,
		conic-gradient(
			from var(--st-angolo),
			color-mix(in srgb, var(--wp--preset--color--red) 25%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--red) 25%, transparent) 40%,
			color-mix(in srgb, var(--wp--preset--color--red) 55%, transparent) 62%,
			var(--wp--preset--color--red) 80%,
			var(--wp--preset--color--white) 86%,
			color-mix(in srgb, var(--wp--preset--color--red) 25%, transparent) 88%,
			color-mix(in srgb, var(--wp--preset--color--red) 25%, transparent) 100%
		) border-box;
	animation: st-gira 3.2s linear infinite;
}

.st-date__card--prossimo::before {
	content: "";
	position: absolute;
	inset: -6px;
	z-index: 0;
	padding: 8px;
	border-radius: 24px;
	/* Coda lunga e morbida che cresce piano, testa bianca, poi si spegne di colpo: una cometa. */
	background: conic-gradient(
		from var(--st-angolo),
		transparent 0%,
		transparent 42%,
		color-mix(in srgb, var(--wp--preset--color--red) 30%, transparent) 60%,
		color-mix(in srgb, var(--wp--preset--color--red) 75%, transparent) 76%,
		var(--wp--preset--color--red) 83%,
		var(--wp--preset--color--white) 86%,
		transparent 88%,
		transparent 100%
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	filter: blur(10px);
	opacity: 0.9;
	pointer-events: none;
}

@keyframes st-gira {
	to {
		--st-angolo: 360deg;
	}
}

@media (prefers-reduced-motion: reduce) {
	.st-date__card--prossimo {
		animation: none;
		border-color: var(--wp--preset--color--red);
		background: var(--wp--preset--color--white);
	}

	.st-date__card--prossimo::before {
		display: none;
	}
}

/* ---------------------------------------- Titolo hero sottolineato */

.st-hero__title-grande--sottolineato {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--red);
	text-decoration-thickness: 0.07em;
	text-underline-offset: 0.1em;
	text-decoration-skip-ink: none;
}

/* ------------------------------------------------- Conto alla rovescia */

/*
 * Sotto i pulsanti dell'hero: cifre grandi in celle scure traslucide, con
 * l'etichetta rossa sopra e la data per esteso sotto.
 */
.st-countdown {
	margin-top: var(--wp--preset--spacing--40);
	max-width: 560px;
}

.st-countdown__label {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--red);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.st-countdown__cifre {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.6rem;
}

.st-countdown__cella {
	display: grid;
	justify-items: center;
	gap: 0.15rem;
	padding: 0.75rem 0.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 18%, transparent);
	border-radius: 14px;
	background: color-mix(in srgb, var(--wp--preset--color--black) 45%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.st-countdown__numero {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--white);
}

.st-countdown__unita {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
}

.st-countdown__data {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
	text-transform: capitalize;
}

.st-countdown.is-oggi .st-countdown__label::after {
	content: " · oggi!";
}

@media (max-width: 560px) {
	.st-countdown__cifre {
		gap: 0.4rem;
	}

	.st-countdown__cella {
		padding: 0.6rem 0.3rem;
		border-radius: 10px;
	}
}

/* ------------------------------------------ Hero: mai tagliare i contenuti */

/*
 * L'altezza dell'hero e' un minimo, non un tetto: con titolo su due righe,
 * due pulsanti e il conto alla rovescia, su mobile il contenuto supera lo
 * schermo e deve poter allungare la sezione. In piu' un po' d'aria sotto.
 */
.st-hero,
.st-landing .st-hero {
	height: auto;
	min-height: min(900px, 100svh);
	overflow: visible;
}

@media (max-width: 700px) {
	.st-hero,
	.st-landing .st-hero {
		min-height: 100svh;
	}

	.st-hero__inner {
		padding-bottom: var(--wp--preset--spacing--60);
	}
}

/* Riga piccola sotto il titolo grande dell'hero, stesso stile di quella sopra. */
.st-hero__title-sotto {
	margin-top: 0.35em;
}

/* ------------------------------ Card data: tutto su una riga, piu' grande */

.st-date__quando {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.45em;
}

.st-date__giorno {
	font-size: 3.25rem;
}

.st-date__mese {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}

.st-date__anno {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.st-date__quando .st-date__ora {
	margin: 0 0 0 0.35em;
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--body);
}

.st-date__quando .st-date__ora::before {
	content: "·";
	margin-right: 0.5em;
	color: var(--wp--preset--color--red);
}

.st-section--dark .st-date__mese,
.st-section--dark .st-date__quando .st-date__ora {
	color: var(--wp--preset--color--white);
}

.st-date__card--prossimo .st-date__giorno {
	font-size: clamp(3.75rem, 6.5vw, 5.5rem);
}

.st-date__card--prossimo .st-date__mese {
	font-size: clamp(2.25rem, 4vw, 3.5rem);
}

.st-date__card--prossimo .st-date__quando .st-date__ora {
	font-size: 1.25rem;
}

.st-date__lista--seguenti .st-date__card {
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}

.st-date__lista--seguenti .st-date__quando {
	grid-row: auto;
}

.st-date__lista--seguenti .st-date__giorno {
	font-size: 2.5rem;
}

.st-date__lista--seguenti .st-date__mese {
	font-size: 1.6rem;
}

/* "Perche' scegliere": su mobile testata allineata a sinistra. */
@media (max-width: 700px) {
	.st-elenco--centro .st-eyebrow,
	.st-elenco--centro .st-title,
	.st-elenco--centro .st-elenco__intro {
		text-align: left;
		margin-inline: 0;
	}

	.st-elenco--centro .st-elenco__actions {
		justify-content: flex-start;
	}
}

/* ------------------------------------------- Come raggiungerci (mappa) */

.st-mappa__raggiungerci {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.st-mappa__mezzo {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--white);
}

.st-mappa__mezzo-icona {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--red) 12%, transparent);
	color: var(--wp--preset--color--red);
}

.st-mappa__mezzo-icona svg {
	width: 26px;
	height: 26px;
}

.st-mappa__mezzo-titolo {
	margin: 0 0 0.4em;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 600;
}

.st-mappa__mezzo-testo {
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 1000px) {
	.st-mappa__raggiungerci {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.st-mappa__raggiungerci {
		grid-template-columns: 1fr;
	}
}

/* Nella card grande l'orario ha una riga sua, pulita, senza il puntino:
   la data e' troppo grande per condividere la riga con "ore 15:30". */
.st-date__card--prossimo .st-date__quando .st-date__ora {
	flex-basis: 100%;
	margin: 0.35rem 0 0;
	font-size: 1.375rem;
	font-weight: 600;
}

.st-date__card--prossimo .st-date__quando .st-date__ora::before {
	content: none;
}

/* --------------------------- Mappa: testata a due colonne, mappa larga */

.st-mappa__testata {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.st-mappa__intro .st-mappa__indirizzo {
	margin-top: var(--wp--preset--spacing--30);
	font-weight: 600;
}

.st-mappa__intro .st-mappa__link {
	display: inline-block;
	margin-top: 0.25rem;
}

/* La scheda mostra solo la Toscana: l'Italia attorno sfuma nel fondo. */
.st-mappa__scheda .st-mappa__italia {
	width: min(100%, 320px);
	-webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
}

.st-mappa__scheda .st-italia__regione {
	stroke-width: 0.6;
}

.st-mappa__scheda .st-italia__pin {
	r: 5;
	stroke-width: 2;
}

.st-mappa__scheda .st-italia__alone {
	r: 16;
}

.st-mappa__citta {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
}

.st-mappa .st-mappa__cornice {
	height: auto;
	min-height: 440px;
	margin-top: var(--wp--preset--spacing--40);
}

/* Come raggiungerci: pulsanti compatti, il testo vive nella modale. */
.st-mappa__raggiungerci-titolo {
	margin: var(--wp--preset--spacing--40) 0 0;
	color: var(--wp--preset--color--red);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.st-mappa__raggiungerci {
	margin-top: var(--wp--preset--spacing--20);
}

.st-mappa__mezzo {
	display: grid;
	justify-items: start;
	gap: 0.15rem;
	width: 100%;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.st-mappa__mezzo:hover,
.st-mappa__mezzo:focus-visible {
	border-color: color-mix(in srgb, var(--wp--preset--color--red) 40%, transparent);
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--wp--preset--color--red) 45%, transparent);
}

.st-mappa__mezzo .st-mappa__mezzo-icona {
	margin-bottom: 0.6rem;
}

.st-mappa__mezzo-hint {
	font-size: 0.85rem;
	color: var(--wp--preset--color--red);
	font-weight: 500;
}

.st-mappa__mezzo-hint::after {
	content: " \2192";
}

/* --------------------------------------------------------------- Modale */

.st-modale {
	width: min(92vw, 560px);
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
	box-shadow: 0 40px 80px color-mix(in srgb, var(--wp--preset--color--black) 40%, transparent);
}

.st-modale::backdrop {
	/* Senza sfocatura, come le altre finestre (29-09-2026). */
	background: color-mix(in srgb, var(--wp--preset--color--black) 65%, transparent);
}

.st-modale__corpo {
	position: relative;
	padding: var(--wp--preset--spacing--40);
}

.st-modale__chiudi {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--black) 6%, transparent);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.st-modale__chiudi:hover {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
}

.st-modale__titolo {
	margin: 0.9rem 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 400;
}

.st-modale__testo strong {
	color: var(--wp--preset--color--ink);
}

/* Le card Open Day non mostrano l'anno: richiesta del cliente. */
.st-date--openday .st-date__anno {
	display: none;
}

@media (max-width: 900px) {
	.st-mappa__testata {
		grid-template-columns: 1fr;
	}

	.st-mappa .st-mappa__cornice {
		min-height: 320px;
	}
}

/* Hero: la colonna del titolo si scurisce verso sinistra, cosi' il testo
   stacca dalla foto. Si somma al velo esistente. */
.st-hero__scrim {
	background-image:
		linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--black) 62%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--black) 30%, transparent) 42%, transparent 72%),
		linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--black) 20%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--black) 45%, transparent) 60%, color-mix(in srgb, var(--wp--preset--color--black) 78%, transparent) 100%);
}

/* ----------------------------------------- CTA con form: versione chiara */

/*
 * Opzione "chiaro" del blocco: fondo carta con un accenno di rosso, foto
 * ridotta a filigrana, card del form bianca. Stessa struttura del blocco.
 */
.st-cta--chiaro {
	--st-bordo-hover: var(--wp--preset--color--black);
	color: var(--wp--preset--color--body);
	background: linear-gradient(
		165deg,
		var(--wp--preset--color--white) 0%,
		color-mix(in srgb, var(--wp--preset--color--white) 92%, var(--wp--preset--color--red)) 100%
	);
}

.st-cta--chiaro .st-cta__media {
	opacity: 0.07;
}

.st-cta--chiaro .st-cta__scrim {
	background:
		radial-gradient(60rem 40rem at 88% 0%, color-mix(in srgb, var(--wp--preset--color--red) 12%, transparent), transparent 62%),
		radial-gradient(50rem 36rem at 0% 100%, color-mix(in srgb, var(--wp--preset--color--red) 8%, transparent), transparent 58%);
}

.st-cta--chiaro .st-cta__title {
	color: var(--wp--preset--color--ink);
}

.st-cta--chiaro .st-cta__dato small {
	color: var(--wp--preset--color--muted);
}

.st-cta--chiaro .st-cta__icona {
	color: var(--wp--preset--color--red);
}

.st-cta--chiaro a.st-cta__canale:hover .st-cta__icona,
.st-cta--chiaro a.st-cta__canale:focus-visible .st-cta__icona {
	color: var(--wp--preset--color--white);
}

.st-cta--chiaro .st-cta__form {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--line);
	box-shadow: 0 24px 60px color-mix(in srgb, var(--wp--preset--color--black) 12%, transparent);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.st-cta--chiaro .st-form__label {
	color: var(--wp--preset--color--muted);
}

.st-cta--chiaro .st-form__input,
.st-cta--chiaro .st-form__textarea {
	border-color: var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
}

.st-cta--chiaro .st-form__input:focus,
.st-cta--chiaro .st-form__textarea:focus {
	background: var(--wp--preset--color--white);
}

.st-cta--chiaro .st-form__consent {
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------- Scheda Toscana: chiara */

.st-mappa__scheda {
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	background:
		radial-gradient(30rem 20rem at 85% 0%, color-mix(in srgb, var(--wp--preset--color--red) 10%, transparent), transparent 62%),
		var(--wp--preset--color--white);
}

.st-mappa__scheda .st-italia__regione {
	fill: color-mix(in srgb, var(--wp--preset--color--black) 8%, transparent);
	stroke: color-mix(in srgb, var(--wp--preset--color--black) 22%, transparent);
}

.st-mappa__scheda .st-italia__regione--toscana {
	fill: var(--wp--preset--color--red);
	stroke: var(--wp--preset--color--red);
}

.st-mappa__scheda .st-italia__alone {
	fill: var(--wp--preset--color--red);
}

.st-mappa__scheda .st-mappa__citta {
	color: var(--wp--preset--color--muted);
}

/* Nel form chiaro il link della privacy torna scuro (ereditava il bianco). */
.st-cta--chiaro .st-form__consent a,
.st-cta--chiaro .st-form__esito {
	color: var(--wp--preset--color--ink);
}

/* ------------------------ Scheda Toscana: quadrata, solo la mappa */

.st-mappa__scheda {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--30);
	gap: 0;
}

.st-mappa__scheda .st-mappa__italia {
	width: 100%;
	height: 100%;
	max-width: none;
	/* Sfumatura ai bordi appena accennata. */
	-webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}

.st-mappa__scheda .st-italia {
	width: 100%;
	height: 100%;
}

/* -------- Form chiaro: foto scura e sfocata, card grigia con un velo rosso */

.st-cta--chiaro {
	--st-bordo-hover: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--black);
}

.st-cta--chiaro .st-cta__media {
	opacity: 0.55;
	/* Ritaglia la foto ingrandita qui sotto: senza, la pagina era larga il 2%
	   in piu' e scorreva di lato (26 px a 1280). */
	overflow: hidden;
}

.st-cta--chiaro .st-cta__media img {
	/* Leggermente sfocata; lo scale nasconde i bordi che la sfocatura scopre. */
	filter: grayscale(1) blur(3px);
	transform: scale(1.04);
}

.st-cta--chiaro .st-cta__scrim {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--black) 70%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--black) 45%, transparent) 55%, color-mix(in srgb, var(--wp--preset--color--black) 35%, transparent) 100%),
		radial-gradient(60rem 40rem at 88% 0%, color-mix(in srgb, var(--wp--preset--color--red) 18%, transparent), transparent 62%);
}

.st-cta--chiaro .st-cta__title {
	color: var(--wp--preset--color--white);
}

.st-cta--chiaro .st-cta__dato small {
	color: color-mix(in srgb, var(--wp--preset--color--white) 65%, transparent);
}

.st-cta--chiaro .st-cta__icona {
	color: var(--wp--preset--color--white);
}

/* La card: grigio chiaro con un accenno di rosso, davvero flebile. */
.st-cta--chiaro .st-cta__form {
	color: var(--wp--preset--color--body);
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--wp--preset--color--white) 95%, var(--wp--preset--color--black)) 0%,
		color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--white) 95%, var(--wp--preset--color--black)) 96%, var(--wp--preset--color--red)) 100%
	);
	border-color: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
	box-shadow: 0 30px 70px color-mix(in srgb, var(--wp--preset--color--black) 45%, transparent);
}

.st-date__vuoto {
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: 18px;
	color: var(--wp--preset--color--muted);
}

/* Su mobile e su qualunque schermo touch le frecce dei nastri spariscono:
   col dito si scorre direttamente, e le frecce davano problemi. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
	.st-slider__freccia {
		display: none;
	}
}

/* Come raggiungerci su telefono: due pulsanti per riga, piu' compatti. */
@media (max-width: 560px) {
	.st-mappa__raggiungerci {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.st-mappa__mezzo {
		padding: 1rem;
	}

	.st-mappa__mezzo .st-mappa__mezzo-icona {
		width: 44px;
		height: 44px;
		margin-bottom: 0.4rem;
	}

	.st-mappa__mezzo-titolo {
		font-size: 1rem;
	}
}

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

.st-news__filtri {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.st-news__griglia {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

/* La pagina News sta su un grigio chiaro, cosi' il bianco delle card
   stacca; i filtri prendono il bianco delle card. */
.st-news {
	background: color-mix(in srgb, var(--wp--preset--color--line) 55%, var(--wp--preset--color--white));
}

.st-news .st-filtri__filtro:not([aria-current="true"]) {
	background: var(--wp--preset--color--white);
}

/* Solo nella pagina News, dove si filtra (main.js): come la griglia dei
   docenti, posizionata per le copie delle card che escono, righe in alto
   mentre l'altezza si anima, niente scroll anchoring sulle card che si
   spostano. */
.st-news .st-news__griglia {
	position: relative;
	align-content: start;
	overflow-anchor: none;
}

.st-news__card {
	display: flex;
}

/* Le card delle altre testate hanno l'attributo hidden. */
.st-news__card[hidden] {
	display: none;
}

/* Copia di una card che esce dal filtro: ferma dov'era, svanisce. */
.st-news__card--fantasma {
	position: absolute;
	margin: 0;
	pointer-events: none;
}

/* Durante il riordino la sezione ritaglia: niente scorrimento laterale. */
.st-news.is-filtrando {
	overflow: hidden;
	overflow: clip;
}

.st-news__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.st-news__link:hover,
.st-news__link:focus-visible {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--red) 35%, transparent);
	box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--wp--preset--color--red) 45%, transparent);
}

.st-news__foto {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--wp--preset--color--line);
}

.st-news__corpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--30);
}

.st-news__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.st-news__fonte {
	color: var(--wp--preset--color--red);
}

.st-news__titolo {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.st-news__estratto {
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
}

.st-news__leggi {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--red);
}

.st-news__leggi::after {
	content: " \2192";
}

/* --- Articolo singolo --- */

.st-articolo__inner {
	max-width: 820px;
}

.st-articolo__titolo {
	font-size: clamp(2rem, 4vw, 3rem);
	max-width: 24ch;
}

.st-articolo__foto {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.st-articolo__foto img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 18px;
}

.st-articolo__testo {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.st-articolo__testo h2,
.st-articolo__testo h3 {
	margin: 1.5em 0 0.5em;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	line-height: 1.2;
}

.st-articolo__testo h2 {
	font-size: 1.75rem;
}

.st-articolo__testo h3 {
	font-size: 1.375rem;
}

.st-articolo__fonte {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30);
	border-radius: 18px;
	background: var(--wp--preset--color--paper);
}

.st-articolo__fonte-label {
	margin: 0;
}

@media (max-width: 1000px) {
	.st-news__griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.st-news__griglia {
		grid-template-columns: 1fr;
	}
}

/* Nota sotto la data in evidenza: "GRATUITO · POSTI LIMITATI". */
.st-date__nota {
	display: block;
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--red);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ------------------------ Form ActiveCampaign vestito come il nostro */

/*
 * Il form lo disegna lo script di ActiveCampaign dentro il contenitore
 * .st-ac (mu-plugin st-ac: card del blocco st/cta-form e scheda della
 * brochure dei corsi), con i suoi stili. Qui si cambia solo l'aspetto:
 * campi, nomi, valori, validazione e invio restano quelli di AC.
 *
 * Specificita': AC scrive le sue regole sull'id del form (#_form_..._ X),
 * alcune con !important. Ogni regola qui parte da
 * ".st-ac form:is(._form, #st-ac-specificita)", che con l'id dentro :is()
 * vale (1,1,1) senza conoscere quello di AC, e le dichiarazioni sono
 * !important per battere anche le loro senza.
 *
 * Rifatto il 06-10-2026 (Mattia: "fanno proprio schifo", troppo lunghi da
 * scorrere): campi bassi, due colonne quando il contenitore e' largo almeno
 * 26rem (container query: card laterale, scheda della brochure, landing),
 * etichette piccole senza maiuscolo. Dal pomeriggio del 06-10 (Mattia: i
 * nomi dei corsi si leggono per intero): scelta singola a tendina, scelte
 * multiple a riquadri col testo completo, casella privacy col testo del
 * consenso e l'informativa in una finestra.
 * Tendina, coppie di campi, etichette e riga della privacy li fa
 * st-ac/vesti.js: senza lo script il form resta in una colonna, ordinato,
 * con i radio di AC in riquadri.
 */
.st-ac {
	--st-ac-bordo: color-mix(in srgb, var(--wp--preset--color--muted) 85%, var(--wp--preset--color--white));
	--st-ac-campo: 48px;
	--st-ac-scelta: 44px;

	container: st-ac / inline-size;
}

/*
 * Da desktop campi, riquadri delle scelte e riga delle caselle un filo piu'
 * bassi; sul telefono restano bersagli da dito.
 */
@media (min-width: 1024px) {
	.st-ac {
		--st-ac-campo: 46px;
		--st-ac-scelta: 40px;
	}
}

/*
 * Niente cornice doppia: il fondo e il bordo li da' la card che ospita il
 * form.
 */
.st-ac form:is(._form, #st-ac-specificita) {
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: 1.45 !important;
	color: var(--wp--preset--color--body) !important;
}

/*
 * Senza !important sul display: dopo l'invio AC nasconde i campi con uno
 * stile in linea (display: none) per mostrare il grazie.
 */
.st-ac form:is(._form, #st-ac-specificita) ._form-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 0.75rem !important;
	width: auto !important;
	margin: 0 !important;
}

.st-ac form:is(._form, #st-ac-specificita) :is(._form_element, ._button-wrapper) {
	float: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * Righe vuote della griglia: i contenitori dei soli campi nascosti (UTM,
 * dati per AC), il div di clear in fondo e il paragrafo della privacy
 * assorbito nella riga della casella (vesti.js). Nascosti col CSS i campi
 * nascosti partono lo stesso.
 */
.st-ac form:is(._form, #st-ac-specificita) ._form_element:not(:has(:not(input[type="hidden"]))),
.st-ac form:is(._form, #st-ac-specificita) :is(._clear-element, .st-ac-assorbito) {
	display: none !important;
}

/* Due colonne quando c'e' posto: coppie di campi di testo (vesti.js). */
@container st-ac (min-width: 26rem) {
	.st-ac form:is(._form, #st-ac-specificita) ._form-content {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.st-ac form:is(._form, #st-ac-specificita) ._form-content > * {
		grid-column: 1 / -1;
	}

	.st-ac form:is(._form, #st-ac-specificita) ._form-content > .st-ac-mezzo {
		grid-column: auto;
	}
}

/* Titolo e testi del form. */
.st-ac form:is(._form, #st-ac-specificita) ._form-title {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: var(--wp--preset--font-size--titolo-m) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--ink) !important;
}

.st-ac form:is(._form, #st-ac-specificita) :is(._html-code, ._html-code p) {
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 0.8125rem !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--muted) !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._html-code :is(h1, h2, h3, h4) {
	margin: 0 0 0.35rem !important;
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: var(--wp--preset--font-size--titolo-s) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--ink) !important;
}

/*
 * Titolo del form (18, 20, 64) come quello del form 3; la misura in linea
 * di AC la toglie vesti.js.
 */
.st-ac form:is(._form, #st-ac-specificita) ._html-code :is(h1, h2) {
	font-size: var(--wp--preset--font-size--titolo-m) !important;
	line-height: 1.15 !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._html-code :is(h1, h2, h3, h4) * {
	font-family: inherit !important;
	font-size: inherit !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._html-code a {
	color: var(--wp--preset--color--ink) !important;
	text-decoration: underline !important;
	text-underline-offset: 0.2em;
}

/*
 * "Vivi un giorno a Scuola Tessieri" dentro i form dei corsi: un capitolo
 * a parte.
 */
.st-ac form:is(._form, #st-ac-specificita) ._form_element:has(._html-code :is(h2, h3)):not(:first-child) {
	margin-top: 0.25rem !important;
	padding-top: 1rem !important;
	border-top: 1px solid var(--wp--preset--color--line) !important;
}

/* Etichette: piccole, come sono scritte in AC, attaccate al campo. */
.st-ac form:is(._form, #st-ac-specificita) ._form-label {
	display: block !important;
	float: none !important;
	width: auto !important;
	margin: 0 0 0.375rem !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--wp--preset--color--ink) !important;
}

/*
 * Asterisco: il rosso scurito di un quinto, per i 4,5:1 sul fondo rosato
 * della card.
 */
.st-ac form:is(._form, #st-ac-specificita) .field-required {
	margin-left: 0.15em !important;
	font-size: inherit !important;
	font-weight: 400 !important;
	color: color-mix(in srgb, var(--wp--preset--color--red) 80%, var(--wp--preset--color--black)) !important;
}

/*
 * Campi: bianchi, bordo oltre i 3:1 sul campo e sul fondo della card,
 * anello rosso al fuoco.
 */
.st-ac form:is(._form, #st-ac-specificita) ._field-wrapper :is(input[type="text"], input[type="email"], input[type="tel"], select) {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	height: var(--st-ac-campo) !important;
	margin: 0 !important;
	padding: 0 0.875rem !important;
	border: 1px solid var(--st-ac-bordo) !important;
	border-radius: 10px !important;
	background-color: var(--wp--preset--color--white) !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--body) !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	line-height: 1.3 !important;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.st-ac form:is(._form, #st-ac-specificita) ._field-wrapper :is(input, select):hover {
	border-color: var(--wp--preset--color--body) !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._field-wrapper :is(input, select):focus {
	border-color: var(--wp--preset--color--red) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--red) 25%, transparent) !important;
	outline: 2px solid transparent !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._field-wrapper input::placeholder {
	color: var(--wp--preset--color--muted) !important;
	opacity: 1;
}

.st-ac form:is(._form, #st-ac-specificita) ._field-wrapper :is(input, select)._has_error {
	border-color: var(--wp--preset--color--red) !important;
}

/* La tendina con la freccia del sito al posto di quella del sistema. */
.st-ac form:is(._form, #st-ac-specificita) ._field-wrapper select {
	padding-right: 2.5rem !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--body) 50%),
		linear-gradient(135deg, var(--wp--preset--color--body) 50%, transparent 50%) !important;
	background-position: calc(100% - 1.3rem) 50%, calc(100% - 1rem) 50% !important;
	background-size: 0.3rem 0.3rem !important;
	background-repeat: no-repeat !important;
	text-overflow: ellipsis;
	cursor: pointer;
}

.st-ac form:is(._form, #st-ac-specificita) ._field-wrapper select option {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
}

/* Messaggi di errore di AC: sopra il campo, qualunque sia la sua altezza. */
.st-ac form:is(._form, #st-ac-specificita) ._error._above {
	bottom: 100% !important;
}

.st-ac form:is(._form, #st-ac-specificita) :is(._error-inner, ._form-thank-you) {
	font-family: inherit !important;
}

/* Gruppi (fieldset): niente cornice. */
.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset {
	position: relative !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* La legend rimasta in un div (senza vesti.js) sta su una riga sua. */
.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset > ._row:not(._checkbox-radio) {
	grid-column: 1 / -1;
	width: auto !important;
	margin: 0 !important;
}

/*
 * Il div rimasto vuoto quando vesti.js riporta la legend in testa al
 * fieldset.
 */
.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset > ._row:not(._checkbox-radio):not(:has(*)) {
	display: none !important;
}

/*
 * Gruppi di scelte (due o piu' radio o caselle): riquadri con la casella
 * vera e il testo completo dell'opzione, affiancati quando c'e' posto
 * (Mattia, 06-10-2026: i nomi dei corsi si leggono per intero; prima erano
 * pillole col testo accorciato). Due colonne solo se ognuna ha 16rem: la
 * brochure, larga 500 px, li tiene uno sotto l'altro su una riga sola
 * ("Alta Formazione in Pasticceria" non va a capo). Tutto il riquadro e' cliccabile
 * (l'etichetta lo copre), alto come un bersaglio da dito; scelto, prende il
 * bordo rosso. Con vesti.js i radio diventano una tendina e il loro gruppo
 * si nasconde (.st-ac-sostituito): i riquadri restano per le caselle
 * (brochure, form 51) e, senza lo script, per i radio. Il messaggio di AC
 * "Seleziona un'opzione" va su una riga sua (vesti.js lo porta sotto i
 * riquadri; senza lo script resta in testa al primo).
 */
.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset:not(.st-ac-sostituito):has(> ._checkbox-radio ~ ._checkbox-radio) {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)) !important;
	gap: 0.5rem !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset.st-ac-sostituito {
	display: none !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset:has(> ._checkbox-radio ~ ._checkbox-radio) > legend {
	float: none !important;
	width: 100% !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset:has(> ._checkbox-radio ~ ._checkbox-radio) > ._checkbox-radio {
	position: relative !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.375rem 0.625rem !important;
	min-width: 0 !important;
	min-height: var(--st-ac-scelta) !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0.5rem 0.875rem !important;
	border: 1px solid var(--st-ac-bordo) !important;
	border-radius: 10px !important;
	background: var(--wp--preset--color--white) !important;
	transition: background-color 0.2s, border-color 0.2s;
}

.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset:has(> ._checkbox-radio ~ ._checkbox-radio) > ._checkbox-radio:hover {
	border-color: var(--wp--preset--color--body) !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset:has(> ._checkbox-radio ~ ._checkbox-radio) > ._checkbox-radio:has(> input:checked) {
	border-color: var(--wp--preset--color--red) !important;
	background: color-mix(in srgb, var(--wp--preset--color--red) 6%, var(--wp--preset--color--white)) !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset:has(> ._checkbox-radio ~ ._checkbox-radio) > ._checkbox-radio:has(> input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: 2px !important;
}

/* La casella vera e il suo testo, nei riquadri e nella casella singola. */
.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset > ._checkbox-radio > input {
	flex: none;
	width: 1.25rem !important;
	height: 1.25rem !important;
	margin: 0 !important;
	accent-color: var(--wp--preset--color--red);
	cursor: pointer;
}

.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset > ._checkbox-radio > span {
	flex: 1 1 0;
	min-width: 0;
}

.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset:has(> ._checkbox-radio ~ ._checkbox-radio) > ._checkbox-radio label {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--body) !important;
	cursor: pointer;
}

/* L'etichetta copre il riquadro: si sceglie toccandolo dovunque. */
.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset:has(> ._checkbox-radio ~ ._checkbox-radio) > ._checkbox-radio label::after {
	content: "";
	position: absolute;
	inset: 0;
}

.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset ._error-inner {
	flex: 0 0 100%;
	grid-column: 1 / -1;
	margin: 0 !important;
}

/*
 * Scelta singola a tendina (vesti.js, al posto dei radio): il select vero
 * copre tutto il campo (clic, tastiera, lettori di schermo, menu del
 * sistema); il testo della voce scelta lo scrive sopra uno span che va a
 * capo, cosi' "Mi interessa il Master in Cultura Gastronomica e
 * Ospitalita'" si legge tutto anche sul telefono. Il campo cresce col testo.
 */
.st-ac form:is(._form, #st-ac-specificita) ._field-wrapper.st-ac-tendina {
	display: grid !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._field-wrapper.st-ac-tendina > * {
	grid-area: 1 / 1;
}

.st-ac form:is(._form, #st-ac-specificita) ._field-wrapper.st-ac-tendina > select.st-ac-tendina__campo {
	align-self: stretch;
	height: auto !important;
	min-height: var(--st-ac-campo) !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}

.st-ac form:is(._form, #st-ac-specificita) .st-ac-tendina__testo {
	z-index: 1;
	align-self: center;
	min-width: 0;
	padding: 0.625rem 2.5rem 0.625rem 0.875rem;
	border: 1px solid transparent;
	color: var(--wp--preset--color--body) !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	line-height: 1.3 !important;
	overflow-wrap: break-word;
	pointer-events: none;
}

.st-ac form:is(._form, #st-ac-specificita) .st-ac-tendina--vuota .st-ac-tendina__testo {
	color: var(--wp--preset--color--muted) !important;
}

/*
 * Contrasto elevato (Windows): il sistema ridipinge il testo del select con
 * i suoi colori, e si leggerebbe due volte. Resta solo il select, con la
 * sua freccia di sistema (la nostra e' un'immagine di sfondo, che li' non si
 * vede).
 */
@media (forced-colors: active) {
	.st-ac form:is(._form, #st-ac-specificita) ._field-wrapper.st-ac-tendina > select.st-ac-tendina__campo {
		-webkit-appearance: menulist !important;
		appearance: auto !important;
		color: CanvasText !important;
		-webkit-text-fill-color: CanvasText;
	}

	.st-ac form:is(._form, #st-ac-specificita) .st-ac-tendina__testo {
		display: none;
	}
}

/* L'errore di AC sul gruppo, portato sotto la tendina da vesti.js. */
.st-ac form:is(._form, #st-ac-specificita) .st-ac-tendina + ._error-inner {
	margin: 0.375rem 0 0 !important;
}

/*
 * Casella singola (privacy, "Voglio iscrivermi all'open day"): casella e
 * testo su una riga, tutta la riga cliccabile e alta come un bersaglio da
 * dito. Il testo lungo della privacy va su piu' righe: la casella resta
 * accanto alla prima. Misura e interlinea del testo cambiano per contesto
 * (--st-ac-casella-testo, --st-ac-casella-riga: la privacy e' piu' piccola).
 */
.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset:not(:has(> ._checkbox-radio ~ ._checkbox-radio)) > ._checkbox-radio {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	column-gap: 0.625rem !important;
	width: auto !important;
	margin: 0 !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset:not(:has(> ._checkbox-radio ~ ._checkbox-radio)) > ._checkbox-radio > input {
	margin: calc((var(--st-ac-scelta) - 1.25rem) / 2) 0 0 !important;
}

/*
 * Testo che scorre (il link della privacy resta attaccato a "l'"): la prima
 * riga e' centrata nell'altezza del bersaglio, come la casella.
 */
.st-ac form:is(._form, #st-ac-specificita) ._form-fieldset:not(:has(> ._checkbox-radio ~ ._checkbox-radio)) > ._checkbox-radio label {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding-block: calc((var(--st-ac-scelta) - var(--st-ac-casella-riga, 1.4) * 1em) / 2) !important;
	font-family: inherit !important;
	font-size: var(--st-ac-casella-testo, var(--wp--preset--font-size--small)) !important;
	font-weight: 400 !important;
	line-height: var(--st-ac-casella-riga, 1.4) !important;
	color: var(--wp--preset--color--body) !important;
	cursor: pointer;
}

/*
 * La casella privacy (vesti.js: "Ho letto l'informativa sulla privacy e
 * acconsento...") con il testo dei testi piccoli del form: sul telefono
 * quattro righe invece di cinque.
 */
.st-ac .st-ac-riga-privacy {
	--st-ac-casella-testo: 0.8125rem;
	--st-ac-casella-riga: 1.45;
}

.st-ac form:is(._form, #st-ac-specificita) ._checkbox-radio label a {
	color: var(--wp--preset--color--ink) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-underline-offset: 0.2em;
}

/*
 * Privacy: il titolo lungo di AC ("Accettazione Privacy | Se non viene
 * accettata...") resta per i lettori di schermo ma non si vede; la riga
 * della casella basta. Lo stesso per "Verifica la richiesta" sopra il
 * reCAPTCHA, che si spiega da se'.
 */
.st-ac form:is(._form, #st-ac-specificita) ._form_element:has(input[type="checkbox"][name="field[3][]"]) legend,
.st-ac form:is(._form, #st-ac-specificita) ._form_element:has(.g-recaptcha) > ._form-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/*
 * Il reCAPTCHA del form 3 e' un riquadro largo 304 px fissi: a sinistra e,
 * se il form e' piu' stretto, rimpicciolito dall'angolo in alto a
 * sinistra; il margine negativo restituisce l'altezza che la scala toglie.
 */
.st-ac form:is(._form, #st-ac-specificita) .g-recaptcha {
	--st-ac-captcha: 1;

	width: 304px;
	margin-bottom: calc(78px * (var(--st-ac-captcha) - 1));
	transform: scale(var(--st-ac-captcha));
	transform-origin: left top;
}

@container st-ac (max-width: 303px) {
	.st-ac form:is(._form, #st-ac-specificita) .g-recaptcha {
		--st-ac-captcha: 0.87;
	}
}

@container st-ac (max-width: 264px) {
	.st-ac form:is(._form, #st-ac-specificita) .g-recaptcha {
		--st-ac-captcha: 0.76;
	}
}

@container st-ac (max-width: 230px) {
	.st-ac form:is(._form, #st-ac-specificita) .g-recaptcha {
		--st-ac-captcha: 0.69;
	}
}

/*
 * Il pulsante di invio come il nostro: pillola rossa a tutta larghezza
 * (AC mette fondo, bordo, raggio e colore con !important).
 */
.st-ac form:is(._form, #st-ac-specificita) ._button-wrapper {
	margin-top: 0.25rem !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 0.75rem 1.5rem !important;
	border: 2px solid transparent !important;
	border-radius: 50px !important;
	background: var(--wp--preset--color--red) !important;
	color: var(--wp--preset--color--white) !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	transition: background-color 0.2s, border-color 0.2s !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._submit:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--black) !important;
}

.st-ac form:is(._form, #st-ac-specificita) ._submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: 2px !important;
}

/*
 * Ripiego (mu-plugin st-ac, st_ac_embed()): il link al form ospitato da AC
 * per chi non vede il form (script bloccato, rete, AC giu'). Sparisce appena
 * lo script di AC ha disegnato il suo form._form nel contenitore. Con
 * JavaScript spento resta solo la copia nel <noscript>, non due link.
 * Colore ereditato: vale nella card scura, in quella chiara e nella scheda
 * della brochure.
 */
.st-ac__ripiego {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

.st-ac__ripiego a {
	display: inline-block;
	padding-block: 0.25rem;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.st-ac:has(form._form) .st-ac__ripiego {
	display: none;
}

/*
 * Lo script di AC disegna il form 0,1-0,5 s dopo il primo disegno della
 * pagina (misurato il 06-10): il ripiego aspetta 2 s prima di farsi vedere,
 * cosi' "Il modulo non si e' caricato?" non lampeggia in una card che sta
 * per riempirsi (su /contatti/ e' sopra la piega). Lo spazio resta
 * occupato: niente salto quando compare. Non e' movimento: vale anche con
 * prefers-reduced-motion. La copia nel <noscript> non aspetta.
 */
.st-ac > .st-ac__ripiego {
	animation: st-ac-ripiego 0s 2s both;
}

@keyframes st-ac-ripiego {
	from {
		visibility: hidden;
	}
}

@media (scripting: none) {
	.st-ac > .st-ac__ripiego {
		display: none;
	}
}

/*
 * La card del form puo' stringersi sotto la larghezza del reCAPTCHA (304 px
 * fissi): ci pensa la scala qui sopra (05-10-2026, a 375 px la pagina
 * scorreva di lato).
 */
.st-cta__form {
	min-width: 0;
}

/*
 * Brochure dei corsi (mu-plugin st-ac, richiesta C5 di Fragos): il form AC
 * al posto del pulsante che portava fuori dal sito, in una scheda chiara col
 * filo rosso in testa, come la card del form in fondo alla pagina.
 */
.st-ac--scheda {
	position: relative;
	margin-top: var(--wp--preset--spacing--40);
	padding: clamp(var(--wp--preset--spacing--30), 3vw, var(--wp--preset--spacing--40));
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--paper);
}

.st-section--paper .st-ac--scheda {
	background: var(--wp--preset--color--white);
}

.st-ac--scheda::before {
	content: "";
	position: absolute;
	top: -1px;
	right: 20px;
	left: 20px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--red), transparent);
}

/* ------------------------------------- Masterclass: scheda e iscrizione */

.st-mc__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.st-mc__titolo {
	margin-bottom: var(--wp--preset--spacing--40);
}

.st-mc__dati {
	margin: 0;
}


.st-mc__riga dt {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.st-mc__riga dd {
	margin: 0;
	font-weight: 500;
}

.st-mc__sotto {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--titolo-s);
	font-weight: 600;
}

/*
 * "La masterclass comprende": una fascia su carta a tutta larghezza sotto
 * scheda e card, con le voci in fila e un'icona grande per ciascuna
 * (chiesto da Mattia il 10-09: piu' grafica di un elenco puntato). Su
 * telefono torna elenco, ma con le icone.
 */
.st-mc__inclusi {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border-radius: 18px;
	background: var(--wp--preset--color--paper);
}

.st-section--paper .st-mc__inclusi {
	background: var(--wp--preset--color--white);
}

.st-mc__comprende {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-mc__incluso {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	text-align: center;
	font-weight: 500;
	line-height: 1.3;
}

.st-mc__icona {
	display: grid;
	place-items: center;
	width: 4.75rem;
	height: 4.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--red);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--wp--preset--color--black) 7%, transparent);
}

.st-section--paper .st-mc__icona {
	background: var(--wp--preset--color--paper);
	box-shadow: none;
}

.st-mc__icona svg {
	width: 2.25rem;
	height: 2.25rem;
}

@media (max-width: 640px) {
	.st-mc__inclusi {
		padding: var(--wp--preset--spacing--30);
	}

	.st-mc__comprende {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.st-mc__incluso {
		flex-direction: row;
		gap: 1rem;
		padding-block: 0.7rem;
		border-top: 1px solid var(--wp--preset--color--line);
		text-align: left;
	}

	.st-mc__incluso:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.st-mc__incluso:last-child {
		padding-bottom: 0;
	}

	.st-mc__icona {
		flex: none;
		width: 3rem;
		height: 3rem;
	}

	.st-mc__icona svg {
		width: 1.5rem;
		height: 1.5rem;
	}
}

.st-mc__nota {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* La card di iscrizione: come le card data, ma con il prezzo grande. */
.st-mc__card {
	position: sticky;
	/* Sotto l'header e la barra indice fissa. */
	top: calc(var(--st-header-h) + var(--st-indice-stacco) + var(--st-indice-h) + 1.5rem);
	display: grid;
	gap: 0.6rem;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 18px 40px color-mix(in srgb, var(--wp--preset--color--black) 7%, transparent);
}

.st-mc__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
}

.st-mc__badge::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: currentcolor;
}

.st-mc--esaurita .st-mc__badge,
.st-mc--conclusa .st-mc__badge {
	color: var(--wp--preset--color--muted);
}

.st-mc__prezzo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.75rem;
	margin: 0.4rem 0 0;
}

.st-mc__cifra {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.75rem, 5vw, 3.75rem);
	line-height: 0.95;
	color: var(--wp--preset--color--ink);
}

.st-mc--esaurita .st-mc__cifra {
	color: var(--wp--preset--color--muted);
}

.st-mc__iva {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.st-mc__posti {
	margin: 0.4rem 0 0;
	font-weight: 600;
}

.st-mc__posti--zero {
	color: var(--wp--preset--color--muted);
}

.st-mc__actions {
	margin-top: var(--wp--preset--spacing--20);
}

.st-mc__actions .st-button {
	width: 100%;
	justify-content: center;
}

/* Modulo di acquisto: quantita' e pulsante sulla stessa riga (impilati sul
   telefono, breakpoint dello stack a colonna singola del resto del sito). */
.st-mc__acquista {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--20);
}

.st-mc__quantita {
	display: grid;
	gap: 0.35rem;
}

.st-mc__quantita span {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

.st-mc__quantita input {
	width: 4.5rem;
	padding: 0.6rem 0.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
	font-size: 1rem;
	text-align: center;
}

.st-mc__quantita input:focus {
	border-color: var(--wp--preset--color--red);
	outline: none;
}

.st-mc__acquista .st-button {
	flex: 1 1 auto;
	justify-content: center;
}

@media (max-width: 560px) {
	.st-mc__acquista {
		flex-direction: column;
		align-items: stretch;
	}
}

.st-mc__testo {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 860px) {
	.st-mc__grid {
		grid-template-columns: 1fr;
	}

	.st-mc__card {
		position: static;
	}
}

/* ---------------------------------------------------- Materiale scaricabile */

.st-allegati__intro {
	max-width: 62ch;
	margin-top: var(--wp--preset--spacing--20);
}

.st-allegati__lista {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.st-allegati__voce {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.st-allegati__voce:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px color-mix(in srgb, var(--wp--preset--color--black) 8%, transparent);
}

.st-section--dark .st-allegati__voce {
	border-color: color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
}

.st-allegati__icona {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--red) 10%, transparent);
	color: var(--wp--preset--color--red);
}

.st-allegati__icona svg {
	width: 1.5rem;
	height: 1.5rem;
}

.st-allegati__titolo {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--titolo-s);
	font-weight: 600;
	line-height: 1.3;
}

.st-allegati__testo {
	margin: 0.25rem 0 0;
}

.st-allegati__meta {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 640px) {
	.st-allegati__voce {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.st-allegati__scarica {
		grid-column: 2;
		justify-self: start;
	}
}

/* --------------------------------------------------- Galleria a mosaico */

/*
 * Le foto verticali occupano due righe invece di essere ritagliate in 3:2.
 * L'altezza della riga e' calcolata dalla larghezza della colonna (il
 * contenitore e' largo al massimo 1140px), cosi' un orizzontale riempie
 * una riga e un verticale due; dense chiude i buchi.
 */
.st-galleria--mosaico .st-galleria__griglia {
	--st-gal-gap: var(--wp--preset--spacing--30);
	--st-gal-col: calc((min(1140px, 100vw - 2 * var(--wp--preset--spacing--30)) - 2 * var(--st-gal-gap)) / 3);

	grid-auto-rows: calc(var(--st-gal-col) * 2 / 3);
	grid-auto-flow: dense;
	gap: var(--st-gal-gap);
}

.st-galleria--mosaico .st-galleria__foto {
	height: 100%;
	aspect-ratio: auto;
}

.st-galleria--mosaico .st-galleria__foto--verticale {
	grid-row: span 2;
}

@media (max-width: 860px) {
	.st-galleria--mosaico .st-galleria__griglia {
		--st-gal-col: calc((100vw - 2 * var(--wp--preset--spacing--30) - var(--st-gal-gap)) / 2);

		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ----------------------------------------- Split: foto ancorata (sticky) */

/*
 * La colonna della foto resta ferma sotto l'header e la barra indice
 * mentre il testo accanto scorre; si sblocca quando finisce la sezione,
 * perche' il contenitore dello sticky e' la riga della griglia (le colonne
 * sono allineate in alto, non stirate). Su una colonna sola non ha senso.
 */
.st-numbered--sticky .st-numbered__media {
	position: sticky;
	top: calc(var(--st-header-h) + var(--st-indice-stacco) + var(--st-indice-h) + 1.5rem);
}

/* Split con video: il 16:9 si centra in altezza accanto al testo. */
.st-numbered--video .st-numbered__media {
	align-self: center;
}

@media (max-width: 860px) {
	.st-numbered--sticky .st-numbered__media {
		position: static;
	}
}

/* ------------------------------------------------- Header compatto */

/*
 * Sulle pagine interne, dopo un po' di scorrimento (classe st-compatta
 * sull'html, messa dal JS con isteresi), l'header sticky si riduce a una
 * striscia di 56 px: logo e voci piu' piccoli. Test chiesto da Mattia il
 * 10-09-2026. Solo dove c'e' il menu orizzontale.
 *
 * L'header resta alto 100 px nel flusso (--st-header-pieno): sale di 44 px
 * e il contenuto scende di 22 px con transform; logo, voci e pulsante si
 * rimpiccioliscono con misure vere, dentro l'header, senza toccare il resto
 * della pagina. Fino al 23-09 cambiava l'altezza dell'header: la pagina si
 * ricalcolava a ogni fotogramma e Chrome la riportava indietro mentre si
 * scendeva con la rotellina (il flicker della barra nera). Niente scale sul
 * testo: il testo scalato si ridisegna a scatti (sfocato, poi nitido)
 * quando qualcosa lo ridipinge, per esempio il cursore sulle voci. La barra
 * indice e gli elementi sticky seguono la striscia tramite --st-header-h.
 */
@media (min-width: 1101px) {
	html.st-compatta {
		--st-header-h: 56px;
	}

	html.st-compatta .st-header--solid {
		transform: translateY(-44px);
		box-shadow: 0 6px 24px rgb(0 0 0 / 22%);
	}

	html.st-compatta .st-header--solid .st-header__inner {
		transform: translateY(22px);
	}

	html.st-compatta .st-header--solid .st-brand__logo {
		height: 30px;
	}

	html.st-compatta .st-header--solid .st-nav__list a {
		font-size: 0.8125rem;
	}

	html.st-compatta .st-header--solid .st-menu-toggle {
		padding-block: 0.25rem;
	}

	html.st-compatta .st-header--solid .st-menu-toggle__icona {
		width: 26px;
		height: 14px;
		margin-bottom: 3px;
	}

	html.st-compatta .st-header--solid .st-menu-toggle__icona span:nth-child(2) { top: 6px; }
	html.st-compatta .st-header--solid .st-menu-toggle__icona span:nth-child(3) { top: 12px; }

	html.st-compatta .st-header--solid .st-menu-toggle[aria-expanded="true"] .st-menu-toggle__icona span:nth-child(1),
	html.st-compatta .st-header--solid .st-menu-toggle[aria-expanded="true"] .st-menu-toggle__icona span:nth-child(3) {
		top: 6px;
	}

	html.st-compatta .st-header--solid .st-menu-toggle__label {
		font-size: 0.5625rem;
	}
}

.st-header--solid,
.st-header--solid .st-header__inner {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.st-header--solid .st-brand__logo {
	transition: height 0.3s ease;
}

.st-header--solid .st-nav__list a {
	transition: color 0.2s, font-size 0.3s ease;
}

.st-header--solid .st-menu-toggle__icona {
	transition: width 0.3s ease, height 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.st-header--solid,
	.st-header--solid .st-header__inner,
	.st-header--solid .st-brand__logo,
	.st-header--solid .st-nav__list a,
	.st-header--solid .st-menu-toggle__icona,
	body:not(.home) .st-indice {
		transition: none;
	}
}

/* ------------------------------------- Scheda masterclass: data e box */

/*
 * Scelta da Mattia l'11-09-2026 fra tre proposte: box su carta con la
 * data grande a sinistra (numero del giorno in Abril rosso, giorno della
 * settimana sopra, mese e anno sotto) e, a destra, una riga per dato
 * dentro un box bianco con l'icona a tratto. Su telefono la data sta
 * sopra e i box sotto.
 */
.st-mc__dati {
	display: grid;
	/* Colonna unica (Mattia, 29-09-2026): la data in cima a tutta
	   larghezza, con piu' enfasi, e i dati sotto. Prima la data stava in
	   una colonna a sinistra e "13-14" andava a capo dopo il trattino. */
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	padding: 1.25rem;
	border-radius: 18px;
	background: var(--wp--preset--color--paper);
}

.st-section--paper .st-mc__dati {
	background: var(--wp--preset--color--white);
}

.st-mc__riga {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.75rem;
	align-items: center;
	padding: 0.8rem 1rem;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
}

.st-section--paper .st-mc__riga {
	background: var(--wp--preset--color--paper);
}

.st-mc__riga dt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 7.5rem;
}

.st-mc__riga-icona {
	display: inline-flex;
	color: var(--wp--preset--color--red);
}

.st-mc__riga-icona svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* La data: una fascia a se' in cima, il giorno grande in Abril rosso e
   accanto il giorno della settimana sopra e mese e anno sotto. */
.st-mc__riga--data {
	display: block;
	padding: 0.75rem 0.5rem 1.25rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: none;
}

.st-section--paper .st-mc__riga--data {
	background: none;
}

.st-mc__riga--data dt {
	display: none;
}

.st-mc__riga--data time {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"giorno sett"
		"giorno mese";
	align-items: center;
	gap: 0.1rem clamp(0.75rem, 2.5vw, 1.25rem);
}

.st-mc__data-giorno {
	grid-area: giorno;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(4rem, 3rem + 4vw, 6.5rem);
	line-height: 0.9;
	white-space: nowrap;
	color: var(--wp--preset--color--red);
}

.st-mc__data-mese {
	grid-area: mese;
	align-self: start;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
	font-weight: 400;
	line-height: 1.1;
}

.st-mc__data-sett {
	grid-area: sett;
	align-self: end;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 640px) {
	.st-mc__dati {
		padding: 1rem;
	}

	.st-mc__riga {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
}

/* ------------------------------------ Linea del tempo delle masterclass */

/*
 * Blocco st/masterclass-linea, proposta del 24-09-2026 (pagina privata di
 * prova). La linea e' il ::before della lista, con un punto rosso in cima:
 * si parte da oggi. Sulla linea, in ordine: l'anno (Abril rosso, con un
 * filo che attraversa la sezione), il mese (pillola nera), il foglietto di
 * calendario di ogni masterclass (fascia nera col mese, giorno grande in
 * Abril rosso come nella scheda, giorno della settimana). La foto del
 * piatto e' tonda, come un piatto visto dall'alto, sopra l'angolo della
 * foto dello chef; al passaggio gira un poco.
 *
 * Telefono: linea a sinistra, foglietto accanto al titolo (come la lista
 * "Eventi in programma" del sito attuale), foto e dati sotto. Da 640 px:
 * foto e testi affiancati. Da 1000 px: linea al centro, foto e testi ai due
 * lati, alternati a ogni masterclass.
 */
.st-linea {
	--st-linea-fondo: var(--wp--preset--color--white);
	--st-linea-perno: 4.75rem;
	--st-linea-x: calc(var(--st-linea-perno) / 2);
}

.st-linea.st-section--paper {
	--st-linea-fondo: var(--wp--preset--color--paper);
}

.st-linea__lista {
	position: relative;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: var(--wp--preset--spacing--30) 0 0;
	list-style: none;
}

.st-linea__lista::before,
.st-linea__lista::after {
	content: "";
	position: absolute;
	left: var(--st-linea-x);
}

.st-linea__lista::before {
	top: 0;
	bottom: 0;
	width: 2px;
	margin-left: -1px;
	background: var(--wp--preset--color--ink);
}

.st-linea__lista::after {
	top: 0;
	width: 0.875rem;
	height: 0.875rem;
	margin-left: -0.4375rem;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
}

.st-linea__tappa {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--50);
	transition: opacity 0.65s ease, transform 0.65s ease;
}

/* Entrata (main.js): ogni tappa quando arriva lei sullo schermo. Classe
   sua e non .st-reveal, che il reveal della sezione accende tutto insieme
   appena la sezione entra (anche le tappe tre schermi piu' sotto). */
.js .st-linea__tappa--attesa {
	opacity: 0;
	transform: translateY(26px);
}

/* ------ Segni sulla linea: anno e mese (grafica, la data e' nel <time>) */

.st-linea__segno {
	display: flex;
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--30);
}

.st-linea__segno span {
	position: relative;
	background: var(--st-linea-fondo);
}

.st-linea__segno--anno {
	margin-bottom: var(--wp--preset--spacing--40);
}

.st-linea__segno--anno::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--wp--preset--color--red);
}

.st-linea__segno--anno span {
	padding-right: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-xl);
	line-height: 1;
	color: var(--wp--preset--color--red);
}

.st-linea__segno--mese span {
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ------------------------------------------------ Una masterclass */

.st-linea__evento {
	display: grid;
	grid-template-columns: var(--st-linea-perno) minmax(0, 1fr);
	grid-template-areas:
		"data testa"
		".    foto"
		".    piede";
	gap: var(--wp--preset--spacing--20);
	border-radius: 18px;
	color: inherit;
	text-decoration: none;
}

.st-linea__evento--senza-foto {
	grid-template-areas:
		"data testa"
		".    piede";
}

.st-linea__evento:focus-visible {
	outline-offset: 0.75rem;
}

/* Il foglietto di calendario: copre la linea che gli passa dietro. */
.st-linea__foglio {
	grid-area: data;
	align-self: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	text-align: center;
}

.st-linea__foglio-mese {
	align-self: stretch;
	padding: 0.25rem 0.2rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.st-linea__foglio-giorno {
	padding: 0.35rem 0.2rem 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.125rem;
	line-height: 1;
	white-space: nowrap;
	color: var(--wp--preset--color--red);
}

.st-linea__foglio-giorno--lungo {
	padding-top: 0.6rem;
	font-size: 1.375rem;
}

.st-linea__foglio-sett {
	padding: 0.2rem 0.2rem 0.45rem;
	font-size: 0.6875rem;
	line-height: 1.2;
	color: var(--wp--preset--color--muted);
}

/* Foto dello chef e, sopra il suo angolo, il piatto tondo. */
.st-linea__foto {
	grid-area: foto;
	position: relative;
	width: 100%;
	max-width: 17rem;
	padding-bottom: 12%;
}

.st-linea__chef {
	width: 62%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 18px;
}

.st-linea__piatto {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 50%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 0.35rem solid var(--st-linea-fondo);
	border-radius: 50%;
	box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Una foto sola: piu' grande, niente sovrapposizione. */
.st-linea__foto:has(> img:only-child) {
	padding-bottom: 0;
}

.st-linea__chef:only-child {
	width: 72%;
}

.st-linea__piatto:only-child {
	position: static;
	width: 72%;
}

.st-linea__testa {
	grid-area: testa;
	align-self: center;
}

.st-linea__titolo {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-m);
	font-weight: 400;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
	transition: color 0.2s;
}

.st-linea__docente,
.st-linea__materia,
.st-linea__info,
.st-linea__prezzo {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.st-linea__docente strong {
	font-weight: 600;
}

.st-linea__materia,
.st-linea__info {
	color: var(--wp--preset--color--muted);
}

.st-linea__piede {
	grid-area: piede;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
}

.st-linea__prezzo {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.st-linea__stato {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.st-linea__invito {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 0.4rem;
	padding-bottom: 0.15rem;
	border-bottom: 2px solid var(--wp--preset--color--red);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.st-linea__invito::after {
	content: "\2192";
	/* La freccia si vede e basta: non entra nel nome del link. */
	content: "\2192" / "";
	color: var(--wp--preset--color--red);
	transition: transform 0.2s;
}

.st-linea__evento:hover .st-linea__titolo,
.st-linea__evento:focus-visible .st-linea__titolo {
	color: var(--wp--preset--color--red);
}

.st-linea__evento:hover .st-linea__invito::after,
.st-linea__evento:focus-visible .st-linea__invito::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: no-preference) {
	.st-linea__evento:hover .st-linea__piatto,
	.st-linea__evento:focus-visible .st-linea__piatto {
		transform: rotate(14deg);
	}
}

/* In fondo alla linea: il calendario in PDF. */
.st-linea__fine {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0;
}

.st-linea__fine-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------ Tablet: tutto affiancato */

@media (min-width: 640px) {
	.st-linea {
		--st-linea-perno: 5.75rem;
	}

	.st-linea__evento {
		grid-template-columns: var(--st-linea-perno) minmax(0, 15rem) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas:
			"data foto ."
			"data foto testa"
			"data foto piede"
			"data foto .";
		gap: 0 var(--wp--preset--spacing--30);
	}

	.st-linea__evento--senza-foto {
		grid-template-columns: var(--st-linea-perno) minmax(0, 1fr);
		grid-template-areas:
			"data ."
			"data testa"
			"data piede"
			"data .";
	}

	.st-linea__foglio {
		align-self: center;
	}

	.st-linea__foglio-mese,
	.st-linea__foglio-sett {
		font-size: 0.75rem;
	}

	.st-linea__foglio-giorno {
		font-size: 2.75rem;
	}

	.st-linea__foglio-giorno--lungo {
		font-size: 1.75rem;
	}

	.st-linea__foto {
		max-width: none;
	}

	.st-linea__piede {
		margin-top: 0.75rem;
	}
}

/* ---------------------- Da 1000 px: linea al centro, lati alternati */

@media (min-width: 1000px) {
	.st-linea {
		--st-linea-perno: 8rem;
		--st-linea-x: 50%;
	}

	.st-linea__segno {
		justify-content: center;
	}

	.st-linea__segno--anno::before {
		content: "";
		flex: 1;
		height: 2px;
		background: var(--wp--preset--color--red);
	}

	.st-linea__segno--anno span {
		padding-inline: var(--wp--preset--spacing--30);
	}

	.st-linea__evento,
	.st-linea__evento--senza-foto {
		grid-template-columns: minmax(0, 1fr) var(--st-linea-perno) minmax(0, 1fr);
		grid-template-areas:
			"foto data ."
			"foto data testa"
			"foto data piede"
			"foto data .";
		column-gap: var(--wp--preset--spacing--40);
	}

	.st-linea__tappa:nth-child(even) .st-linea__evento {
		grid-template-areas:
			".     data foto"
			"testa data foto"
			"piede data foto"
			".     data foto";
	}

	.st-linea__foglio-mese,
	.st-linea__foglio-sett {
		font-size: 0.8125rem;
	}

	.st-linea__foglio-giorno {
		font-size: 3.5rem;
	}

	.st-linea__foglio-giorno--lungo {
		padding-top: 0.7rem;
		font-size: 2.25rem;
	}

	/* Le foto stanno dal lato della linea; lo chef verso l'esterno, il
	   piatto verso la data. */
	.st-linea__foto {
		justify-self: end;
		max-width: 26rem;
	}

	.st-linea__titolo {
		font-size: var(--wp--preset--font-size--titolo-l);
	}

	.st-linea__docente {
		font-size: var(--wp--preset--font-size--base);
	}

	.st-linea__tappa:nth-child(even) .st-linea__foto {
		justify-self: start;
	}

	.st-linea__tappa:nth-child(even) .st-linea__chef:not(:only-child) {
		margin-left: auto;
	}

	.st-linea__tappa:nth-child(even) .st-linea__piatto {
		right: auto;
		left: 0;
	}

	/* Una foto sola sta al centro del suo spazio, non verso l'esterno. */
	.st-linea__foto > :only-child {
		margin-inline: auto;
	}

	.st-linea__tappa:nth-child(even) .st-linea__testa,
	.st-linea__tappa:nth-child(even) .st-linea__piede {
		align-items: flex-end;
		text-align: right;
	}

	.st-linea__fine {
		flex-direction: column;
		text-align: center;
	}
}

/* -------------------------------------- Righello delle masterclass */

/*
 * Blocco st/masterclass-righello, sotto la griglia di /masterclass/ (scelta
 * di Mattia del 24-09-2026: lo "schemino" del calendario della proposta C,
 * orizzontale, con le facce degli chef). Fascia nera, una colonna per mese
 * da oggi all'ultima masterclass: il nome in alto (l'anno in rosso sulla
 * prima colonna e a gennaio), sotto le facce tonde con la data. I mesi
 * vuoti restano, piu' chiari: il righello e' il tempo, non solo l'elenco.
 * Facce in bianco e nero come nella proposta, a colori al passaggio; la
 * prossima con l'anello rosso. Sul telefono scorre di lato col dito dentro
 * la sua fascia: la pagina non si sposta.
 */
.st-righello {
	padding-block: var(--wp--preset--spacing--40);
}

.st-righello__testa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--30);
}

.st-righello__titolo {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

.st-righello__conta {
	color: rgb(255 255 255 / 70%);
}

/* Lo spazio intorno alla lista e' per l'anello del fuoco, che la fascia
   che scorre altrimenti taglierebbe. position: relative serve: i testi per
   lo screen reader (.st-visually-hidden, assoluti) senza un contenitore
   posizionato dentro la fascia ne scappavano e allargavano la pagina fino a
   1083 px sul telefono (24-09). */
.st-righello__vista {
	position: relative;
	margin-inline: -0.5rem;
	padding: 0.5rem 0.5rem 0.75rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: rgb(255 255 255 / 35%) transparent;
}

.st-righello__mesi {
	display: flex;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-righello__mese {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: max-content;
	padding: 0 0.5rem 0 0.6rem;
	border-left: 1px solid rgb(255 255 255 / 18%);
}

.st-righello__nome {
	padding-bottom: 0.7rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgb(255 255 255 / 55%);
}

.st-righello__mese--pieno .st-righello__nome {
	color: var(--wp--preset--color--white);
}

.st-righello__nome b {
	margin-left: 0.3em;
	font-weight: 600;
	color: var(--wp--preset--color--red);
}

/* Il mese di oggi: un punto rosso e "oggi". */
.st-righello__oggi {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 0.6rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--white);
}

.st-righello__oggi::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
}

.st-righello__eventi {
	display: flex;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-righello__ev {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 0.4rem;
	border-radius: 12px;
	color: rgb(255 255 255 / 80%);
	text-decoration: none;
}

/* Anello rosso sulla prossima: sta qui e non sulla foto, che col filtro
   in bianco e nero lo faceva grigio. */
.st-righello__facce {
	display: flex;
	border-radius: 999px;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color 0.2s;
}

.st-righello__tondo {
	display: block;
	flex: none;
	width: 3.25rem;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	background: rgb(255 255 255 / 12%);
	filter: grayscale(1) contrast(1.06);
	opacity: 0.8;
	transition: filter 0.3s, opacity 0.3s;
}

/* Il ritaglio: in centro e verso l'alto, dove di solito c'e' il volto. */
.st-righello__faccia {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 15%;
}

/* Foto orizzontale (mezzo busto, cucina): la parte alta, ingrandita. */
.st-righello__tondo--larga .st-righello__faccia {
	transform: scale(1.8);
	transform-origin: 50% 20%;
}

/* Piu' docenti: le facce una sull'altra. */
.st-righello__tondo + .st-righello__tondo {
	margin-left: -0.9rem;
	border: 2px solid var(--wp--preset--color--black);
}

.st-righello__tondo--iniziali {
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--red);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	filter: none;
	opacity: 1;
}

.st-righello__ev:hover .st-righello__tondo,
.st-righello__ev:focus-visible .st-righello__tondo {
	filter: none;
	opacity: 1;
}

.st-righello__ev:hover,
.st-righello__ev:focus-visible,
.st-righello__ev--prossima {
	color: var(--wp--preset--color--white);
}

.st-righello__ev--prossima .st-righello__facce {
	outline-color: var(--wp--preset--color--red);
}

.st-righello__ev--prossima .st-righello__tondo {
	opacity: 1;
}

.st-righello__data {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.st-righello__stato {
	margin-top: -0.25rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
}

@media (max-width: 860px) {
	.st-righello__mese {
		flex: 0 0 auto;
		min-width: 4.5rem;
	}
}

/* ------------------------------- Linea del tempo in una finestra */

/*
 * La <dialog> del righello: la linea del tempo verticale (lo stesso blocco
 * st/masterclass-linea) in un riquadro alto quanto lo schermo, con la barra
 * del titolo ferma in cima e la linea che scorre sotto. Fondale, angoli e X
 * sono quelli delle finestre del blocco mappa (.st-modale). Sul telefono a
 * tutto schermo.
 */
.st-modale--linea {
	width: min(1180px, calc(100vw - 2rem));
	max-width: none;
	height: calc(100dvh - 2rem);
	max-height: none;
	overflow: hidden;
	background: var(--wp--preset--color--paper);
}

.st-modale--linea[open] {
	display: flex;
	flex-direction: column;
}

.st-modale-linea__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: 0.75rem 0.75rem 0.75rem var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
}

.st-modale-linea__titolo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-m);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.st-modale--linea .st-modale__chiudi {
	position: static;
	flex: none;
}

.st-modale-linea__corpo {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.st-modale-linea__corpo .st-linea {
	padding-block: var(--wp--preset--spacing--40);
}

.st-modale-linea__corpo .st-linea__lista {
	margin-top: 0;
}

@media (max-width: 640px) {
	.st-modale--linea {
		width: 100vw;
		height: 100dvh;
		margin: 0;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.st-modale--linea[open] {
		animation: st-modale-entra 0.25s ease-out;
	}
}

/* ------------------------------------ Elenco "parole": numeri e parole chiave */

/*
 * Al posto delle card mezze vuote (Mattia, 28-09-2026): a sinistra il
 * titolo, a destra il numero forte (98%) enorme con il suo testo; sotto una
 * fascia di parole chiave in grande, divise da filetti, senza numerazione.
 */
.st-parole__testa--evidenza {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
}

.st-parole__cifra {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.75rem;
	margin: 0;
}

.st-parole__cifra-grande {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(6rem, 13vw, 11rem);
	line-height: 0.85;
	color: var(--wp--preset--color--red);
}

.st-parole__cifra-piccolo {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1.05;
}

.st-parole__testo {
	margin-top: var(--wp--preset--spacing--30);
	max-width: 52ch;
	opacity: 0.85;
}

.st-parole__lista {
	display: grid;
	grid-template-columns: repeat(var(--st-parole, 3), minmax(0, 1fr));
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid color-mix(in srgb, currentcolor 22%, transparent);
}

.st-parole__voce {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--40) clamp(1rem, 2.5vw, 2rem) 0;
}

.st-parole__voce:first-child {
	padding-left: 0;
}

.st-parole__voce + .st-parole__voce {
	border-left: 1px solid color-mix(in srgb, currentcolor 22%, transparent);
}

.st-parole__grande {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 4.5vw, 4rem);
	line-height: 1;
}

.st-parole__piccolo {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
}

.st-parole__nota {
	margin-top: 0.4rem;
	font-size: 0.9375rem;
	opacity: 0.8;
}

@media (max-width: 860px) {
	.st-parole__testa--evidenza {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.st-parole__lista {
		grid-template-columns: minmax(0, 1fr);
	}

	.st-parole__voce,
	.st-parole__voce:first-child {
		padding: var(--wp--preset--spacing--30) 0;
	}

	.st-parole__voce + .st-parole__voce {
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, currentcolor 22%, transparent);
	}
}

/* Logo della voce nelle card dell'elenco: le banche dei finanziamenti. */
.st-elenco__logo {
	display: block;
	width: auto;
	max-width: min(240px, 100%);
	height: 44px;
	margin-bottom: var(--wp--preset--spacing--30);
	object-fit: contain;
	object-position: left center;
}

/* ---------------------------------------- Elenco "targhe": lo stage */

/*
 * Le strutture dello stage come schema (Mattia, 29-09-2026: "qualcosa di
 * grafico, che faccia capire a colpo d'occhio che sono strutture di
 * eccellenza"). In testa il titolo e, a destra, quante sono; sotto un gruppo
 * per riga: a sinistra le stelle e il nome del gruppo, a destra una tessera
 * per struttura. Le tre stelle hanno tessere piu' grandi e nere.
 */
.st-targhe__testa--conteggio {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
}

.st-targhe__conteggio {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.75rem;
	margin: 0;
}

.st-targhe__numero {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(5rem, 10vw, 8rem);
	line-height: 0.85;
	color: var(--wp--preset--color--red);
}

.st-targhe__numero-testo {
	max-width: 9ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.05;
}

.st-targhe__gruppi {
	margin-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--line);
}

.st-targhe__gruppo {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.st-targhe__etichetta {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.st-targhe__stelle {
	display: flex;
	gap: 0.3rem;
	color: var(--wp--preset--color--red);
}

.st-targhe__stelle svg {
	width: 1.375rem;
	height: 1.375rem;
	fill: currentcolor;
}

.st-targhe__titolo {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.st-targhe__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-targhe__targa {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
	min-height: 5.25rem;
	padding: 1rem 1.25rem;
	border-radius: 18px;
	background: var(--wp--preset--color--paper);
	overflow-wrap: anywhere;
}

.st-targhe__nome {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-s);
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
}

.st-targhe__sotto {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Il vertice: le tre stelle, tessere grandi e nere. */
.st-targhe__gruppo--stelle-3 .st-targhe__lista,
.st-targhe__gruppo--stelle-2 .st-targhe__lista {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.st-targhe__gruppo--stelle-3 .st-targhe__targa {
	min-height: 8rem;
	padding: 1.5rem 1.75rem;
	background: var(--wp--preset--color--ink);
}

.st-targhe__gruppo--stelle-3 .st-targhe__nome {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	color: var(--wp--preset--color--white);
}

.st-targhe__gruppo--stelle-3 .st-targhe__sotto {
	color: color-mix(in srgb, var(--wp--preset--color--white) 72%, transparent);
}

.st-targhe__gruppo--stelle-2 .st-targhe__nome {
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
}

/* Se il cliente sceglie un altro sfondo, le tessere restano visibili. */
.st-section--paper .st-targhe__targa {
	background: var(--wp--preset--color--white);
}

.st-section--paper .st-targhe__gruppo--stelle-3 .st-targhe__targa {
	background: var(--wp--preset--color--ink);
}

.st-section--dark .st-targhe__gruppi,
.st-section--dark .st-targhe__gruppo {
	border-color: color-mix(in srgb, var(--wp--preset--color--white) 16%, transparent);
}

.st-section--dark .st-targhe__targa {
	background: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
}

.st-section--dark .st-targhe__nome {
	color: var(--wp--preset--color--white);
}

.st-section--dark .st-targhe__sotto {
	color: color-mix(in srgb, var(--wp--preset--color--white) 72%, transparent);
}

.st-section--dark .st-targhe__gruppo--stelle-3 .st-targhe__targa {
	background: var(--wp--preset--color--white);
}

.st-section--dark .st-targhe__gruppo--stelle-3 .st-targhe__nome {
	color: var(--wp--preset--color--ink);
}

.st-section--dark .st-targhe__gruppo--stelle-3 .st-targhe__sotto {
	color: var(--wp--preset--color--muted);
}

@media (max-width: 1000px) {
	.st-targhe__gruppo {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
	}

	.st-targhe__etichetta {
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
	}

	.st-targhe__nome {
		font-size: 1.125rem;
	}
}

@media (max-width: 860px) {
	.st-targhe__testa--conteggio {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
	}
}

/* Sul telefono due colonne; le tre stelle una sola, a tutta larghezza. */
@media (max-width: 699px) {
	.st-targhe__lista,
	.st-targhe__gruppo--stelle-2 .st-targhe__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.st-targhe__gruppo--stelle-3 .st-targhe__lista {
		grid-template-columns: minmax(0, 1fr);
	}

	.st-targhe__gruppo--stelle-3 .st-targhe__targa {
		min-height: 0;
	}
}

@media (max-width: 560px) {
	.st-targhe__targa {
		min-height: 3.75rem;
		padding: 0.8rem 0.9rem;
		border-radius: 14px;
	}

	.st-targhe__nome,
	.st-targhe__gruppo--stelle-2 .st-targhe__nome {
		font-size: 1.0625rem;
	}

	.st-targhe__sotto {
		font-size: 0.6875rem;
		letter-spacing: 0.06em;
	}
}

/* ------------------------------------ Elenco "icone": il programma */

/*
 * I moduli del programma (Mattia, 29-09-2026: nelle etichette "tendono a
 * perdersi"). Niente pulsanti: una lista a filetti, come l'indice di un
 * libro, con l'icona a tratto di ogni modulo in un tondo bianco.
 */
.st-icone__lista {
	--st-colonne: 3;
	display: grid;
	grid-template-columns: repeat(var(--st-colonne), minmax(0, 1fr));
	column-gap: clamp(1.5rem, 3vw, 3rem);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.st-icone__lista[data-colonne="2"] {
	--st-colonne: 2;
}

.st-icone__lista[data-colonne="4"] {
	--st-colonne: 4;
}

.st-icone__voce {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid color-mix(in srgb, currentcolor 14%, transparent);
}

.st-icone__icona {
	display: grid;
	flex: none;
	place-items: center;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--wp--preset--color--black) 35%, transparent);
	color: var(--wp--preset--color--red);
}

.st-icone__icona svg {
	width: 2.25rem;
	height: 2.25rem;
}

.st-icone__titolo {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}

.st-section--dark .st-icone__icona {
	background: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
}

.st-section--dark .st-icone__titolo {
	color: var(--wp--preset--color--white);
}

/* Su fondo bianco il tondo prende il colore della carta. */
.st-elenco--icone:not(.st-section--paper, .st-section--dark) .st-icone__icona {
	background: var(--wp--preset--color--paper);
}

@media (max-width: 900px) {
	.st-icone__lista[data-colonne] {
		--st-colonne: 2;
	}
}

@media (max-width: 560px) {
	.st-icone__lista[data-colonne] {
		--st-colonne: 1;
	}

	.st-icone__voce {
		gap: 1rem;
		padding-block: 0.85rem;
	}

	.st-icone__icona {
		width: 3.5rem;
		height: 3.5rem;
	}

	.st-icone__icona svg {
		width: 1.875rem;
		height: 1.875rem;
	}

	.st-icone__titolo {
		font-size: 1rem;
	}
}

/* --------------------------------------- Elenco "quote": quote e finanziamenti */

/*
 * Mattia, 29-09-2026: niente card mezze vuote accanto a una piena. Le quote
 * affiancate e tutte uguali, con il prezzo in grande; i finanziamenti uno per
 * riga su tutta la larghezza (parts/elenco-quote.php).
 */
.st-quote__prezzi {
	display: grid;
	grid-template-columns: repeat(var(--st-quote, 2), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.st-quote__prezzo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	overflow: hidden;
}

/* Il filo rosso in testa, come le card dei form. */
.st-quote__prezzo-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: clamp(1.5rem, 3vw, 2.25rem);
	width: 48px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--wp--preset--color--red);
}

.st-quote__nome {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
}

.st-quote__cifra {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.6rem;
	margin: 0.75rem 0 0;
}

.st-quote__importo {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 4.5vw, 3.5rem);
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.st-quote__nota {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.st-quote__prezzo-card .st-quote__testo {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

.st-quote__finanziamenti {
	margin-top: var(--wp--preset--spacing--60);
}

.st-quote__intro {
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
}

.st-quote__lista {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-quote__finanz {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
}

/* Con il video: due colonne alla pari, video e testo. */
.st-quote__finanz--video {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.st-quote__marchio {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--paper);
	border-radius: 12px;
}

.st-quote__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: 48px;
	object-fit: contain;
}

.st-quote__marchio .st-quote__logo {
	height: 56px;
}

.st-quote__corpo .st-quote__logo {
	margin-bottom: var(--wp--preset--spacing--30);
	object-position: left center;
}

.st-quote__titolo {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 400;
	line-height: 1.1;
}

.st-quote__corpo .st-quote__testo > *:last-child {
	margin-bottom: 0;
}

@media (max-width: 860px) {
	.st-quote__prezzi {
		grid-template-columns: minmax(0, 1fr);
	}

	.st-quote__finanz,
	.st-quote__finanz--video {
		grid-template-columns: minmax(0, 1fr);
	}

	.st-quote__marchio {
		justify-content: flex-start;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	}
}

/* ------------------------------------------------ Modalita' compilazione */

/*
 * Telefono e tablet, fuoco su un campo di un form (html.st-compilando, messo
 * da main.js): l'header sale, barra indice e tondi in basso a destra
 * spariscono, cosi' con la tastiera aperta il campo non finisce sotto
 * nulla (Mattia, iPhone, 29-09-2026). Il campo si ferma con un po' d'aria
 * sopra e sotto quando il browser lo porta in vista.
 */
@media (max-width: 1100px) {
	html.st-compilando .st-header--solid,
	html.st-compilando .st-landing__barra {
		transform: translateY(-100%);
		transition: transform 0.25s ease;
	}

	html.st-compilando .st-indice,
	html.st-compilando .st-fab,
	html.st-compilando .st-su,
	html.st-compilando .st-menu-tondo {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	html.st-compilando form input,
	html.st-compilando form select,
	html.st-compilando form textarea {
		scroll-margin-top: 1.5rem;
		scroll-margin-bottom: 1.5rem;
	}
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
	html.st-compilando .st-header--solid,
	html.st-compilando .st-landing__barra {
		transition: none;
	}
}