/**
 * Faro Eventi — Stili frontend
 *
 * Coerenti col tema FARO (palette blu navy) ma neutri su qualsiasi tema.
 * Override possibile dal tema sovrascrivendo le CSS variables.
 */

:root {
	--faro-ev-primary: #16456b;
	--faro-ev-secondary: #0e2c45;
	--faro-ev-muted: #6b7785;
	--faro-ev-bg: #fff;
	--faro-ev-radius: 14px;
}

/* =========================================================
   Shortcode [faro_eventi] — griglia card per archivio
   ========================================================= */
.faro-ev-intro {
	margin: 0 0 34px;
	line-height: 1.6;
	color: var(--faro-ev-secondary);
}
.faro-ev-intro p { margin: 0 0 1em; }
.faro-ev-intro p:last-child { margin-bottom: 0; }
/* Rispetta dimensione/colore impostati nell'editor (inline style sui figli) */
.faro-ev-intro span[style] { font-size: revert; }
.faro-ev-intro img { max-width: 100%; height: auto; }
.faro-ev-section--past { margin-top: 56px; }
.faro-ev-past-title {
	font-size: clamp(1.4rem, 3vw, 2rem);
	color: var(--faro-ev-secondary);
	margin: 0 0 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(14,44,69,.12);
	font-weight: 700;
}
.faro-ev-shortcode { margin: 30px 0; }
.faro-ev-shortcode__list { display: grid; gap: 28px; }
.faro-ev-shortcode__list--cols-1 { grid-template-columns: 1fr; }
.faro-ev-shortcode__list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.faro-ev-shortcode__list--cols-3 { grid-template-columns: repeat(3, 1fr); }
.faro-ev-shortcode__list--cols-4 { grid-template-columns: repeat(4, 1fr); }

.faro-ev-card {
	background: var(--faro-ev-bg);
	border-radius: var(--faro-ev-radius);
	overflow: hidden;
	box-shadow: 0 10px 30px -16px rgba(14,44,69,.18);
	transition: transform .2s, box-shadow .2s;
}
.faro-ev-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -16px rgba(14,44,69,.3); }
.faro-ev-card__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.faro-ev-card__media { aspect-ratio: 16/10; background: #d8dde3; overflow: hidden; }
.faro-ev-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.faro-ev-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.faro-ev-card__date { display: block; font-size: .75rem; font-weight: 700; color: var(--faro-ev-muted); letter-spacing: .08em; text-transform: uppercase; }
.faro-ev-card__time { font-weight: 400; }
.faro-ev-card__title { font-size: 1.1rem; margin: 4px 0 0; color: var(--faro-ev-secondary); font-weight: 700; line-height: 1.3; }
.faro-ev-card__sub { margin: 0; color: var(--faro-ev-muted); font-size: .9rem; }
.faro-ev-card__where { margin: 0; font-size: .85rem; color: var(--faro-ev-primary); }
.faro-ev-card__text { margin-top: 4px; color: var(--faro-ev-muted); font-size: .9rem; line-height: 1.5; }
.faro-ev-card__text p { margin: 0 0 .5em; }
.faro-ev-shortcode--list .faro-ev-shortcode__list { grid-template-columns: 1fr !important; }
.faro-ev-shortcode--list .faro-ev-card__link { flex-direction: row; }
.faro-ev-shortcode--list .faro-ev-card__media { flex: 0 0 220px; aspect-ratio: auto; }
.faro-ev-shortcode--list .faro-ev-card__body { flex: 1; }
.faro-ev-empty { text-align: center; color: var(--faro-ev-muted); padding: 50px 20px; font-style: italic; }

/* =========================================================
   1. HERO single-evento — banner full-width con overlay blu
   ========================================================= */
.faro-ev-hero {
	position: relative;
	min-height: 420px;
	background-size: cover;
	background-position: center;
	background-color: var(--faro-ev-secondary); /* fallback se manca img */
	display: flex;
	align-items: center;
	color: #fff;
	overflow: hidden;
}
.faro-ev-hero__overlay {
	position: absolute; inset: 0;
	background: rgba(22, 69, 107, .82); /* blu navy semi-trasparente */
	z-index: 1;
}
.faro-ev-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 32px;
}
.faro-ev-hero__title {
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	color: #fff;
}
.faro-ev-hero__sub {
	margin: 12px 0 0;
	font-size: 1.1rem;
	opacity: .9;
	font-style: italic;
}

