@charset "utf-8";

/*
	Homepage "Fdo" (ricostruita da zero dal bundle React di produzione, docs/dom/homepage.htm).
	Sostituisce integralmente il precedente sistema "Nl*" a blocchi editabili (rollback 22/07/2026).
	Solo stili SPECIFICI della homepage: i token/reset/componenti generici (Section, Heading,
	Button, Marquee, Scroller) sono in global.css (sezione "NUOVO DESIGN SYSTEM Fdo"), header/footer
	in header.css/footer.css, i blocchi ripetuti (Mille Sapori, Newsletter) hanno CSS proprio.
	Struttura HTML: custom/frontend/layout/html/homepage/home.htm
*/


/*	============================== hero ============================== */

/*	---------------------------------------------------------------------- */
/*	Componente "Hero" — sezione di apertura homepage (immagine full-bleed +
/*	titolo/sottotitolo/paragrafo). Riusa .FdoHeading (titolo) e i token del
/*	design system "Fdo" (custom property in :root di global.css); qui solo
/*	le differenze specifiche della hero (layout, sfondo responsive, misure
/*	di sottotitolo/paragrafo). Fedele a bkj75.css (sorgente React di prod).
/*	Sfondo: --section-bg-image (desktop, convenzione .FdoSection--withBackground)
/*	e --hero-bg-image-mobile (mobile) sono impostate inline nello style="" del
/*	tag <section> (vedi hero.htm), valorizzate dai file in repository/files/.
/*	---------------------------------------------------------------------- */

	.FdoHero {
		display: flex;
		align-items: flex-start;
		width: 100%;
		max-width: 100%;
		overflow-x: clip;
		min-height: min(120svh, 980px);
		padding: var(--space-6) var(--space-4) var(--space-8);
		background-image: var(--hero-bg-image-mobile);
		background-position: center bottom;
	}

	.FdoHeroInner {
		width: 100%;
		min-width: 0;
		max-width: var(--container-max);
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
		text-align: left;
	}

	.FdoHeroBody {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.FdoHeroTitle {
		max-width: 14ch;
	}

	.FdoHeroSubtitle {
		margin: 0;
		max-width: 28ch;
		font-family: var(--font-display);
		font-size: 22px;
		line-height: 30px;
		font-weight: var(--text-h3-weight);
		color: var(--color-heading-alt);
	}

	.FdoHeroText {
		margin: 0;
		max-width: 42ch;
		font-size: 16px;
		line-height: 24px;
		color: var(--color-heading-alt);
	}

	@media (min-width: 1025px) {
		.FdoHero {
			padding: var(--space-10) var(--space-6) var(--space-9);
			background-image: var(--section-bg-image);
			background-position: center right;
		}
		.FdoHeroBody {
			gap: var(--space-4);
		}
	}

/*	============================== intro ============================== */

/*	============================================================================ */
/*	Componente "FdoIntro" — sezione "testo a colonna + video di sfondo" con
/*	decoro d'angolo alternato, usata da 4 blocchi homepage: aree-culturali,
/*	salute-benessere-spiritualita, conferenze-incontri, bazar-oriente.
/*
/*	Ricostruito 1:1 da .newlayout (dump React di produzione), CSS sorgente
/*	.newlayout/assets/hjjgk.css (classi _section_hjjgk_1, _withBackground_hjjgk_9,
/*	_decorCornerRight/Left_hjjgk_29/34, _inner_hjjgk_39, _heading_hjjgk_52,
/*	_columns_hjjgk_57/_columnsReversed_hjjgk_137, _mediaCol/_mediaFrame/_media_hjjgk_66/71,
/*	_content_hjjgk_85, _cta_hjjgk_107).
/*
/*	Diverso da .FdoSection (che e' il contenitore standard a 1 colonna centrata):
/*	qui il layout e' sempre a 2 colonne (video + testo) che si impila su mobile.
/*
/*	Riusa classi generiche gia' esistenti nel design system "Fdo" (vedi sopra
/*	in questo stesso file, sezioni Heading/Button): .FdoHeading, .FdoHeading--h2,
/*	.FdoHeading--gradient (titolo H2), .FdoSectionSubtitle (H3 — stessa regola
/*	di _subtitle_hjjgk_94), .FdoSectionBody (paragrafo — stessa regola di
/*	_body_hjjgk_101), .FdoBtn / .FdoBtn--secondary (CTA — stessa regola base di
/*	_cta_hjjgk_107, che e' il bottone secondario standard).
/*
/*	Custom property per-sezione (impostate inline nello style="" del <section>):
/*	--intro-bg-image     sfondo a tutta sezione (background-size: cover)
/*	--intro-decor-image  ramo di sakura decorativo in basso all'angolo
/*	============================================================================ */

	.FdoIntro { position: relative; z-index: 0; width: 100%; overflow: visible; padding: var(--space-7) var(--space-4); }

	.FdoIntro--withBackground { background-image: var(--intro-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; }

	.FdoIntro:before { content: ""; position: absolute; z-index: -1; width: 50%; aspect-ratio: 1; background-image: var(--intro-decor-image); background-repeat: no-repeat; background-size: contain; background-position: center bottom; pointer-events: none; }

	.FdoIntro--decorRight:before { right: -8rem; bottom: -10rem; }
	.FdoIntro--decorLeft:before { left: -8rem; bottom: -10rem; }

	.FdoIntroInner { position: relative; z-index: 1; width: 100%; max-width: var(--container-max); min-width: 0; margin: 0 auto; overflow-x: clip; display: flex; flex-direction: column; gap: var(--space-6); }

	.FdoIntroHeading { width: 100%; text-align: center; }

	.FdoIntroColumns { display: grid; gap: var(--space-6); align-items: center; width: 100%; min-width: 0; max-width: 100%; }

	.FdoIntroMediaCol { min-width: 0; width: 100%; }
	.FdoIntroMediaFrame { width: 100%; }
	.FdoIntroVideo { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: var(--radius); object-fit: cover; background-color: #0003; }

	.FdoIntroContent { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; max-width: 48ch; text-align: left; }
	.FdoIntroSubtitle { margin: 0; }
	.FdoIntroBody { margin: 0; }
	.FdoIntroCta { align-self: flex-start; margin-top: var(--space-2); }

	@media (min-width: 1025px) {
		.FdoIntro { padding: var(--space-9) var(--space-6); }
		.FdoIntroColumns { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
		.FdoIntroColumns--reversed .FdoIntroMediaCol { order: 2; }
		.FdoIntroColumns--reversed .FdoIntroContent { order: 1; }
	}

	@media (max-width: 1024px) {
		.FdoIntro:before { width: 85%; opacity: .5; }
		.FdoIntro--decorRight:before { right: -140px; bottom: -140px; }
		.FdoIntro--decorLeft:before { left: -140px; bottom: -140px; }
		.FdoIntroMediaCol { order: -1; }
	}

/*	============================== promo-prossimi ============================== */

/*	Striscia promo (sopra l'header) + sezione "Prossimi Festival" — entrambe dinamiche da Eventi
	(carica_eventi.php). Ricostruite dal bundle React (hash 2mh5s per la striscia, 1h99h+8z6es
	per le card edizione), con dati generati dinamicamente al posto del contenuto curato a mano
	della sorgente (una pastiglia per OGNI data dell'evento, venue/citta' da Evento invece che testo fisso). */

/*	--- Striscia promo (2mh5s) --- */

	.FdoPromoBanner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		width: 100%;
		max-width: 100%;
		min-height: 64px;
		height: auto;
		margin-bottom: 4px;
		padding: var(--space-3) var(--space-4);
		background-color: var(--color-body);
		box-sizing: border-box;
	/*	Riferimento per la X di chiusura, che su mobile è tolta dal flusso (vedi .FdoPromoClose). */
		position: relative;
	}
/*	MOBILE: striscia NASCOSTA DEL TUTTO (richiesta del 05/08/2026). Su schermo stretto occupava da sola
	quasi tutta la prima schermata, sopra l'header e prima del logo. Su mobile la strada verso l'acquisto
	resta il bottone "Acquista il biglietto" nella barra dell'header (rimesso lo stesso giorno).
	È solo un display:none: markup e regole mobile qui sotto restano al loro posto, quindi per
	riattivarla basta togliere questo blocco. Da 1025px in su la striscia non cambia.
	Deve stare DOPO la regola base (stessa specificità 0,1,0: vince l'ordine sorgente). */
	@media (max-width: 1024px) {
		.FdoPromoBanner { display: none; }
	}
	.FdoPromoLabel { margin: 0; flex: 1 1 12rem; min-width: 0; font-family: var(--font-body); font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: 600; color: var(--color-border-accent); }
	.FdoPromoLabel a { color: inherit; }
/*	MOBILE: griglia a 2 colonne UGUALI invece del flex. Col flex ogni pastiglia si dimensionava sul
	proprio testo ("Sabato 12 settembre" più larga di "Venerdì 5 settembre"), quindi andando a capo
	le righe risultavano disallineate e di larghezze diverse. Con "repeat(2, 1fr)" la larghezza la
	decide la griglia, non il contenuto: tutte identiche e incolonnate, con 2, 3 o 4 date. */
	.FdoPromoActions { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; }
	.FdoPromoChip {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	/*	La larghezza arriva dalla colonna della griglia: niente flex-basis e soprattutto niente
		"min-width: max-content" (era lì per non mandare a capo il testo, ma impediva alle pastiglie
		di essere tutte uguali — vinceva sempre la data col nome più lungo). Con min-width:0 la
		pastiglia sta nella sua colonna; il testo ci entra perché gli span sono white-space:nowrap
		e il padding orizzontale scende a 12px sotto i 480px (vedi più sotto). */
		width: 100%;
		min-width: 0;
		max-width: none;
		height: 48px;
		padding: 0 var(--space-5);
		border: 1px solid var(--color-border-accent);
		border-radius: var(--radius);
		background: transparent;
		text-decoration: none;
		color: var(--color-border-accent);
		box-sizing: border-box;
		text-align: center;
	}
/*	Le pastiglie sono <a>: la regola legacy di global.css "A, A:visited, A:active { color:
	var(--Link_Text_Color) }" (specificità 0,1,1) batte il color di .FdoPromoChip (0,1,0), quindi una
	data GIÀ VISITATA diventava blu mentre le altre restavano rosa. Stessa tecnica dei .FdoBtn--* in
	global.css: :where() non aggiunge specificità, quindi "a.FdoPromoChip" pesa 0,2,1 e vince su tutti
	gli stati. Gli span Day/Date ereditano. La regola globale NON si tocca. */
	:where(.FdoPage) a.FdoPromoChip,
	:where(.FdoPage) a.FdoPromoChip:visited,
	:where(.FdoPage) a.FdoPromoChip:hover,
	:where(.FdoPage) a.FdoPromoChip:active { color: var(--color-border-accent); }
	.FdoPromoChipDay { font-family: var(--font-body); font-size: var(--text-caption-size); line-height: 1.2; font-weight: 400; white-space: nowrap; }
	.FdoPromoChipDate { font-family: var(--font-body); font-size: var(--text-caption-size); line-height: 1.2; font-weight: 700; white-space: nowrap; }
/*	La X sta nel markup DENTRO .FdoPromoActions: lasciandola nel flusso occuperebbe una cella della
	griglia (una pastiglia in meno per riga, colonne sfalsate). Su mobile la tolgo dal flusso e la
	àncoro all'angolo della striscia; su desktop torna static, dentro la riga come sempre. */
	.FdoPromoClose { position: absolute; top: var(--space-2); right: var(--space-3); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; padding: 0; border: none; background: transparent; color: var(--color-card-prereg); cursor: pointer; font-size: 14px; }
	.FdoPromoClose:focus-visible { outline: 2px solid var(--color-card-prereg); outline-offset: 2px; }

/*	Schermi stretti: con 24px di padding per lato la colonna non basta più per "13 settembre" in
	grassetto e il testo, essendo nowrap, sborderebbe dalla pastiglia. Riduco solo il padding
	orizzontale: le pastiglie restano larghe uguali, cambia il respiro interno.
	Misure reali del font (Instrument Sans 14px, "13 settembre" grassetto ≈ 119px) contro la colonna
	disponibile ((viewport - 32 padding banner - 12 gap) / 2 - padding - bordo):
	  padding 12px -> entra da ~333px in su   (a 360px avanzano 13px, a 390px 28px)
	  padding  4px -> entra da ~310px in su   (a 320px avanzano 9px)
	Da qui i due scalini. Sotto i ~310px (Galaxy Fold chiuso) il testo sborda comunque: servirebbe
	una colonna sola, ma è un caso talmente raro da non valere una terza regola. */
	@media (max-width: 480px) {
		.FdoPromoChip { padding: 0 var(--space-3); }
	}
	@media (max-width: 359px) {
		.FdoPromoChip { padding: 0 var(--space-1); }
	}

	@media (min-width: 1025px) {
		.FdoPromoBanner { flex-wrap: nowrap; height: 64px; gap: var(--space-5); padding-left: var(--space-6); padding-right: var(--space-6); }
		.FdoPromoLabel { flex: 1 1 auto; font-size: var(--text-subtitle-size); line-height: var(--text-subtitle-line); }
	/*	Desktop invariato rispetto a prima della griglia: torna il flex su una riga sola. */
		.FdoPromoActions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; flex: 0 1 auto; gap: var(--space-4); min-width: 0; }
	/*	Le pastiglie sono N, una per data (Cagliari ne ha 4): con "flex: 0 0 219px" e nowrap
		sforavano la riga. Ora 219px è la larghezza IDEALE ma possono restringersi se non ci
		stanno, così due date restano identiche a prima e quattro entrano comunque. */
		.FdoPromoChip { flex: 0 1 219px; width: auto; min-width: 0; max-width: 219px; height: 52px; padding: 0 var(--space-5); }
		.FdoPromoChipDate { font-size: var(--text-body-size); }
		.FdoPromoClose { position: static; }
	}

/*	--- Sezione "Prossimi Festival" ---
	SPOSTATA il 27/07/2026 in css/prossimi-festival.css (blocco reso riusabile su più pagine
	insieme all'include common/prossimi-festival.htm). Qui non resta nulla: home.htm carica
	prossimi-festival.css nel proprio <head>. --- */

/*	============================== programma ============================== */

/*	---------------------------------------------------------------------- */
/*	Sezione "Il Programma del Festival" — card immagine+titolo dentro il
/*	.FdoMarquee generico (vedi global.css). Fedele a css_full/1ve8k.css:
/*	card 316px, frame con bordo 1px + sfondo bianco 4% (#ffffff0a), immagine
/*	quadrata 300x300 object-fit cover, titolo SOTTO l'immagine (non in
/*	overlay: 1ve8k.css non definisce alcun overlay/gradiente/hover sulla
/*	card — il .FdoMarqueeTrack:hover che mette in pausa lo scroll e'
/*	l'unico "hover" della sezione, gia' gestito dal componente Marquee
/*	condiviso in global.css).
/*	---------------------------------------------------------------------- */

	.FdoProgrammaCard {
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		width: 316px;
		height: 100%;
	}

	.FdoProgrammaFrame {
		display: flex;
		flex: 1;
		flex-direction: column;
		height: 100%;
		padding: var(--space-2);
		border: 1px solid #000;
		border-radius: var(--radius);
		background-color: #ffffff0a;
	}

	.FdoProgrammaImage {
		display: block;
		width: 300px;
		height: 300px;
		object-fit: cover;
		border-radius: var(--radius);
	}

	.FdoProgrammaContent {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: var(--space-2);
		padding-top: var(--space-2);
		text-align: left;
	}

	.FdoProgrammaCardTitle {
		margin: 0;
		font-family: var(--font-body);
		font-size: var(--text-subtitle-size);
		line-height: var(--text-subtitle-line);
		font-weight: var(--text-body-bold-weight);
		color: #ffbed8;
		text-align: left;
	}

	@media (max-width: 640px) {
		.FdoProgrammaCard {
			width: min(316px, 75vw);
		}
		.FdoProgrammaImage {
			width: 100%;
			height: auto;
			aspect-ratio: 1;
		}
	}

/*	Override larghezza marquee di questa sezione (fedele a css_full/rq3ue.css:
/*	._marquee_rq3ue_1{width:100%;min-width:0}) — ridondante coi valori di
/*	base .FdoMarquee in global.css (gia' width:100%/min-width:0), riportato
/*	qui solo per tracciabilita' 1:1 col CSS sorgente. */
	.FdoProgramma .FdoMarquee {
		width: 100%;
		min-width: 0;
	}

/*	============================== paesi ============================== */

/*	---------------------------------------------------------------------- */
/*	Componente "Paesi" — marquee orizzontale con i nomi dei paesi rappresentati
/*	al Festival dell'Oriente (solo testo, nessuna immagine). Riusa .FdoSection/
/*	.FdoSectionInner, .FdoHeading (titolo), .FdoSectionBody/.FdoSectionInner--narrow
/*	(sottotitolo), .FdoMarquee/.FdoMarqueeTrack/.FdoMarqueeGroup (meccanica dello
/*	scroll, incluso il raddoppio del gruppo per il loop, gestito da uno script
/*	condiviso esterno) e .FdoBtn (CTA finale). Qui solo le differenze specifiche
/*	di questa sezione: colore rosa del titolo, touch-action del marquee e lo
/*	stile decorativo del nome paese (gradient testo, tipografia display
/*	extra-large). Fedele a 1sbz4.css (sorgente React di produzione, sezione
/*	"paesi" — classi _pinkTitle_1sbz4_8, _marquee_1sbz4_1, _countryName_1sbz4_12).
/*	---------------------------------------------------------------------- */

	.FdoPaesiTitle {
		color: var(--color-h3);
	}

	.FdoPaesiMarquee {
		touch-action: pan-y pinch-zoom;
	}

	.FdoPaesiNome {
		flex-shrink: 0;
		font-family: var(--font-display);
		font-size: clamp(40px, 12vw, 88px);
		line-height: 1;
		font-weight: 400;
		color: #d89958;
		background: var(--gradient-heading);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		white-space: nowrap;
		padding-inline: var(--space-4);
	}

	@media (min-width: 1025px) {
		.FdoPaesiNome {
			font-size: 88px;
			line-height: 88px;
			padding-inline: var(--space-6);
		}
	}

/*	============================== novita ============================== */

/* ============================================================================
   Sezione "novita" (Scopri tutte le novita del Festival) — card espandibili
   dentro lo scroller draggabile generico (.FdoScroller/.FdoScrollerTrack e
   .FdoFeatureTitle/.FdoFeatureSubtitle sono gia' definite in global.css, sez.
   "NUOVO DESIGN SYSTEM Fdo": qui solo le regole specifiche della card).
   Fedele a: h64xi.css (dimensioni/frame card), qj8qr.css (blocco testo +
   line-clamp). Da caricare SOLO nello scope .FdoPage (vedi home.css/home2.css
   per l'@import quando la sezione verra' agganciata a home.htm).
   ============================================================================ */

.FdoNovita .FdoScrollerTrack { align-items: flex-start; }

/*	Novita: lo scroller ha un auto-scroll continuo (vedi script in home.htm), quindi la barra
	di scorrimento orizzontale va NASCOSTA come per i marquee (che usano overflow:hidden). Qui
	teniamo overflow-x:auto (scroll programmatico + drag utente) ma togliamo la barra. */
.FdoNovitaScroller { scrollbar-width: none; -ms-overflow-style: none; }
.FdoNovitaScroller::-webkit-scrollbar { display: none; width: 0; height: 0; }

/*	Card — 287px (mobile) / 317px (desktop >=1025px), altezza guidata
	dall'aspect-ratio dell'immagine (287/461 e 317/461 fisso) */
.FdoNovitaCard {
	--news-card-gold: #f0d080;
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	width: 287px;
	max-width: 80vw;
	gap: var(--space-3);
	border-radius: var(--radius);
	text-align: left;
	cursor: pointer;
}
@media (min-width: 1025px) {
	.FdoNovitaCard { width: 317px; max-width: none; }
}

/*	Stato espanso: la card puo' crescere oltre l'altezza normale (il testo
	non e' piu' clampato a 3 righe), quindi niente overflow:hidden */
.FdoNovitaCard--expanded { overflow: visible; }

/*	Frame immagine con doppio bordo oro (bordo esterno + pseudo-elemento
	inset di 1px, stesso trucco del sorgente React) */
.FdoNovitaCardFrame {
	position: relative;
	flex-shrink: 0;
	border: 2px solid var(--news-card-gold);
	border-radius: var(--radius);
	overflow: hidden;
}
.FdoNovitaCardFrame:before {
	content: "";
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	left: 1px;
	border: 2px solid var(--news-card-gold);
	border-radius: var(--radius);
	pointer-events: none;
	z-index: 1;
}

.FdoNovitaCardImage {
	display: block;
	width: 100%;
	aspect-ratio: 287 / 461;
	height: auto;
	object-fit: cover;
}
@media (min-width: 1025px) {
	.FdoNovitaCardImage { aspect-ratio: 317 / 461; height: 461px; }
}

/*	Titolo sovrapposto in basso all'immagine, con scrim per leggibilita' */
.FdoNovitaCardTitle {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: var(--space-4);
	font-family: var(--font-display);
	font-size: var(--text-h3-size);
	line-height: var(--text-h3-line);
	font-weight: var(--text-body-bold-weight);
	color: var(--color-body);
	text-align: left;
	background: linear-gradient(180deg, rgba(5, 46, 90, 0) 0%, rgba(5, 46, 90, .85) 100%);
}

.FdoNovitaCardBody {
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
	padding: 0 var(--space-2) var(--space-2);
}

.FdoNovitaCardTextBlock {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}

/*	Testo troncato di default a 3 righe (line-clamp); l'espansione toglie il
	clamp e anima l'altezza (vedi novita.js per il toggle della classe
	--expanded e di aria-expanded) */
.FdoNovitaCardText {
	width: 100%;
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
	color: var(--color-body);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 3;
	max-height: calc(var(--text-body-line) * 3);
	transition: max-height .25s ease;
}

.FdoNovitaCard--expanded .FdoNovitaCardText {
	-webkit-line-clamp: unset;
	max-height: none;
	overflow: visible;
}

/*	Focus da tastiera sulla card (role="button" tabindex="0") */
.FdoNovitaCard:focus-visible {
	outline: 2px solid var(--color-h3);
	outline-offset: 4px;
	border-radius: var(--radius);
}

/*	============================== corsi-attivita ============================== */

/*	---------------------------------------------------------------------- */
/*	Componente "FdoCorsi" — sezione "Corsi e Attività" della homepage: griglia
/*	di 2 card (attività a posti illimitati / a posti limitati con prenotazione)
/*	con immagine affiancata a titolo+testo, e doppio CTA in fondo. Riusa
/*	.FdoSection/.FdoSectionInner (contenitore), .FdoHeading/--h2/--gradient
/*	(titolo), .FdoSectionSubtitle/.FdoSectionBody (sottotitolo/paragrafi —
/*	testo card incluso), .FdoCtaRow e .FdoBtn/--secondary/--outline (CTA).
/*	Qui solo le differenze specifiche del componente: la griglia a 2 colonne
/*	delle card, la card stessa (bordo+immagine+contenuto), e lo stack
/*	full-width dei CTA su mobile / riga centrata su desktop. Fedele a
/*	1478e.css (._block_1478e_11/._blockImage_1478e_24/._blockContent_1478e_33/
/*	._blockTitle_1478e_45) e g7gxz.css (._columns_g7gxz_1/._ctaRow_g7gxz_7/
/*	._cta_g7gxz_7/._ctaOutline_g7gxz_40) — sorgenti React di produzione.
/*	---------------------------------------------------------------------- */

	.FdoCorsiGrid {
		display: grid;
		gap: var(--space-5);
		width: 100%;
		min-width: 0;
		max-width: var(--container-max);
		margin-inline: auto;
		text-align: left;
	}

	@media (min-width: 1025px) {
		.FdoCorsiGrid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.FdoCorsiCard {
		display: flex;
		align-items: stretch;
		gap: var(--space-4);
		width: 100%;
		min-width: 0;
		max-width: 100%;
		padding: var(--space-2);
		border: 1px solid #000;
		border-radius: var(--radius);
		background-color: #ffffff0a;
	}

	.FdoCorsiCardImage {
		flex-shrink: 0;
		width: 220px;
		aspect-ratio: 220 / 275;
		height: auto;
		border-radius: var(--radius);
		object-fit: cover;
	}

	.FdoCorsiCardContent {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--space-3);
		min-width: 0;
		padding: 0;
		text-align: left;
	}

	.FdoCorsiCardTitle {
		font-family: var(--font-body);
		font-size: var(--text-subtitle-size);
		line-height: var(--text-subtitle-line);
		font-weight: var(--text-body-bold-weight);
		color: var(--color-h3);
		text-wrap: pretty;
	}

	@media (max-width: 640px) {
		.FdoCorsiCard {
			flex-direction: row;
			align-items: stretch;
		}
		.FdoCorsiCardImage {
			width: 112px;
			aspect-ratio: 220 / 275;
			align-self: stretch;
			object-fit: cover;
		}
		.FdoCorsiCardContent {
			justify-content: center;
		}
		.FdoCorsiCardTitle {
			font-size: var(--text-caption-size);
			line-height: var(--text-caption-line);
		}
	}

/*	---------------------------------------------------------------------- */
/*	CTA row del componente — stack full-width su mobile (._ctaRow_g7gxz_7 /
/*	._cta_g7gxz_7 di default, non ._ctaRow_15o60_40 che sarebbe gia' riga),
/*	riga centrata a larghezza auto da 1025px in su.
/*	---------------------------------------------------------------------- */

	.FdoCorsiCtaRow {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		/*	La CtaRow è fuori dal .FdoSectionInner (che ha gap 24px tra i figli), quindi senza
			questo margine i pulsanti risulterebbero attaccati alle card. 24px = come www. */
		margin-top: var(--space-5);
	}

	.FdoCorsiCta {
		width: 100%;
	}

	@media (min-width: 1025px) {
		.FdoCorsiCtaRow {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			width: auto;
		}
		.FdoCorsiCta {
			width: auto;
		}
	}

/*	============================== interviste-video ============================== */

/*	Blocchi "Guarda le interviste del pubblico" + "Guarda i video del festival"
/*	Classi specifiche di questi due blocchi. Riusa dal design system "Fdo"
/*	(vedi fondo di custom/frontend/layout/css/global.css):
/*	.FdoSection / .FdoSectionInner / .FdoHeading / .FdoSectionBody /
/*	.FdoScroller / .FdoScrollerTrack — gia' pronti, NON ridefiniti qui.
/*
/*	Componente nuovo introdotto da questi blocchi: "FdoVideoWrapper", ricostruito
/*	1:1 da css_full/1d8v6.css (wrapper iframe verticale) e css_full/w1tmy.css
/*	(contenitore video interviste / scroller). Verificato contro il dump
/*	sections/section__interviste-pubblico.htm e sections/section__video-festival.htm.
/*	============================================================================ */

/*	---------------------------------------------------------------------- */
/*	Contenitore del video singolo (blocco "interviste-pubblico")
/*	1:1 da w1tmy.css ._interviewVideo_w1tmy_11
/*	---------------------------------------------------------------------- */

	.FdoInterviewVideo { width: 100%; max-width: var(--container-max); align-self: stretch; display: flex; justify-content: center; }

	@media (max-width: 767px) {
		.FdoInterviewVideo { width: 100%; max-width: none; }
	}

/*	NOTA: .FdoSectionBody--narrow (paragrafo stretto, max-width 48ch) e' stata
	spostata in global.css (utility condivisa, riusata anche da "prossimi-festival"). */

/*	---------------------------------------------------------------------- */
/*	Componente "VideoWrapper" — wrapper iframe YouTube con aspect-ratio
/*	1:1 da 1d8v6.css ._wrapper_1d8v6_1 / ._iframe_1d8v6_10
/*	---------------------------------------------------------------------- */

	.FdoVideoWrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background-color: #00000040; }
	.FdoVideoIframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }

	/*	Variante "verticalOnMobile" (blocco interviste-pubblico): 16:9 su desktop,
	/*	diventa 9:16 verticale solo sotto i 768px, con l'iframe scalato e
	/*	centrato per riempire il crop verticale. 1:1 da ._verticalOnMobile_1d8v6_31 */
	.FdoVideoWrapper--verticalOnMobile { aspect-ratio: 16 / 9; width: 100%; }
	@media (max-width: 767px) {
		.FdoVideoWrapper--verticalOnMobile { aspect-ratio: 9 / 16; width: 100%; margin-inline: auto; overflow: hidden; }
		.FdoVideoWrapper--verticalOnMobile .FdoVideoIframe { inset: auto; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1.45); transform-origin: center center; }
	}

	/*	Variante "vertical" (blocco video-festival, dentro lo scroller): sempre
	/*	9:16, larghezza fluida fino a un massimo di 280px. 1:1 da ._vertical_1d8v6_19 */
	.FdoVideoWrapper--vertical { aspect-ratio: 9 / 16; width: min(280px, 70vw); }

