/* Component: Nearby areas — Figma "ServiceAreas" on the Location page */

/* Left third: text + counties; right two thirds: the map. */
.spc-nearby {
	padding-block: 64px;
}

.spc-nearby__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	align-items: center;
}

.spc-nearby__content {
	display: flex;
	flex-direction: column;
	gap: 64px;
	/* Left edge follows the 1408px content column: this cell is a third of
	   the section, so (section − 1408) / 2 = 150% − 704px (256px at 1920). */
	padding: 128px 64px 128px max(64px, calc(150% - var(--spc-content) / 2));
}

.spc-nearby__map-wrap {
	display: flex;
	justify-content: center;
	padding-inline: 64px;
}

.spc-nearby__map {
	position: relative;
	width: 100%;
	max-width: 1136px;
}

.spc-nearby__map img {
	display: block;
	width: 100%;
	height: 100%;
}

.spc-nearby__pin {
	position: absolute;
	transform: translate(-50%, -100%);
}

.spc-nearby__pin .spc-pin {
	width: 44px;
	height: 56px;
}

/* County list: the button sits next to the last county name (Figma "inactive" variant). */
.spc-nearby .spc-areas__head .spc-btn {
	flex: 0 0 auto;
}

/* 1440 */
@media (max-width: 1919px) {
	.spc-nearby {
		padding-block: 0;
	}
}

/* 1240: map aligned to the right edge. */
@media (max-width: 1439px) {
	.spc-nearby__content {
		padding: 64px;
	}

	.spc-nearby__map-wrap {
		justify-content: flex-end;
	}
}

/* 1024 */
@media (max-width: 1239px) {
	.spc-nearby__content {
		padding: 64px 32px;
	}

	.spc-nearby__map-wrap {
		padding-inline: 32px;
	}
}

/* 768: two equal columns. */
@media (max-width: 1023px) {
	.spc-nearby__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 360: text and counties first, map under them. */
@media (max-width: 767px) {
	.spc-nearby {
		padding-block: 32px;
	}

	.spc-nearby__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.spc-nearby__content {
		gap: 32px;
		padding: 0 var(--spc-gutter);
	}

	.spc-nearby__map-wrap {
		padding-inline: var(--spc-gutter);
	}
}