/*
 * Shared, page-independent sections — "Why Choose Grease Monkey" and
 * "Our Locations" (inc/why-choose-section.php, inc/locations-section.php).
 * Found identical on multiple old-site pages (About Us, Guarantee), so
 * factored into one reusable render function + one shared stylesheet
 * instead of duplicating both per page.
 *
 * Self-contained (own scoped vars at the section root, not depending on
 * any page's #gm-* wrapper) so it renders correctly on any page that
 * includes it — same reasoning as fleet-program.css/services.css, just
 * scoped to the section itself instead of a whole page.
 */

.gm-why-choose {
	--gm-ws-red: var(--awb-color2, #ed2e38);
	--gm-ws-white: #ffffff;
	--gm-ws-navy: #0a1930;
	margin: 64px 0;
	background: var(--gm-ws-navy);
	color: var(--gm-ws-white);
	padding: 48px 32px;
	border-radius: 6px;
}

.gm-why-choose h2 {
	color: var(--gm-ws-white);
	font-size: 2rem;
	margin: 0 0 12px;
}

.gm-why-choose__sub {
	color: #c9d2e0;
	max-width: 640px;
	line-height: 1.6;
	margin: 0 0 32px;
}

.gm-why-choose__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
}

.gm-why-choose__card h3 {
	font-size: 1.1rem;
	color: var(--gm-ws-white);
	margin: 0 0 8px;
}

.gm-why-choose__card p {
	color: #c9d2e0;
	font-size: 0.9rem;
	line-height: 1.55;
	margin: 0;
}

.gm-locations-directory {
	--gm-ld-red: var(--awb-color2, #ed2e38);
	--gm-ld-black: var(--awb-color1, #0a0a0a);
	--gm-ld-gray-md: #595959;
	margin: 64px 0;
}

.gm-locations-directory h2 {
	font-size: 2rem;
	margin: 0 0 12px;
}

.gm-locations-directory__sub {
	color: var(--gm-ld-gray-md);
	max-width: 640px;
	line-height: 1.6;
	margin: 0 0 12px;
}

.gm-locations-directory__count {
	font-weight: 700;
	margin: 0 0 24px;
}

.gm-locations-directory__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

.gm-locations-directory__state h3 {
	font-size: 1.1rem;
	border-bottom: 2px solid var(--gm-ld-red);
	padding-bottom: 6px;
	margin: 0 0 8px;
}

.gm-locations-directory__state ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gm-locations-directory__card {
	display: block;
	padding: 10px 0;
	border-bottom: 1px solid #eaeaea;
	text-decoration: none;
	color: var(--gm-ld-black);
}

.gm-locations-directory__card strong {
	display: block;
}

.gm-locations-directory__card span {
	display: block;
	font-size: 0.85rem;
	color: var(--gm-ld-gray-md);
}

@media (max-width: 600px) {
	.gm-why-choose {
		margin-left: -16px;
		margin-right: -16px;
		border-radius: 0;
		padding: 32px 20px;
	}
}