/*
 * Eventi Griglia — stili della griglia eventi e della popup.
 *
 * Tutte le classi hanno prefisso "evg-" e non toccano stili globali.
 * I colori sono custom properties, così il tema può sovrascriverli senza
 * modificare questo file. Il font non viene caricato: si eredita dal tema.
 */

/* Le variabili stanno su entrambe le radici possibili dell'output. */
.evg-griglia,
.evg-vuoto {
	--evg-blu-notte: #0b1f3a;
	--evg-rosso: #a8101a;
	--evg-grigio: #4a5566;
	--evg-link: #0b4fa8;
	--evg-link-hover: #08397a;
	--evg-fondo-card: #ffffff;
	--evg-fondo-intestazione: #f2f4f7;
	--evg-bordo: #dde2e9;
	--evg-pill-fondo: #dfe7f2;
	--evg-scrollbar: #7d8898;
	--evg-scrollbar-hover: #5f6b7c;
	--evg-raggio-card: 14px;
	--evg-raggio-popup: 16px;
	--evg-gap: 24px;
	--evg-card-min: 280px;
	--evg-titolo-righe: 4;
	--evg-titolo-interlinea: 1.3;
	--evg-titolo-corpo: 16px;
	--evg-titolo-popup-corpo: 20px;
	--evg-azione: #031634;

	color: var(--evg-blu-notte);

	/* Nessuno scostamento proprio: la griglia parte dal bordo del contenitore. */
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

/* Testo riservato agli screen reader. */
.evg-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Griglia ------------------------------------------------------------ */

.evg-griglia .evg-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--evg-card-min), 1fr));
	gap: var(--evg-gap);
	margin: 0;
	padding: 0 !important;
	list-style: none !important;
}

/* Il tema potrebbe aver stilato i li: qui servono neutri. */
.evg-griglia .evg-cella {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

.evg-griglia .evg-cella::before,
.evg-griglia .evg-cella::marker {
	content: none;
}

/* Oltre i tre elementi la riga diventa dispersiva: si tiene il massimo a 3. */
@media (min-width: 1000px) {
	.evg-griglia .evg-lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Card --------------------------------------------------------------- */

.evg-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	min-height: 280px;
	padding: var(--evg-gap);
	background: var(--evg-fondo-card);
	border-radius: var(--evg-raggio-card);
	color: inherit;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(11, 31, 58, 0.08);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.evg-card:hover,
.evg-card:focus-visible {
	box-shadow: 0 6px 20px rgba(11, 31, 58, 0.14);
	transform: translateY(-2px);
	color: inherit;
	text-decoration: none;
}

.evg-card:focus-visible {
	outline: 3px solid var(--evg-link);
	outline-offset: 3px;
}

/* --- Blocco data -------------------------------------------------------- */

.evg-data {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 40px;
}

.evg-data__visibile {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.evg-data__giorno {
	font-size: 40px;
	line-height: 1;
	font-weight: 900;
	color: var(--evg-rosso);
}

.evg-data__mese {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--evg-blu-notte);
}

.evg-data__fine {
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--evg-grigio);
}

/*
 * Eventi per tutto il mese o per tutto l'anno, e eventi già cominciati.
 * Non hanno un giorno da mettere in evidenza, quindi il periodo prende il
 * posto del numero grande mantenendo lo stesso peso visivo nella riga.
 */
.evg-data__periodo {
	align-self: center;
	font-size: 22px;
	line-height: 1.15;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--evg-rosso);
}

.evg-data--in_corso .evg-data__periodo {
	font-size: 17px;
	letter-spacing: 0;
}

/* --- Contenuto della card ----------------------------------------------- */

.evg-card__tipo {
	align-self: flex-start;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--evg-pill-fondo);
	color: var(--evg-blu-notte);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

/*
 * Il titolo occupa sempre lo stesso numero di righe, anche quando è corto:
 * è ciò che tiene allineati fra una card e l'altra il sottotitolo e
 * l'indicazione "Dettagli evento".
 */
.evg-card__titolo {
	margin: 0;
	font-size: var(--evg-titolo-corpo) !important;
	line-height: var(--evg-titolo-interlinea) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	color: var(--evg-blu-notte) !important;
	display: -webkit-box;
	-webkit-line-clamp: var(--evg-titolo-righe);
	line-clamp: var(--evg-titolo-righe);
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(var(--evg-titolo-righe) * var(--evg-titolo-interlinea) * 1em);
}

/*
 * Il sottotitolo c'è sempre quando la redazione lo ha compilato. Il testo
 * resta completo nel markup e nella popup: qui viene solo limitato in altezza,
 * perché arriva a superare i 250 caratteri e sfonderebbe l'allineamento.
 */
