/* ============================================================================
   eventi.css — Pagina /eventi/ (selezione città/data)
   Layout allineato al mockup Gateway/01-selezione.html, calato nel tema Fdo.
   Le classi generiche (FdoSection, FdoSectionInner) e i token (--color-*,
   --space-*, --gradient-heading, --font-*) arrivano da global.css/variables.css
   (caricati in head.htm). Qui solo il vestito specifico dell'elenco eventi.

   NB specificità: global.css definisce `.FdoPage p{margin:0}` e
   `.FdoPage h1..h6{margin:0}` (0,1,1) che vincono su una singola classe (0,1,0).
   Per far valere i margini, le regole che toccano margini di titoli/paragrafi
   sono scopate con il prefisso `.FdoPage`.
   ============================================================================ */

/* --- Sezione + intro --------------------------------------------------------- */
.FdoSelSection { padding-top: var(--space-4); }

.FdoSelIntro {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--space-2) 0 var(--space-6);
	text-align: center;
}

.FdoPage .FdoSelTitle {
	margin: 0 0 calc(var(--space-3) + 1rem);
	font-family: var(--font-display);
	font-size: clamp(32px, 5vw, 48px);
	line-height: 1.15;
	font-weight: var(--text-h2-weight);
	text-wrap: balance;
	color: #d89958; /* fallback se background-clip:text non è supportato */
	background: var(--gradient-heading);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-bottom: .1em;
}

.FdoPage .FdoSelLead {
	max-width: 52ch;
	margin: 0 auto;
	color: var(--color-body);
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
	text-wrap: balance;
	opacity: .9;
}

/* --- Stack degli eventi ------------------------------------------------------ */
.FdoSelStack {
	display: grid;
	gap: var(--space-5);
	width: 100%;
}

.FdoSelCard {
	display: grid;
	gap: var(--space-4);
	padding: 8px;
	border: 1px solid #ffffff26;
	border-radius: var(--radius);
	background-color: #ffffff0f;
}

.FdoSelMedia {
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 345 / 230;
	background-color: var(--color-navbar-blue-bg);
}

.FdoSelMedia img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.FdoSelBody {
	min-width: 0;
	padding: 4px;
	text-align: left;
}

.FdoSelCardTitle {
	margin: 0;
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.3;
	font-weight: 400;
	color: #d89958;
	background: var(--gradient-heading);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-bottom: .14em; /* Zen Antique ha discendenti alti: senza questo la "g" viene tagliata sotto (background-clip:text) */
}

.FdoPage .FdoSelVenue {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-2) 0 0;
	color: #d89958;
	background: var(--gradient-heading);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: var(--text-body-size);
	font-weight: 600;
}

.FdoSelPin {
	width: .8em;
	height: 1.05em;
	flex-shrink: 0;
	fill: #d89958;
}

.FdoPage .FdoSelHint {
	margin: 2rem 0 0;
	color: var(--color-h3);
	font-size: var(--text-caption-size);
	line-height: 1.5;
}

/* --- Date cliccabili (mobile: card impilata con freccia rosa) ---------------- */
.FdoSelDates {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.FdoSelDate {
	display: grid;
	grid-template-columns: 1fr 40px;
	align-items: stretch;
	min-height: 84px;
	overflow: hidden;
	border: 1px solid #ffffff26;
	border-radius: var(--radius);
	background-color: #04182f;
	color: var(--color-body);
	text-decoration: none;
}

.FdoSelDate:hover { border-color: var(--color-h3); }

/*	Il testo delle date deve restare chiaro ANCHE da :visited/:active: la regola legacy globale
	"A, A:visited, A:active { color: var(--Link_Text_Color) }" (global.css, specificità 0,1,1)
	batterebbe .FdoSelDate (0,1,0) e sui link già cliccati mostrava il testo blu scuro.
	Qui specificità 0,2,1 (:where(.FdoPage) non aggiunge peso). */
:where(.FdoPage) a.FdoSelDate,
:where(.FdoPage) a.FdoSelDate:visited,
:where(.FdoPage) a.FdoSelDate:active { color: var(--color-body); }

.FdoSelDateBody {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: var(--space-3);
	text-align: center;
}

.FdoSelDateBody .fa-calendar-days { color: var(--color-h3); font-size: 15px; }

.FdoSelDay { font-size: var(--text-caption-size); line-height: 1.2; }

.FdoSelDateN {
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
	font-weight: 700;
}

.FdoSelArrow {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-button-secondary-bg);
	color: var(--color-button-secondary-text);
}

.FdoSelArrow i { font-size: 16px; }

/* --- Nessuna data in vendita ------------------------------------------------- */
.FdoPage .FdoSelNoDates {
	margin: var(--space-4) 0 0;
	color: var(--color-body);
	opacity: .7;
	font-size: var(--text-caption-size);
	font-style: italic;
}

/* --- Data NON acquistabile (ma non passata): opacizzata al 50%, cliccabile ---
   Al click mostra il motivo in un AlertBox (vedi script in eventi.htm/evento.htm).
   Mantiene lo stesso "vestito" di .FdoSelDate ma senza l'evidenza dell'hover. */
.FdoSelDate--off {
	opacity: .5;
	cursor: pointer;
}
.FdoSelDate--off:hover {
	border-color: #ffffff26;
	background-color: #04182f;
}
.FdoSelDate--off:focus-visible {
	outline: 2px solid var(--color-button-secondary-bg);
	outline-offset: 2px;
}

/* --- Singolo evento: nessuna data disponibile (rimpiazza titolo + card) -------
   Usato SOLO da evento.htm quando non restano date mostrabili. */
.FdoSelNoDatesWrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	padding: var(--space-7) var(--space-3);
	text-align: center;
}

.FdoPage .FdoSelNoDatesMsg {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(26px, 4vw, 40px);
	line-height: 1.25;
	font-weight: var(--text-h2-weight);
	color: #d89958; /* fallback se background-clip:text non è supportato */
	background: var(--gradient-heading);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-bottom: .1em;
	text-wrap: balance;
}

/* --- Desktop ----------------------------------------------------------------- */
@media (min-width: 1025px) {

	.FdoSelSection { padding-top: var(--space-5); }
	.FdoSelIntro { padding: var(--space-3) 0 var(--space-6); }
	.FdoSelStack { gap: var(--space-6); }

	.FdoSelCard {
		grid-template-columns: 320px 1fr;
		align-items: stretch;
		gap: var(--space-6);
		padding: 8px;
		min-height: 234px;
	}

	.FdoSelMedia {
		aspect-ratio: auto;
		height: 100%;
		min-height: 218px;
	}

	.FdoSelBody {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--space-2) var(--space-4) var(--space-2) 0;
		text-align: left;
	}

	.FdoSelCardTitle { font-size: 28px; line-height: 1.3; }

	.FdoSelDates {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-top: var(--space-4);
	}

	.FdoSelDate {
		grid-template-columns: none;
		display: flex;
		flex: 1 1 120px;
		min-width: 120px;
		min-height: 0;
		padding: var(--space-3);
	}

	.FdoSelDate:hover {
		border-color: var(--color-button-secondary-bg);
		background-color: rgba(255, 174, 206, .08);
	}

	.FdoSelDateBody {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		padding: 0;
		text-align: left;
		width: 100%;
	}

	.FdoSelDateBody .fa-calendar-days { display: none; }
	.FdoSelArrow { display: none; }

}