/* Service Area page sections. See doc 07 §7.6. */

/* Intro, city cards and map: the cards sit under the text, beside the map, so each lights up its pin. */
.ads-area-intro__inner {
	display: grid;
	gap: var(--ads-space-7);
	align-items: center;
}

.ads-area-intro .ads-area-cities__list {
	margin-top: var(--ads-space-6);
}

.ads-area-intro .ads-heading {
	margin-bottom: var(--ads-space-5);
}

.ads-area-intro .ads-heading__title {
	text-wrap: balance;
}

/* The opening sentence reads strongest, so it isn't the muted lead color. */
.ads-area-intro .ads-lead {
	color: var(--ads-color-navy);
}

/* City cards: the headquarters stands out in navy, and the city lit up from the map gets a gold edge. */
.ads-area-cities__list {
	display: grid;
	gap: var(--ads-space-4);
	padding: 0;
	list-style: none;
}

.ads-area-city {
	display: flex;
	gap: var(--ads-space-4);
	align-items: center;
	padding: var(--ads-space-4);
	color: var(--ads-color-navy);
	background: var(--ads-color-bg);
	border: 1px solid var(--ads-color-border);
	border-radius: var(--ads-radius-lg);
	box-shadow: var(--ads-shadow-sm);
	transition: border-color var(--ads-transition), box-shadow var(--ads-transition), transform var(--ads-transition);
}

.ads-area-city.is-active {
	border-color: var(--ads-color-gold);
	box-shadow: var(--ads-shadow);
	transform: translateY(-2px);
}

.ads-area-city__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	color: var(--ads-color-gold);
	background: var(--ads-color-navy);
	border-radius: var(--ads-radius-lg) 0;
}

.ads-area-city__text {
	display: grid;
	gap: var(--ads-space-1);
	min-width: 0;
}

.ads-area-city__name {
	font-family: var(--ads-font-heading);
	font-size: var(--ads-fs-h4);
	font-weight: 700;
	line-height: var(--ads-lh-tight);
}

.ads-area-city__label {
	font-size: var(--ads-fs-small);
	font-weight: 600;
	line-height: var(--ads-lh-tight);
}

.ads-area-city--hq {
	color: var(--ads-color-bg);
	background: var(--ads-color-navy);
	border-color: var(--ads-color-navy);
	box-shadow: var(--ads-shadow);
}

.ads-area-city--hq .ads-area-city__icon {
	color: var(--ads-color-navy);
	background: var(--ads-color-gold);
}

.ads-area-city--hq .ads-area-city__label {
	color: var(--ads-color-gold);
}

/* A small link under the name; it opens Google Maps in a new tab. */
.ads-area-city__maps {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	min-height: 2.75rem;
	font-size: var(--ads-fs-small);
	font-weight: 600;
	color: var(--ads-color-navy);
	text-decoration: none;
}

.ads-area-city--hq .ads-area-city__maps {
	color: var(--ads-color-bg);
}

/* Plain until hover or keyboard focus, then a gold underline. The text keeps its color: gold is too pale on the white cards. */
.ads-area-city__maps:hover,
.ads-area-city__maps:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--ads-color-gold);
	text-underline-offset: .25em;
}

.ads-area-city--hq .ads-area-city__maps:hover {
	color: var(--ads-color-gold-light);
}

.ads-area-city--hq .ads-area-city__maps:focus-visible {
	outline-color: var(--ads-color-gold);
}

.ads-area-cities__suffix {
	max-width: none;
	margin-top: var(--ads-space-5);
	font-family: var(--ads-font-heading);
	font-size: var(--ads-fs-h4);
	font-weight: 600;
	color: var(--ads-color-navy);
}

@media (min-width: 600px) {
	.ads-area-cities__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ads-area-intro__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--ads-space-8);
	}
}

/* Beside the map the column is too narrow for two cards until 1280 px. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.ads-area-intro .ads-area-cities__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1920px) {
	.ads-area-intro .ads-texas-map {
		max-width: 56rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ads-area-city {
		transition: none;
	}

	.ads-area-city.is-active {
		transform: none;
	}
}