.evg-card__sottotitolo {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--evg-grigio);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.evg-card__azione {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--evg-azione);
}

.evg-freccia {
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.evg-card:hover .evg-freccia {
	transform: translateX(3px);
}

/* --- Nessun evento ------------------------------------------------------ */

.evg-vuoto {
	margin: 0;
	color: var(--evg-grigio);
}

/* --- Preferenze di movimento -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.evg-card,
	.evg-freccia {
		transition: none;
	}

	.evg-card:hover,
	.evg-card:focus-visible {
		transform: none;
	}

	.evg-card:hover .evg-freccia {
		transform: none;
	}
}

/* --- Mostra altri eventi ------------------------------------------------ */

/*
 * L'attributo hidden va rinforzato: le regole di classe qui sotto hanno
 * specificità maggiore dello stile predefinito del browser e senza questo
 * le celle nascoste resterebbero visibili.
 */
.evg-griglia [hidden] {
	display: none !important;
}

.evg-piu {
	/* flex e non inline-flex: su un elemento in linea il margin auto non centra. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin: var(--evg-gap) auto 0;
	padding: 10px 28px;
	min-height: 44px;
	background: transparent;
	border: 2px solid var(--evg-blu-notte);
	border-radius: 999px;
	color: var(--evg-blu-notte);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.evg-piu:hover {
	background: var(--evg-blu-notte);
	color: #ffffff;
}

.evg-piu:focus-visible {
	outline: 3px solid var(--evg-link);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.evg-piu {
		transition: none;
	}
}

/* --- Popup -------------------------------------------------------------- */

.evg-popup {
	width: min(760px, calc(100vw - 48px));
	max-width: 100%;
	max-height: calc(100vh - 64px);
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
	color: var(--evg-blu-notte);
}

.evg-popup::backdrop {
	background: rgba(11, 31, 58, 0.55);
}

.evg-popup__riquadro {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 64px);
	background: var(--evg-fondo-card);
	border-radius: var(--evg-raggio-popup);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(11, 31, 58, 0.35);
}

/* Intestazione fissa. */
.evg-popup__intestazione {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex-shrink: 0;
	padding: 24px 24px 20px 28px;
	background: var(--evg-fondo-intestazione);
	border-bottom: 1px solid var(--evg-bordo);
}

.evg-popup__testa {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-grow: 1;
	min-width: 0;
}

.evg-popup__titolo {
	margin: 0;
	font-size: var(--evg-titolo-popup-corpo) !important;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	color: var(--evg-blu-notte) !important;
}

.evg-popup__sottotitolo {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--evg-grigio);
}

.evg-popup__chiudi {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--evg-blu-notte);
	color: #ffffff;
	cursor: pointer;
}

.evg-popup__chiudi:hover {
	background: #16325c;
}

.evg-popup__chiudi:focus-visible {
	outline: 3px solid var(--evg-link);
	outline-offset: 3px;
}

/* Riga meta fissa. */
.evg-popup__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	flex-shrink: 0;
	padding: 14px 28px;
	border-bottom: 1px solid var(--evg-bordo);
	font-size: 15px;
	color: var(--evg-blu-notte);
}

.evg-popup__voce {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.evg-icona {
	flex-shrink: 0;
}

/* Corpo scorrevole: è l'unica parte che scorre. */
.evg-popup__corpo {
	flex-grow: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	overflow-wrap: break-word;
	padding: 24px 28px;
	font-size: 16px;
	line-height: 1.55;
	color: #1d2733;
}

.evg-popup__corpo:focus-visible {
	outline: 3px solid var(--evg-link);
	outline-offset: -3px;
}

/*
 * Il tema, in modalità accessibile, impone a ogni elemento con tabindex un
 * contorno di focus rosso spostato di 3px verso l'esterno, con !important.
 * Sul corpo scorrevole quel contorno finisce fuori dal riquadro, che lo
 * taglia: ne resta visibile solo il lato superiore, e sembra una riga sotto
 * la data. Qui lo si riporta all'interno, lasciando colore e spessore del
 * tema perché il focus resti uguale al resto del sito. L'!important è
 * l'unico modo di rispondere a quello del tema.
 */
#evg-popup .evg-popup__corpo:focus,
#evg-popup .evg-popup__corpo:focus-visible {
	outline-offset: -4px !important;
}

.evg-popup__corpo > :first-child {
	margin-top: 0;
}

.evg-popup__corpo > :last-child {
	margin-bottom: 0;
}

.evg-popup__corpo p {
	margin: 0 0 14px;
}

.evg-popup__corpo a {
	color: var(--evg-link);
	font-weight: 600;
	text-decoration: underline;
}

.evg-popup__corpo a:hover {
	color: var(--evg-link-hover);
}

