/* ============================================================
   STILI EVENTI — COMUNE DI MARSALA (tema figlio Divi)
   ============================================================

   >>> COLORI CATEGORIE EVENTO — MODIFICA QUI <<<
   Per cambiare il colore di una categoria basta modificare
   la variabile corrispondente qui sotto (--em-cultura,
   --em-festa, --em-contrade). Tutte le card, lo slider e i
   box categorie si aggiornano automaticamente.

   ATTENZIONE: i colori di "cultura" ed "festa" sono volutamente
   invertiti rispetto al prototipo (richiesta cliente).
   ============================================================ */

:root {
	--em-primary: #0f4c81;
	--em-primary-dark: #0a3559;
	--em-accent: #e8a33d;
	--em-cultura: linear-gradient(135deg, #c94f2c 0%, #f0a14a 100%);
	--em-cultura-solid: #c94f2c;
	--em-festa: linear-gradient(135deg, #1e5f8e 0%, #6a9fd8 100%);
	--em-festa-solid: #1e5f8e;
	--em-contrade: linear-gradient(135deg, #1e7a5a 0%, #7cc4a4 100%);
	--em-contrade-solid: #1e7a5a;
	--em-ink: #22303c;
	--em-muted: #5d6b78;
	--em-line: #e4e9ee;
	--em-bg-soft: #f4f7fa;
	--em-radius: 5px;
	--em-shadow: 0 10px 30px rgba(15, 76, 129, 0.12);

	/* Variabili "categoria attiva": assumono il colore della categoria
	   dell'elemento corrente (slide/card) tramite l'attributo data-em-cat.
	   Usale nel builder con var(--em-cat-solid) o var(--em-cat-gradient). */
	--em-cat-solid: var(--em-cultura-solid);
	--em-cat-gradient: var(--em-cultura);
}

[data-em-cat="cultura"] {
	--em-cat-solid: var(--em-cultura-solid);
	--em-cat-gradient: var(--em-cultura);
}
[data-em-cat="festa"] {
	--em-cat-solid: var(--em-festa-solid);
	--em-cat-gradient: var(--em-festa);
}
[data-em-cat="contrade"] {
	--em-cat-solid: var(--em-contrade-solid);
	--em-cat-gradient: var(--em-contrade);
}

/* ---------- Buttons ---------- */
.em-btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: var(--em-radius);
	background: var(--em-primary);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}
.em-btn:hover {
	background: var(--em-primary-dark);
	color: #fff;
	transform: translateY(-2px);
}
.em-btn--light {
	background: #fff;
	color: var(--em-primary);
}
.em-btn--light:hover {
	background: #eef3f8;
	color: var(--em-primary-dark);
}

/* ---------- Badges ---------- */
.em-badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: var(--em-radius);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.em-badge--cat.em-badge--cultura {
	background: rgba(201, 79, 44, 0.14);
	color: #b03f20;
}
.em-badge--cat.em-badge--festa {
	background: rgba(31, 95, 142, 0.14);
	color: #15507c;
}
.em-badge--cat.em-badge--contrade {
	background: rgba(30, 122, 90, 0.14);
	color: #176a4e;
}
.em-badge--ticket.is-free {
	background: #e6f4ea;
	color: #1e7a4f;
}
.em-badge--ticket.is-paid {
	background: #fdeaea;
	color: #b3261e;
}

/* ================= HOME ================= */
.em-home {
	background: #fff;
}

/* ---------- Hero slider ---------- */
.em-hero {
	position: relative;
	overflow: hidden;
	background: #fff;
	/* consente lo scroll verticale ma lascia gestire lo swipe orizzontale al JS */
	touch-action: pan-y;
}
.em-slider-row {
	/* visible: altrimenti taglia ai lati la box-shadow del modulo slider
	   (classe "shadow-glass"). Il clipping interno è già gestito da .em-hero. */
	overflow: visible;
	transition: border-color 0.5s ease;
}
.em-slider-row[data-color="cultura"] {
	border-color: var(--em-cultura-solid) !important;
}
.em-slider-row[data-color="festa"] {
	border-color: var(--em-festa-solid) !important;
}
.em-slider-row[data-color="contrade"] {
	border-color: var(--em-contrade-solid) !important;
}
.em-hero__track {
	position: relative;
}
.em-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
	background:
		linear-gradient(to right, #ffffff 0%, #ffffff 38%, rgba(255, 255, 255, 0.92) 55%, rgba(255, 255, 255, 0) 78%) center / cover no-repeat,
		var(--em-slide-bg, #ffffff) right center / cover no-repeat;
}
.em-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	position: relative;
	min-height: 480px;
}
.em-hero__inner {
	padding: 80px 64px;
	color: var(--em-ink);
	width: 100%;
}
.em-hero__kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.em-hero__date {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--em-muted);
}
.em-hero__title {
	font-size: clamp(1.8rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 12px;
	max-width: 800px;
	color: var(--em-ink);
}
.em-hero__subtitle {
	font-size: 1.15rem;
	color: var(--em-muted);
	margin: 0 0 22px;
	max-width: 640px;
}
.em-hero__meta {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 30px;
	font-weight: 600;
	color: var(--em-ink);
}
.em-hero .em-btn {
	color: #fff;
}
.em-hero__slide[data-color="cultura"] .em-btn {
	background: var(--em-cultura);
}
.em-hero__slide[data-color="festa"] .em-btn {
	background: var(--em-festa);
}
.em-hero__slide[data-color="contrade"] .em-btn {
	background: var(--em-contrade);
}
.em-hero__slide[data-color="cultura"] .em-btn:hover {
	background: var(--em-cultura);
	filter: brightness(0.92);
}
.em-hero__slide[data-color="festa"] .em-btn:hover {
	background: var(--em-festa);
	filter: brightness(0.92);
}
.em-hero__slide[data-color="contrade"] .em-btn:hover {
	background: var(--em-contrade);
	filter: brightness(0.92);
}
.em-hero__controls {
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	z-index: 5;
}
.em-hero__arrow {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	background: var(--em-primary);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(15, 76, 129, 0.25);
	transition: background 0.2s ease;
	flex: 0 0 auto;
}
.em-hero__arrow:hover {
	background: var(--em-primary-dark);
}
.em-hero__dots {
	display: flex;
	gap: 10px;
}
.em-hero__dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: none;
	background: rgba(34, 48, 60, 0.28);
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}
.em-hero__dot.is-active {
	background: var(--em-primary);
	transform: scale(1.25);
}

/* ---------- Category cards ---------- */
.em-cats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.em-cat-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 28px;
	border-radius: 20px;
	color: #fff;
	text-decoration: none;
	box-shadow: var(--em-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.em-cat-card:hover {
	transform: translateY(-4px);
	color: #fff;
}
.em-cat-card--cultura {
	background: var(--em-cultura);
}
.em-cat-card--festa {
	background: var(--em-festa);
}
.em-cat-card--contrade {
	background: var(--em-contrade);
}
.em-cat-card__icon {
	font-size: 1.8rem;
}
.em-cat-card__title {
	font-size: 1.2rem;
	font-weight: 800;
}
.em-cat-card__desc {
	font-size: 0.92rem;
	opacity: 0.92;
	line-height: 1.5;
}
.em-cat-card__link {
	margin-top: 12px;
	font-weight: 700;
	font-size: 0.92rem;
}

/* ================= ARCHIVE ================= */
.em-archive {
	min-height: 60vh;
}
.em-archive__head {
	margin-bottom: 28px;
}
.em-archive__title {
	font-size: 2rem;
	margin: 0 0 6px;
	color: var(--em-ink);
}
.em-archive__lead {
	color: var(--em-muted);
	margin: 0;
}

/* ---------- Filters ---------- */
.em-filters {
	background: #fff;
	border-radius: 20px;
	box-shadow: var(--em-shadow);
	padding: 20px 24px;
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.em-filters__group {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.em-filters__label {
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--em-muted);
	min-width: 84px;
}
.em-filters__chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.em-chip {
	padding: 8px 16px;
	border-radius: var(--em-radius);
	border: 1.5px solid var(--em-line);
	background: #fff;
	color: var(--em-ink);
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
	transition: all 0.15s ease;
}
.em-chip:hover {
	border-color: var(--em-primary);
	color: var(--em-primary);
}
.em-chip.is-active {
	background: var(--em-primary);
	border-color: var(--em-primary);
	color: #fff;
}

/* ---------- Count ---------- */
.em-count {
	color: var(--em-muted);
	font-size: 0.9rem;
	margin: 0 0 16px;
}

/* ---------- Grid ---------- */
.em-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ---------- Card ---------- */
.em-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.em-card:hover {
	transform: translateY(-5px);
}
.em-card__top {
	height: 92px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 14px 16px;
	gap: 8px;
}
.em-card--cultura .em-card__top {
	background: var(--em-cultura);
}
.em-card--festa .em-card__top {
	background: var(--em-festa);
}
.em-card--contrade .em-card__top {
	background: var(--em-contrade);
}
.em-card__top .em-badge--cat {
	color: #fff;
}
.em-card__date {
	position: absolute;
	top: 66px;
	left: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #fff;
	border-radius: var(--em-radius);
	padding: 6px 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.em-card__date-day {
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1;
}
.em-card__date-month {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--em-muted);
}
.em-card__body {
	padding: 34px 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.em-card__title {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.3;
}
.em-card__title a {
	color: #111;
	text-decoration: none;
	font-weight: 800;
}
.em-card__title a:hover {
	color: var(--em-primary);
}
.em-card__subtitle {
	margin: 0;
	color: var(--em-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}
.em-card__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}
.em-meta {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--em-ink);
	font-size: 0.9rem;
}
.em-ico {
	font-size: 1rem;
	line-height: 1.3;
}
.em-card__link {
	display: block;
	margin: 0 18px 18px;
	padding-top: 14px;
	border-top: 1px solid var(--em-line);
	color: var(--em-primary);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
}

/* ---------- Empty ---------- */
.em-empty {
	background: #fff;
	border-radius: var(--em-radius);
	padding: 48px;
	text-align: center;
	color: var(--em-muted);
}

/* ---------- Pagination ---------- */
.em-pagination {
	margin-top: 40px;
}
.em-pagination ul {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.em-pagination li a,
.em-pagination li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: var(--em-radius);
	background: #fff;
	color: var(--em-ink);
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid var(--em-line);
}
.em-pagination li .current {
	background: var(--em-primary);
	border-color: var(--em-primary);
	color: #fff;
}
.em-pagination li a:hover {
	border-color: var(--em-primary);
	color: var(--em-primary);
}

/* ================= SINGLE ================= */
.em-single__top {
	max-width: 860px;
}
.em-single__back {
	display: inline-block;
	margin-bottom: 18px;
	color: var(--em-primary);
	font-weight: 700;
	text-decoration: none;
}
.em-single__kicker {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.em-single__title {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	margin: 0 0 10px;
	color: var(--em-ink);
	line-height: 1.15;
}
.em-single__subtitle {
	font-size: 1.2rem;
	color: var(--em-muted);
	margin: 0;
}
.em-single__layout {
	margin-top: 36px;
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 32px;
	align-items: start;
}
.em-single__facts {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.em-fact {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff;
	border-radius: var(--em-radius);
	box-shadow: var(--em-shadow);
	padding: 18px;
}
.em-fact__icon {
	font-size: 1.4rem;
	line-height: 1.2;
}
.em-fact__label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--em-muted);
	font-weight: 700;
	margin-bottom: 3px;
}
.em-fact__value {
	font-weight: 600;
	color: var(--em-ink);
}
.em-single__content {
	background: #fff;
	border-radius: var(--em-radius);
	box-shadow: var(--em-shadow);
	padding: 28px;
	line-height: 1.7;
	color: var(--em-ink);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
	.em-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.em-cats__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.em-single__layout {
		grid-template-columns: 1fr;
	}
	.em-hero__slide.is-active {
		min-height: 70vh;
	}
}
@media (max-width: 640px) {
	.em-grid,
	.em-cats__grid {
		grid-template-columns: 1fr;
	}
	.em-hero__inner {
		padding: 88px 24px;
	}
	.em-hero__arrow {
		display: none;
	}
	.em-filters__group {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ================= MARQUEE (sfondo animato) ================= */
/* Elemento trasparente: posizionalo (absolute) e ridimensionalo dal builder.
   Una sola fila di card che scorre. */
.em-marquee {
	overflow: hidden;
	pointer-events: none;
	width: 100%;
}
.em-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: em-marquee-scroll 60s linear infinite;
}
.em-marquee__group {
	display: flex;
	gap: 20px;
	padding-right: 20px;
}
.em-marquee__card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 220px;
	max-width: 260px;
	padding: 14px 18px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.13);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-left: 4px solid var(--em-cat-solid);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	text-decoration: none;
}
.em-marquee__card-date {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.85);
}
.em-marquee__card-title {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
}
@keyframes em-marquee-scroll {
	to {
		transform: translateX(-50%);
	}
}

/* ================= SEARCH FORM ================= */
.em-search {
	display: flex;
	align-items: center;
	gap: 6px;
}
.em-search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 9px 14px;
	border: 1.5px solid var(--em-line);
	border-radius: 999px;
	font-size: 0.9rem;
	color: var(--em-ink);
	background: #fff;
}
.em-search input[type="search"]:focus {
	outline: none;
	border-color: var(--em-primary);
}
.em-search button {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border: none;
	border-radius: 50%;
	background: var(--em-primary);
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.em-search button:hover {
	background: var(--em-primary-dark);
}
.em-search-clear {
	color: var(--em-primary);
	font-weight: 600;
	text-decoration: none;
}
.em-search-clear:hover {
	text-decoration: underline;
}

/* ================= LOGO ================= */
.em-logo {
	display: inline-block;
	line-height: 0;
}
.em-logo img {
	max-width: 238px;
	height: auto;
	display: block;
}

/* ================= LIQUID GLASS — CTA "I prossimi appuntamenti" =================
   Row della home con classe CSS "em-cta-row" (impostata nel builder Divi).
   Effetto vetro liquido: base traslucida, blur di sfondo, bolle di colore
   sfocate, riflessi di luce e bordi luminosi. */
.et_pb_row.em-cta-row {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.42) !important;
	background-image: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.58) 0%,
		rgba(255, 255, 255, 0.30) 45%,
		rgba(255, 255, 255, 0.20) 70%,
		rgba(255, 255, 255, 0.44) 100%
	) !important;
	-webkit-backdrop-filter: blur(5px) saturate(180%);
	backdrop-filter: blur(5px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.65) !important;
	box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

