/**
 * Stili degli eventi (grandi eventi + elenco).
 *
 * @package AdverTrieste
 */

/* Il banner dei grandi eventi resta una griglia di schede: sono pochi e larghi.
   L'elenco degli eventi no — da quando disegna gruppi, filtri e riquadri, quella
   griglia li metteva tutti sulla stessa riga, chip compresi, stirandoli in
   pillole alte come mezza pagina. È lo stesso inciampo già visto sulla pagina
   Offerte: quando il contenuto smette di essere «tante schede uguali», la
   griglia sul contenitore diventa una trappola. */

.advtr-grandi-eventi {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin: 1em 0;
}

.advtr-eventi {
	display: block;
	margin: 1em 0;
}

.advtr-evento-card {
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 14px 16px;
	background: #fff;
}

.advtr-evento-card.grande {
	border-color: #d4a017;
	box-shadow: 0 0 0 1px rgba( 212, 160, 23, 0.35 );
}

.advtr-evento-img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 8px;
}

/* Galleria: una riga di miniature che si adatta alla larghezza. `auto-fill` e
   non `auto-fit` perché con due foto sole `auto-fit` le stira a mezza card. */
.advtr-evento-galleria {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 84px, 1fr ) );
	gap: 6px;
	margin-top: 10px;
}

.advtr-evento-foto {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 4px;
	border: 1px solid #dcdcde;
}

.advtr-evento-galleria a:focus-visible .advtr-evento-foto {
	outline: 2px solid #0e6b73;
	outline-offset: 2px;
}

.advtr-evento-titolo {
	margin: 0 0 6px;
}

.advtr-evento-stato {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
}

.advtr-evento-stato.attesa {
	color: #b32d2e;
}

.advtr-evento-stato.incorso {
	color: #2a7d2e;
}

.advtr-evento-stato.concluso {
	color: #787c82;
}

.advtr-evento-desc {
	font-size: 14px;
}

.advtr-evento-locali-label {
	margin-top: 8px;
	font-weight: 600;
	font-size: 13px;
}

.advtr-evento-locali {
	margin: 4px 0 0;
	padding-left: 18px;
	font-size: 14px;
}

@media ( min-width: 900px ) {

	/* Due colonne: a sinistra la scaletta, a destra quello che accompagna —
	   oggi l'invito a chi organizza, domani il calendario del mese. Senza,
	   su uno schermo largo restava una colonna sola in mezzo a due metà di
	   pagina vuote, e ogni scheda era una riga lunghissima con dentro
	   pochissimo.
	   
	   Sta in questo foglio e non in `pubblico.css` per un motivo pratico: qui
	   sopra c'è `display: block` sullo stesso selettore, e questo file viene
	   caricato dopo. La stessa regola scritta di là perdeva in silenzio. */

	.advtr-eventi {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) 300px;
		gap: 24px;
		align-items: start;
	}

	/* Filtri e gruppi stanno nella colonna larga; il riquadro partner si
	   sposta a destra e ci resta mentre si scorre. */

	.ap-ev-filtri,
	.ap-ev-gruppo,
	.advtr-eventi > .advtr-vuoto,
	.ap-ev-citta {
		grid-column: 1;
	}

	.advtr-eventi > .ap-off-partner {
		grid-column: 2;
		grid-row: 1 / span 99;
		align-self: start;
		position: sticky;
		top: 88px;
		flex-direction: column;
		align-items: flex-start;
		margin: 0;
		padding-right: 18px;
	}
}