/* =========================================================
   Diche — stili custom (integrano theme.json, non lo sostituiscono)
   ========================================================= */

/* ---------- Utility ---------- */
.text-primary {
	color: var(--wp--preset--color--primary);
}

/* Da quando il contenuto della home vive nella Pagina "Home" (post_content
   vero, non più incluso da front-page.html — vedi inc/seo.php), la regola
   dinamica che WordPress genera per far uscire .alignfull a piena larghezza
   dentro wp:post-content non scatta sempre in modo affidabile: le sezioni
   restano larghe quanto il contentSize (1090px) invece di coprire tutto lo
   schermo. Questa regola esplicita, non legata a classi generate per singola
   istanza, sostituisce quel meccanismo e funziona sempre, a qualunque
   larghezza di schermo. */
.entry-content > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---------- Header ---------- */
/* Lo sticky va sull'involucro che WordPress genera per la template part
   (header.wp-block-template-part): è alto quanto .site-header stesso,
   quindi è lì che serve l'aggancio — su .site-header, che è il figlio,
   non avrebbe spazio per restare fissato e si sgancerebbe dopo pochi px. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Le sezioni-ancora (menu header + mappa sito nel footer) non devono finire
   sotto la barra sticky quando ci si arriva con uno scroll diretto: senza
   questo margine il titolo di sezione resterebbe nascosto dietro l'header. */
#chi-siamo,
#corsi,
#metodo,
#contatti {
	scroll-margin-top: 90px;
}

.site-header {
	position: relative;
	transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 2px 16px rgba(35, 35, 35, 0.08);
}

/* Aura rosa sotto la barra, misurata sul radial gradient del frame Figma
   (ellisse 1512x166 centrata sul bordo inferiore dell'header: qui se ne
   vede solo la metà, l'altra è coperta dallo sfondo bianco della barra). */
.site-header::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 83px;
	background: radial-gradient(50% 83px at center top, rgba(226, 43, 133, 0.2), rgba(226, 43, 133, 0) 100%);
	pointer-events: none;
}

/* Larghezza fissa uguale al logo del footer (stesso file, stessa misura). */
.site-header__logo img {
	width: 143px;
	height: auto;
	max-width: 100%;
}

/* Padding laterale misurato sul frame Figma (100px a 1512px di canvas):
   sovrascrive il padding inline del blocco, quindi serve !important.
   Solo da desktop in su: il mobile ha un design dedicato in arrivo. */
@media (min-width: 782px) {
	.site-header {
		padding-left: 100px !important;
		padding-right: 100px !important;
	}
}

.site-footer__logo {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* aspect-ratio esplicito: a differenza di logo-header.svg (width/height
   assoluti nel file), logo-footer.svg è stato esportato da Figma con
   width="100%" height="100%" — senza una dimensione intrinseca assoluta il
   browser non sa ricavare il rapporto dal viewBox, "height:auto" diventa il
   default generico di 150px per qualunque larghezza e il logo appare
   schiacciato/allungato invece di mantenere le proporzioni reali (143x70.47,
   dal viewBox del file). */
.site-footer__logo img {
	width: 143px;
	height: auto;
	aspect-ratio: 143 / 70.4712;
	max-width: 100%;
}

.site-header__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 600;
}

.site-header__nav a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast-2);
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.site-header__nav a.is-active {
	opacity: 0.9;
}

/* Pulsante "Inizia da qui": padding laterale misurato sul frame Figma
   (38px, il tema di default ne applica 28px) e niente scurimento
   all'hover, a differenza degli altri bottoni del sito. */
.site-header .wp-block-button__link {
	padding-left: 2.375rem;
	padding-right: 2.375rem;
}

.site-header .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Hamburger: nascosto da desktop, main.js gli aggiunge/toglie .is-nav-open
   sull'header al click (vedi anche il blocco mobile qui sotto). Da mobile è
   in position:absolute (vedi blocco Responsive) per lasciare il logo unico
   figlio "in flusso" della barra e poterlo centrare con justify-content. */
.site-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast-2);
	cursor: pointer;
}

.site-header__toggle:hover {
	background: var(--wp--preset--color--base-alt);
}

/* ---------- Hero ---------- */
.hero-kicker {
	color: var(--wp--preset--color--contrast);
	margin-bottom: 0;
}

.hero-title {
	color: var(--wp--preset--color--contrast);
	margin-top: 0;
}