/*	============================== protagonisti ============================== */

/*	---------------------------------------------------------------------- */
/*	Componente "Protagonisti" — griglia 3 colonne di media (immagini +
/*	video autoplay/muted/loop) con sfondo di sezione. Riusa .FdoSection,
/*	.FdoSection--withBackground, .FdoSectionInner, .FdoHeading, .FdoSectionBody
/*	del design system "Fdo" (vedi global.css); qui solo le classi
/*	specifiche della galleria. Fedele a qwgcr.css (sorgente React di prod).
/*	Sfondo: --section-bg-image impostata inline nello style="" del tag
/*	<section> (vedi protagonisti.htm), valorizzata dal file in
/*	repository/files/homepage-protagonisti-sfondo.jpg.
/*
/*	⚠️ DEVIAZIONE dal sorgente: qwgcr.css NON contiene alcuna media query
/*	che collassi la griglia sotto i 3 col (solo un cambio di `gap` a
/*	641px). Su schermi molto stretti 3 colonne di card verticali (aspect
/*	9:16) risultano troppo piccole per essere leggibili, quindi qui è
/*	stato aggiunto un collasso a 1 colonna sotto 641px, assente nel
/*	sorgente originale: da verificare/confermare col design reale.
/*	---------------------------------------------------------------------- */

	.FdoProtagonisti {
		background-image: var(--section-bg-image);
	}

