/**
 * Component: map preview (parts/components/map-preview.php).
 *
 * Figma file Tw5TKCmoQyCrrGnkEDwfLS, pulled 2026-09-15:
 *   maparea — white, 1px border/light, radius 20, 374 tall, clipped.
 *   Map picture — an oversized image fill, positioned per context below.
 *   pin/location 1896:36135 — 61x54, drop shadow 2px 4px 4px 15%, white
 *     "Union" shape with a 1px dark purple inside stroke, count subtitle/M
 *     text/dark centred 12.5px above the middle.
 *   tag/medium — primary, radius 100, 44 tall, padding 7 16 8, subtitle/M
 *     white + 12px arrow, centred horizontally.
 *
 * Positions are custom properties so each section can match its frame.
 * Defaults: mobile/projectmap/1 1896:36102 (pin top 178, button top 295,
 * picture 1308x959 at top -428.6, right -400, shadow 30%). The default
 * picture is 1284x942, so 1308x959 keeps its proportions; the desktop hero
 * swaps in the 1440x942 map through <picture>.
 */

.map-preview {
	--map-image-width: 81.75rem; /* 1308 */
	--map-image-height: 59.95rem; /* 959.2 */
	--map-image-top: -26.7875rem; /* -428.6 */
	--map-image-right: -25rem; /* -400 */
	--map-pin-top: 11.125rem; /* 178 */
	--map-button-top: 18.4375rem; /* 295 */
	--map-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);

	position: relative;
	display: block;
	align-self: stretch;
	height: 23.375rem; /* 374 */
	overflow: hidden;
	color: var(--color-text-dark);
	text-decoration: none;
	background-color: var(--color-background-white);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-20);
	box-shadow: var(--map-shadow);
}

.map-preview:hover {
	text-decoration: none;
}

/* Figma measures from the frame's outer edge; CSS positions from inside the
 * 1px border, hence the -1px on every offset below. Figma stretches the fill
 * to the frame's box, so the picture does too. */
.map-preview__image {
	position: absolute;
	top: calc(var(--map-image-top) - 1px);
	right: calc(var(--map-image-right) - 1px);
	width: var(--map-image-width);
	max-width: none;
	height: var(--map-image-height);
	object-fit: fill;
	pointer-events: none;
}

.map-preview__pin {
	position: absolute;
	top: calc(var(--map-pin-top) - 1px);
	left: calc(50% + 0.5px);
	width: 3.8125rem; /* 61 */
	height: 3.375rem; /* 54 */
	filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.15));
	transform: translateX(-50%);
}

.map-preview__pin-shape {
	display: block;
	width: 100%;
	height: calc(100% - 1.53%);
}

.map-preview__pin-label {
	position: absolute;
	top: calc(50% - 12.5px);
	right: 13.64%;
	left: 13.64%;
	font: var(--type-subtitle-m);
	color: var(--color-text-dark);
	text-align: center;
	white-space: nowrap;
}

.map-preview__open {
	position: absolute;
	top: calc(var(--map-button-top) - 1px);
	left: calc(50% + 0.5px);
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
	justify-content: center;
	height: 2.75rem; /* 44 */
	padding: 0.4375rem 1rem 0.5rem; /* 7 16 8 */
	font: var(--type-subtitle-m);
	color: var(--color-text-white);
	white-space: nowrap;
	background-color: var(--color-primary);
	border-radius: 6.25rem;
	transform: translateX(-50%);
	transition: background-color 0.15s ease;
}

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

.map-preview__open-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 0.75rem;
	height: 0.75rem;
}

.map-preview__open-icon svg {
	width: 100%;
	height: 100%;
}

/* Desktop default: section/projects 1598:46895 (picture 1308x959 at top
 * -426.6, right 0; pin and button as mobile). Shadow as the desktop hero. */
@media (min-width: 64rem) {
	.map-preview {
		--map-image-top: -26.6625rem; /* -426.6 */
		--map-image-right: 0rem;
		--map-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15);
	}
}