/*
 * Hero map (Project Map page). Port of the theme's
 * assets/css/sections/hero-map.css with playground tokens and the 768px
 * breakpoint; still mobile first like the theme file.
 *
 * Figma (page "Project Map" 1697:29670):
 *   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. Offsets are
 * ratios of the photo height so the collage scales between the two frames.
 *
 * maparea: desktop 1637:22438 (1220x374, shadow 15%, wide map picture
 * 1260.6x824.6 at top -324, right -3.2; pin top 160, button top 310);
 * mobile 1896:36102 (350x374, shadow 30%, picture 1308x959 at top -428.6,
 * right -400; pin top 178, button top 295).
 * .map-preview is the same shared component as in projects.css and
 * neighbourhood.css (repeated here until it moves to base.css).
 */

.hero-map { padding-top: calc(var(--header-h) + 16px); }

.hero-map__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

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

.hero-map__collage {
	--collage-gap: 8px;
	--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));
	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: -8px; }

.hero-map__column {
	--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 {
	flex-shrink: 0;
	width: 100%;
	height: var(--photo-height);
	object-fit: cover;
	border-radius: var(--r-xs);
	background: var(--c-bg-segment);
}

@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 ---------- */

.hero-map__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hero-map__heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hero-map__title { font: var(--f-header-l); color: var(--c-text-dark); }
.hero-map__subtitle { font: var(--f-body-xs); color: var(--c-text-grey); }

.hero-map__intro {
	max-width: 765px;
	font: var(--f-body-s);
	color: var(--c-text-dark);
}

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

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

.hero-map__highlights {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hero-map__highlight {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.hero-map__highlight-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hero-map__icon { --icon-size: 26px; color: var(--c-secondary); }

.hero-map__highlight-title { font: var(--f-header-s); color: var(--c-text-dark); }
.hero-map__highlight-text { font: var(--f-subtitle-m); color: var(--c-text-grey); }

/* ---------- map-preview (maparea), shared component ---------- */
.map-preview {
	--map-w: 1308px;
	--map-h: 959px;
	--map-top: -427px;
	--map-right: 0px;
	--map-pin-top: 178px;
	--map-open-top: 295px;
	position: relative;
	display: block;
	align-self: stretch;
	height: 374px;
	overflow: hidden;
	border-radius: var(--r-l);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
}

.map-preview__image {
	position: absolute;
	top: var(--map-top);
	right: var(--map-right);
	width: var(--map-w);
	max-width: none;
	height: var(--map-h);
	object-fit: cover;
	pointer-events: none;
}

.map-preview__pin {
	position: absolute;
	top: var(--map-pin-top);
	left: 50%;
	width: 61px;
	height: 54px;
	filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, .15));
	transform: translateX(-50%);
}

.map-preview__pin-shape { width: 100%; height: 98.5%; }

.map-preview__pin-label {
	position: absolute;
	top: calc(50% - 12.5px);
	inset-inline: 13.64%;
	font: var(--f-subtitle-m);
	text-align: center;
	white-space: nowrap;
}

.map-preview__open {
	--icon-size: 12px;
	position: absolute;
	top: var(--map-open-top);
	left: 50%;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 44px;
	padding: 7px 16px 8px;
	border-radius: var(--r-pill);
	background: var(--c-primary);
	color: var(--c-text-white);
	font: var(--f-subtitle-m);
	white-space: nowrap;
	transform: translateX(-50%);
	transition: background-color .15s ease;
}

.map-preview:hover .map-preview__open { background: var(--c-primary-hover); }

/* Mobile maparea 1896:36102: measured from the outer edge (1px border). */
.map-preview.hero-map__map {
	--map-top: -429px;
	--map-right: -400px;
	border: 1px solid var(--c-border-light);
	box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, .3);
}

.hero-map__map .map-preview__pin,
.hero-map__map .map-preview__open { margin-top: -1px; }

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

@media (min-width: 768px) {
	.hero-map { padding-top: calc(var(--header-h) + 32px); }

	.hero-map__inner { gap: 64px; }

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

		margin-inline: 0;
	}

	.hero-map__collage + .hero-map__text { margin-top: -20px; } /* 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(--f-header-2xl); }
	.hero-map__subtitle { font: var(--f-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: 32px 64px;
		padding-inline: 20px;
	}

	.hero-map__highlight { min-width: 267px; }

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

	.hero-map__icon { --icon-size: 64px; }

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

	.map-preview.hero-map__map {
		--map-w: 1260.6px;
		--map-h: 824.6px;
		--map-top: -325px;
		--map-right: -4.2px;
		--map-pin-top: 160px;
		--map-open-top: 310px;
		box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, .15);
	}
}