/**
 * Contact map band (template-parts/contact/contact-map.php).
 *
 * A .band like the hero and the SLA row: inset from the viewport, 6px radius,
 * overflow hidden, so full-width media reads the same way everywhere.
 *
 * The height is a min-height FLOOR derived from the band's own width, never
 * aspect-ratio: the house rule, and here it also means a Complianz consent
 * placeholder, which is taller than the map on a phone, can grow the box
 * rather than being clipped by it.
 */

.contact-map {
	/* The page inset, NOT section padding. Every other page's last section
	   carries its spacing as padding INSIDE itself and so its box ends flush
	   against the footer; a section-sized margin here put 100px of white
	   under the map that no other page has. The hero band uses this same
	   inset, which is what makes a full-bleed band read as inset rather than
	   as a section. */
	margin-block: var(--page-inset);
	/* 3:1 of the band width. The band is the viewport less the page inset,
	   capped at --band-max, so this is ~437px at a 1312 container. */
	min-height: min(calc((100vw - 2 * var(--page-inset)) / 3), calc(var(--band-max) / 3));
}

.contact-map__frame {
	display: block;
	width: 100%;
	/* Fills the band, whose floor is set above; inherits any extra height a
	   consent placeholder forces. */
	height: 100%;
	min-height: inherit;
	border: 0;
}

@media (max-width: 767px) {
	.contact-map {
		/* 4:3 instead: a 3:1 strip is a letterbox on a phone and shows no
		   context around the pin. */
		min-height: calc((100vw - 2 * var(--page-inset)) * 0.75);
	}
}