/* =========================================================
   2. CONTENT — testo descrittivo principale
   ========================================================= */
.faro-ev-single {
	max-width: 1100px;
	margin: 0 auto;
	padding: 60px 32px 40px;
}
.faro-ev-single__content {
	color: #1c2733;
	line-height: 1.7;
	font-size: 1.02rem;
	margin-bottom: 40px;
}
.faro-ev-single__content p { margin: 0 0 1.1em; }
.faro-ev-single__content p:last-child { margin-bottom: 0; }
.faro-ev-single__content strong { color: var(--faro-ev-secondary); }

/* Info panel compatto */
.faro-ev-single__info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	padding: 20px 24px;
	background: #f4f6f8;
	border-radius: var(--faro-ev-radius);
	margin: 0 0 50px;
}
.faro-ev-single__info-row { display: flex; flex-direction: column; gap: 2px; }
.faro-ev-single__info-label { font-size: .7rem; font-weight: 700; color: var(--faro-ev-muted); text-transform: uppercase; letter-spacing: .08em; }
.faro-ev-single__info-value { color: var(--faro-ev-secondary); font-weight: 600; }

/* =========================================================
   3. GALLERIA 2 immagini asimmetriche
   ========================================================= */
.faro-ev-gallery {
	display: grid;
	grid-template-columns: 4fr 6fr; /* asimmetrico: 1ª più stretta, 2ª più larga */
	gap: 30px;
	margin: 30px 0 60px;
	align-items: start;
}
.faro-ev-gallery__item {
	position: relative;
	border-radius: var(--faro-ev-radius);
	overflow: visible; /* il box decorativo esce */
}
.faro-ev-gallery__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--faro-ev-radius);
	box-shadow: 0 22px 50px -22px rgba(14,44,69,.35);
	position: relative;
	z-index: 2;
}

/* Seconda immagine: box blu navy che sporge da SOPRA-DESTRA */
.faro-ev-gallery__item--decorated {
	padding-top: 30px;    /* spazio sopra per la sporgenza */
	padding-right: 30px;  /* spazio destro per la sporgenza */
}
.faro-ev-gallery__item--decorated::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 70%;
	height: 75%;
	background: var(--faro-ev-primary);
	border-radius: 18px;
	z-index: 1;
}

/* =========================================================
   CTA biglietti (opzionale)
   ========================================================= */
.faro-ev-single__cta {
	margin: 36px 0 0;
	text-align: center;
}
.faro-ev-single__cta a {
	display: inline-block;
	background: var(--faro-ev-primary);
	color: #fff;
	text-decoration: none;
	padding: 16px 32px;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: transform .2s, box-shadow .2s;
}
.faro-ev-single__cta a:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -10px rgba(14,44,69,.35);
}

/* =========================================================
   6. SLIDER altri eventi — 3 card verticali sempre visibili
   ========================================================= */
.faro-ev-other {
	margin: 40px 0 0;
	padding: 30px 0 80px;
	background: #fff;
}
.faro-ev-slider {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}
.faro-ev-slider__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 20px 60px;             /* spazio per frecce */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.faro-ev-slider__track::-webkit-scrollbar { display: none; }

