.fl-main-guests {
	position: relative;
	/* Moltiplicatore applicato a tutte le font-size della card (titolo,
	   sottotitolo, data, luogo): 1 su desktop, ridotto di uno "scalino" su
	   tablet e mobile — vedi la media query sotto e il commento sul gruppo
	   di regole tipografiche più in basso. */
	--fl-guests-font-scale: 1;
}

/*
 * Tablet e mobile condividono lo stesso singolo scalino di riduzione: non
 * sono due breakpoint separati con fattori diversi, ma un'unica soglia
 * (1024px, la stessa usata da WordPress core per il breakpoint "tablet")
 * sotto cui tutte le font-size della card scendono della stessa quantità,
 * mobile compreso — 782px resta solo il breakpoint di stack card
 * (flex-basis) sopra.
 */
@media (max-width: 1024px) {
	.fl-main-guests {
		--fl-guests-font-scale: 0.85;
	}
}

/*
 * Niente scalini ulteriori sotto i 781px: la card mobile ora occupa circa
 * l'83% della larghezza disponibile (vedi .fl-main-guests__card più sotto)
 * invece di restringersi con l'altezza fino a ~170px, quindi testo e
 * padding restano allo stesso -15% del tablet. Prima scendevano al 65% per
 * stare in card minuscole, risultando illeggibili.
 */

.fl-main-guests__viewport {
	overflow: hidden;
	/* Lascia libero lo swipe orizzontale (gestito via JS/pointer events),
	   mantenendo lo scroll verticale della pagina col dito. */
	touch-action: pan-y;
	cursor: grab;
}

.fl-main-guests__viewport:active {
	cursor: grabbing;
}

.fl-main-guests__track {
	display: flex;
	/*
	 * align-items di default è "stretch": dentro un contenitore ad altezza
	 * automatica (.fl-main-guests__viewport, overflow:hidden) i figli
	 * verrebbero "allungati" verso l'altezza del contenitore, che però è
	 * ancora indefinita finché non si conosce l'altezza dei figli stessi —
	 * una dipendenza circolare che i browser risolvono collassando tutto
	 * a 0px invece di rispettare l'aspect-ratio delle card (verificato:
	 * senza questa regola .fl-main-guests__card risultava con
	 * aspect-ratio corretto e width valida, ma height 0). flex-start toglie
	 * lo stretch: ogni card usa la propria altezza calcolata da
	 * aspect-ratio, e track/viewport la ereditano di conseguenza.
	 */
	align-items: flex-start;
	gap: var( --wp--preset--spacing--30, 12px );
	transition: transform 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.fl-main-guests__track {
		transition: none;
	}
}