/* Contenitore relativo: serve al pulsante di scroll sovrapposto alla foto.
   È alignfull ma la sezione hero riceve comunque un padding laterale (dal
   supporto core per i blocchi con sfondo/gradiente): senza sboccarlo
   esplicitamente qui, la foto resterebbe inquadrata coi bordi invece di
   coprire tutta la larghezza, sia da mobile che da desktop. */
.hero-media {
	position: relative;
	margin-top: 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Foto sempre a piena larghezza, bordo a bordo, sia da mobile che da
   desktop: un riquadro ad aspect-ratio fissa + object-fit:cover riempie
   qualunque larghezza di schermo ritagliando l'eccesso ai lati invece di
   lasciare margini simmetrici vuoti (che si vedevano oltre 1142px).
   !important su display: WordPress core forza .wp-block-image.aligncenter
   a display:table (per centrarla) con 2 classi di specificità, più alta
   della singola .hero-photo — senza forzarlo qui l'immagine dentro resta
   in un contesto di tabella che non le fa rispettare height:100%, e torna
   alle sue proporzioni originali invece di riempire il riquadro. */
.hero-photo {
	display: block !important;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.hero-photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* Ancorata verso l'alto: i volti stanno nel terzo superiore della foto
	   sorgente, il ritaglio da un aspect-ratio più stretto del sorgente deve
	   togliere spazio sotto (corpo/braccia), non sopra (teste). */
	object-position: center 20%;
}

@media (max-width: 781px) {
	/* Da mobile il frame Figma inquadra la foto più stretta e più alta
	   (393x368 nel file "Diche_Mobile.svg", contro il rapporto molto più
	   panoramico della foto sorgente): un riquadro con rapporto fisso +
	   object-fit:cover riempie tutta la larghezza senza lasciare bordi,
	   ritagliando i lati invece di schiacciare o rimpicciolire la foto. */
	.hero-photo {
		aspect-ratio: 393 / 368;
	}

	.hero-photo img {
		object-position: center 60%;
	}
}

/* Pulsante "scendi": cerchio scuro traslucido con bordo bianco,
   sovrapposto in basso al centro della foto (come da design). Da desktop
   120px fissi dal fondo dello schermo (non una percentuale: con la foto ora
   a piena larghezza/altezza variabile — vedi .hero-photo — una % la faceva
   scivolare fuori posto), poi si riduce al breakpoint mobile dove la foto è
   molto più bassa (vedi override sotto). */
.hero-scroll {
	position: absolute;
	left: 50%;
	bottom: 120px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	color: #fff;
	text-decoration: none;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.hero-scroll:hover {
	background: rgba(0, 0, 0, 0.7);
	transform: translateX(-50%) translateY(3px);
	color: #fff;
}

/* ---------- Torna su ---------- */
/* Il footer template-part non eredita il reset del margine di flusso dato
   alle altre sezioni: azzeriamolo per non lasciare uno stacco (vedi
   .section-contatti che invece lo azzera via style inline). Il markup del
   bottone resta nel footer (vedi parts/footer.html) ma da qui in poi è
   position:fixed: la sua posizione non dipende più da dove sta nel DOM. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-top: 0;
}

/* Vero FAB: fisso rispetto al viewport, quindi resta visibile scorrendo
   qualunque punto della pagina, non solo vicino al footer. Parte nascosto
   (opacity/visibility, non display) e main.js aggiunge .is-visible dopo un
   po' di scroll — display:none non si potrebbe animare, e togliendolo dal
   flusso con "hidden" perderemmo la transizione di dissolvenza. */
.back-to-top {
	position: fixed;
	right: 32px;
	bottom: 32px;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(226, 43, 133, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, visibility 0s linear 0.25s;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}

.back-to-top:hover {
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
}

@media (max-width: 781px) {
	.back-to-top {
		right: 16px;
		bottom: 16px;
		width: 52px;
		height: 52px;
	}
}

/* ---------- Team ---------- */
/* Da mobile main.js avvolge team-grid in un .mobile-carousel per mettere le
   frecce ai lati (vedi blocco Responsive): il wrapper è display:contents,
   quindi team-grid smette di essere figlio DIRETTO della sezione e perde il
   max-width/centratura che WordPress applica solo ai figli diretti dei
   blocchi con layout "constrained". Questa regola esplicita lo sostituisce,
   con lo stesso valore (--wp--style--global--content-size), sia prima che
   dopo l'avvolgimento — su desktop niente cambia visivamente. */
.team-grid {
	max-width: var(--wp--style--global--content-size, 1090px);
	margin-left: auto;
	margin-right: auto;
}

/* Il wrapper delle frecce non deve avere alcun effetto finché non diventa
   un vero carosello sotto i 782px (vedi Responsive): "contents" lo rimuove
   dall'albero di rendering, così i suoi figli si comportano come se fossero
   ancora figli diretti della sezione. */
.mobile-carousel {
	display: contents;
}

.mobile-carousel__arrow {
	display: none;
}

.team-title {
	margin-bottom: 0;
}

.team-subtitle {
	margin-top: 0;
	color: var(--wp--preset--color--contrast);
}

.team-card {
	overflow: hidden;
	position: relative;
	/* WP 7.0 non serializza più l'aspect-ratio nello style del blocco Cover
	   (vedi save() core/cover): lo fissiamo qui invece che nell'attributo
	   "dimensions" del blocco, per restare compatibili con la validazione. */
	aspect-ratio: 353/426;
	/* L'altezza minima viene animata dal JS in apertura e chiusura. */
	transition: min-height 0.35s ease;
}

.team-card .wp-block-cover__image-background {
	object-position: center top;
}

.team-card .wp-block-cover__inner-container {
	width: 100%;
}

/* Da aperta il testo cresce verso l'alto: la sfumatura deve partire più in
   alto, altrimenti nome e ruolo finiscono sul fondo chiaro e non si leggono.
   La regola generata da theme.json usa !important, quindi serve anche qui. */
.team-card.is-open .wp-block-cover__background {
	background: linear-gradient(
		180deg,
		rgba(80, 34, 56, 0) 45%,
		rgba(80, 34, 56, 0.9) 75%,
		rgb(80, 34, 56) 100%
	) !important;
}

.team-card .wp-block-cover__inner-container > * {
	margin-block-start: 0;
}

/* Pulsante chevron: creato da JS (vedi main.js) così il markup dei blocchi
   resta valido e il controllo è accessibile da tastiera. */
.team-card__toggle {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--primary-dark);
	cursor: pointer;
	transition: transform 0.3s ease, background-color 0.2s ease;
}

.team-card__toggle:hover {
	background: rgba(255, 255, 255, 0.45);
}

.team-card__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.team-card.is-open .team-card__toggle {
	transform: rotate(180deg);
	color: #fff;
}

/* La card cliccabile mostra il cursore a mano su tutta la superficie. */
.team-card.is-collapsible {
	cursor: pointer;
}

/* Biografia collassabile.
   L'altezza viene calcolata e animata in JS (vedi main.js): è l'unico modo
   affidabile per animare fino all'altezza reale del contenuto, senza numeri
   magici e senza rischio di tagliare il testo se la biografia è lunga.
   Il wrapper lo crea il JS; senza JS la biografia resta semplicemente visibile. */
.team-card__bio-wrap {
	overflow: hidden;
	height: 0;
	transition: height 0.35s ease;
}

.team-card__bio-wrap > .team-card__bio {
	margin: 0 !important;
	padding-top: 0.75rem;
}

/* Da chiusa la card mantiene le proporzioni del design; da aperta deve poter
   crescere quanto serve al testo. Il blocco cover stampa `aspect-ratio` inline,
   quindi va forzato per annullarlo. L'altezza minima da aperta la imposta il JS
   (uguale a quella che la card aveva da chiusa), perché dipende dalla larghezza
   della colonna e non si può fissare qui. */
/* `is-closing` resta finché l'altezza non è tornata a quella di partenza: se
   l'aspect-ratio rientrasse subito, il browser ricalcolerebbe la LARGHEZZA
   dall'altezza ancora grande e la card sborderebbe sulle vicine per un attimo. */
.team-card.is-open,
.team-card.is-closing {
	aspect-ratio: auto !important;
}

/* ---------- Trust / partner ---------- */
.trust-kicker {
	margin-bottom: 0;
	color: var(--wp--preset--color--contrast);
}

.trust-title {
	margin-top: 0.25rem;
}

/* ---------- Pagina "Atenei partner" ----------
   Griglia di card (una per logo), non più il marquee scorrevole che stava
   prima dentro la home: quella sezione ora ha solo il bottone che porta
   qui (vedi patterns/trust-partner.php e inc/partners-page.php). */
.partner-page-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	text-align: center;
}

.partner-page-card__logo img {
	height: 56px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* ---------- Corsi ---------- */
/* Lo scroll orizzontale (per schermi stretti) e l'aspetto della pillola
   vivono su due elementi diversi apposta: mettendo overflow-x:auto
   DIRETTAMENTE sulla pillola, il browser è costretto a trattare anche
   l'asse verticale come "auto" invece di "visible" (i due assi non possono
   restare "misti"), e su Windows le scrollbar non sono overlay — occupano
   spazio vero e possono schiacciare o tagliare il contenuto dentro. Tenendo
   lo scroll su un wrapper esterno "invisibile", la pillola resta sempre a
   overflow:visible e non rischia mai di tagliare badge o contenuto.
   NIENTE max-width qui: la larghezza (1090px, centrata) la impone già la
   regola generata da WordPress per i figli diretti della sezione — un
   max-width esplicito con la stessa specificità la sovrascriverebbe,
   incollando la barra al bordo sinistro dell'intera sezione a tutto schermo. */
.corsi-tabs-scroll {
	overflow-x: auto;
}

/* Misure prese dal file Figma "Sezione 3 - I corsi.svg" (bounding box reali
   via getBBox, non stimate): barra 1082x72 con inset di 4px su ogni lato,
   pillola attiva 287x64 con padding 36px orizzontale/16px verticale, gap
   icona-testo 12px, gap tra una voce e la successiva ~0 (il "vuoto" visto
   nel design è interamente il padding orizzontale delle due voci adiacenti,
   non un gap separato). */
.corsi-tabs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 0;
	width: 100%;
	box-sizing: border-box;
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--60);
	padding: 4px;
	background: var(--wp--preset--color--white);
	border-radius: 999px;
	box-shadow: 0 4px 20px rgba(35, 35, 35, 0.06);
}