/* Bolle di colore sfocate: danno il tocco "liquido" sotto il vetro */
.et_pb_row.em-cta-row::before {
	content: "";
	position: absolute;
	inset: -45%;
	z-index: 0;
	background:
		radial-gradient(closest-side at 20% 25%, rgba(30, 95, 142, 0.60), transparent 72%),
		radial-gradient(closest-side at 82% 18%, rgba(232, 163, 61, 0.55), transparent 72%),
		radial-gradient(closest-side at 72% 88%, rgba(201, 79, 44, 0.46), transparent 72%),
		radial-gradient(closest-side at 12% 92%, rgba(30, 122, 90, 0.46), transparent 72%);
	filter: blur(46px);
	opacity: 0.85;
	animation: em-glass-float 20s ease-in-out infinite alternate;
	pointer-events: none;
}

/* Vetro smerigliato + riflessi di luce sopra le bolle */
.et_pb_row.em-cta-row::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.12);
	background-image:
		radial-gradient(120% 85% at 15% 0%, rgba(255, 255, 255, 0.55), transparent 55%),
		linear-gradient(
			115deg,
			rgba(255, 255, 255, 0.42) 0%,
			rgba(255, 255, 255, 0) 34%,
			rgba(255, 255, 255, 0) 62%,
			rgba(255, 255, 255, 0.28) 100%
		);
	-webkit-backdrop-filter: blur(30px) saturate(160%);
	backdrop-filter: blur(30px) saturate(160%);
	pointer-events: none;
}