.fl-main-guests__card {
	position: relative;
	flex: 0 0 calc( ( 100% - ( var( --fl-guests-slides-desktop, 3 ) - 1 ) * var( --wp--preset--spacing--30, 12px ) ) / var( --fl-guests-slides-desktop, 3 ) );
	margin: var( --fl-guests-card-margin, 0 );
	border-radius: var( --fl-guests-radius, 14px );
	/*
	 * Bordo per-card (sostituisce l'ex ombra): stile/spessore/colore da
	 * FLCardBorderControl, risolti in queste custom property da
	 * fl_edizione_resolve_card_border_css_vars() — il caso "sfumatura" è
	 * gestito con un doppio background (border-box + padding-box) invece
	 * che con border-image, che ignora border-radius (vedi il commento su
	 * quella funzione in inc/blocks/edizione-fields-map.php).
	 * box-sizing:border-box è indispensabile qui: senza, un bordo si somma
	 * FUORI dalla larghezza già calcolata da flex-basis sopra (default
	 * content-box), la card cresce oltre lo slot che le spetta nel
	 * carosello e il layout si rompe non appena lo spessore è maggiore di
	 * 0 — il tema non ha un reset globale che imposti border-box, va
	 * dichiarato esplicitamente qui.
	 */
	box-sizing: border-box;
	border-style: var( --fl-guests-border-style, none );
	border-width: var( --fl-guests-border-width, 0px );
	border-color: var( --fl-guests-border-color, transparent );
	background-image: var( --fl-guests-border-gradient, none ),
		linear-gradient( var( --wp--preset--color--background, #fff ), var( --wp--preset--color--background, #fff ) );
	background-origin: border-box, padding-box;
	background-clip: border-box, padding-box;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	cursor: pointer;
}

/* La card apre il dettaglio evento: focus visibile per chi usa la tastiera. */
/* Offset negativo: disegnato dentro la card, altrimenti l'overflow:hidden
   del viewport lo taglierebbe sopra e sotto. */
.fl-main-guests__card:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary-light, #428bca );
	outline-offset: -4px;
}

@media (max-width: 781px) {
	/*
	 * Su mobile la larghezza della card non divide più lo schermo in N slot
	 * esatti (come su desktop): segue invece l'altezza, che si riduce in
	 * modo fluido restringendo il viewport (clamp in vw, non una media
	 * query a scalini) — così la card successiva "sbircia" sempre tagliata
	 * a bordo schermo, a segnalare che si può fare swipe, invece di
	 * riempire la larghezza disponibile in card intere. "Card visibili
	 * (mobile)" (--fl-guests-slides-mobile) resta un'indicazione
	 * approssimativa: più alto è il valore, più la componente fluida
	 * dell'altezza viene divisa, quindi più piccola (e più card ci stanno)
	 * — ma non è più uno slot garantito come su desktop.
	 */
	.fl-main-guests__card {
		/*
		 * N card intere ("Card visibili (mobile)") + il 20% di una card in
		 * più che "sbircia" a bordo, a segnalare che si può fare swipe. Con
		 * il default 1, su un telefono da 390px (358px utili): card di circa
		 * 298×397px, e ~48px della successiva visibili. L'altezza segue la
		 * larghezza tramite aspect-ratio.
		 */
		flex: 0 0 calc( ( 100% - ( var( --fl-guests-slides-mobile, 1 ) - 1 ) * var( --wp--preset--spacing--30, 1rem ) ) / ( var( --fl-guests-slides-mobile, 1 ) + 0.2 ) );
		aspect-ratio: 3 / 4;
	}

	/* Area di tocco consigliata (44px) per le frecce su touch screen. */
	.fl-main-guests__arrow {
		width: 44px;
		height: 44px;
	}

	.fl-main-guests.is-arrows-hidden-mobile .fl-main-guests__arrow {
		display: none;
	}
}

@media (min-width: 782px) {
	.fl-main-guests.is-arrows-hidden-desktop .fl-main-guests__arrow {
		display: none;
	}
}

.fl-main-guests__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fl-main-guests__img--placeholder {
	background: var( --wp--preset--color--foreground-muted, #c2cad7 );
}

.fl-main-guests__overlay {
	position: absolute;
	inset: 0;
	background: var( --fl-guests-overlay-color, #203668 );
	opacity: var( --fl-guests-overlay-opacity, 0.55 );
}

.fl-main-guests__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	/*
	 * Ogni lato moltiplicato per --fl-guests-font-scale (stesso fattore
	 * usato per titolo/sottotitolo/data/luogo, vedi commento in cima al
	 * file): il padding scelto in Inspector si riduce insieme al testo man
	 * mano che lo schermo si restringe, invece di restare fisso e finire
	 * per sembrare sproporzionato rispetto ai caratteri più piccoli.
	 */
	padding: calc( var( --fl-guests-card-padding-top, 16px ) * var( --fl-guests-font-scale ) )
		calc( var( --fl-guests-card-padding-right, 16px ) * var( --fl-guests-font-scale ) )
		calc( var( --fl-guests-card-padding-bottom, 16px ) * var( --fl-guests-font-scale ) )
		calc( var( --fl-guests-card-padding-left, 16px ) * var( --fl-guests-font-scale ) );
	color: #fff;
}

/*
 * Font-family/dimensione/interlinea leggono sempre da custom property
 * `--fl-guests-*`, che render.php dichiara SEMPRE sul wrapper (con un
 * fallback coerente con theme.json quando l'attributo del blocco è vuoto,
 * calcolato in base al tag scelto per il titolo). Niente fallback fisso
 * dentro il `var()` qui in CSS: una `var()` senza fallback il cui custom
 * property non è dichiarato è "invalid at computed-value time", e per
 * proprietà ereditate come queste il valore calcolato torna a quello
 * *ereditato dal genitore* — non a uno stile per-tag di theme.json — quindi
 * cambiare livello titolo o famiglia font non avrebbe mai avuto effetto.
 * Va sempre mantenuto l'accoppiamento: se render.php smette di garantire un
 * valore per una di queste property, va aggiunto un fallback qui.
 * text-transform/margin restano fissi, sono scelte di layout della card e
 * non tipografia del tema. font-size è sempre moltiplicata per
 * --fl-guests-font-scale (1 su desktop, 0.85 su tablet/mobile, vedi in
 * cima al file) invece di essere scritta come var() nuda, così lo scalino
 * di riduzione si applica a qualunque valore scelto in Inspector — preset
 * del tema o dimensione custom in px/rem — senza dover mappare ogni
 * valore possibile sullo scalino "precedente" della scala tipografica.
 */
.fl-main-guests__title {
	font-family: var( --fl-guests-title-family );
	text-transform: uppercase;
	font-size: calc( var( --fl-guests-title-size ) * var( --fl-guests-font-scale ) );
	line-height: var( --fl-guests-title-lineheight );
	color: var( --fl-guests-title-color, currentColor );
	margin: 0 0 4px;
}

.fl-main-guests__subtitle {
	font-family: var( --fl-guests-subtitle-family );
	font-size: calc( var( --fl-guests-subtitle-size ) * var( --fl-guests-font-scale ) );
	line-height: var( --fl-guests-subtitle-lineheight );
	color: var( --fl-guests-subtitle-color, currentColor );
	margin: 0 0 4px;
}

/* Data/orario e location su due righe separate (non più unite in un'unica
   riga "meta"): text-transform/letter-spacing/opacity restano il layout di
   default della card, ma famiglia/dimensione/interlinea seguono lo stesso
   principio del titolo sopra — nessun fallback fisso, per lasciare
   riemergere lo stile di paragrafo del tema quando non personalizzati. */
.fl-main-guests__date,
.fl-main-guests__location {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
	opacity: 0.85;
}

.fl-main-guests__date {
	font-family: var( --fl-guests-date-family );
	font-size: calc( var( --fl-guests-date-size ) * var( --fl-guests-font-scale ) );
	line-height: var( --fl-guests-date-lineheight );
	color: var( --fl-guests-date-color, currentColor );
}

.fl-main-guests__location {
	font-family: var( --fl-guests-location-family );
	font-size: calc( var( --fl-guests-location-size ) * var( --fl-guests-font-scale ) );
	line-height: var( --fl-guests-location-lineheight );
	color: var( --fl-guests-location-color, currentColor );
	margin-top: 2px;
}

/*
 * Frecce precedente/successivo: stesso disegno delle frecce della card di
 * dettaglio del programma (chevron SVG inline, cerchio navy), colori dai
 * preset di theme.json.
 */
.fl-main-guests__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var( --wp--preset--color--primary, #203668 );
	color: var( --wp--preset--color--base, #fff );
	border: none;
	border-radius: 999px;
	box-shadow: var( --shadow-raised, 0 4px 12px rgba( 33, 42, 84, 0.14 ) );
	width: 40px;
	height: 40px;
	cursor: pointer;
	transition: background-color 150ms;
}

.fl-main-guests__arrow:hover {
	background: var( --wp--preset--color--primary-light, #428bca );
}

.fl-main-guests__arrow svg {
	width: 20px;
	height: 20px;
}

.fl-main-guests__arrow:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary-light, #428bca );
	outline-offset: 2px;
}

.fl-main-guests__arrow--prev { left: 8px; }
.fl-main-guests__arrow--next { right: 8px; }