@charset "utf-8";

/*	==================================================================================================
	Pagina "Modulo Espositori" — card di adesione per città/edizione + CTA finale.

	Estende il design system "Fdo" (vedi global.css): .FdoSection / .FdoSectionInner / .FdoBtn /
	.FdoFeatureTitle / .FdoFeatureSubtitle / .FdoHeading (+ modificatori --h1/--h2/--gradient) sono già
	definiti lì e NON vanno ridefiniti qui.

	Pagina DINAMICA dall'11/08/2026 (prima era statica, nessuna dipendenza dal DB — vedi CHANGELOG):
	una card per evento reale (Carica_Eventi), non più 4 blocchi <article class="FdoExpoCard"> fissi nel
	Twig. Le immagini di sfondo arrivano da Ev.Immagini.1.Normale (repository dell'evento, non più
	/images/modulo-espositori/<slug>.jpg); le date da Ev.Tranche (stessa logica di
	common/prossimi-festival.htm, vedi CHANGELOG 11-12/08/2026). Il pulsante "Scarica il modulo" punta al
	campo evento "Link informazioni e/o acquisto su sito esterno" — vedi
	custom/frontend/layout/html/modulo-espositori/modulo-espositori.htm.
	================================================================================================== */

/*	Contenitore: hero + griglia card + box CTA, tutto nella stessa sezione (gap più largo del
	default di .FdoSectionInner, per rispecchiare la spaziatura verticale del design). */
	.FdoExpoSectionInner { gap: var(--space-7); }

/*	---------------------------------------------------------------------- */
/*	Hero: titolo + sottotitolo

	12/08/2026 (corretto, segnalato dal committente): il titolo NON è più una classe propria di questa
	pagina (.FdoExpoTitle, rimossa) — usa le stesse identiche classi condivise del titolo H1 di TUTTE le
	altre pagine "hero" del sito (corsi-e-attivita.htm, aree-culturali.htm, ristoranti-e-street-food.htm,
	info-e-contatti.htm): `.FdoHeading.FdoHeading--h1.FdoHeading--gradient` (definite in global.css). Da
	lì viene sia l'oro VERO (il gradiente `--gradient-heading` su testo, non il semplice `color:#d89958`
	di prima) sia la singola riga: il vecchio `max-width:48ch` condiviso con tutta `.FdoExpoHeroGroup`
	era calcolato sul font AMBIENTE (body, stretto), non su quello, molto più largo, del titolo in
	`--font-display` — bastava un titolo di 2 parole a mandarlo a capo. Rimosso quel max-width dal
	gruppo: il titolo ora gestisce la propria riga da solo (stesso comportamento di
	`.FdoRistorantiHeaderTitle`/`.FdoAreaHeaderTitle`, nessuna delle quali vincola la larghezza dell'H1),
	e il sottotitolo ha una sua larghezza propria in `ch` (vedi sotto), non più ereditata dal gruppo. */
	.FdoExpoHeroGroup { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
/*	Sottotitolo: stesso schema di `.FdoRistorantiHeaderSubtitle`/`.FdoCorsiHeroSubtitle` (dimensione
	`--text-h3-*`, colore `--color-h3`, `max-width` in `ch` propria), non più una taglia/font-family
	inventati apposta per questa pagina (prima: `font-family:display`, `26px/34px` fissi). */
	.FdoExpoSubtitle { margin: 0; max-width: 56ch; font-size: clamp(18px, 3vw, var(--text-h3-size)); line-height: var(--text-h3-line); font-weight: var(--text-h3-weight); color: var(--color-h3); text-wrap: balance; }

/*	---------------------------------------------------------------------- */
/*	Griglia card città — 12/08/2026 (corretto, segnalato dal committente): la card DEVE avere lo
	stesso aspetto — uguale e identico — a .FdoEditionCard di common/prossimi-festival.htm (l'include
	"I Prossimi Festival Dell'Oriente" di home.htm). I due tentativi precedenti (griglia "1 di 3 della
	riga", poi solo le badge data allineate all'altro include) avevano lasciato il resto della card
	— bordo, proporzioni immagine, overlay, colori, tipografia, bottone — con uno stile INVENTATO apposta
	per questa pagina, mai uguale all'altra. Da qui in poi è una copia 1:1 di
	.FdoProssimiFestivalEditions/.FdoEditionItem/.FdoEditionCard/.FdoEditionMedia/.FdoEditionImage/
	.FdoEditionScrimTop/.FdoEditionOverlay/.FdoEditionGradientText/.FdoEditionCity/.FdoEditionVenue/
	.FdoEditionContent/.FdoEditionTicket (prossimi-festival.css), stessi valori, solo classi rinominate
	FdoExpo* (per restare nel file CSS dedicato a questa pagina, stessa convenzione già in uso per le
	badge data). CAMBIA SOLO IL BOTTONE finale: testo "Scarica il modulo" invece di "Compra biglietto" e
	azione (link esterno o AlertBox invece di Ev.Url) — vedi il template per il dettaglio del markup.
	Persa di proposito, per restare fedeli all'originale: l'icona pin sulla sede e il fallback
	`Sottotitolo ?: Luogo` (l'altro include non li ha, mostra la sede SOLO se Ev.Sottotitolo è valorizzato). */
	.FdoExpoGrid { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-5); width: 100%; }
	.FdoExpoItem { width: 100%; }

	.FdoExpoCard { display: flex; flex-direction: column; align-self: stretch; width: 90%; max-width: none; height: 100%; margin-inline: auto; padding: 8px; border: 1px solid #000; border-radius: var(--radius); background-color: #ffffff0f; }
	.FdoExpoCardMedia { position: relative; flex-shrink: 0; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radius); background-color: var(--color-navbar-blue-bg); }
	.FdoExpoCardImage { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
	.FdoExpoCardScrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(5,46,90,.85) 0%, transparent 60%); pointer-events: none; }
	.FdoExpoCardOverlay { position: absolute; top: 0; left: 0; z-index: 1; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); text-align: left; }
	.FdoExpoCardGradientText { font-family: var(--font-display); color: #d89958; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
	.FdoExpoCardCity { font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-body-bold-weight); }
	.FdoExpoCardVenue { font-size: 20px; line-height: 28px; font-weight: var(--text-body-bold-weight); }
	.FdoExpoCardContent { display: flex; flex: 1; flex-direction: column; gap: var(--space-4); padding: var(--space-2) 0 0; }
	.FdoExpoCardDates { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); width: 100%; margin: 0; padding: 0; list-style: none; }
	.FdoExpoCardDate { flex: 1 1 92px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); min-height: 88px; padding: var(--space-3) var(--space-2); border-radius: var(--radius); background-color: var(--color-bg); text-align: center; }
	.FdoExpoCardDay { display: flex; align-items: baseline; justify-content: center; gap: 6px; white-space: nowrap; color: var(--color-body); font-size: 15px; line-height: 1.4; }
	.FdoExpoCardDayWeekday, .FdoExpoCardDayMonth { text-transform: uppercase; letter-spacing: .04em; font-weight: var(--text-body-weight); }
	.FdoExpoCardDayNum { font-weight: var(--text-body-bold-weight); }
	.FdoExpoCardDownload { display: flex; width: 100%; justify-content: center; margin-top: auto; flex-shrink: 0; }

	@media (max-width: 1024px) {
		.FdoExpoCardMedia { aspect-ratio: auto; height: 40svh; max-height: 40svh; }
		.FdoExpoCardContent { gap: var(--space-2); }
		.FdoExpoCardDate { min-height: 0; padding: var(--space-2); }
	}

	@media (min-width: 1025px) {
		.FdoExpoCardDates { flex-direction: row; align-items: stretch; gap: var(--space-2); }
		.FdoExpoCardDate { flex: 1; min-height: 96px; }

		.FdoExpoGrid {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: stretch;
			gap: var(--space-5);
			width: 100%;
		}
		.FdoExpoItem { flex: 0 1 360px; width: auto; max-width: 360px; }
		.FdoExpoCard { width: 100%; max-width: 360px; margin-inline: auto; }
	}

