/* ============================================================
   Hero slider homepage
   Sostituisce Slider Revolution. L'altezza è fissata via CSS,
   quindi lo spazio è già riservato al primo paint: niente CLS.
   Il JS si limita a cambiare la classe .is-active.
   ============================================================ */

:root {
	--hero-red: #C21212;
	--hero-red-light: #EF4B4B;
	--hero-ease: cubic-bezier(.22, .61, .36, 1);
	--hero-dark: #14100f;
}

.hero-slider {
	position: relative;
	overflow: hidden;
	height: clamp(560px, 82vh, 780px);
	background: var(--hero-dark);
}

.hero-viewport { position: absolute; inset: 0; }

.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s var(--hero-ease), visibility 0s linear .9s;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .9s var(--hero-ease), visibility 0s;
}

/* zoom lento sull'immagine attiva (Ken Burns) */
.hero-slide.is-active { animation: heroKen 9s ease-out both; }
@keyframes heroKen { from { transform: scale(1.08); } to { transform: scale(1); } }

.hero-slide-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(105deg, rgba(14, 12, 12, .85) 0%, rgba(14, 12, 12, .55) 45%, rgba(14, 12, 12, .25) 100%),
		linear-gradient(to top, rgba(14, 12, 12, .65) 0%, rgba(14, 12, 12, 0) 45%);
}

.hero-slide-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	text-align: left;
	padding-block: clamp(40px, 6vw, 72px);
}

/* animazione d'ingresso del testo, sfalsata sul contenuto attivo */
.hero-slide-content > * { opacity: 0; transform: translateY(22px); }
.hero-slide.is-active .hero-slide-content > * { animation: heroRise .7s var(--hero-ease) forwards; }
.hero-slide.is-active .hero-slide-content > *:nth-child(1) { animation-delay: .15s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(2) { animation-delay: .28s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(3) { animation-delay: .41s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(4) { animation-delay: .54s; }
@keyframes heroRise { to { opacity: 1; transform: none; } }

.hero-eyebrow {
	font-family: var(--cnvs-primary-font, 'Inter', sans-serif);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 6px;
}
.hero-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--hero-red-light);
}

.hero-title {
	/* stesso font dei titoli del tema (--cnvs-primary-font: Inter) */
	font-family: var(--cnvs-primary-font, 'Inter', sans-serif);
	font-weight: 700;
	font-size: clamp(32px, 5vw, 58px);
	line-height: 1.12;
	letter-spacing: -.02em;
	color: #fff !important;
	max-width: 760px;
	margin: 12px 0 18px;
}
.hero-title .accent { color: var(--hero-red-light); }

.hero-lead {
	font-family: var(--cnvs-body-font, 'Inter', sans-serif);
	font-size: clamp(16px, 1.6vw, 20px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .85);
	max-width: 560px;
	margin: 0 0 28px;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-cta .btn-hero {
	font-family: var(--cnvs-primary-font, 'Inter', sans-serif);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	border: 2px solid transparent;
	text-decoration: none;
	transition: background-color .25s var(--hero-ease), border-color .25s var(--hero-ease), color .25s var(--hero-ease), transform .25s var(--hero-ease);
}
.hero-cta .btn-hero-primary {
	background: var(--hero-red);
	border-color: var(--hero-red);
	color: #fff !important;
}
.hero-cta .btn-hero-primary:hover {
	background: #a30f0f;
	border-color: #a30f0f;
	transform: translateY(-2px);
}
.hero-cta .btn-hero-ghost {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .45);
	color: #fff !important;
	backdrop-filter: blur(4px);
}
.hero-cta .btn-hero-ghost:hover {
	background: #fff;
	border-color: #fff;
	color: #14100f !important;
	transform: translateY(-2px);
}

/* frecce */
.hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	background: rgba(255, 255, 255, .12);
	border: 1.5px solid rgba(255, 255, 255, .35);
	color: #fff;
	font-size: 17px;
	backdrop-filter: blur(6px);
	transition: background-color .25s var(--hero-ease), border-color .25s var(--hero-ease), color .25s var(--hero-ease);
}
.hero-arrow:hover {
	background: var(--hero-red);
	border-color: var(--hero-red);
	color: #fff;
}
.hero-arrow--prev { left: clamp(12px, 2.5vw, 32px); }
.hero-arrow--next { right: clamp(12px, 2.5vw, 32px); }

/* dots */
.hero-dots {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: clamp(20px, 3vw, 34px);
	display: flex;
	justify-content: center;
	gap: 12px;
}
.hero-dot {
	width: 34px;
	height: 5px;
	border-radius: 999px;
	border: none;
	padding: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, .35);
	transition: background-color .25s var(--hero-ease), width .25s var(--hero-ease);
}
.hero-dot:hover { background: rgba(255, 255, 255, .6); }
.hero-dot.is-active { background: var(--hero-red-light); width: 46px; }

@media (max-width: 768px) {
	.hero-slider { height: auto; min-height: clamp(480px, 88vh, 620px); }
	.hero-arrow { display: none; }
	.hero-slide-overlay {
		background:
			linear-gradient(105deg, rgba(14, 12, 12, .88) 0%, rgba(14, 12, 12, .62) 60%, rgba(14, 12, 12, .4) 100%),
			linear-gradient(to top, rgba(14, 12, 12, .7) 0%, rgba(14, 12, 12, 0) 50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-slide.is-active { animation: none; }
	.hero-slide-content > *,
	.hero-slide.is-active .hero-slide-content > * { opacity: 1; transform: none; animation: none; }
	.hero-slide { transition: opacity .3s linear; }
}


/* ============================================================
   Page hero — header delle pagine interne
   Stesso linguaggio visivo dell'hero di homepage, ma più basso.
   Altezza fissata via CSS: nessun layout shift, e non passa più
   dal modulo JS SliderDimensions del tema (.slider-element).
   ============================================================ */

.page-hero {
	position: relative;
	display: flex;
	align-items: center;
	height: clamp(300px, 45vh, 440px);
	background-color: var(--hero-dark);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.page-hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(105deg, rgba(14, 12, 12, .85) 0%, rgba(14, 12, 12, .55) 45%, rgba(14, 12, 12, .25) 100%),
		linear-gradient(to top, rgba(14, 12, 12, .6) 0%, rgba(14, 12, 12, 0) 45%);
}

.page-hero-content {
	position: relative;
	z-index: 2;
	text-align: left;
	padding-block: clamp(32px, 5vw, 56px);
}

.page-hero-title {
	font-family: var(--cnvs-primary-font, 'Inter', sans-serif);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.14;
	letter-spacing: -.02em;
	color: #fff !important;
	max-width: 860px;
	margin: 10px 0 0;
}
.page-hero-title .accent { color: var(--hero-red-light); }

.page-hero-lead {
	font-family: var(--cnvs-body-font, 'Inter', sans-serif);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .85);
	max-width: 620px;
	margin: 16px 0 0;
}

@media (max-width: 768px) {
	.page-hero {
		height: auto;
		min-height: clamp(260px, 40vh, 340px);
	}
	.page-hero-overlay {
		background:
			linear-gradient(105deg, rgba(14, 12, 12, .88) 0%, rgba(14, 12, 12, .64) 60%, rgba(14, 12, 12, .42) 100%),
			linear-gradient(to top, rgba(14, 12, 12, .68) 0%, rgba(14, 12, 12, 0) 50%);
	}
}