.faro-ev-slider__slide {
	position: relative;
	flex: 0 0 calc((100% - 168px) / 3); /* 3 card visibili, gap 24×2 + padding 60×2 */
	min-width: 240px;
	aspect-ratio: 3 / 4;                /* card verticali rettangolari */
	border-radius: 18px;
	overflow: hidden;
	scroll-snap-align: center;
	text-decoration: none;
	color: #fff;
	background-color: var(--faro-ev-secondary); /* fallback */
	background-image: var(--slide-bg);
	background-size: cover;
	/* v1.13.0 — Punto focale. Variabile assente = center, cioe' com'era prima. */
	background-position: var(--slide-pos, center);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transition: transform .35s, box-shadow .35s;
}
/* Overlay blu navy su tutte le card; più scuro per le non-attive */
.faro-ev-slider__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(14,44,69,.88) 0%, rgba(14,44,69,.78) 60%, rgba(14,44,69,.7) 100%);
	transition: background .35s;
}
.faro-ev-slider__slide.is-active .faro-ev-slider__overlay {
	background: linear-gradient(to top, rgba(14,44,69,.75) 0%, rgba(14,44,69,.4) 50%, rgba(14,44,69,.2) 100%);
}
.faro-ev-slider__slide.is-active {
	box-shadow: 0 30px 60px -22px rgba(14,44,69,.45);
}
.faro-ev-slider__slide:hover { transform: translateY(-3px); }

.faro-ev-slider__body {
	position: relative;
	z-index: 2;
	padding: 26px 26px 30px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: #fff;
}
.faro-ev-slider__date {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .85;
}
.faro-ev-slider__slide-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 4px 0 0;
	line-height: 1.25;
	color: #fff;
}
.faro-ev-slider__slide-sub {
	font-size: .85rem;
	opacity: .85;
	margin-top: 2px;
}

