/* Block: tto-region-map — VA regional map + region-detail selector card */
.region-map { padding-block: var(--cmcf-section-pad); }
.region-map--inner {
	display: grid;
	grid-template-columns: 490px 1fr;
	gap: 0 var(--cmcf-col-gap);
	align-items: start;
}

/* Selector card (left) */
.region-map--card {
	background: var(--cmcf-white);
	border-radius: 12px;
	padding: 24px 28px 28px;
	color: var(--cmcf-black);
	align-self: start;
	/* The full-width map figure pulls up under the card (as in the design); the
	   map image has an opaque band-green background, so the card must stack above it. */
	position: relative;
	z-index: 2;
}
.region-map--panel { display: none; }
.region-map--panel.is-active { display: block; }
.region-map--panel-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--cmcf-secondary);
}
.region-map--panel-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--cmcf-font-heading);
	font-size: 24px;
	color: var(--cmcf-primary);
	flex: 1 1 auto;
	justify-content: center;
}
.region-map--badge {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--cmcf-secondary);
	border-radius: 50%;
	font-family: var(--cmcf-font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--cmcf-primary);
}
.region-map--nav {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 1px solid var(--cmcf-secondary);
	background: var(--cmcf-white);
	color: var(--cmcf-primary);
	border-radius: 6px;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .2s ease, color .2s ease;
}
.region-map--nav:hover { background: var(--cmcf-secondary); color: var(--cmcf-deep); }
.region-map--label {
	font-family: var(--cmcf-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 14px;
	margin: 16px 0 5.6px;
	color: var(--cmcf-black);
}
.region-map--card ul { list-style: none !important; margin: 0; padding: 0; }
.region-map--card li { list-style: none; margin-bottom: 4px; padding-left: 0; }
.region-map--card li::marker { content: none; }
.region-map--cta { margin-top: 20px; }

/* Right column: intro + map */
.region-map--right { color: var(--cmcf-white); }
.region-map--eyebrow { color: var(--cmcf-accent); }
.region-map--heading { color: var(--cmcf-white); font-size: var(--cmcf-fs-h1); margin: 0 0 16px; }
.region-map--body { max-width: 560px; }
.region-map--body a { color: var(--cmcf-accent); text-decoration: underline; font-weight: 600; }
/* Map spans both grid columns; per design it is 1070px wide, offset 75px from the
   container's left edge, and pulls up under the card's bottom (design y=430 vs row-1
   bottom ~510). */
.region-map--figure {
	position: relative;
	grid-column: 1 / -1;
	width: min(1070px, 100%);
	margin: -61px 0 0 75px;
}
.region-map--figure img { display: block; width: 100%; height: auto; }
.region-map--hotspot {
	position: absolute;
	width: 50px;
	height: 50px;
	transform: translate(-50%, -50%);
	border: none;
	background: transparent;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
}
.region-map--hotspot:hover,
.region-map--hotspot.is-active { box-shadow: 0 0 0 3px var(--cmcf-white); }

@media (max-width: 980px) {
	.region-map--inner { grid-template-columns: 1fr; }
	.region-map--card { max-width: 490px; }
	.region-map--figure { width: 100%; margin: 24px 0 0; }
}