/* ItaliaWP2 Eventi — stile scheda evento e teaser (Bootstrap Italia) */

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Scheda evento (single) --- */
.iwp2-evento {
	font-family: "Titillium Web", sans-serif;
	color: #17324d;
}

.iwp2-evento__tipo {
	margin: 1rem 0;
}
.iwp2-evento__tipo-label {
	color: #5a768a;
}
.iwp2-evento__tipo-value {
	font-weight: 600;
	color: #17324d;
}

.iwp2-evento__title {
	color: #003882;
	margin: 0.25rem 0 1rem;
	line-height: 1.2;
}

.iwp2-evento__cover {
	margin: 0 0 1.5rem;
}
.iwp2-evento__cover-img {
	display: block;
	width: 100%;
	max-height: 400px;
	object-fit: contain;
	object-position: center;
	border-radius: 4px;
}

.iwp2-evento__section {
	margin: 2rem 0;
	padding-top: 1.5rem;
	border-top: 1px solid #e3e4e6;
}

/* Fascia superiore: Apertura + Contatti (+ Descrizione) affiancati (>=992px) */
.iwp2-evento__top {
	display: grid;
	gap: 2.5rem;
	margin: 2rem 0;
	padding-top: 1.5rem;
	border-top: 1px solid #e3e4e6;
	align-items: start;
}
.iwp2-evento__top--cols-2 {
	grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
}
.iwp2-evento__top--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}
/* Le sezioni dentro la fascia non ripetono margine e bordo superiore */
.iwp2-evento__top .iwp2-evento__section {
	margin: 0;
	padding-top: 0;
	border-top: 0;
}
@media (max-width: 991px) {
	.iwp2-evento__top {
		grid-template-columns: 1fr;
		gap: 0;
	}
	/* Impilate: ripristina la spaziatura/separatore tra le sezioni successive */
	.iwp2-evento__top .iwp2-evento__top-col--contatti .iwp2-evento__section,
	.iwp2-evento__top .iwp2-evento__top-col--descrizione .iwp2-evento__section {
		margin-top: 2rem;
		padding-top: 1.5rem;
		border-top: 1px solid #e3e4e6;
	}
}

.iwp2-evento__section-title {
	color: #003882;
	font-size: 1.5rem;
	margin: 0 0 1rem;
}

.iwp2-evento__subtitle {
	font-size: 1.1rem;
	color: #17324d;
	margin: 1.25rem 0 0.5rem;
}

/* Date in stile calendario (badge) */
.iwp2-evento__dates {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.iwp2-evento__badge {
	display: inline-flex;
	flex-direction: column;
	gap: 0.35rem;
}
.iwp2-evento__badge-label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #5a768a;
}
.iwp2-evento__badge-box {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 96px;
	padding: 0;
	border: 1px solid #d4dce8;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 56, 130, 0.08);
	overflow: hidden;
}
/* Fascia blu superiore col giorno della settimana */
.iwp2-evento__badge-weekday {
	display: block;
	width: 100%;
	background: #003882;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-align: center;
	padding: 0.3rem 0.25rem;
	line-height: 1.1;
}
.iwp2-evento__badge-day {
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
	color: #003882;
	margin-top: 0.5rem;
}
.iwp2-evento__badge-month {
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #17324d;
	margin-top: 0.15rem;
}
.iwp2-evento__badge-year {
	font-size: 0.85rem;
	color: #5a768a;
	margin-top: 0.1rem;
	padding-bottom: 0.6rem;
}
.iwp2-evento__badge-sep {
	font-size: 1.5rem;
	color: #5a768a;
	align-self: center;
	margin-top: 1.2rem;
}

/* Orario (testo libero) */
.iwp2-evento__orario {
	margin: 1rem 0;
	font-size: 1.05rem;
}
.iwp2-evento__orario-label {
	color: #5a768a;
}
.iwp2-evento__orario-value {
	font-weight: 600;
	color: #17324d;
}

