/***************************************************************************************************
 * Module: Impact Map
 *
 * A still of the map beside a panel of central figures. The comp runs the pair wider than the
 * container — map 882 and panel 430 against a 1196 column — so the grid is the module's own rather
 * than the page's twelve.
 **************************************************************************************************/

.module.impact-map .container > .heading-3 {
	margin-bottom: var(--text-spacing-medium);
}

.module.impact-map .filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xsmall);
	margin-bottom: var(--text-spacing-large);
}

.module.impact-map .filter select {
	appearance: none;
	background-color: var(--white);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" fill="%23404041"><path d="M1 1l5 5 5-5"/></svg>');
	background-position: right 20px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	border: 1px solid var(--field-border);
	border-radius: 999px;
	cursor: pointer;
	font-size: calc(15rem / 16);
	min-width: calc(180rem / 16);
	padding: calc(13rem / 16) calc(44rem / 16) calc(13rem / 16) calc(20rem / 16);
}

/* The panel holds the comp's 430 and the map takes whatever is left. Sharing the row
   proportionally instead let the cards narrow until the figures broke across lines — a card is
   sized by the longest number it has to carry, and the map is the part that can give. */
.module.impact-map .grid {
	align-items: start;
	display: grid;
	gap: var(--gap);
	grid-template-columns: minmax(0, 1fr) calc(430rem / 16);
}

/* The live map paints into this frame over the graphic, which is what shows while it loads and
   where it cannot. */
.module.impact-map .map {
	aspect-ratio: auto;
	background: var(--linen);
	border-radius: 10px;
	height: 100%;
	min-height: 320px;
	overflow: hidden;
	position: relative;
}

/* Direct child only: Google paints its tiles and pins into the same element as nested <img>. */
.module.impact-map .map > img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.module.impact-map .cards {
	display: grid;
	gap: var(--text-spacing-small);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* `display: flex` on a class selector outranks the UA's [hidden] rule, so a paged-out card would
   otherwise stay on screen. */
.module.impact-map .cards > li[hidden] {
	display: none;
}

.module.impact-map .cards > li {
	background: var(--white);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	padding: var(--text-spacing-large) var(--text-spacing-small);
	text-align: center;
}

.module.impact-map .cards .mark {
	align-items: center;
	align-self: center;
	background: var(--petal-40);
	border-radius: 100%;
	display: flex;
	height: calc(48rem / 16);
	justify-content: center;
	margin-bottom: var(--text-spacing-xsmall);
	width: calc(48rem / 16);
}

.module.impact-map .cards .mark svg,
.module.impact-map .cards .mark img {
	height: calc(24rem / 16);
	width: calc(24rem / 16);
}

.module.impact-map .cards .figure {
	margin: 0;
}

.module.impact-map .cards .caption {
	margin: 0;
}

.module.impact-map .pager {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xsmall);
	justify-content: flex-end;
	margin-top: var(--text-spacing-large);
}

.module.impact-map .pager .eyebrow {
	margin: 0;
}

.module.impact-map .pager .arrows {
	display: flex;
	gap: calc(12rem / 16);
}

.module.impact-map .pager button[disabled] {
	opacity: .4;
	pointer-events: none;
}

/***************************************************************************************************/

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

	.module.impact-map .grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The label on the container's left edge and the arrows on its right, rather than the pair
	   centred together — centred, the row reads as one object floating in the middle of a band it
	   does not belong to. */
	.module.impact-map .pager {
		justify-content: space-between;
	}

}

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

	.module.impact-map .filters {
		flex-direction: column;
	}

	.module.impact-map .filter select {
		width: 100%;
	}

	/* One column, so the grid's own 40px column gap becomes a row gap it never asked for. The map
	   and the card under it sit the same distance apart as the cards do. */
	.module.impact-map .grid {
		gap: var(--text-spacing-small);
	}

	.module.impact-map .cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.module.impact-map .cards > li {
		padding: var(--text-spacing-medium) var(--text-spacing-small);
	}

	.module.impact-map .cards .mark {
		margin-bottom: var(--text-spacing-xxsmall);
	}

}

.module.impact-map .empty {
	color: var(--charcoal);
	margin: 0;
}