@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;
	}
	.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; }
	.FdoPromoActions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); flex: 1 1 auto; min-width: 0; }
	.FdoPromoChip {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1 1 8rem;
		width: auto;
		max-width: 219px;
		height: 48px;
	/*	+3rem di respiro orizzontale (24px per lato) e larghezza che non scende MAI sotto il suo
		contenuto: le pastiglie sono N, una per data, e stringendosi mandavano a capo "Venerdì" e
		"2 ottobre". Con min-width:max-content la compressione si ferma quando il testo sta su una
		riga sola (e ha la precedenza su max-width, quindi una data lunga non viene mai tagliata). */
		padding: 0 var(--space-5);
		min-width: max-content;
		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;
	}
	.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; }
	.FdoPromoClose { 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; }

	@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); }
		.FdoPromoActions { flex-wrap: nowrap; 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; max-width: 219px; height: 52px; padding: 0 var(--space-5); }
		.FdoPromoChipDate { font-size: var(--text-body-size); }
	}

/*	--- 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); }