.corsi-tab {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 12px;
	padding: 1rem 2.25rem;
	font-size: 1.05rem;
	font-weight: 500;
	color: rgba(35, 35, 35, 0.7);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.corsi-tab:hover {
	color: var(--wp--preset--color--primary);
}

.corsi-tab__icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.corsi-tab--active,
.corsi-tab--active:hover {
	padding: 1rem 2.25rem;
	border-radius: 999px;
	background: rgba(226, 43, 133, 0.1);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/* Il badge sporge dall'angolo in alto a sinistra della tab attiva: essendo
   position:absolute non conta nel flusso, quindi non altera l'altezza della
   barra né disallinea la tab dalle altre voci. Nel design il badge è a
   filo con il bordo sinistro della pillola attiva (stesso x), non rientrato. */
.corsi-tab-wrap {
	position: relative;
	flex-shrink: 0;
}

.corsi-tab-badge {
	position: absolute;
	top: -14px;
	left: 0;
	padding: 3px 14px;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	font-size: 0.7rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Solo da mobile (vedi il breakpoint più sotto): da desktop la tab
   evidenziata basta già a far capire qual è la categoria attiva. */
.corsi-mobile-titolo {
	display: none;
}

/* 4 pannelli, uno per categoria (vedi inc/seo.php): solo quello con
   .is-active è visibile, main.js sposta la classe al click su una tab. */
.corsi-panel {
	display: none;
}

.corsi-panel.is-active {
	display: block;
}

/* Griglia dei corsi: colonne esplicite invece di affidarsi al layout "grid"
   generato da WordPress per il blocco Colonne. minmax(0, 1fr) è la parte
   che conta: senza, una card con un contenuto molto lungo e senza spazi (un
   titolo/estratto senza andare a capo) può forzare la sua colonna a
   crescere oltre 1/3 e spingere le altre fuori griglia. */
.corsi-grid__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 1024px) {
	.corsi-grid__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.corsi-grid__items {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Le card non sono cliccabili (niente link su titolo o wrapper — chi vuole
   informazioni scrive su WhatsApp), quindi min-width:0 + overflow-wrap
   servono solo a impedire che un titolo/estratto molto lungo sfondi la
   colonna della griglia; niente hover "sollevato" che lascerebbe intendere
   che la card sia premibile. */
.corso-card {
	background: linear-gradient(rgba(226, 43, 133, 0.02), rgba(226, 43, 133, 0.02)), #ffffff;
	box-shadow: 0 4px 20px rgba(35, 35, 35, 0.06);
	height: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

.corso-card__title {
	margin: 0 0 0.5rem;
}

.corso-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--wp--preset--spacing--40);
	border-radius: 16px;
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--primary-dark);
}

.corso-card__icon svg {
	width: 28px;
	height: 28px;
}

/* ---------- CTA WhatsApp ---------- */
.cta-whatsapp-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.cta-whatsapp-link__icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

/* ---------- Metodo ---------- */
/* Stesso motivo di .team-grid qui sopra: da mobile finisce dentro un
   .mobile-carousel (display:contents) per le frecce ai lati e perde il
   max-width/centratura riservato ai figli diretti della sezione. */
.metodo-steps {
	max-width: var(--wp--style--global--content-size, 1090px);
	margin-left: auto;
	margin-right: auto;
}

.metodo-step__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto var(--wp--preset--spacing--40);
	border-radius: 22.5763px;
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--primary-dark);
}