.iwp2-evento__occorrenze-list {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.iwp2-evento__occorrenze-list li {
	background: #e6ecf5;
	color: #003882;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 0.9rem;
	font-weight: 600;
}

.iwp2-evento__prenotazione {
	margin: 1rem 0;
}
.iwp2-evento__prenotazione-label,
.iwp2-evento__contatti-label {
	color: #5a768a;
}
.iwp2-evento__costo {
	margin: 1rem 0;
}
.iwp2-evento__costo-label {
	color: #5a768a;
}
.iwp2-evento__costo-value {
	font-weight: 600;
	color: #17324d;
}
.iwp2-evento__info {
	margin-top: 1rem;
}
.iwp2-evento__info-label {
	margin: 0 0 0.25rem;
}
.iwp2-evento__info p:last-child {
	margin-bottom: 0;
}

/* Mappa (Posizione) sotto la card del luogo */
.iwp2-evento__posizione {
	margin-top: 1.5rem;
}
.iwp2-evento__map {
	margin-top: 0.75rem;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid #e3e4e6;
	line-height: 0;
}
.iwp2-evento__map iframe {
	display: block;
	width: 100%;
}

/* Teaser (pannello giorno / liste) */
.iwp2-cal__day-list,
.iwp2-eventi-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1rem;
}

/* Lista archivio: due colonne (row al 50%) su schermi ampi */
.iwp2-eventi-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 991px) {
	.iwp2-eventi-list {
		grid-template-columns: 1fr;
	}
}

.iwp2-evento-teaser {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem;
	border: 1px solid #e3e4e6;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(23, 50, 77, 0.08), 0 2px 8px rgba(23, 50, 77, 0.04);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.iwp2-evento-teaser:hover {
	box-shadow: 0 4px 12px rgba(23, 50, 77, 0.12), 0 2px 6px rgba(23, 50, 77, 0.08);
	transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
	.iwp2-evento-teaser {
		transition: none;
	}
	.iwp2-evento-teaser:hover {
		transform: none;
	}
}
.iwp2-evento-teaser__media {
	flex: 0 0 96px;
	position: relative;
	display: block;
	align-self: center;
}
.iwp2-evento-teaser__img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}
/* Foto ereditata dal luogo (fallback): lieve segno distintivo */
.iwp2-evento-teaser__img--luogo {
	filter: saturate(0.95);
}
.iwp2-evento-teaser__body {
	flex: 1;
	min-width: 0;
}
.iwp2-evento-teaser__tipo {
	display: inline-block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #5a768a;
	margin-bottom: 0.25rem;
}
.iwp2-evento-teaser__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
	line-height: 1.3;
}
.iwp2-evento-teaser__title a {
	color: #003882;
	text-decoration: none;
}
.iwp2-evento-teaser__title a:hover,
.iwp2-evento-teaser__title a:focus {
	text-decoration: underline;
}
.iwp2-evento-teaser__meta {
	font-size: 0.9rem;
	color: #5a768a;
	margin: 0;
}

