/**
 * Locations Map
 *
 * A heading and its legend on one row, then a full-width plate of pins. The fallback graphic
 * sits inside the frame rather than instead of it, so the live map paints over it and the band
 * is the same height either way.
 */

.module.locations-map .head {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-small) var(--gap);
	justify-content: space-between;
	margin-bottom: var(--text-spacing-xlarge);
}

.module.locations-map .head .text {
	max-width: calc(7 * var(--one-column-width) + 6 * var(--gap));
}

.module.locations-map .head :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

.module.locations-map .description {
	margin-top: var(--text-spacing-xsmall);
}

.module.locations-map .description > * {
	margin: 0;
}

.module.locations-map .description > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.locations-map .legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-small);
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.locations-map .legend > li {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xxsmall);
}

.module.locations-map .legend .dot {
	background: var(--pin, var(--sun));
	border-radius: 100%;
	flex: none;
	height: 12px;
	width: 12px;
}

/* Breaks the container the way the comp's plate does, and keeps its own height whether the
   live map has arrived or not. */
.module.locations-map .map {
	aspect-ratio: 1280 / 700;
	background: var(--linen);
	border-radius: 10px;
	margin-inline: var(--container-breakout-full);
	overflow: hidden;
	position: relative;
}

/* Direct child only. Google paints its tiles and pins into this same element as nested <img>,
   and an unscoped rule here sizes them to 100% of parents that have no size — every marker
   collapses to 0x0 — then hides the tiles outright once the map is live. */
/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {

	.module.locations-map .head {
		align-items: start;
		flex-direction: column;
	}

	.module.locations-map .head .text {
		max-width: none;
	}

	.module.locations-map .map {
		aspect-ratio: 4 / 3;
		margin-inline: 0;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	/* The plate reaches both screen edges and drops its corners with them: held to the container it
	   is a postcard of a map, and the pins are what the band is for. */
	.module.locations-map .map {
		border-radius: 0;
		margin-inline: var(--viewport-edge);
	}

	.module.locations-map .head {
		margin-bottom: var(--text-spacing-small);
	}

	.module.locations-map .legend {
		gap: var(--text-spacing-xxsmall);
	}

}