.metodo-step__icon svg:not(.metodo-step__sparkle) {
	width: 32px;
	height: 32px;
}

.metodo-step__num {
	position: absolute;
	top: -8px;
	right: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: 0.8rem;
	font-weight: 700;
	border: 2px solid var(--wp--preset--color--base);
}

/* overflow:visible esplicito: il bagliore (box-shadow) e le scintille
   sporgono di decine di px oltre il riquadro 72x72 — un overflow:hidden
   ereditato da qualche antenato (anche solo su un dispositivo/browser
   diverso da quello di test) li taglierebbe di netto invece di lasciarli
   sfumare oltre il bordo. */
.metodo-step,
.metodo-step__icon--finale {
	overflow: visible;
}

.metodo-step__icon--finale {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	box-shadow: 0 0 60px 20px rgba(226, 43, 133, 0.35);
}

.metodo-step__icon--finale .metodo-step__num {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

.metodo-step__sparkle {
	position: absolute;
	color: var(--wp--preset--color--primary);
}

.metodo-step__sparkle--left {
	width: 22px;
	height: 22px;
	bottom: -10px;
	left: -22px;
}

.metodo-step__sparkle--right {
	width: 14px;
	height: 14px;
	top: -14px;
	right: -26px;
}

/* ---------- Contatti ---------- */
/* Niente più icona in testa alla card (rimossa su richiesta): titolo,
   testo e bottone sono tutti centrati invece che allineati a sinistra con
   bottone a destra, per bilanciare la card senza l'icona che prima dava
   un punto di ancoraggio a sinistra. */
.contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.contact-card .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
}

