/**
 * Still Water Area map (Figma "V5 Arrival · About four hours from Helsinki", 10:6314 / 10:7423 /
 * 10:8524). White section, padding 72 on desktop.
 *
 * Desktop: title (h1), 32 under it the map card (720 × 560, mist, radius 16) and, 24 to its
 * right, the facts (456). The 720 × 700 map sits at the top of the card, which crops its bottom
 * 140 (as drawn, PLAN.md B3 Q11): pale water, white land, ink railway, muted road (the drawing's
 * variables); station dots 8 (ink, white ring) and names (small); the pin 18 with its name
 * (semibold) and line (small) right-aligned under it; the key (white, line border, radius 8)
 * at 16, 16. Facts: photo 456 × 220 (radius 12) and its caption 24 under it; 24 under that two
 * figures 24 apart (rule on top, icon 24, figure numeral 6 under it, label small muted 6 under
 * that); the note (small, muted) 24 under them.
 * Tablet: card 770 × 560 with the map centred; facts under it without the photo. Phone: a
 * 350 × 480 window that scrolls over the map (opened at 370, 60 by area-map.js), one more name;
 * figures stacked (h3).
 */

.sw-area-map.sw-pad {
	padding-top: var(--sw-pad-t, 72px);
	padding-bottom: var(--sw-pad-b, 72px);
}

.sw-area-map__title {
	margin-bottom: 32px;
}

.sw-area-map__grid {
	display: grid;
	grid-template-columns: minmax(0, 720px) minmax(0, 456px);
	justify-content: space-between;
	gap: 24px;
	align-items: start;
}

/* ---------- Map ---------- */

.sw-area-map__card {
	overflow: hidden;
	height: 560px;
	border-radius: var(--sw-radius-panel);
	background: var(--sw-c-mist);
}

.sw-area-map__map {
	position: relative;
	width: 720px;
	height: 700px;
}

.sw-area-map__art,
.sw-area-map__art svg,
.sw .sw-area-map__art img {
	position: absolute;
	inset: 0;
	width: 720px;
	max-width: none;
	height: 700px;
	border-radius: var(--sw-radius-panel);
	background: var(--sw-c-pale);
}

.sw-area-map__stop {
	position: absolute;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border: 1px solid var(--sw-c-white);
	border-radius: 50%;
	background: var(--sw-c-ink);
}

.sw-area-map__place {
	position: absolute;
	color: var(--sw-c-ink);
	font-size: var(--sw-fs-small);
	line-height: var(--sw-lh-small);
	white-space: nowrap;
}

.sw-area-map__place--muted {
	color: var(--sw-c-muted);
}

.sw-area-map__place--lake {
	color: var(--sw-c-muted);
	font-family: var(--sw-serif);
	font-size: 20px;
	line-height: 28px;
}

.sw-area-map__place--region {
	color: var(--sw-c-muted);
	font-size: var(--sw-fs-label);
	line-height: var(--sw-lh-label);
	font-weight: 600;
}

.sw-area-map__place--phone {
	display: none;
}

.sw-area-map__pin {
	position: absolute;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid var(--sw-c-white);
	border-radius: 50%;
	background: var(--sw-c-ink);
}

.sw-area-map__pin-label {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	color: var(--sw-c-ink);
	text-align: right;
	white-space: nowrap;
}

.sw-area-map__pin-name {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
}

.sw-area-map__key {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 13px 15px;
	border: 1px solid var(--sw-c-line);
	border-radius: var(--sw-radius-control);
	background: var(--sw-c-white);
}

.sw-area-map__key-row {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--sw-c-ink);
}

/* Figma key swatch: a white 28 × 8 box holding a 24px line 2px in, as thick as on the map
   (railway 2.5, road 2). */
.sw-area-map__swatch {
	position: relative;
	flex: none;
	width: 28px;
	height: 8px;
	background: var(--sw-c-white);
}

.sw-area-map__swatch::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 2px;
	width: 24px;
	border-radius: 2px;
	transform: translateY(-50%);
}

.sw-area-map__swatch--rail::after {
	height: 2.5px;
	background: var(--sw-map-rail, var(--sw-c-ink));
}

.sw-area-map__swatch--road::after {
	height: 2px;
	background: var(--sw-map-road, var(--sw-c-muted));
}

/* ---------- Facts ---------- */

.sw-area-map__photo .sw-figure__media {
	height: 220px;
}

.sw-area-map__photo .sw-figure__caption {
	margin-top: 24px;
}

.sw-area-map__figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin: 24px 0 0;
}

.sw-area-map__figures:first-child {
	margin-top: 0;
}

/* Icon, then the figure, then its label (label first in the markup for screen readers). */
.sw-area-map__figure {
	display: grid;
	grid-template-areas:
		"icon"
		"value"
		"label";
	row-gap: 6px;
	justify-items: start;
}

.sw-area-map__icon {
	grid-area: icon;
	color: var(--sw-heading);
}

.sw-area-map__value {
	grid-area: value;
}

.sw-area-map__label {
	grid-area: label;
}

.sw-area-map__note {
	margin-top: 24px;
}

/* Tablet (834): the card spans the column with the map centred; no photo. */
@media (max-width: 1024px) {
	.sw-area-map.sw-pad {
		padding-top: var(--sw-pad-t, var(--sw-section-pad));
		padding-bottom: var(--sw-pad-b, var(--sw-section-pad));
	}

	.sw-area-map__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.sw-area-map__map {
		margin-inline: auto;
	}

	.sw-area-map__photo {
		display: none;
	}

	.sw-area-map__figures {
		margin-top: 0;
	}
}

/* Phone (390): a window that scrolls over the map. */
@media (max-width: 767px) {
	.sw-area-map__card {
		height: 480px;
		overflow: auto;
		scrollbar-width: none;
	}

	.sw-area-map__card::-webkit-scrollbar {
		display: none;
	}

	.sw-area-map__map {
		margin-inline: 0;
	}

	.sw-area-map__place--phone {
		display: block;
	}

	.sw-area-map__figures {
		grid-template-columns: minmax(0, 1fr);
	}

	.sw-area-map__value {
		font-size: var(--sw-fs-h3);
		line-height: var(--sw-lh-h3);
	}
}