/* I contenuti restano sopra gli effetti del vetro */
.et_pb_row.em-cta-row > .et_pb_column {
	position: relative;
	z-index: 2;
}

/* Contrasto dei testi sul vetro chiaro */
.et_pb_row.em-cta-row .et_pb_text_inner h2 {
	color: var(--em-ink) !important;
}
.et_pb_row.em-cta-row .et_pb_text_inner h4,
.et_pb_row.em-cta-row .et_pb_text_inner p {
	color: var(--em-muted) !important;
}

@keyframes em-glass-float {
	0% {
		transform: translate3d(-4%, -3%, 0) scale(1.05);
	}
	50% {
		transform: translate3d(3%, 2%, 0) scale(1.12);
	}
	100% {
		transform: translate3d(-2%, 4%, 0) scale(1.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.et_pb_row.em-cta-row::before {
		animation: none;
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.et_pb_row.em-cta-row {
		background-color: rgba(255, 255, 255, 0.92) !important;
	}
}

/* ================= FOOTER ================= */
footer.et-l--footer a {
	color: var(--em-primary);
	text-decoration: none;
}
footer.et-l--footer a:hover {
	color: var(--em-primary-dark);
	text-decoration: underline;
}
footer.et-l--footer .em-footer-bottom {
	margin-top: 34px;
	border-top: 1px solid #dfe6ec;
	padding-top: 18px;
}
footer.et-l--footer .em-footer-bottom .et_pb_text_inner p {
	margin: 0;
}

/* ================= UTILITY ================= */
/* H1 SEO della home: presente per i motori, nascosto visivamente */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}