/* ==========================================================================
   Location — the hand-drawn map, the list of places and four photo shapes.
   ========================================================================== */

.mro-location__head {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
	align-items: end;
	margin-bottom: var(--wp--preset--spacing--80);
}

.mro-location {
	padding-block: var(--wp--preset--spacing--110);
}

.mro-location__head p {
	font-size: var(--wp--preset--font-size--md);
}

.mro-location__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

.mro-map {
	position: relative;
}

.mro-map__svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.mro-map__land {
	fill: var(--wp--preset--color--mint-faint);
	stroke: var(--wp--preset--color--mint);
	stroke-width: 2;
}

.mro-map__road {
	fill: none;
	stroke: var(--wp--preset--color--accent-strong);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 1 9;
	opacity: 0.7;
}

.mro-map__water {
	fill: var(--wp--preset--color--mint);
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.5;
}

.mro-map__forest path {
	fill: var(--wp--preset--color--mint-soft);
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.5;
}

.mro-map__rock {
	fill: var(--wp--preset--color--base);
	stroke: var(--wp--preset--color--contrast);
	stroke-width: 2;
	stroke-linejoin: round;
}

.mro-map__compass path {
	fill: var(--wp--preset--color--accent-strong);
}

.mro-map__compass text,
.mro-map__scale {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: var(--wp--custom--weight--bold);
	fill: var(--wp--preset--color--muted);
}

.mro-map__scale {
	font-style: italic;
	font-weight: var(--wp--custom--weight--regular);
}

.mro-map__pin {
	transition: opacity var(--wp--custom--duration--base) var(--wp--custom--ease--gentle);
}

.mro-map__pin text {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: var(--wp--custom--weight--bold);
	fill: var(--wp--preset--color--contrast);
	paint-order: stroke;
	stroke: var(--wp--preset--color--base);
	stroke-width: 5px;
	stroke-linejoin: round;
}

.mro-map__dot {
	fill: var(--wp--preset--color--base);
	stroke: var(--wp--preset--color--accent-strong);
	stroke-width: 3;
	transform-box: fill-box;
	transform-origin: center;
	transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease--gentle), fill var(--wp--custom--duration--base);
}

.mro-map__pin--home .mro-map__dot {
	fill: var(--wp--preset--color--accent-strong);
}

.mro-map__house {
	fill: var(--wp--preset--color--base);
}

.mro-map__pulse {
	fill: var(--wp--preset--color--mint);
	opacity: 0.6;
	transform-box: fill-box;
	transform-origin: center;
	animation: mro-pulse 3.2s var(--wp--custom--ease--gentle) infinite;
}

.mro-map__pin.is-active .mro-map__dot {
	fill: var(--wp--preset--color--accent);
	transform: scale(1.45);
}

.mro-map__pin--home.is-active .mro-map__dot {
	transform: none;
}

.mro-map__svg[data-active] .mro-map__pin:not(.is-active):not(.mro-map__pin--home) {
	opacity: 0.4;
}

.mro-places {
	display: grid;
}

.mro-place {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	width: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0;
	border-bottom: var(--wp--custom--stroke--hand) dashed var(--wp--preset--color--line);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--wp--custom--duration--base) var(--wp--custom--ease--gentle), border-radius var(--wp--custom--duration--base);
}

.mro-place:hover .mro-place__name {
	color: var(--wp--preset--color--accent-strong);
}

.mro-place.is-active {
	background: var(--wp--preset--color--mint-soft);
	border-radius: var(--wp--custom--radius--note);
	border-bottom-color: transparent;
}

.mro-place__name {
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--leading--snug);
}

.mro-place__info {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.mro-nearby {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr 0.9fr;
	gap: var(--wp--preset--spacing--60);
	align-items: start;
	margin-top: var(--wp--preset--spacing--90);
}

.mro-nearby__item img {
	width: 100%;
	object-fit: cover;
	box-shadow: var(--wp--preset--shadow--soft);
}

.mro-nearby__item figcaption {
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	text-transform: lowercase;
	letter-spacing: var(--wp--custom--tracking--display);
}

.mro-nearby__item--tall img {
	aspect-ratio: 3 / 4.4;
	border-radius: var(--wp--custom--radius--arch);
}

.mro-nearby__item--arch {
	margin-top: var(--wp--preset--spacing--80);
}

.mro-nearby__item--arch img {
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--arch);
}

.mro-nearby__item--blob {
	margin-top: var(--wp--preset--spacing--50);
}

.mro-nearby__item--blob img {
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--blob--b);
}

.mro-nearby__item--low {
	margin-top: var(--wp--preset--spacing--90);
}

.mro-nearby__item--low img {
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--note);
}

@media (max-width: 860px) {
	.mro-location__head,
	.mro-location__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.mro-location__head {
		margin-bottom: var(--wp--preset--spacing--60);
	}

	.mro-nearby {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	.mro-nearby__item--arch {
		margin-top: var(--wp--preset--spacing--70);
	}

	.mro-nearby__item--blob {
		margin-top: calc(var(--wp--preset--spacing--70) * -1);
	}

	.mro-nearby__item--low {
		margin-top: 0;
	}
}