/**
 * Location (ml-location): Figma Home "Map".
 * Desktop: map (673×640) at the left, 48 apart from a 478 column (photo, heading, line, link)
 * centred beside it. Tablet: the map full width, then text and photo side by side. Phone: heading
 * and line, then the map, the photo and the link, 24 apart.
 */

.ml-location {
	--ml-map-ground: var(--ml-c-sand);
	--ml-map-street: var(--ml-c-paper);
	--ml-map-ink: var(--ml-c-ink);
	--ml-map-muted: var(--ml-c-muted);
}

.ml-location__grid {
	display: grid;
	grid-template-columns: minmax(0, 673fr) minmax(0, 478fr);
	grid-template-rows: 1fr auto auto auto auto 1fr;
	grid-template-areas:
		"map ."
		"map photo"
		"map title"
		"map text"
		"map link"
		"map .";
	column-gap: 48px;
}

.ml-location__map {
	grid-area: map;
	min-width: 0;
}

.ml-location__photo {
	grid-area: photo;
	aspect-ratio: 478 / 300;
}

.ml-location__title {
	grid-area: title;
	margin-top: 24px;
}

.ml-location__text {
	grid-area: text;
	margin-top: 24px;
	color: var(--ml-text);
}

.ml-location__link {
	grid-area: link;
	margin-top: 22px;
}

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

.ml-location__svg {
	display: block;
	width: 100%;
	height: auto;
}

.ml-location__svg--tablet,
.ml-location__svg--phone {
	display: none;
}

.ml-location__ground {
	fill: var(--ml-map-ground);
}

.ml-location__streets path {
	fill: none;
	stroke: var(--ml-map-street);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ml-location__route {
	fill: none;
	stroke: var(--ml-map-ink);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ml-location__north path {
	fill: none;
	stroke: var(--ml-map-ink);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ml-location__north-letter,
.ml-location__start,
.ml-location__note {
	fill: var(--ml-map-ink);
	font-family: var(--ml-sans);
	font-weight: 500;
}

/* Phone: the walk time is set in the caps label style. */
.ml-location__svg--phone .ml-location__note {
	text-transform: uppercase;
}

.ml-location__end {
	fill: var(--ml-map-ink);
	font-family: var(--ml-serif);
	font-weight: 400;
}

.ml-location__streetnames rect {
	fill: var(--ml-map-street);
}

.ml-location__streetnames text {
	fill: var(--ml-map-muted);
	font-family: var(--ml-sans);
	font-weight: 500;
}

.ml-location__pins circle {
	fill: var(--ml-map-ink);
	stroke: var(--ml-map-street);
}

/* ------------------------------------------------------------------ */
/* Tablet (834)                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ml-location__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto 1fr auto auto auto 1fr;
		grid-template-areas:
			"map map"
			". photo"
			"title photo"
			"text photo"
			"link photo"
			". photo";
		column-gap: 24px;
	}

	.ml-location__map {
		margin-bottom: 32px;
	}

	.ml-location__svg--desktop {
		display: none;
	}

	.ml-location__svg--tablet {
		display: block;
	}

	.ml-location__photo {
		aspect-ratio: 373 / 260;
	}

	.ml-location__title {
		margin-top: 0;
	}

	.ml-location__text {
		margin-top: 16px;
	}

	.ml-location__link {
		margin-top: 14px;
	}
}

/* ------------------------------------------------------------------ */
/* Phone (390)                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.ml-location {
		--ml-section-pad: 32px;
	}

	.ml-location__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"title"
			"text"
			"map"
			"photo"
			"link";
	}

	.ml-location .ml-location__title {
		font-size: var(--ml-fs-h2);
		line-height: var(--ml-lh-h2);
	}

	.ml-location__text {
		margin-top: 24px;
		font-size: var(--ml-fs-body);
		line-height: var(--ml-lh-body);
	}

	.ml-location__map {
		margin: 24px 0 0;
	}

	.ml-location__photo {
		margin-top: 24px;
		aspect-ratio: 350 / 280;
	}

	.ml-location__link {
		margin-top: 22px;
	}

	.ml-location__svg--tablet {
		display: none;
	}

	.ml-location__svg--phone {
		display: block;
	}
}