/**
 * Section: Hero project map (layout "hero_map").
 *
 * Figma file Tw5TKCmoQyCrrGnkEDwfLS, pulled 2026-09-15:
 *   desktop/projectmap/1 1633:21932, container 1664:31436 — 32px below the
 *     nav: collage 1220x568, 44px, text, 64px, highlights, 64px, maparea.
 *   mobile/projectmap/1 1461:16541, top 1461:16542 — 16px below the nav:
 *     collage 390x260 full bleed, 16px, text, 24px, highlights, 24px, maparea.
 *
 * Collage (desktop/projects 1633:22635, mobile/projects 1438:41278): three
 * columns of three photos, radius 8. Desktop photos 396x507, 16px apart,
 * columns starting -607 / -290 / -240 inside a 568 box. Mobile 125x160, 8px
 * apart, -151 / -118 / 0 inside 260. The component keeps a second copy of each
 * column one loop away (above the outer columns, below the middle one), which
 * is an endless vertical scroll: outer columns down, middle up. The speed is
 * mine; the frame is static. Offsets are kept as ratios of the photo height
 * so the collage scales between the two frames.
 *
 * Mobile first. Desktop from 64rem.
 */

.hero-map__inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24 */
}

/* 16px below the nav on mobile: .sections gives 32. */
.section--hero-map-collage {
	margin-top: -1rem;
}

/* ------------------------------------------------------------------
 * Collage
 * ---------------------------------------------------------------- */

.hero-map__collage {
	--collage-gap: 0.5rem; /* 8 */
	--collage-height-ratio: 1.625; /* 260 / 160 */
	--collage-duration: 30s;

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--collage-gap);
	margin-inline: calc(-1 * var(--gutter-mobile));
	overflow: hidden;
	container-type: inline-size;
}

/* The title sits 16px under the collage on mobile, 44px on desktop. */
.hero-map__collage + .hero-map__text {
	margin-top: -0.5rem; /* 24 gap - 8 = 16 */
}

.hero-map__column {
	/* One column's width from the collage width; photo height from the frame's
	 * aspect ratio. */
	--photo-height: calc((100cqi - 2 * var(--collage-gap)) / 3 * 160 / 125);
	--loop: calc(3 * (var(--photo-height) + var(--collage-gap)));
	--offset-ratio: -0.94375; /* -151 / 160 */

	position: relative;
	height: calc(var(--photo-height) * var(--collage-height-ratio));
}

.hero-map__column:nth-child(2) {
	--offset-ratio: -0.7375; /* -118 / 160 */
}

.hero-map__column:nth-child(3) {
	--offset-ratio: 0;
}

.hero-map__track {
	position: absolute;
	inset: auto 0;
	display: flex;
	flex-direction: column;
	gap: var(--collage-gap);
}

/* Outer columns move down: the spare copy waits one loop above. */
.hero-map__column:nth-child(odd) .hero-map__track {
	top: calc(var(--photo-height) * var(--offset-ratio) - var(--loop));
	animation: hero-map-collage-down var(--collage-duration) linear infinite;
}

/* The middle column moves up: the spare copy waits one loop below. */
.hero-map__column:nth-child(2) .hero-map__track {
	top: calc(var(--photo-height) * var(--offset-ratio));
	animation: hero-map-collage-up var(--collage-duration) linear infinite;
}

.hero-map__photo {
	display: block;
	flex-shrink: 0;
	width: 100%;
	height: var(--photo-height);
	object-fit: cover;
	border-radius: 0.5rem;
}

@keyframes hero-map-collage-down {
	to {
		transform: translateY(var(--loop));
	}
}

@keyframes hero-map-collage-up {
	to {
		transform: translateY(calc(-1 * var(--loop)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-map__column .hero-map__track {
		animation: none;
	}
}

/* ------------------------------------------------------------------
 * Text: title and subtitle 8px apart, intro 16px below, left-aligned
 * ---------------------------------------------------------------- */

.hero-map__text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hero-map__heading {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.hero-map__title {
	font: var(--type-header-l);
	color: var(--color-text-dark);
}

.hero-map__subtitle {
	font: var(--type-body-xs);
	color: var(--color-text-grey);
}

.hero-map__intro {
	max-width: 47.8125rem; /* 765 */
	font: var(--type-body-s);
	color: var(--color-text-dark);
}

.hero-map__desktop-only {
	display: none;
}

/* ------------------------------------------------------------------
 * Highlights. Mobile: 24px apart; icon 26 and header/S title 10px apart,
 * the grey text 8px under that row.
 * ---------------------------------------------------------------- */

.hero-map__highlights {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.hero-map__highlight {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
}

.hero-map__highlight-head {
	display: flex;
	gap: 0.625rem; /* 10 */
	align-items: center;
}

.hero-map__icon {
	display: block;
	flex-shrink: 0;
	width: 1.625rem; /* 26 */
	height: 1.625rem;
	color: var(--color-secondary);
}

.hero-map__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hero-map__highlight-title {
	font: var(--type-header-s);
	color: var(--color-text-dark);
}

.hero-map__highlight-text {
	font: var(--type-subtitle-m);
	color: var(--color-text-grey);
}

/* ------------------------------------------------------------------
 * Desktop
 * ---------------------------------------------------------------- */

@media (min-width: 64rem) {
	.section--hero-map-collage {
		margin-top: 0; /* 32px below the nav, as .sections gives */
	}

	.hero-map__inner {
		gap: 4rem; /* 64 */
	}

	.hero-map__collage {
		--collage-gap: 1rem; /* 16 */
		--collage-height-ratio: 1.12032; /* 568 / 507 */
		--collage-duration: 60s;

		margin-inline: 0;
	}

	.hero-map__collage + .hero-map__text {
		margin-top: -1.25rem; /* 64 gap - 20 = 44 */
	}

	.hero-map__column {
		--photo-height: calc((100cqi - 2 * var(--collage-gap)) / 3 * 507 / 396);
		--offset-ratio: -1.19724; /* -607 / 507 */
	}

	.hero-map__column:nth-child(2) {
		--offset-ratio: -0.57199; /* -290 / 507 */
	}

	.hero-map__column:nth-child(3) {
		--offset-ratio: -0.47337; /* -240 / 507 */
	}

	.hero-map__title {
		font: var(--type-header-2xl);
	}

	.hero-map__subtitle {
		font: var(--type-body-m);
	}

	.hero-map__desktop-only {
		display: inline;
	}

	.hero-map__mobile-only {
		display: none;
	}

	/* Row, 64px apart, 20px in from the container. Icon 64, 16px above the
	 * header/M title; the text 8px under the title. */
	.hero-map__highlights {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4rem;
		padding-inline: 1.25rem;
	}

	.hero-map__highlight {
		min-width: 16.6875rem; /* 267 */
	}

	.hero-map__highlight-head {
		flex-direction: column;
		gap: 1rem;
		align-items: flex-start;
	}

	.hero-map__icon {
		width: 4rem;
		height: 4rem;
	}

	.hero-map__highlight-title {
		font: var(--type-header-m);
		white-space: nowrap;
	}

	/* maparea 1637:22438: picture 1260.6x824.6 at top -324, right -3.2; pin
	 * centred (top 160); button top 310. */
	.section--hero-map .map-preview {
		--map-image-width: 78.7875rem;
		--map-image-height: 51.5375rem;
		--map-image-top: -20.25rem;
		--map-image-right: -0.2rem;
		--map-pin-top: 10rem;
		--map-button-top: 19.375rem;
	}
}