/* Frecce navigazione */
.faro-ev-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: var(--faro-ev-nav-bg, #fff);
	color: var(--faro-ev-nav-arrow, var(--faro-ev-primary));
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 12px 30px -10px rgba(14,44,69,.35);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s, background .2s, color .2s;
}
.faro-ev-slider__nav:hover,
.faro-ev-slider__nav:focus-visible {
	transform: translateY(-50%) scale(1.08);
	background: var(--faro-ev-nav-bg-h, var(--faro-ev-primary));
	color: var(--faro-ev-nav-arrow-h, #fff);
}
.faro-ev-slider__nav--prev { left: 8px; }
.faro-ev-slider__nav--next { right: 8px; }
.faro-ev-slider__nav[disabled] { opacity: .3; cursor: default; }
.faro-ev-slider__nav[disabled]:hover {
	transform: translateY(-50%);
	background: var(--faro-ev-nav-bg, #fff);
	color: var(--faro-ev-nav-arrow, var(--faro-ev-primary));
}

/* 7. Bottone "Scopri gli eventi" sotto lo slider */
.faro-ev-other__cta {
	text-align: center;
	margin-top: 40px;
}
.faro-ev-other__btn {
	display: inline-block;
	background: var(--faro-ev-primary);
	color: #fff;
	text-decoration: none;
	padding: 16px 38px;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .9rem;
	transition: transform .2s, box-shadow .2s;
}
.faro-ev-other__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -10px rgba(14,44,69,.4);
	color: #fff;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
	.faro-ev-shortcode__list--cols-4,
	.faro-ev-shortcode__list--cols-3 { grid-template-columns: repeat(2, 1fr); }
	.faro-ev-gallery { grid-template-columns: 1fr; gap: 50px; }
	.faro-ev-gallery__item--decorated { padding-top: 20px; padding-right: 18px; }
	.faro-ev-slider__slide { flex: 0 0 calc((100% - 100px) / 2); } /* 2 card visibili */
	.faro-ev-slider__track { padding: 20px 40px; }
}
@media (max-width: 640px) {
	.faro-ev-shortcode__list { grid-template-columns: 1fr !important; }
	.faro-ev-shortcode--list .faro-ev-card__link { flex-direction: column; }
	.faro-ev-shortcode--list .faro-ev-card__media { flex: 0 0 auto; aspect-ratio: 16/10; }

	.faro-ev-hero { min-height: 320px; }
	.faro-ev-hero__inner { padding: 50px 22px; }
	.faro-ev-single { padding: 40px 22px 30px; }
	.faro-ev-gallery { gap: 40px; }

	.faro-ev-slider__slide { flex: 0 0 75%; min-width: 0; } /* 1 card visibile + un assaggio */
	.faro-ev-slider__track { padding: 20px 30px; gap: 16px; }
	.faro-ev-slider__nav { width: 40px; height: 40px; font-size: 22px; }
	.faro-ev-slider__nav--prev { left: 4px; }
	.faro-ev-slider__nav--next { right: 4px; }
}

/* ============================================================
   Slider TRIPTYCH (v1.3): 3 card fisse prev | current | next
   - Niente scroll-snap, niente nav buttons
   - Slide current evidenziata (scale + brillantezza), non cliccabile
   - Slide prev/next look normale, cliccabili
   ============================================================ */
.faro-ev-slider--triptych .faro-ev-slider__track {
	display: grid;
	grid-template-columns: 1fr 1.15fr 1fr;
	gap: 24px;
	overflow: visible;
	scroll-snap-type: none;
	padding: 30px 0;
	align-items: center;
}
.faro-ev-slider--triptych .faro-ev-slider__slide {
	flex: none;
	min-width: 0;
	width: 100%;
	aspect-ratio: 3 / 4;
	transition: transform .25s, box-shadow .25s;
}
/* v1.8.0 — Il riquadro centrale ora e' cliccabile come gli altri: prima era
   l'evento che stavi gia' guardando, adesso e' un evento come gli altri.
   Resta l'evidenziazione grafica, cambia solo il cursore. */
.faro-ev-slider--triptych .faro-ev-slider__slide--current {
	cursor: pointer;
	transform: scale(1.05);
	box-shadow: 0 36px 70px -22px rgba(14,44,69,.5);
	z-index: 2;
}
.faro-ev-slider--triptych .faro-ev-slider__slide--current:hover { transform: scale(1.08); }
/* Dissolvenza durante il cambio di contenuto. La classe viene messa dal JS
   prima dello scambio e tolta dopo: stato di riposo VISIBILE, cosi' se lo
   script non gira i riquadri restano leggibili invece di sparire. */
.faro-ev-carousel .faro-ev-slider__body,
.faro-ev-carousel .faro-ev-slider__slide { transition: opacity .18s ease, transform .25s, box-shadow .25s; }
.faro-ev-carousel.is-swapping .faro-ev-slider__slide { opacity: .15; }
.faro-ev-carousel .faro-ev-slider__nav { cursor: pointer; }
.faro-ev-slider--triptych .faro-ev-slider__slide--current .faro-ev-slider__overlay {
	background: linear-gradient(to top, rgba(14,44,69,.78) 0%, rgba(14,44,69,.42) 55%, rgba(14,44,69,.22) 100%);
}
.faro-ev-slider--triptych .faro-ev-slider__slide--prev,
.faro-ev-slider--triptych .faro-ev-slider__slide--next {
	opacity: 0.88;
}
.faro-ev-slider--triptych .faro-ev-slider__slide--prev:hover,
.faro-ev-slider--triptych .faro-ev-slider__slide--next:hover {
	opacity: 1;
	transform: translateY(-4px);
}

/* Etichetta di ruolo (Evento precedente / Stai vedendo / Evento successivo) */
.faro-ev-slider__role-label {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255,255,255,.78);
	margin-bottom: 12px;
	padding: 4px 10px;
	background: rgba(255,255,255,.14);
	border-radius: 999px;
	backdrop-filter: blur(4px);
}
.faro-ev-slider--triptych .faro-ev-slider__slide--current .faro-ev-slider__role-label {
	background: rgba(255,255,255,.22);
	color: #fff;
}

/* Mobile: torno a layout colonna singola, current sempre primo visibile */
@media (max-width: 800px) {
	.faro-ev-slider--triptych .faro-ev-slider__track {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 20px 0;
	}
	.faro-ev-slider--triptych .faro-ev-slider__slide--current {
		transform: none;
		order: -1; /* current sempre per prima su mobile */
	}
	.faro-ev-slider--triptych .faro-ev-slider__slide--current:hover { transform: none; }
}

/* ============================================================
   v1.3.2 — Titolo slider centrato + frecce nav per triptych
   ============================================================ */

/* Titolo "Scopri gli altri eventi..." centrato */
.faro-ev-other__head {
	text-align: center;
	margin-bottom: 20px;
}
.faro-ev-other__title {
	margin: 0;
	display: inline-block;
}

/* Triptych container: padding laterale per ospitare le frecce nav
   senza che si sovrappongano alle card. */
