/* NavalHEAD — Sezione Awards (template-parts/awards.php, assets/js/awards.js) */

/*
 * Card visibili per larghezza di finestra:
 *   < 768 px      1,5
 *   768–1023 px   2,5
 *   1024–1599 px  3,5
 *   ≥ 1600 px     5 (4,5 con più di 5 premi: classe nh-awards--overflow)
 * Larghezza card = (larghezza striscia − margini in vista − spazi in vista) / card visibili.
 */
.nh-awards {
	--nh-awards-band: color-mix(in srgb, var(--nh-softblue) 23%, #fff); /* #E6EBF3 del mockup */
	--nh-awards-overlap: clamp(2.5rem, 5.6vw, 5rem); /* quanto la foto entra nella fascia */
	--nh-awards-edge: 16px;   /* margine della prima card dal bordo della finestra */
	--nh-awards-gap: 6px;     /* spazio tra le card */
	--nh-awards-visible: 1.5; /* card visibili */
	--nh-awards-gaps: 1;      /* spazi interi in vista */
	--nh-awards-edges: 1;     /* margini in vista: 1 se l'ultima card è tagliata, 2 se si vede intera */
	--nh-awards-zoom: 1.05;   /* ingrandimento dell'immagine al passaggio del mouse (1 = nessun effetto) */
	padding-top: clamp(3rem, 7vw, 5.5rem);
}

@media (min-width: 768px) {
	.nh-awards {
		--nh-awards-edge: 20px;
		--nh-awards-visible: 2.5;
		--nh-awards-gaps: 2;
	}
}

@media (min-width: 1024px) {
	.nh-awards {
		--nh-awards-visible: 3.5;
		--nh-awards-gaps: 3;
	}
}

@media (min-width: 1600px) {
	.nh-awards {
		--nh-awards-visible: 5;
		--nh-awards-gaps: 4;
		--nh-awards-edges: 2;
	}

	.nh-awards--overflow {
		--nh-awards-visible: 4.5;
		--nh-awards-edges: 1;
	}
}

.nh-awards--no-photo {
	--nh-awards-overlap: 0px;
}

/* Parte alta: etichetta e titolo a sinistra, foto a destra; su mobile uno sotto l'altro. */
.nh-awards__intro {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	width: min(1180px, 100% - 2 * clamp(1.25rem, 5vw, 4.5rem));
	margin: 0 auto calc(-1 * var(--nh-awards-overlap));
}

@media (min-width: 900px) {
	.nh-awards__intro {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		align-items: center;
	}

	/* Il testo si centra sulla parte di foto che sta sopra la fascia. */
	.nh-awards__text {
		padding-bottom: var(--nh-awards-overlap);
	}
}

.nh-awards__label {
	display: inline-block;
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
	padding: 0.15em 0.5em;
	background: var(--nh-blue);
	color: #fff;
	font-size: clamp(1.25rem, 2.3vw, 2rem);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.nh-awards__title {
	margin: 0;
	color: var(--nh-blue);
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.4;
	max-width: 17ch; /* come nel mockup: «Recognition / follows the work.» */
}

.nh-awards__photo {
	margin: 0;
	overflow: hidden;
	border: 4px solid #fff;
	background: #fff;
	box-shadow: 0 0.75rem 2.5rem rgb(0 0 0 / 0.08);
}

.nh-awards__photo-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Ingresso della foto: oltre alla dissolvenza (home.css), l'immagine si assesta da un leggero zoom. */
.nh-js-reveal .nh-awards__photo-img {
	scale: 1.06;
	transition: scale 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.nh-js-reveal .nh-awards__photo.is-revealed .nh-awards__photo-img {
	scale: 1;
}

/* Fascia: parte sotto la foto e contiene il carosello. */
.nh-awards__band {
	padding: calc(var(--nh-awards-overlap) + clamp(2rem, 4vw, 3.25rem)) 0 clamp(2.5rem, 5vw, 4rem);
	background: var(--nh-awards-band);
}

/*
 * Striscia scorrevole a tutta larghezza. Scorrimento nativo (trackpad, dito, tastiera) con
 * aggancio alle card; il trascinamento col mouse lo aggiunge awards.js.
 * container-type: le card si misurano sulla larghezza della striscia (unità cqi).
 */
.nh-awards__track {
	position: relative;
	container-type: inline-size;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--nh-awards-edge);
	scrollbar-width: none;
}

.nh-awards__track::-webkit-scrollbar {
	display: none;
}

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

/* Durante il trascinamento e la planata finale l'aggancio è sospeso (lo gestisce awards.js). */
.nh-awards__track.is-dragging,
.nh-awards__track.is-gliding {
	scroll-snap-type: none;
}

@media (hover: hover) and (pointer: fine) {
	.nh-awards__track.is-scrollable {
		cursor: grab;
		user-select: none;
	}

	.nh-awards__track.is-dragging {
		cursor: grabbing;
	}
}

.nh-awards__list {
	display: flex;
	gap: var(--nh-awards-gap);
	width: max-content;
	margin: 0;
	padding: 0 var(--nh-awards-edge);
	list-style: none;
}

.nh-awards__item {
	flex: none;
	width: calc((100cqi - var(--nh-awards-edges) * var(--nh-awards-edge) - var(--nh-awards-gaps) * var(--nh-awards-gap)) / var(--nh-awards-visible));
	margin: 0;
	scroll-snap-align: start;
}

/* Card */
.nh-award__year {
	margin: 0 0 0.5rem;
	padding-inline: 0.6rem;
	color: var(--nh-blue);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
}

.nh-award__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--nh-photo-bg);
}

/* A riposo l'immagine riempie esattamente la card: una foto quadrata si vede intera. */
.nh-award__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	-webkit-user-drag: none;
}

/* Zoom solo al passaggio del mouse (non durante il trascinamento); la card ritaglia l'ingrandimento. */
@media (hover: hover) and (pointer: fine) {
	.nh-awards__track:not(.is-dragging) .nh-award__media:hover .nh-award__img {
		scale: var(--nh-awards-zoom);
	}
}

.nh-award__name {
	position: absolute;
	bottom: 0.4rem;
	left: 0;
	max-width: 88%;
	margin: 0;
	padding: 0.3em 0.6em;
	background: var(--nh-blue);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
}

.nh-award__org {
	margin: 0.75rem 0 0;
	padding-inline: 0.6rem;
	color: var(--nh-blue);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

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