.contact-card--whatsapp {
	background: linear-gradient(rgba(37, 211, 102, 0.06), rgba(37, 211, 102, 0.06)), rgba(255, 255, 255, 0.06);
	border-color: rgba(37, 211, 102, 0.5);
}

.contact-card--email {
	background: linear-gradient(rgba(226, 43, 133, 0.03), rgba(226, 43, 133, 0.03)), rgba(255, 255, 255, 0.07);
	border-color: rgba(226, 43, 133, 0.5);
}

.contact-card--booking {
	background: linear-gradient(rgba(226, 43, 133, 0.03), rgba(226, 43, 133, 0.03)), rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.5);
}

.contact-card--whatsapp .wp-block-button__link {
	background: rgba(37, 211, 102, 0.5);
	border: 2px solid var(--wp--preset--color--whatsapp);
}

.contact-card--email .wp-block-button__link {
	background: rgba(226, 43, 133, 0.5);
	border: 2px solid var(--wp--preset--color--primary);
}

/* Bottone bianco pieno (testo scuro), diverso dai due bottoni colorati
   delle altre card: nel design questa terza card non ha un colore-brand
   proprio (WhatsApp è verde, Email è rosa), quindi il suo bottone resta
   neutro invece di scegliere un colore a caso. */
.contact-card__prenota-btn .wp-block-button__link {
	background: var(--wp--preset--color--base);
}

/* ---------- Modale "Scrivici" (form di invio email) ---------- */
/* Markup stampato una sola volta in wp_footer (vedi inc/lead-form.php):
   main.js aggiunge/toglie .is-open, qui c'è solo l'aspetto. */