.faro-ev-slider--triptych {
	padding: 0 60px;
	box-sizing: border-box;
}

/* Frecce nav del trittico.
   v1.11.2 — Il "color" fisso e' stato tolto da qui. Questa regola ha
   specificita' doppia (0,2,0) rispetto a .faro-ev-slider__nav (0,1,0), quindi
   vinceva sul colore impostato dalle opzioni: lo sfondo cambiava e la freccia
   no. Il colore si dichiara in un punto solo, nella regola base.
   NOTA: le frecce non sono piu' <a> ma <button> dalla 1.8.0; text-decoration
   resta per sicurezza se qualcuno le riportasse a link. */
.faro-ev-slider--triptych .faro-ev-slider__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	z-index: 5; /* sopra le card laterali */
}
.faro-ev-slider--triptych .faro-ev-slider__nav--prev { left: 4px; }
.faro-ev-slider--triptych .faro-ev-slider__nav--next { right: 4px; }

/* Stato disabilitato (corrente è primo o ultimo): grigio, no hover, no click */
.faro-ev-slider__nav--disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}
.faro-ev-slider__nav--disabled:hover {
	transform: translateY(-50%) !important;
	background: var(--faro-ev-nav-bg, #fff) !important;
	color: var(--faro-ev-nav-arrow, var(--faro-ev-primary)) !important;
}

/* Mobile: riduco padding e mantengo frecce visibili (utili come navigazione cronologica) */
@media (max-width: 800px) {
	.faro-ev-slider--triptych {
		padding: 0 48px;
	}
}
@media (max-width: 480px) {
	.faro-ev-slider--triptych {
		padding: 0 44px;
	}
}

/* ============================================================
   v1.4.0 — Archive page con header + testo intro
   ============================================================ */
.faro-ev-archive {
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 32px 40px;
	box-sizing: border-box;
}
.faro-ev-archive__header {
	text-align: center;
	margin-bottom: 20px;
}
.faro-ev-archive__title {
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 800;
	color: var(--faro-ev-primary);
	margin: 0;
}
.faro-ev-archive__intro,
.faro-ev-intro {
	max-width: 820px;
	margin: 0 auto 40px;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--faro-ev-text, #1c2733);
	text-align: center;
}
.faro-ev-archive__intro p,
.faro-ev-intro p {
	margin: 0 0 1em;
}
.faro-ev-archive__intro p:last-child,
.faro-ev-intro p:last-child {
	margin-bottom: 0;
}
.faro-ev-archive__intro a,
.faro-ev-intro a {
	color: var(--faro-ev-primary);
	text-decoration: underline;
}
.faro-ev-archive__past-title {
	margin: 60px 0 20px;
	color: var(--faro-ev-secondary, #0e2c45);
	text-align: center;
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	font-weight: 700;
}

/* =========================================================
   v1.6.0 — SLIDER HERO (riscritto)
   =========================================================
   Tecnica: track in flex spostato con translateX di un numero INTERO di
   slide. La posizione dipende solo dalla variabile --faro-ev-i, scritta dal
   JavaScript. Niente scroll, niente scroll-snap, nessuna misurazione di
   rettangoli.

   Perché la riscrittura (1.5.0 → 1.5.5): l'impianto precedente ricavava lo
   slide attivo misurando quale fosse più vicino al centro del track. Con lo
   slider a tutta larghezza quella misura sbagliava e la classe .is-active
   finiva su uno slide fuori campo: a schermo restavano solo quelli sfocati.
   Qui l'indice attivo è una variabile, non il risultato di una misura, e
   quindi non può sbagliare.

   Centratura: il track ha un padding sinistro pari a metà dello spazio
   avanzato, quindi con --faro-ev-i a 0 il primo slide è al centro per
   costruzione. Ogni incremento di --faro-ev-i sposta di esattamente una
   larghezza di slide più un gap. */
.faro-ev-hero {
	position: relative;
	margin: 0 0 56px;
	--faro-ev-slide-w: min(1100px, 74vw);
	--faro-ev-gap: 28px;
	--faro-ev-i: 0;
}
/* Lo slider esce dai margini del sito e usa tutta la larghezza della
   finestra. Nessuna scrollbar orizzontale: il tema ha body{overflow-x:clip}
   e comunque il viewport qui sotto ritaglia. */
.faro-ev-hero--bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.faro-ev-hero__viewport { overflow: hidden; }
.faro-ev-hero__track {
	display: flex;
	gap: var(--faro-ev-gap);
	padding: 18px 0 18px calc(50% - var(--faro-ev-slide-w) / 2);
	transform: translateX( calc( -1 * var(--faro-ev-i) * ( var(--faro-ev-slide-w) + var(--faro-ev-gap) ) ) );
	transition: transform .5s ease;
	will-change: transform;
	perspective: 1400px;
}
.faro-ev-hero__slide {
	position: relative;
	flex: 0 0 var(--faro-ev-slide-w);
	min-height: clamp(320px, 44vw, 540px);
	display: flex;
	align-items: flex-end;
	background: #16456b;
	overflow: hidden;
	border-radius: 18px;
	/* Stato base NITIDO: sfoca solo chi ha .is-side. Se lo script non gira,
	   si perde l'effetto di profondità, mai la leggibilità. */
	box-shadow: 0 30px 60px -30px rgba(0,28,71,.85);
	transition: transform .45s ease, filter .45s ease, opacity .45s ease;
}
.faro-ev-hero__slide.is-active { z-index: 2; }
.faro-ev-hero__slide.is-side {
	transform: scale(.9);
	filter: blur(5px) saturate(.85) brightness(.85);
	opacity: .8;
	box-shadow: 0 18px 40px -26px rgba(0,28,71,.8);
	cursor: pointer;
}
.faro-ev-hero__slide.is-side .faro-ev-hero__body { opacity: .55; }
.faro-ev-hero__slide.is-side .faro-ev-hero__title a { pointer-events: none; }
.faro-ev-hero__slide.is-side.is-prev { transform: scale(.9) rotateY(7deg); transform-origin: right center; }
.faro-ev-hero__slide.is-side.is-next { transform: scale(.9) rotateY(-7deg); transform-origin: left center; }

.faro-ev-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;   /* neutralizza img{max-width:100%} dei temi */
	object-fit: cover;
	object-position: center;
	display: block;
}
.faro-ev-hero__veil {
	position: absolute;
	inset: 30% 0 0;
	background: linear-gradient(180deg, rgba(0,28,71,0) 0%, rgba(0,28,71,.85) 100%);
	pointer-events: none;
}
.faro-ev-hero__body {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: clamp(20px, 3.4vw, 42px);
	color: #fff;
}
.faro-ev-hero__badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,.2);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.faro-ev-hero__date {
	display: block;
	margin-bottom: 8px;
	font-size: clamp(.85rem, 1.4vw, 1rem);
	font-weight: 700;
	letter-spacing: .06em;
	opacity: .92;
}
.faro-ev-hero__title {
	margin: 0 0 6px;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	line-height: 1.15;
}
/* v1.7.0 — Il titolo nasce GIA' sottolineato: la sottolineatura e' il segnale
   che il titolo e' cliccabile, e un segnale che compare solo al passaggio del
   mouse non arriva a chi usa il touch e non aiuta chi deve capire a colpo
   d'occhio dove cliccare. Prima la riga partiva da background-size 0% e
   cresceva all'hover; ora parte al 100%.
   L'effetto al passaggio del mouse resta, ma cambia natura: la riga si
   ispessisce e testo e riga cambiano colore insieme (la riga usa
   currentColor, quindi segue il colore del testo senza doverlo ripetere). */
