/*
 * Map: the placeholder and the real map, and the Map block's layouts.
 * Loaded on pages with a Map block, or an Opening hours block that shows the map.
 * Height arrives as --map-h from apiam_map_html().
 */

.map {
	position: relative;
	min-height: var(--map-h, 380px);
	overflow: hidden;
	border-radius: var(--card-r);
	background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}

.map iframe { display: block; width: 100%; height: var(--map-h, 380px); border: 0; }

.map__placeholder {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 14px;
	min-height: var(--map-h, 380px);
	padding: 24px;
	color: var(--brand-text, var(--brand));
	text-align: center;
}
.map__placeholder > .ico { width: 44px; height: 44px; opacity: 0.55; }
.map__load[hidden] { display: none; }

/* ---------- The Map block ---------- */

.map-block { padding: 40px 0; }

.map-block__grid { display: grid; gap: 22px; }

.map-block__title { font-size: 1.9rem; line-height: 1.1; }
.map-block__intro { max-width: 50ch; margin: 10px 0 0; color: var(--muted); }

.map-block__card { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: var(--card-r); background: var(--surface); }
.map-block__card address { font-style: normal; }
.map-block__row { display: flex; gap: 10px; align-items: flex-start; }
.map-block__row .ico { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--brand-text, var(--brand)); }
.map-block__row b { display: block; }
.map-block__hours { display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; margin: 0; font-size: 14.5px; }
.map-block__hours dt { font-weight: 600; }
.map-block__hours dd { margin: 0; color: var(--muted); }
.map-block__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.map-block__ctas .button { flex: 1 1 160px; }

@media (min-width: 900px) {
	/* Left or right: the details and the map side by side. */
	.map-block--left .map-block__grid,
	.map-block--right .map-block__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); align-items: stretch; gap: 28px; }
	.map-block--right .map-block__text { order: 2; }
	.map-block--right .map-block__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); }
	.map-block--right .map-block__map { order: 1; }
	.map-block--left .map,
	.map-block--right .map { height: 100%; }
}