/*	---------------------------------------------------------------------- */
/*	Box "Esclusivamente solo per espositori" — CTA finale con fregi angolari
	(cta-corner.svg, ricavato da deco.svg del Figma): un fregio dorato piccolo
	e delicato ai due angoli SUPERIORI soltanto (destro speculare al sinistro
	con scaleX(-1)), niente decorazione in basso — sostituisce le due barre col
	gradiente "gold" usate prima come semplificazione provvisoria.
/*	---------------------------------------------------------------------- */
	.FdoExpoCta {
		position: relative;
		overflow: hidden;
		width: 100%;
		min-height: 240px;
		padding: var(--space-6) var(--space-5) var(--space-7);
		background-color: var(--color-card-prereg);
		border-radius: var(--radius);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
		text-align: center;
	}
	.FdoExpoCta::before,
	.FdoExpoCta::after {
		content: "";
		position: absolute;
		top: 24px;
		width: 320px;
		height: 151px; /* rapporto 300:142 dell'asset cta-corner.svg */
		background: url('/images/modulo-espositori/cta-corner.svg') no-repeat top left / contain;
		pointer-events: none;
	}
	.FdoExpoCta::before { left: 26px; }
	.FdoExpoCta::after { right: 26px; transform: scaleX(-1); }
	.FdoExpoCta .FdoFeatureTitle,
	.FdoExpoCta .FdoFeatureSubtitle {
		position: relative;
		z-index: 1;
	}
	.FdoExpoCtaLink { color: inherit; text-decoration: underline; }

	@media (min-width: 1025px) {
		.FdoExpoCta { padding: var(--space-7) var(--space-6); }
		.FdoExpoCta .FdoFeatureTitle { margin-top: 2rem; }
	}

	@media (max-width: 640px) {
		.FdoExpoCta::before,
		.FdoExpoCta::after {
			width: 170px;
			height: 80px;
			top: 16px;
		}
		.FdoExpoCta::before { left: 14px; }
		.FdoExpoCta::after { right: 14px; }
	}