/**
 * Service Area Styles
 *
 * Grid of 30+ communities served.
 */

.service-area {
	padding: var(--section-padding) 0;
	margin-top: 0;
	border: 0;
}

.service-area h2 {
	margin-bottom: 0.75rem;
}

.service-area-intro {
	color: var(--wp--preset--color--text);
	margin-bottom: var(--section-header-spacing);
}

.service-area-grid {
	gap: 0.5rem 1rem;
	max-width: 800px;
	margin: 0 auto 1.5rem;
}

.area-link {
	margin: 0;
}

.area-link a {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--neutral);
	border-radius: 100px;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.area-link a:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.service-area-cta {
	margin: 0;
}

.service-area-cta a {
	font-weight: 700;
}

@media (max-width: 767px) {
	.service-area-grid {
		padding: 0 var(--content-padding-mobile);
		gap: 0.5rem;
	}

	.area-link a {
		padding: 0.375rem 0.875rem;
		font-size: 0.875rem;
	}
}

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