/*	==================================================================================================
	Sezione "Prossimi Festival" — card edizione + wrapper.

	Estratto da home.css il 27/07/2026 per rendere il blocco riusabile su più pagine insieme
	all'include Twig common/prossimi-festival.htm. Le classi generiche del design system
	(.FdoSection, .FdoSectionInner, .FdoHeading, .FdoSectionBody, .FdoBtn ...) restano in global.css.
	================================================================================================== */

	.FdoProssimiFestivalHeadingGroup { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
	.FdoProssimiFestivalEditions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-5); width: 100%; }
	.FdoEditionItem { width: 100%; }

	.FdoEditionCard { 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; }
	.FdoEditionMedia { position: relative; flex-shrink: 0; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radius); background-color: var(--color-navbar-blue-bg); }
	.FdoEditionImage { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
	.FdoEditionScrimTop { 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; }
	.FdoEditionOverlay { 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; }
	.FdoEditionGradientText { font-family: var(--font-display); color: #d89958; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
	.FdoEditionCity { font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-body-bold-weight); }
	.FdoEditionVenue { font-size: 20px; line-height: 28px; font-weight: var(--text-body-bold-weight); }
	.FdoEditionContent { display: flex; flex: 1; flex-direction: column; gap: var(--space-4); padding: var(--space-2) 0 0; }
	.FdoEditionDates { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); }
	.FdoEditionChip { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: var(--space-1); min-height: 88px; padding: var(--space-3); border-radius: var(--radius); background-color: var(--color-bg); text-align: center; }
	.FdoEditionChipDay { font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: var(--text-caption-weight); text-transform: uppercase; letter-spacing: .04em; color: var(--color-body); }
	.FdoEditionChipNumbers, .FdoEditionChipMonth { font-family: var(--font-body); color: var(--color-body); }
	.FdoEditionChipNumbers { font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: var(--text-body-bold-weight); }
	.FdoEditionChipMonth { font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: var(--text-body-weight); }
	.FdoEditionTicket { display: flex; width: 100%; justify-content: center; margin-top: auto; flex-shrink: 0; }

	@media (max-width: 1024px) {
		.FdoEditionMedia { aspect-ratio: auto; height: 40svh; max-height: 40svh; }
		.FdoEditionContent { gap: var(--space-2); }
		.FdoEditionChip { flex: 0 0 auto; min-height: 0; gap: 0; padding: var(--space-2); }
	}
	/*	Pulsante "Vedi tutti gli eventi" (home): centrato sotto le card (lo centra .FdoSectionInner),
		con 1rem di distacco in più oltre al gap della sezione. */
	.FdoProssimiFestivalVediTutti { align-self: center; margin-top: 1rem; }

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

		/*	Desktop: FLEX centrato che va a capo su più righe. Le card sono sempre CENTRATE
			indipendentemente da quante sono (1 → al centro, 2 → coppia centrata, 3 → riga piena,
			4+ → a capo restando centrate). Con card da 360px e gap 24px, dentro il container da
			1200px ci stanno max 3 per riga (4 andrebbero a 1512px, quindi vanno a capo): stesso
			comportamento della vecchia griglia a 3 colonne, ma senza l'allineamento a sinistra
			quando gli eventi sono meno di 3.
			⚠️ Prima era `display:grid; grid-template-columns:repeat(3,1fr)`: con 1 evento la card
			finiva nella prima colonna (a sinistra) e le altre due restavano vuote. */
		.FdoProssimiFestivalEditions {
			display: flex;
			/*	⚠️ OBBLIGATORIO azzerare flex-direction: la regola base (mobile) è `column`, e senza
				questo `row` verrebbe ereditata → in un flex COLUMN `justify-content:center` centra in
				VERTICALE e la card (max-width 360) si allinea a SINISTRA (cross-start). Con `row` il
				centraggio orizzontale funziona. */
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: stretch;
			gap: var(--space-5);
			width: 100%;
		}
		.FdoEditionItem { flex: 0 1 360px; width: auto; max-width: 360px; }
		.FdoEditionCard { width: 100%; max-width: 360px; margin-inline: auto; }
	}