/* NavalHEAD — Pagina singola membro (single-team.php) */

.nh-member {
	--nh-gutter: clamp(1.25rem, 4vw, 3.5rem);
	color: var(--nh-ink);
	background: #fff;
}

/* Astra: il contenitore del tema limita la larghezza; qui la hero va a tutto schermo. */
.single-team #content > .ast-container {
	display: block;
	max-width: none;
	padding: 0;
}

/* =========================================================================
 * Hero
 * ========================================================================= */

.nh-member__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--nh-photo-bg);
	color: #fff;
}

.nh-member-hero {
	display: block;
}

.nh-member-hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3840 / 1480;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Scrim: rende leggibile il testo bianco sullo sfondo chiaro delle foto. */
.nh-member__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		transparent 50%,
		color-mix(in srgb, var(--nh-blue) 10%, transparent) 60%,
		color-mix(in srgb, var(--nh-blue) 20%, transparent) 100%
	);
	pointer-events: none;
}

.nh-member__hero--no-image {
	min-height: clamp(20rem, 40vw, 34rem);
	background: var(--nh-blue);
}

.nh-member__hero--no-image::after {
	display: none;
}

/* Nome, ruolo e linea verticale, centrati sulla persona. */
.nh-member__intro {
	position: absolute;
	z-index: 2;
	top: 54%;
	bottom: 0;
	left: 50%;
	translate: -50% 0;
	width: min(100% - 2 * var(--nh-gutter), 56rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.nh-member__name {
	margin: 0;
	font-size: clamp(2rem, 4.4vw, 4.75rem);
	font-weight: 500;
	line-height: 1.05;
	color: inherit;
	text-wrap: balance;
	text-shadow: 0 1px 20px color-mix(in srgb, var(--nh-blue) 85%, transparent);
}

.nh-member__role {
	margin: 0.9rem 0 0;
	font-size: clamp(0.9375rem, 1.2vw, 1.1875rem);
	line-height: 1.35;
	color: inherit;
	text-shadow: 0 1px 25px color-mix(in srgb, var(--nh-blue) 85%, transparent);
}

/* Linea verticale con pallino: dal ruolo fino al bordo inferiore della foto. */
.nh-member__line {
	--nh-ring: 2rem;
	--nh-stroke: 2px;
	position: relative;
	flex: 1 1 auto;
	width: var(--nh-stroke);
	min-height: 3rem;
	margin-top: calc(var(--nh-ring) / 2 + clamp(1rem, 2vw, 2rem));
	/* Linea disegnata come sfondo: è ciò che permette all'animazione di farla salire. */
	background: linear-gradient(var(--nh-yellow), var(--nh-yellow)) bottom / 100% 100% no-repeat;
}

.nh-member__line::before,
.nh-member__line::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	border-radius: 50%;
	translate: -50% -50%;
}

/* Pallino pieno: 1/3 del cerchio, come nel riferimento. */
.nh-member__line::before {
	width: calc(var(--nh-ring) / 3);
	height: calc(var(--nh-ring) / 3);
	background: var(--nh-yellow);
}

/* Cerchio esterno. */
.nh-member__line::after {
	width: var(--nh-ring);
	height: var(--nh-ring);
	border: var(--nh-stroke) solid var(--nh-yellow);
	box-sizing: border-box;
}

/* Precedente / successivo ai lati. */
.nh-member__nav {
	position: absolute;
	z-index: 2;
	left: var(--nh-gutter);
	right: var(--nh-gutter);
	bottom: clamp(1.5rem, 9%, 6rem);
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
}

.nh-member__nav-link {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	max-width: 30%;
	color: #fff;
	text-decoration: none;
	pointer-events: auto;
}

.nh-member__nav-link--next {
	flex-direction: row-reverse;
	text-align: right;
}

.nh-member__nav-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.nh-member__nav-text:hover {
	color: var(--nh-blue);
}

.nh-member__nav-name {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
}

.nh-member__nav-role {
	font-size: 0.8125rem;
	line-height: 1.3;
	opacity: 0.85;
}

.nh-member__nav-link:focus-visible,
.nh-member__back:focus-visible,
.nh-member__social a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* =========================================================================
 * Freccia (assets/img/team-arrow.svg, orientata a destra)
 * ========================================================================= */

.nh-arrow {
	display: inline-flex;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
}

.nh-arrow svg {
	width: 100%;
	height: 100%;
}

/* "Precedente" e "Back to the team" puntano a sinistra: stesso SVG specchiato. */
.nh-member__nav-link--prev .nh-arrow,
.nh-member__back .nh-arrow {
	scale: -1 1;
}

/* =========================================================================
 * Social (centrati, sopra la bio)
 * ========================================================================= */

.nh-member__social {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: clamp(2.5rem, 5vw, 4rem) var(--nh-gutter) 0;
	list-style: none;
}

.nh-member__social a {
	display: block;
	width: 2rem;
	height: 2rem;
	color: var(--nh-softblue);
	transition: color 0.2s ease;
}

.nh-member__social a:hover {
	color: var(--nh-blue);
}

.nh-member__social svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* =========================================================================
 * Bio
 * ========================================================================= */

.nh-member__bio {
	max-width: 44rem;
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 6rem) var(--nh-gutter) clamp(2.5rem, 5vw, 4rem);
	box-sizing: content-box;
	font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
	line-height: 1.65;
}

