/* Locations V3 — centered header + 4 stat callouts + full-width map */
.loc.v3 {

	.loc-v3-desc {
		max-width: 80ch;
	}

	/* Stat callouts — 4 across, Figma 40px gap */
	.loc-v3-stt {
		--grd-sp-dyn: 2.222rem;
	}

	/* Number + suffix read as one word, baseline-aligned */
	.loc-v3-num-rw {
		column-gap: 0.111rem;
	}

	.loc-v3-num,
	.loc-v3-suf {
		color: var(--accent);
	}

	.loc-v3-suf {
		font-family: var(--fnt-t-1-ff);
		font-size: var(--fnt-t-1-s);
		font-weight: var(--fnt-t-1-w);
		line-height: var(--fnt-t-1-lh);
	}

	.loc-v3-lbl {
		color: var(--text-color);
	}

	/* Full-width map — frame paints a callout-to-accent gradient border.
	   The gradient lives on the wrapper's background and the map is inset by
	   the border width, so both the outer and inner corners stay rounded. */
	.loc-v3-map-frm {
		--loc-v3-bdr-w: 0rem;

		padding: var(--loc-v3-bdr-w);
		border-radius: var(--bdr-rds-crd);
		background: linear-gradient(to bottom, var(--callout), var(--accent));
	}

	/* Height follows the image's own 1440x542 ratio — global.css forces
	   object-fit: contain on .png inside <picture>, so cropping to a fixed
	   aspect-ratio here would letterbox rather than fill. */
	.loc-v3-map {
		display: block;
		width: 100%;
		border-radius: calc(var(--bdr-rds-crd) - var(--loc-v3-bdr-w));
		overflow: hidden;

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	@media screen and (max-width: 699px) {
		.loc-v3-map-frm {
			--loc-v3-bdr-w: 0.222rem;
		}

		.loc-v3-stt {
			--grd-sp-dyn: 1.667rem;
		}
	}
}