/* ============================================================
   Hero della home - trascrizione di components.css (.hero,
   .hero-content, .hero-media, .hero-sub, .hero-wave)
   dell'HTML di riferimento. Cambiano solo i nomi dei token,
   che theme.json espone come preset.
   Colore, letter-spacing e font dei titoli stanno in theme.json
   e non vengono ripetuti qui.
   ============================================================ */

.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	/* e' l'hero a compensare la navbar fissa, non il body */
	padding-top: calc(var(--wp--custom--nav-height) + var(--wp--custom--topbar-height));
	/* .hero-bg del riferimento e' un livello bianco a inset 0 dentro una hero
	   senza sfondo: stesso identico riempimento, senza un <div> vuoto che
	   nell'editor sarebbe un blocco senza contenuto da cancellare per sbaglio. */
	background: var(--wp--preset--color--white);
}

.hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 32px 80px;
}

.hero-media {
	/* Il vincolo di altezza sta nella width perche' il video e' quadrato: cosi' la
	   box coincide sempre con i pixel del video. Con max-height + object-fit la
	   box restava piu' larga del video e la sfumatura sotto non sarebbe allineata. */
	width: min(54vw, 740px, 100svh - 150px);
	z-index: 1;
	margin-top: 60px;
}

.hero-media video {
	display: block;
	width: 100%;
	height: auto;
	/* Il video e' un favo su fondo bianco sopra una hero bianca. Su alcuni PC
	   Chrome converte il colore del video in modo leggermente diverso dalla
	   pagina e il bordo della "lastra" bianca si vede come un rettangolo.
	   Sfumando i quattro lati sparisce lo stacco netto che l'occhio nota. */
	-webkit-mask-image:
		linear-gradient(to right,  transparent, #000 3%, #000 97%, transparent),
		linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right,  transparent, #000 3%, #000 97%, transparent),
		linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
	mask-composite: intersect;
}

/* Sugli schermi grandi il video cresce, cosi' il titolo sopra e il testo sotto
   gli restano vicini invece di allontanarsi. */
@media (min-width: 1200px) { .hero-media { width: min(54vw, 820px, 100svh - 150px); } }
@media (min-width: 1500px) { .hero-media { width: min(55vw, 920px, 100svh - 150px); } }
@media (min-width: 1800px) { .hero-media { width: min(56vw, 1000px, 100svh - 150px); } }

.hero h1 {
	position: absolute;
	top: 40px;
	left: 24px;
	z-index: 3;
	font-size: clamp(2.8rem, 7.5vw, 6.8rem);
	font-weight: 400;
	line-height: 0.9;
}

/* "Trentini" allineato a destra rispetto alla riga sopra */
.hero h1 span {
	display: block;
	text-align: right;
}

.hero .hero-sub {
	position: absolute;
	right: 24px;
	bottom: 120px; /* sopra l'onda alta 80px, cosi' l'ultima riga non viene tagliata */
	z-index: 3;
	max-width: 380px;
	margin: 0;
	font-size: 1.1rem;
	color: var(--wp--preset--color--text-base);
	line-height: 1.5;
}

.hero-wave {
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
}

.hero-wave svg {
	display: block;
	width: 100%;
	height: 80px;
}

/* Il fill="#ffffff" sull'SVG resta come fallback, ma il colore lo decide
   theme.json: un rebrand non deve lasciare indietro un'onda bianca. */
.hero-wave svg path {
	fill: var(--wp--preset--color--white);
}

/* Entrata orchestrata al load: prima il titolo, poi il video, poi il testo. */
@media (prefers-reduced-motion: no-preference) {
	.hero h1,
	.hero-media,
	.hero .hero-sub {
		opacity: 0;
		animation: hero-in 1s cubic-bezier(.22, .61, .36, 1) both;
		will-change: opacity, transform;
	}

	.hero h1        { animation-delay: .10s; }
	.hero-media     { animation-delay: .30s; }
	.hero .hero-sub { animation-delay: .50s; }

	@keyframes hero-in {
		from { opacity: 0; transform: translateY(24px); }
		to   { opacity: 1; transform: none; }
	}
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 960px) {
	.hero {
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
	}

	.hero-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
		padding-block: 32px 100px;
	}

	/* in colonna il titolo puo' occupare tutta la larghezza: scala sul viewport */
	.hero h1 {
		position: static;
		font-size: clamp(3.5rem, 18vw, 5.5rem);
	}

	.hero-media {
		width: 100%;
		margin-top: 0;
	}

	.hero .hero-sub {
		position: static;
		max-width: 540px;
	}
}

@media (max-width: 480px) {
	.hero-content {
		padding-block: 32px 100px;
	}
}