.lead-form-overlay {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
	background: rgba(24, 24, 24, 0.8);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lead-form-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.lead-form {
	position: relative;
	width: 100%;
	max-width: 596px;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--50);
	border-radius: 36px;
	background: linear-gradient(rgba(226, 43, 133, 0.05), rgba(226, 43, 133, 0.05)), rgba(24, 24, 24, 0.92);
	border: 1px solid rgba(226, 43, 133, 0.5);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	transform: translateY(12px);
	transition: transform 0.25s ease;
}

.lead-form-overlay.is-open .lead-form {
	transform: translateY(0);
}

.lead-form__close {
	position: absolute;
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--neutral-light);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.lead-form__close:hover {
	background: rgba(255, 255, 255, 0.16);
	color: var(--wp--preset--color--white);
}

.lead-form__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.lead-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/* .lead-form__form e .lead-form__success hanno entrambe un display: dichiarato
   qui sopra e sotto (flex), quindi vincerebbero sempre sull'attributo
   [hidden] (stessa specificità 0-1-0, e queste regole vengono dopo nel
   foglio di stile): main.js alterna .hidden = true/false in JS, ma senza
   questa regola esplicita il pannello nascosto resterebbe comunque
   visibile, impilato sotto l'altro invece di sostituirlo. */
.lead-form__form[hidden],
.lead-form__success[hidden] {
	display: none;
}

.lead-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--30);
}

.lead-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.lead-form__field label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--neutral-light);
}

.lead-form__required {
	color: var(--wp--preset--color--primary);
}

/* :not([type="checkbox"]) perché la checkbox della privacy vive dentro
   .lead-form__field anche lei: senza l'esclusione erediterebbe la stessa
   larghezza/padding/bordo "pillola" pensata per gli input di testo. */
.lead-form__field input:not([type="checkbox"]),
.lead-form__field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.9rem 1.25rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.lead-form__field textarea {
	border-radius: 24px;
	resize: vertical;
	min-height: 130px;
}

.lead-form__field input::placeholder,
.lead-form__field textarea::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.lead-form__field input:focus,
.lead-form__field textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Validazione custom al posto del fumetto nativo del browser (main.js
   evita reportValidity() e alterna questa classe da solo). */
.lead-form__field.has-error input,
.lead-form__field.has-error textarea {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(226, 43, 133, 0.3);
}

/* outline invece di border-color/box-shadow: un contenitore che avvolge una
   checkbox required non ancora valida tiene un border-color "appiccicoso"
   imposto dal browser che ignora qualunque regola d'autore (anche
   !important). outline è una box separata dal border e non ne risente. */
.lead-form__field--consent.has-error {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.lead-form__error-msg {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
}

/* Honeypot: presente nel markup e nel tab order per i bot, invisibile per le persone. */
.lead-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.lead-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--neutral-light);
	cursor: pointer;
}

/* Checkbox ridisegnato: quello nativo del sistema operativo (quadrato
   bianco piatto) stona in un'interfaccia scura e "vetro" come questa. */
.lead-form__consent input {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	position: relative;
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin: 0.2rem 0 0;
	padding: 0;
	border-radius: 4px;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.1);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lead-form__consent input:checked {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.lead-form__consent input:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 7px;
	border: solid var(--wp--preset--color--white);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.lead-form__consent input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.lead-form__consent a {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.lead-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	align-self: center;
	padding: 0.9rem 1.75rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.lead-form__submit:hover {
	background: var(--wp--preset--color--primary-dark);
}

.lead-form__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.lead-form__feedback {
	margin: 0;
	min-height: 1.2em;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--neutral-light);
}

.lead-form__feedback.is-success {
	color: var(--wp--preset--color--whatsapp);
}

.lead-form__feedback.is-error {
	color: var(--wp--preset--color--primary);
}

/* Niente doppio scroll (pagina + modale) mentre il form è aperto. */
body.has-modal-open {
	overflow: hidden;
}

/* ---------- Modale "Scrivici": schermata di conferma ---------- */
/* Sostituisce .lead-form__form (main.js alterna gli [hidden]) dopo un invio
   riuscito: stessa card, contenuto diverso, niente overlay/pannello nuovi. */
.lead-form__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40) 0;
	text-align: center;
}

.lead-form__success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--neutral-light);
	color: var(--wp--preset--color--neutral-light);
}

.lead-form__success-title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.lead-form__success-brand {
	color: var(--wp--preset--color--primary);
}

.lead-form__success-text {
	margin: 0;
	max-width: 32ch;
	color: var(--wp--preset--color--neutral-light);
	font-size: var(--wp--preset--font-size--small);
}