/* Badge data compatto nel teaser */
.iwp2-evento-teaser__date {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	align-self: center;
	padding: 0 0.5rem;
}
.iwp2-evento-teaser__badge {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	width: 92px;
	height: 96px;
	border: 1px solid #d4dce8;
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}
/* Barra superiore con l'anno */
.iwp2-evento-teaser__badge-year {
	display: block;
	flex: 0 0 auto;
	background: #003882;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-align: center;
	padding: 0.15rem 0.2rem;
	line-height: 1.2;
}
/* Corpo del badge (giorno + mese) */
.iwp2-evento-teaser__badge-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.35rem;
	min-height: 0;
}
.iwp2-evento-teaser__badge-day {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1;
	color: #003882;
	white-space: nowrap;
}
/* Intervallo stesso mese (es. "22–25"): un po' più piccolo per stare nel badge */
.iwp2-evento-teaser__badge-day--range {
	font-size: 1.45rem;
}
.iwp2-evento-teaser__badge-month {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #17324d;
	margin-top: 0.15rem;
}
/* Intervallo su due mesi diversi */
.iwp2-evento-teaser__badge-range {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.15;
}
.iwp2-evento-teaser__badge-range-part {
	font-size: 0.95rem;
	font-weight: 700;
	color: #003882;
}
.iwp2-evento-teaser__badge-range-sep {
	font-size: 0.68rem;
	font-weight: 600;
	color: #5a768a;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
/* Orario (riga sopra il "Dove") */
.iwp2-evento-teaser__orario {
	font-size: 0.9rem;
	margin: 0.35rem 0 0;
}
.iwp2-evento-teaser__orario-label {
	color: #5a768a;
}

/* "Dove" (città del luogo) */
.iwp2-evento-teaser__dove {
	font-size: 0.9rem;
	margin: 0.35rem 0 0;
}
.iwp2-evento-teaser__dove-label {
	color: #5a768a;
}
.iwp2-evento-teaser__dove-value {
	font-weight: 600;
	color: #17324d;
}

/* Mobile (<576px): la card del teaser si impila in verticale a piena
   larghezza — banda data, banda foto, poi il testo. Sopra questa soglia
   resta il layout affiancato (data + foto + testo in riga). */
@media (max-width: 575.98px) {
	.iwp2-evento-teaser {
		flex-direction: column;
		align-items: stretch;
	}
	/* Data come banda piena sopra la foto */
	.iwp2-evento-teaser__date {
		align-self: stretch;
		justify-content: center;
		padding: 0;
	}
	.iwp2-evento-teaser__badge {
		flex-direction: row;
		align-items: stretch;
		width: 100%;
		height: auto;
	}
	.iwp2-evento-teaser__badge-year {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		padding: 0.5rem 0.75rem;
		font-size: 0.9rem;
	}
	.iwp2-evento-teaser__badge-body {
		flex: 1;
		flex-direction: row;
		gap: 0.4rem;
		min-height: 0;
		padding: 0.4rem 0.75rem;
	}
	.iwp2-evento-teaser__badge-day,
	.iwp2-evento-teaser__badge-day--range {
		font-size: 1.3rem;
	}
	.iwp2-evento-teaser__badge-month {
		margin-top: 0;
		align-self: center;
	}
	.iwp2-evento-teaser__badge-range {
		flex-direction: row;
		align-items: baseline;
		gap: 0.3rem;
	}
	/* Foto come banda piena larghezza sotto la data */
	.iwp2-evento-teaser__media {
		flex: 0 0 auto;
		width: 100%;
	}
	.iwp2-evento-teaser__img {
		width: 100%;
		height: 160px;
	}
}

/* Barra filtro archivio (giorno selezionato) */
.iwp2-eventi-archive__filterbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	background: #e6ecf5;
	border-radius: 4px;
}
.iwp2-eventi-archive__filterinfo {
	margin: 0;
	font-weight: 600;
	color: #003882;
}
.iwp2-eventi-archive__reset {
	font-weight: 600;
	color: #003882;
	text-decoration: underline;
}
.iwp2-eventi-archive__reset:focus {
	outline: 2px solid #003882;
	outline-offset: 2px;
}
.iwp2-eventi-archive__calendario {
	margin-top: 2rem;
}

.iwp2-eventi-empty,
.iwp2-eventi-archive__list {
	margin-top: 2rem;
}

/* Fascia "Prossimi eventi" in homepage.
   Il fondo grigio #ECEFF1 resta sotto l'immagine header; solo il riquadro
   celeste interno risale (margin-top negativo) per sovrapporsi all'immagine.
   Nota: la risalita netta del riquadro = |margin-top inner| - padding-top sezione. */
.iwp2-eventi-home {
	background-color: #ECEFF1;
	padding: 0 0 56px;
	clear: both;
}
/* Il tema applica un'immagine-ombra (ombra.png) in cima a #home-novita.
   Quando la sezione news segue la nostra fascia eventi, quell'ombra cade tra
   i due fondi grigi: la nascondiamo solo in quel caso, lasciandola altrove. */
.iwp2-eventi-home + #home-novita {
	background-image: none;
}
.iwp2-eventi-home__inner {
	margin-top: -32px;
	position: relative;
	z-index: 1;
	background: #f2f6fc;
	border-radius: 8px;
	padding: 1.5rem;
	box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.1);
}
/* Posizione C (prima della mappa): nessuna sezione news sopra e nessuna
   immagine header sotto cui fondersi, quindi togliamo il fondo grigio e la
   risalita del riquadro. Il fondo grigio resta in A e in B. */
