/**
 * Elenco talenti/artisti — [goertz_talents]
 *
 * Variante chiara della hero: testi neri su fondo bianco, colore di hover
 * unico per tutte le voci (nessun accento per riga, nessuno sfondo colorato
 * alla pressione). Accanto al nome compare il profilo Instagram in corpo
 * ridotto; all'hover compare a destra la foto associata, che segue il mouse
 * con un leggero ritardo. Su mobile/touch resta solo l'elenco testuale.
 */

.goertz-talents {
	position: relative;
	overflow: hidden;
	padding: clamp(2rem, 6vh, 4.5rem) clamp(1.5rem, 5vw, 5rem);
	box-sizing: border-box;
}

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

.goertz-talents__nav {
	position: relative;
	z-index: 1; /* La foto passa sopra il testo (vedi __media). */
	width: 100%;
	max-width: 1600px;
}

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

.goertz-talents .goertz-talents__item::marker {
	content: none;
}

.goertz-talents__link {
	display: inline-flex;
	align-items: baseline;
	gap: clamp(0.4rem, 1vw, 0.9rem);
	/* Nome e profilo restano sempre sulla stessa riga: niente a-capo,
	   nemmeno sui viewport stretti (la voce rimpicciolisce, non va a capo). */
	flex-wrap: nowrap;
	white-space: nowrap;
	font-family: 'Helvetica BOLD', Helvetica, Arial, Lucida, sans-serif;
	/* Dimensione proporzionale alla larghezza del viewport, senza soglia
	   minima: è questo che garantisce la riga singola anche restringendo
	   la finestra. Il tetto di 2.4rem vale da desktop in su. */
	font-size: min(2.4rem, 4.4vw);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--goertz-talents-colore, #161616);
	text-decoration: none;
	padding: clamp(0.25rem, 0.9vh, 0.6rem) 0;
	transition: color 0.3s ease;
}

/* Profilo Instagram: stesso colore del nome ma corpo ridotto, dimensionato
   in em così segue il nome. La soglia minima in rem evita che sui viewport
   stretti diventi illeggibile. */
.goertz-talents__ig {
	font-size: max(0.68rem, 0.32em);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	white-space: nowrap;
}

/* Hover e focus da tastiera: colore unico per tutte le voci
   (nome e profilo cambiano insieme). Le altre voci restano invariate. */
.goertz-talents__link:hover,
.goertz-talents__link:focus-visible {
	color: var(--goertz-talents-hover, #ffb695);
}

.goertz-talents__link:focus-visible {
	outline: none;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ---------- Pannello foto ---------- */

.goertz-talents__media {
	position: absolute;
	/* Sopra l'elenco: restringendo la finestra la foto copre i nomi invece
	   di rubargli larghezza. L'hover continua a funzionare perché il
	   pannello non intercetta il mouse (pointer-events: none). */
	z-index: 2;
	top: 50%;
	right: clamp(2rem, 6vw, 6rem);
	width: min(30vw, 420px);
	height: min(60vh, 520px);
	transform: translateY(-50%); /* Il JS aggiunge l'offset parallasse. */
	pointer-events: none; /* Non deve mai intercettare il mouse. */
	will-change: transform;
}

/* Ogni foto è sovrapposta alle altre: ancorata a destra e centrata
   in verticale, proporzioni originali rispettate. */
.goertz-talents .goertz-talents__media-item {
	position: absolute;
	top: 50%;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	opacity: 0;
	transform: translateY(-50%) scale(1.04);
	transition:
		opacity 0.4s ease,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.goertz-talents__media-item img {
	display: block;
	max-width: 100%;
	max-height: min(52vh, 460px);
	width: auto;
	height: auto;
	object-fit: cover;
}

/* Didascalia sotto la foto: ripete il profilo Instagram, sottolineato. */
.goertz-talents__media-ig {
	font-family: 'Helvetica BOLD', Helvetica, Arial, Lucida, sans-serif;
	font-size: clamp(0.7rem, 0.9vw, 0.85rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	color: var(--goertz-talents-colore, #161616);
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
	.goertz-talents__link,
	.goertz-talents .goertz-talents__media-item {
		transition-duration: 0.01s;
	}
}