.nh-member__bio > :first-child {
	margin-top: 0;
}

.nh-member__bio > :last-child {
	margin-bottom: 0;
}

.nh-member__bio a {
	color: var(--nh-blue);
}

/* Con i social sopra, la bio parte più vicina. */
.nh-member__social + .nh-member__bio {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* =========================================================================
 * Piede: ritorno al team a sinistra
 * ========================================================================= */

.nh-member__footer {
	max-width: 44rem;
	margin-inline: auto;
	padding: 1.5rem var(--nh-gutter) clamp(3rem, 6vw, 5rem);
	box-sizing: content-box;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.nh-member__back {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--nh-blue);
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}

.nh-member__back .nh-arrow {
	width: 1.25rem;
	height: 1.25rem;
}

/* =========================================================================
 * Mobile (< 768 px): hero quadrata, navigazione sotto la foto
 * ========================================================================= */

@media (max-width: 767px) {
	.nh-member-hero img {
		aspect-ratio: 1 / 1;
	}

	.nh-member__hero::after {
		background: linear-gradient(
			to bottom,
			transparent 45%,
			color-mix(in srgb, var(--nh-blue) 65%, transparent) 100%
		);
		/* Lo scrim copre solo la foto, non la barra di navigazione sotto. */
		bottom: auto;
		height: 100vw;
	}

	.nh-member__intro {
		/* Testo ancorato al fondo della foto quadrata (alta 100vw). */
		top: calc(100vw - 1.5rem);
		bottom: auto;
		translate: -50% -100%;
	}

	.nh-member__line {
		display: none;
	}

	.nh-member__nav {
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		padding: 1.25rem var(--nh-gutter);
		background: #fff;
		border-bottom: 1px solid var(--nh-softblue);
	}

	.nh-member__nav-link {
		max-width: none;
		color: var(--nh-ink);
	}

	.nh-member__nav-link .nh-arrow {
		color: var(--nh-blue);
		width: 1.375rem;
		height: 1.375rem;
	}

	.nh-member__nav-name {
		font-size: 0.9375rem;
	}
}

/* =========================================================================
 * Movimento: solo con "riduci movimento" disattivato
 * ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
	.nh-member__nav-link .nh-arrow,
	.nh-member__back .nh-arrow {
		transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.nh-member__nav-link--next:hover .nh-arrow {
		translate: 0.3rem 0;
	}

	.nh-member__nav-link--prev:hover .nh-arrow,
	.nh-member__back:hover .nh-arrow {
		translate: -0.3rem 0;
	}

	.nh-member__name,
	.nh-member__role {
		animation: nh-member-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.nh-member__role { animation-delay: 0.12s; }

	.nh-member__line {
		animation: nh-member-line 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.25s both;
	}

	.nh-member__line::before {
		animation: nh-member-dot 0.4s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both;
	}

	.nh-member__line::after {
		animation: nh-member-ring 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
	}

	@keyframes nh-member-line {
		from { background-size: 100% 0%; }
	}

	@keyframes nh-member-dot {
		from { scale: 0; }
	}

	@keyframes nh-member-ring {
		from { scale: 0.4; opacity: 0; }
	}

	@keyframes nh-member-in {
		from { opacity: 0; translate: 0 0.75rem; }
	}

}