.faro-ev-hero__title a {
	color: #fff;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .25s ease, color .25s ease, opacity .25s ease;
}
.faro-ev-hero__title a:hover,
.faro-ev-hero__title a:focus-visible {
	background-size: 100% 3px;
	opacity: .82;
}
.faro-ev-hero__where { margin: 6px 0 0; font-size: .95rem; opacity: .9; }

.faro-ev-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	color: #16456b;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px -8px rgba(0,0,0,.5);
	transition: background .2s, opacity .2s;
}
.faro-ev-hero__nav--prev { left: 10px; }
.faro-ev-hero__nav--next { right: 10px; }
.faro-ev-hero__nav:hover { background: #fff; }
.faro-ev-hero__nav:disabled { opacity: .35; cursor: default; }

.faro-ev-hero__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}
.faro-ev-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(22,69,107,.28);
	cursor: pointer;
	transition: background .2s, transform .2s;
}
.faro-ev-hero__dot.is-active { background: #16456b; transform: scale(1.25); }

/* =========================================================
   v1.5.0 — ACCORDION "TUTTI GLI EVENTI"
   =========================================================
   Il titolo è un <button> dentro l'<h2>: mantiene la gerarchia dei titoli
   per SEO e screen reader, ma diventa un comando vero (attivabile con
   Invio e Spazio, annunciato come espandibile). */
.faro-ev-all { margin-top: 56px; }
.faro-ev-all__heading { margin: 0; }
/* v1.9.0 — Da titolo con riga di separazione a PULSANTE.
   Prima era un <button> senza sfondo con due bordi orizzontali, che leggeva
   come un titolo. Ora e' una pillola piena: sfondo #306090, testo bianco,
   con la freccia dentro un cerchio a destra.
   Il tag resta <button> e aria-expanded non cambia: e' solo aspetto, il
   funzionamento e l'accessibilita' restano quelli di prima. */
.faro-ev-all__toggle {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	width: auto;
	max-width: 100%;
	padding: 14px 16px 14px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--faro-ev-allbtn-bg, #306090);
	color: #fff;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.faro-ev-all__toggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -12px var(--faro-ev-allbtn-bg, #306090);
	opacity: .94;
}
.faro-ev-all__toggle:focus-visible {
	outline: 3px solid rgba(48,96,144,.45);
	outline-offset: 3px;
}
.faro-ev-all__label {
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
}
/* La freccia vive dentro un cerchio bianco-su-blu. Il cerchio e' il
   contenitore, la freccia e' fatta con due bordi di uno pseudo-elemento:
   cosi' non serve nessuna icona da caricare. */
.faro-ev-all__icon {
	margin-left: auto;
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	transition: transform .25s ease;
}
.faro-ev-all__icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-right: 2.5px solid var(--faro-ev-allbtn-bg, #306090);
	border-bottom: 2.5px solid var(--faro-ev-allbtn-bg, #306090);
	transform: translate(-50%, -70%) rotate(45deg);
}
.faro-ev-all__toggle[aria-expanded="true"] .faro-ev-all__icon {
	transform: rotate(180deg);
}
/* v1.12.0 — Variante senza pulsante: gli eventi sono sempre visibili.
   Il titolo, se c'e', torna a essere un titolo normale invece che l'etichetta
   di un comando. */
.faro-ev-all__static-title {
	margin: 0;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	font-weight: 800;
	color: #16456b;
}
.faro-ev-all--static .faro-ev-all__panel { padding-top: 22px; }
.faro-ev-all__panel { padding-top: 28px; }
/* Il pannello è nascosto con l'attributo hidden: alcuni reset CSS impostano
   display su tutti i div e lo annullerebbero, quindi lo riaffermiamo. */
.faro-ev-all__panel[hidden] { display: none; }

@media (max-width: 700px) {
	/* Su schermo stretto i vicini ruberebbero troppo spazio all'immagine
	   principale: slide quasi a piena larghezza e niente rotazione 3D. */
	.faro-ev-hero { --faro-ev-slide-w: 88vw; --faro-ev-gap: 12px; }
	.faro-ev-hero__slide.is-side.is-prev,
	.faro-ev-hero__slide.is-side.is-next { transform: scale(.92); }
	.faro-ev-hero__nav { width: 38px; height: 38px; font-size: 22px; }
	.faro-ev-hero__nav--prev { left: 8px; }
	.faro-ev-hero__nav--next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.faro-ev-hero__track,
	.faro-ev-hero__slide { transition: none; }
	.faro-ev-hero__title a,
	.faro-ev-hero__dot,
	.faro-ev-all__icon { transition: none; }
}