/**
 * Hero interattiva Goertz — [goertz_hero]
 *
 * Elenco voci con dimensione fluida (clamp) e pannello media a destra
 * che compare in dissolvenza all'hover della voce corrispondente.
 * Su mobile/touch il pannello media è nascosto.
 */

.goertz-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: clamp(3rem, 8vh, 6rem) clamp(1.5rem, 5vw, 5rem);
	box-sizing: border-box;
	/* Dissolvenza dello sfondo verso il colore accento alla pressione. */
	transition: background-color 0.35s ease;
}

/* ---------- Elenco voci ---------- */

.goertz-hero__nav {
	position: relative;
	z-index: 2; /* Il testo resta sopra il media. */
	width: 100%;
}

/* Reset della lista con specificità alta: Divi applica i propri stili
   (puntini inclusi) alle liste dentro i moduli di testo. */
.goertz-hero .goertz-hero__list,
.goertz-hero .goertz-hero__item {
	list-style: none;
	margin: 0;
	padding: 0;
}

.goertz-hero .goertz-hero__item::marker {
	content: none;
}

.goertz-hero__link {
	display: inline-block;
	font-family: 'Helvetica BOLD', Helvetica, Arial, Lucida, sans-serif;
	/* Dimensione fluida: grande su desktop, leggibile su schermi piccoli. */
	font-size: clamp(2rem, 4.8vw, 4.6rem);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	padding: clamp(0.3rem, 1vh, 0.7rem) 0;
	transition:
		color 0.35s ease,
		opacity 0.35s ease;
}

/* Quando l'elenco è in hover, le voci non attive si attenuano:
   mette a fuoco la voce scelta e dà un tono più editoriale. */
.goertz-hero__list:hover .goertz-hero__link {
	opacity: 0.25;
}

/* La voce attiva prende il proprio colore accento.
   Vale anche per la navigazione da tastiera. */
.goertz-hero__list:hover .goertz-hero__link:hover,
.goertz-hero__link:focus-visible {
	opacity: 1;
	color: var(--goertz-accent, #ffffff);
}

/* Durante la pressione la voce diventa bianca, così resta leggibile
   mentre lo sfondo sfuma verso il suo colore accento. */
.goertz-hero__list:hover .goertz-hero__link:hover:active {
	color: #ffffff;
}

/* Rotazione automatica (utente inattivo): stessa resa dell'hover,
   pilotata dal JS tramite le classi is-auto / is-auto-active. */
.goertz-hero__list.is-auto .goertz-hero__link {
	opacity: 0.25;
}

.goertz-hero__list.is-auto .goertz-hero__link.is-auto-active {
	opacity: 1;
	color: var(--goertz-accent, #ffffff);
}

.goertz-hero__link:focus-visible {
	outline: none;
}

/* ---------- Pannello media ---------- */

.goertz-hero__media {
	position: absolute;
	z-index: 1;
	top: 50%;
	right: clamp(2rem, 6vw, 6rem);
	width: min(36vw, 560px);
	height: min(68vh, 640px);
	transform: translateY(-50%); /* Il JS aggiunge l'offset parallasse. */
	pointer-events: none; /* Non deve mai intercettare il mouse. */
	will-change: transform;
}

/* Immagini e video: ancorati a destra, centrati in verticale,
   proporzioni originali rispettate (verticali e orizzontali). */
.goertz-hero__media-item {
	position: absolute;
	top: 50%;
	right: 0;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	opacity: 0;
	transform: translateY(-50%) scale(1.04);
	transition:
		opacity 0.4s ease,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Stato attivo: dissolvenza in entrata con micro-zoom di assestamento. */
.goertz-hero__media-item.is-active {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

/* ---------- Mobile / touch ---------- */

/* Niente media dove non esiste l'hover o sotto il breakpoint Divi. */
@media (hover: none), (max-width: 980px) {
	.goertz-hero__media {
		display: none;
	}

	.goertz-hero__list:hover .goertz-hero__link {
		opacity: 1;
	}
}

/* ---------- Accessibilità: riduzione del movimento ---------- */

@media (prefers-reduced-motion: reduce) {
	.goertz-hero,
	.goertz-hero__link,
	.goertz-hero__media-item {
		transition-duration: 0.01s;
	}
}