/*
 * Contacts (HANDOFF §4, §5.11; Figma 42:1793 / 42:1938): the hero (hero.css, .hero--compact), the contact block
 * (theme.css), then the map. Until the visitor asks, the map is a Cement box of its size with the Dart pointing
 * down, the note and "Show map"; map.js swaps in Google's embed. "Open in Google Maps" under it.
 */

/* Section padding above and below. Figma's mobile frame has it (72 and 72); its desktop frame has none above, which
   would leave the box touching the contact block's photo. */
.hq-map {
	padding-block: var(--space-section);
}

/* The link 24 under the box on phones, 16 from 1024 (Figma). */
.hq-map__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
}

@media (min-width: 1024px) {
	.hq-map__inner {
		gap: var(--space-16);
	}
}

/* The content width wide; HANDOFF's 240 tall at 375 and 360 at 1440 (fluid between, as the hero heights), taller
   only where its contents need it (phones narrower than 375). */
.hq-map__box {
	position: relative;
	display: flex;
	align-self: stretch;
	min-height: clamp(15rem, 12.359rem + 11.268vw, 22.5rem);
	background: var(--color-cement);
}

/* Until the visitor asks: the Dart pointing down (48, Ink), the note (Small, Slate) 16 under it and "Show map"
   (secondary) 24 under that, centred, at least 16 in from the box's edges (so they fit its 240 at 375). */
.hq-map__consent {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
	padding: var(--space-16);
	text-align: center;
}

.hq-map__dart {
	width: var(--space-48);
	height: var(--space-48);
	transform: rotate(90deg);
}

/* Balanced where it wraps (on tablets it would leave "our privacy policy." alone on its second line). */
.hq-map__note {
	color: var(--color-slate);
	text-wrap: balance;
}

.hq-map__show {
	margin-top: var(--space-8);
}

/* Google's embed fills the box. */
.hq-map__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}