.lead-form__success-cta {
	margin-top: var(--wp--preset--spacing--20);
}

/* ---------- Footer ---------- */
.site-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer a {
	color: var(--wp--preset--color--neutral-light);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	/* ---------- Menu mobile ---------- */
	/* Il logo più piccolo e centrato: il bottone hamburger esce dal flusso
	   (position:absolute) così il logo resta l'unico figlio "normale" della
	   prima riga e justify-content:center lo centra davvero, non solo a
	   metà fra logo e hamburger. */
	.site-header__logo img {
		width: 96px !important;
	}

	.site-header {
		justify-content: center;
	}

	.site-header__toggle {
		display: flex;
		position: absolute;
		top: var(--wp--preset--spacing--30);
		right: var(--wp--preset--spacing--50);
	}

	/* Chiusi di default: mostrarli è compito di .is-nav-open (aggiunta da
	   main.js al click sull'hamburger). flex-basis:100% li fa scendere su
	   una riga propria sotto logo+hamburger, perché l'header è già un
	   flex-wrap — non serve altro markup per un "pannello" a comparsa. */
	.site-header__nav,
	.site-header > .wp-block-buttons {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		margin-top: var(--wp--preset--spacing--40);
		padding-top: var(--wp--preset--spacing--40);
		border-top: 1px solid rgba(35, 35, 35, 0.08);
	}

	/* Niente doppio separatore fra le voci di menu e il bottone sotto. */
	.site-header > .wp-block-buttons {
		border-top: 0;
		padding-top: 0;
		margin-top: 0;
	}

	.site-header.is-nav-open .site-header__nav,
	.site-header.is-nav-open > .wp-block-buttons {
		display: flex;
	}

	.hero-photo img {
		border-radius: 16px 16px 0 0;
	}

	/* Il font dell'hero è a dimensione fissa (non più fluido con vw):
	   sotto i 781px passa alla misura mobile invece di ridimensionarsi
	   in continuo, come da richiesta esplicita. Le due righe del kicker
	   hanno peso e corpo diversi da mobile (36/500 poi 48/600): impilate
	   con flex-direction:column, i due span restano affiancati da desktop
	   dove ereditano lo stile unico del genitore .hero-kicker. */
	.hero-kicker {
		display: flex;
		flex-direction: column;
	}

	.hero-kicker__line1 {
		font-size: 2.25rem !important;
		font-weight: 500 !important;
		letter-spacing: -0.02em !important;
	}

	.hero-kicker__line2 {
		font-size: 3rem !important;
		font-weight: 600 !important;
		letter-spacing: -0.03em !important;
	}

	.hero-title {
		font-size: 5.25rem !important;
		line-height: 0.95 !important;
	}

	/* Il cerchio "scendi" nel design mobile è più piccolo (48px, misurato
	   sul frame Figma) di quello desktop (60px), e la foto sotto è molto più
	   bassa: 120px dal fondo qui la spingerebbe fuori dalla foto, quindi
	   scala proporzionalmente. */
	.hero-scroll {
		width: 48px;
		height: 48px;
		bottom: 32px;
	}

	.hero-scroll svg {
		width: 20px;
		height: 20px;
	}

	/* ---------- CTA WhatsApp: bottoni impilati invece che affiancati ---------- */
	.cta-whatsapp-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.cta-whatsapp-buttons .wp-block-button__link {
		justify-content: center;
	}

	/* ---------- Caroselli mobile (team, corsi, metodo) ----------
	   Da desktop queste sono una griglia/colonne normali; da mobile il
	   design le mostra una card alla volta, scorrevole col dito, con le
	   frecce ai due lati (aggiunte da main.js, che avvolge il contenitore
	   in un .mobile-carousel — vedi transformaCarosello in main.js).
	   .mobile-carousel è display:contents da desktop: il wrapper "sparisce"
	   dall'albero di rendering e team-grid/corsi-grid__items/metodo-steps
	   restano visivamente figli diretti della sezione, esattamente come
	   prima di essere avvolti — indispensabile perché le frecce non
	   scorrano via insieme alle card, cosa che capiterebbe se fossero
	   dentro il contenitore con overflow-x:auto invece che ai suoi lati. */
	/* !important necessario su flex-wrap: WordPress applica di default
	   flex-wrap:wrap!important ai blocchi Colonne sotto i 782px (per farle
	   impilare), e qui serve l'esatto contrario per ottenere la fila
	   scorrevole invece dello stack verticale. */
	.team-grid,
	.corsi-grid__items,
	.metodo-steps {
		display: flex;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.team-grid > .wp-block-column,
	.corsi-grid__items > .wp-block-column,
	.metodo-steps > .metodo-step {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	.mobile-carousel {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
	}

	/* Dentro al carosello team-grid/metodo-steps non devono più portarsi
	   dietro il max-width:1090px pensato per essere centrati da soli nella
	   sezione (vedi la regola desktop qui sopra): qui devono solo occupare
	   lo spazio fra le due frecce. */
	.mobile-carousel > .team-grid,
	.mobile-carousel > .corsi-grid__items,
	.mobile-carousel > .metodo-steps {
		max-width: none;
		margin: 0;
		flex: 1 1 auto;
		min-width: 0;
	}

	.mobile-carousel__arrow {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--primary-dark);
		box-shadow: 0 4px 14px rgba(35, 35, 35, 0.1);
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.mobile-carousel__arrow:hover {
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
	}

	/* ---------- Card team: niente più tocca-per-aprire da mobile ----------
	   Il design mobile le vuole già aperte con la bio per intero e altezza
	   fissa, non più cliccabili: main.js su schermi stretti non crea il
	   pulsante di espansione (vedi main.js), qui basta forzare l'altezza al
	   posto dell'aspect-ratio e un gradiente più alto per leggere il testo
	   in più che resta sempre visibile. */
	/* min-height, non solo height: il blocco Cover core impone
	   min-height:430px (wp-includes/blocks/cover/style.min.css) e senza
	   annullarlo qui vince lui — min-height ha sempre la meglio su height
	   quando è più alto, qualunque sia l'ordine dei fogli di stile. */
	.team-card {
		aspect-ratio: auto;
		height: 400px;
		min-height: 400px;
		cursor: default;
	}

	.team-card .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgba(80, 34, 56, 0) 40%,
			rgba(80, 34, 56, 0.9) 72%,
			rgb(80, 34, 56) 100%
		) !important;
	}

	/* ---------- Tab corsi: solo icone, come nel design mobile ----------
	   Il testo (.corsi-tab__label) resta nel markup per screen reader/SEO
	   ma sparisce alla vista: niente spazio per mostrarlo accanto a 4
	   icone su uno schermo stretto. Il nome della categoria attiva si legge
	   dal titolo sopra la barra (vedi .corsi-mobile-titolo), aggiornato da
	   main.js a ogni cambio tab. La tab attiva si riconosce dal cerchio
	   rosa dietro l'icona, non più da uno sfondo a pillola su tutta la tab
	   (non c'è la larghezza per distinguerla dalle altre tre). */
	.corsi-tabs {
		justify-content: space-around;
		padding: 8px 4px;
		background: var(--wp--preset--color--white);
		box-shadow: 0 4px 20px rgba(35, 35, 35, 0.06);
	}

	.corsi-tab-badge {
		display: none;
	}

	.corsi-tab__label {
		display: none;
	}

	.corsi-tab,
	.corsi-tab--active,
	.corsi-tab--active:hover {
		padding: 8px;
		background: transparent;
		color: rgba(35, 35, 35, 0.5);
	}

	.corsi-tab__icon {
		width: 24px;
		height: 24px;
		padding: 8px;
		border-radius: 50%;
	}

	.corsi-tab--active,
	.corsi-tab--active:hover {
		color: var(--wp--preset--color--contrast);
	}

	.corsi-tab--active .corsi-tab__icon {
		background: rgba(226, 43, 133, 0.1);
	}

	/* Titolo della categoria attiva, sopra la barra tab: esiste solo per
	   mobile (da desktop lo si capisce già dalla tab evidenziata). */
	.corsi-mobile-titolo {
		display: block;
		margin: var(--wp--preset--spacing--50) 0 0;
		font-size: 1.75rem;
		font-weight: 700;
	}

	/* ---------- Modale "Scrivici": una colonna sola sotto i 782px ---------- */
	.lead-form {
		padding: var(--wp--preset--spacing--40);
	}

	.lead-form__row {
		grid-template-columns: 1fr;
	}

	/* ---------- Footer mobile: dimensioni testo da richiesta esplicita ---------- */
	.site-footer h4 {
		font-size: 20px !important;
	}

	.site-footer p {
		font-size: 16px !important;
	}
}