/*	Su mobile resta la colonna stretta; su desktop il testo occupa il 65% della pagina, come il
	paragrafo di "I Mille Sapori dell'Asia" (il max-width lo tiene dentro il contenitore). */
	.FdoProtagonistiIntro {
		max-width: 48ch;
		margin: 0 auto;
	}
	@media (min-width: 1025px) {
		.FdoProtagonistiIntro { width: 65vw; max-width: 100%; }
	}

	.FdoProtagonistiGrid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-3);
		width: 100%;
	}

	.FdoProtagonistaItem {
		overflow: hidden;
		border-radius: var(--radius);
	}

	.FdoProtagonistaMedia {
		display: block;
		width: 100%;
		aspect-ratio: 9 / 16;
		object-fit: cover;
		transition: transform .2s ease;
	}

	.FdoProtagonistaMedia:hover {
		transform: scale(1.03);
	}

	@media (min-width: 641px) {
		.FdoProtagonistiGrid {
			gap: var(--space-4);
		}
	}

	/*	Collasso mobile NON presente nel sorgente (vedi nota in testa al file). */
	@media (max-width: 640px) {
		.FdoProtagonistiGrid {
			grid-template-columns: 1fr;
		}
	}

/*	============================== closing-cta ============================== */

/*
	Blocco "Un viaggio attraverso la bellezza dell'Oriente" (closing CTA) — classi
	specifiche di questo blocco. I componenti condivisi (FdoSection/FdoSectionInner/
	FdoSectionInner--narrow/FdoFeatureTitle/FdoFeatureSubtitle/FdoBtn/FdoBtn--secondary)
	sono gia' in custom/frontend/layout/css/global.css, sezione "NUOVO DESIGN SYSTEM Fdo".

	Fedele al CSS sorgente reale:
	- xa2ui.css  → ._section_xa2ui_1 (sfondo sezione) + ._leadImage_xa2ui_5 (dimensioni immagine)
	- mgbuy.css  → titolo/sottotitolo, GIA' coperti 1:1 da .FdoFeatureTitle/.FdoFeatureSubtitle
	                (26px/34px, colore #d89958 + gradient-heading / #ffeaf3), nessuna regola
	                aggiuntiva necessaria qui.

	Layout: il sorgente e' una colonna singola centrata, non due colonne — vedi
	._inner_15o60_10 + ._narrow_15o60_23 (flex-direction:column, align-items:center,
	text-align:center, gap:var(--space-5), max-width:48ch), gia' fornito da
	.FdoSectionInner + .FdoSectionInner--narrow.
*/

.FdoClosingCta {
	/* Sfondo dedicato di questa sezione */
	background-color: #052e5a;
}

.FdoClosingCtaImage {
	width: min(520px, 100%);
	aspect-ratio: 520 / 662;
	height: auto;
	object-fit: cover;
}

/*	Banda decorativa di transizione tra Programma e Paesi (hash sorgente 92g2r) */
	.FdoGradientBand { width: 100%; height: 64px; background: linear-gradient(180deg, #063a6e, #052e5a 28%, #041f3d 72%, #041325); }

/*	Fascia scura a gradiente CONTINUO: wrapper che avvolge le sezioni paesi -> closing-cta
	(vedi home.htm), fedele a www dove un unico contenitore col gradiente copre tutta l'area
	scura. Sostituisce la vecchia striscia .FdoGradientBand da 64px che appariva come una "riga".
	Stessi stop colore della sorgente React. */
	.FdoDarkGradient { width: 100%; background: linear-gradient(180deg, #063a6e, #052e5a 28%, #041f3d 72%, #041325); }