.evg-popup__corpo img {
	max-width: 100%;
	height: auto;
}

/*
 * Tipografia del contenuto redazionale. Senza queste regole i heading del
 * testo erediterebbero dal tema misure pensate per una pagina intera e
 * sfonderebbero la popup.
 */
.evg-popup__corpo h3,
.evg-popup__corpo h4,
.evg-popup__corpo h5,
.evg-popup__corpo h6 {
	margin: 20px 0 10px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--evg-blu-notte);
}

.evg-popup__corpo h3 {
	font-size: 19px;
}

.evg-popup__corpo h4 {
	font-size: 17px;
}

.evg-popup__corpo h5,
.evg-popup__corpo h6 {
	font-size: 16px;
}

.evg-popup__corpo ul,
.evg-popup__corpo ol {
	margin: 0 0 14px;
	padding-left: 22px;
}

.evg-popup__corpo li {
	margin: 0 0 6px;
}

.evg-popup__corpo table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/*
 * Colori del testo redazionale.
 *
 * Il tema Uncode forza `color: #031634` su `.style-light p strong` e
 * `.style-light p b`. Quando la redazione colora un testo scrivendo
 * <span style="color:#f20707"><strong>…</strong></span>, quella regola vince
 * sul colore ereditato dallo span e il rosso sparisce. Qui il colore torna a
 * essere ereditato: il selettore passa dall'id del dialog perche un id batte
 * qualunque numero di classi, evitando !important.
 *
 * Le regole non toccano i colori scritti in linea dalla redazione, che restano
 * sempre prioritari.
 *
 * `mark` resta fuori dall'elenco di proposito: ha un colore suo, abbinato al
 * fondo giallo del browser, e forzarlo a ereditare lo renderebbe illeggibile.
 */
#evg-popup .evg-popup__corpo strong,
#evg-popup .evg-popup__corpo b,
#evg-popup .evg-popup__corpo em,
#evg-popup .evg-popup__corpo i,
#evg-popup .evg-popup__corpo u,
#evg-popup .evg-popup__corpo small,
#evg-popup .evg-popup__corpo sub,
#evg-popup .evg-popup__corpo sup,
#evg-popup .evg-popup__corpo span,
#evg-popup .evg-popup__corpo blockquote p,
#evg-popup .evg-popup__corpo dl dt,
#evg-popup .evg-popup__corpo table thead {
	color: inherit;
}

/* Stessa ragione: il tema colora h1-h6 con .style-light h1 e simili. */
#evg-popup .evg-popup__corpo h3,
#evg-popup .evg-popup__corpo h4,
#evg-popup .evg-popup__corpo h5,
#evg-popup .evg-popup__corpo h6 {
	color: var(--evg-blu-notte);
}

#evg-popup .evg-popup__corpo a {
	color: var(--evg-link);
}

#evg-popup .evg-popup__corpo a:hover {
	color: var(--evg-link-hover);
}

/* Scrollbar in tinta. */
.evg-scroll {
	scrollbar-width: auto;
	scrollbar-color: var(--evg-scrollbar) #eef1f5;
}

.evg-scroll::-webkit-scrollbar {
	width: 12px;
}

.evg-scroll::-webkit-scrollbar-track {
	background: #eef1f5;
	border-radius: 8px;
}

.evg-scroll::-webkit-scrollbar-thumb {
	background: var(--evg-scrollbar);
	border: 3px solid #eef1f5;
	border-radius: 8px;
}

.evg-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--evg-scrollbar-hover);
}

/* Link alla pagina dell'evento. */
.evg-popup__piede {
	flex-shrink: 0;
	padding: 16px 28px;
	border-top: 1px solid var(--evg-bordo);
}

.evg-popup__vai {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--evg-link) !important;
	font-weight: 700;
	text-decoration: none;
}

.evg-popup__vai:hover {
	color: var(--evg-link-hover);
	text-decoration: underline;
}

.evg-popup__vai:focus-visible {
	outline: 3px solid var(--evg-link);
	outline-offset: 3px;
}

/* La pagina sotto non scorre mentre la popup è aperta. */
.evg-bloccato,
.evg-bloccato body {
	overflow: hidden;
}

/* Su schermi stretti la popup occupa tutto lo schermo. */
@media (max-width: 599px) {
	.evg-popup {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		margin: 0;
		inset: 0;
	}

	.evg-popup__riquadro {
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	.evg-popup__intestazione {
		padding: 20px 16px 16px 20px;
	}

	.evg-popup__titolo {
		font-size: 17px;
	}

	.evg-popup__meta {
		gap: 8px 20px;
		padding: 12px 20px;
	}

	.evg-popup__corpo {
		padding: 20px;
	}

	.evg-popup__piede {
		padding: 14px 20px;
	}
}