.iwp2-eventi-home--pos-c {
	background-color: transparent;
	padding: 0;
}
.iwp2-eventi-home--pos-c .iwp2-eventi-home__inner {
	margin-top: 0;
}
.iwp2-eventi-home__title {
	color: #003882;
	font-size: 1.6rem;
	margin: 0 0 1.25rem;
}
.iwp2-eventi-home__all {
	margin: 1.5rem 0 0;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Box "Eventi in programma" nella sidebar del Luogo (plugin italiawp2-siti).
   Riusa il badge data compatto del teaser (.iwp2-evento-teaser__badge*).
--------------------------------------------------------------------------- */
.iwp2-sito-eventi {
	margin-top: 1.5rem;
	padding: 1.25rem;
	background: #f2f6fc;
	border-radius: 8px;
	border: 1px solid #d4dce8;
}
.iwp2-sito-eventi__title {
	color: #003882;
	font-size: 1.15rem;
	margin: 0 0 1rem;
}
.iwp2-sito-eventi__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.iwp2-sito-eventi__item + .iwp2-sito-eventi__item {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid #d4dce8;
}
.iwp2-sito-eventi__row {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.iwp2-sito-eventi__badge {
	flex: 0 0 auto;
	padding: 0;
}
/* Il badge qui resta sempre nello stile "verticale" di desktop: non deve
   ereditare, sotto i 576px, l'adattamento orizzontale a piena larghezza
   pensato per il teaser con foto (che qui non c'è). Selettori più
   specifici per vincere sulla media query in .iwp2-evento-teaser__badge*. */
.iwp2-sito-eventi .iwp2-evento-teaser__date {
	align-self: center;
	justify-content: flex-start;
	padding: 0 0.5rem;
}
.iwp2-sito-eventi .iwp2-evento-teaser__badge {
	flex-direction: column;
	align-items: stretch;
	width: 92px;
	height: 96px;
}
.iwp2-sito-eventi .iwp2-evento-teaser__badge-year {
	display: block;
	padding: 0.15rem 0.2rem;
	font-size: 0.75rem;
}
.iwp2-sito-eventi .iwp2-evento-teaser__badge-body {
	flex-direction: column;
	gap: 0;
	padding: 0.35rem;
}
.iwp2-sito-eventi .iwp2-evento-teaser__badge-day {
	font-size: 1.9rem;
}
.iwp2-sito-eventi .iwp2-evento-teaser__badge-day--range {
	font-size: 1.45rem;
}
.iwp2-sito-eventi .iwp2-evento-teaser__badge-month {
	margin-top: 0.15rem;
	align-self: auto;
}
.iwp2-sito-eventi .iwp2-evento-teaser__badge-range {
	flex-direction: column;
	align-items: center;
	gap: 0;
}
.iwp2-sito-eventi__info {
	flex: 1;
	min-width: 0;
}
.iwp2-sito-eventi__tipo {
	display: inline-block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #5a768a;
	margin-bottom: 0.25rem;
}
.iwp2-sito-eventi__evento-title {
	color: #003882;
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.35rem;
	line-height: 1.25;
}
.iwp2-sito-eventi__periodo {
	font-size: 0.9rem;
	color: #17324d;
	margin: 0 0 0.2rem;
}
.iwp2-sito-eventi__orari {
	font-size: 0.9rem;
	margin: 0;
}
.iwp2-sito-eventi__orari-label {
	color: #5a768a;
}
.iwp2-sito-eventi__cta {
	margin: 0.85rem 0 0;
}
.iwp2-sito-eventi__btn {
	display: inline-block;
	width: 100%;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Locandina cliccabile + lightbox (single evento). Vedi assets/js/lightbox.js.
--------------------------------------------------------------------------- */
.iwp2-evento__cover-zoom {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}
.iwp2-evento__cover-zoom:focus-visible {
	outline: 3px solid #003882;
	outline-offset: 3px;
}
.iwp2-evento__cover-zoom .iwp2-evento__cover-img {
	margin: 0;
}
.iwp2-evento__cover-zoom-hint {
	position: absolute;
	right: 0.6rem;
	bottom: 0.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: rgba(0, 33, 71, 0.75);
	color: #fff;
	transition: background-color 0.15s ease;
}
.iwp2-evento__cover-zoom:hover .iwp2-evento__cover-zoom-hint,
.iwp2-evento__cover-zoom:focus-visible .iwp2-evento__cover-zoom-hint {
	background: #003882;
}

/* Overlay lightbox */
.iwp2-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(0, 20, 45, 0.88);
}
body.iwp2-lightbox-open {
	overflow: hidden;
}
.iwp2-lightbox__figure {
	max-width: 100%;
	max-height: 100%;
	display: flex;
}
.iwp2-lightbox__img {
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.iwp2-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.iwp2-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3);
}
.iwp2-lightbox__close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}