/* NavalHEAD — Team grid */

.nh-team {
	max-width: 62rem;
	margin-inline: auto;
	/*padding-inline: 1.25rem;*/
	color: var(--nh-ink);
    margin-bottom: 120px !important;
}

.nh-team ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Griglie ---- */

.nh-team__grid {
	display: grid;
	row-gap: 5rem;
}

.nh-team__group + .nh-team__group {
	margin-top: 3.5rem;
}

.nh-team__group--leadership .nh-team__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2rem, 15vw, 10rem);
	max-width: 55rem;
	margin-inline: auto;
}

.nh-team__group--team .nh-team__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 0.375rem;
}

/* ---- Card ---- */

.nh-team__photo {
	display: block;
	margin: 0 0 1.25rem;
	aspect-ratio: 1 / 1;
	background: var(--nh-photo-bg);
	overflow: hidden;
}

.nh-team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

.nh-team__name {
	margin: 0 0 0.35rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--nh-ink);
}

.nh-team__name a {
	color: inherit;
	text-decoration: none;
}

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

.nh-team__name a:focus-visible {
	outline: 2px solid var(--nh-blue);
	outline-offset: 2px;
}

/* Hover sulla foto: evidenzia anche il nome (stessa destinazione). Vale anche senza motion. */
.nh-team__member:has(.nh-team__photo:hover) .nh-team__name a {
	color: var(--nh-blue);
}

.nh-team__role {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.nh-team__group--leadership .nh-team__name { font-size: clamp(1.125rem, 2vw, 1.375rem); }
.nh-team__group--team .nh-team__name       { font-size: clamp(1rem, 1.6vw, 1.1875rem); }

.nh-team__group--team .nh-team__member {
	/*padding-inline: 0.375rem;*/
}

.nh-team__group--leadership .nh-team__member {
	text-align: center;
}
.nh-team__group--leadership .nh-team__social {
	justify-content: center;
}

/* ---- Social ---- */

.nh-team__social {
	display: flex;
	gap: 0.375rem;
	margin-top: 0.75rem;
}

.nh-team__social a {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--nh-softblue);
	transition: color 0.15s ease;
}

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

.nh-team__social a:focus-visible {
	outline: 2px solid var(--nh-blue);
	outline-offset: 2px;
}

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

/* ---- Responsive ---- */

@media (max-width: 767px) {
	.nh-team__group--team .nh-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.nh-team__group--leadership .nh-team__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 20rem;
	}
}

/* ---- Motion ----
 * Tutto il movimento è dentro "no-preference": con "riduci movimento" attivo
 * nel sistema operativo le schede sono statiche.
 */

@media (prefers-reduced-motion: no-preference) {

	/* --- Comparsa: legata allo scroll, solo CSS, nessun JS ---
	 * Browser senza scroll-driven animations: nessuna animazione, schede visibili.
	 */
	@supports (animation-timeline: view()) and (animation-range: entry 0% entry 100%) {

		.nh-team__member {
			--nh-col: 0;
			animation: nh-team-in linear both;
			animation-timeline: view();
			/* Sfasamento per colonna: le schede della stessa riga entrano in cascata. */
			animation-range:
				entry calc(var(--nh-col) * 12%)
				entry calc(70% + var(--nh-col) * 12%);
		}

		/* Indice di colonna, coerente con le griglie a 2 e 3 colonne. */
		.nh-team__group--leadership .nh-team__member:nth-child(2n)   { --nh-col: 1; }
		.nh-team__group--team       .nh-team__member:nth-child(3n+2) { --nh-col: 1; }
		.nh-team__group--team       .nh-team__member:nth-child(3n)   { --nh-col: 2; }

		@media (max-width: 767px) {
			.nh-team__group--team .nh-team__member:nth-child(n)  { --nh-col: 0; }
			.nh-team__group--team .nh-team__member:nth-child(2n) { --nh-col: 1; }
		}

		@media (max-width: 479px) {
			.nh-team__group--leadership .nh-team__member:nth-child(n) { --nh-col: 0; }
		}
	}

	@keyframes nh-team-in {
		from {
			opacity: 0;
			translate: 0 1.5rem;
		}
		to {
			opacity: 1;
			translate: 0 0;
		}
	}

	/* --- Hover / focus ---
	 * Foto: zoom lento e contenuto. Sotto la foto: filo blu che si traccia da sinistra.
	 * Attivo anche con focus da tastiera sul nome (:focus-within).
	 */
	.nh-team__photo {
		position: relative;
	}

	.nh-team__photo::after {
		content: "";
		position: absolute;
		inset: auto 0 0 0;
		height: 3px;
		background: var(--nh-blue);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.nh-team__photo img {
		transition: scale 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.nh-team__name a {
		transition: color 0.3s ease;
	}

	.nh-team__member:focus-within .nh-team__photo::after {
		transform: scaleX(1);
	}

	@media (hover: hover) and (pointer: fine) {
		.nh-team__member:hover .nh-team__photo img,
		.nh-team__member:focus-within .nh-team__photo img {
			scale: 1.04;
		}

		.nh-team__member:hover .nh-team__photo::after {
			transform: scaleX(1);
		}

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

@media (prefers-reduced-motion: reduce) {
	.nh-team__social a { transition: none; }
}