/**
 * Solar Ready Hub — Location pages (template-location.php)
 *
 * Deliberately thin. The counters, coverage panel, service cards, quote cards
 * and FAQ accordion are all existing components reused unchanged; the sticky
 * depot card reuses .srh-sd-panel from the service detail page. Only the hero,
 * the "also covered" list and a few section backgrounds are new here.
 */

.srh-location-page {
	display: block;
}

/* Section rhythm: hero tint → counters → why (white) → coverage (green)
   → services (grey) → reviews (white) → FAQ (white). */
.srh-loc-why,
.srh-loc-reviews,
.srh-loc-faq {
	background: var(--srh-white);
}

.srh-loc-services {
	background: #f7f7f7;
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

.srh-loc-hero {
	padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
	background: var(--srh-green-10);
}

.srh-loc-hero__grid {
	display: grid;
	align-items: center;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.srh-loc-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--srh-space-4);
}

.srh-loc-hero__title {
	max-width: 15ch;
	font-size: var(--srh-fs-h1);
}

.srh-loc-hero__text {
	max-width: 54ch;
	margin: 0;
	color: var(--srh-grey-500);
	font-size: var(--srh-fs-lead);
	line-height: var(--srh-lh-body);
}

.srh-loc-hero__pills {
	display: flex;
	flex-direction: column;
	gap: var(--srh-space-2);
	margin: var(--srh-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.srh-loc-hero__pills li {
	display: flex;
	align-items: center;
	gap: var(--srh-space-3);
	margin: 0;
	color: var(--srh-ink);
	font-size: var(--srh-fs-body);
	font-weight: var(--srh-fw-medium);
}

.srh-loc-hero__pills svg {
	flex: 0 0 auto;
	padding: 3px;
	border-radius: var(--srh-radius-circle);
	background: var(--srh-green);
	color: var(--srh-white);
}

.srh-loc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--srh-space-3);
	margin-top: var(--srh-space-2);
}

.srh-loc-hero__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--srh-radius-lg);
	box-shadow: var(--srh-shadow-md);
}

.srh-loc-hero__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 900px) {
	.srh-loc-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.srh-loc-hero__title {
		max-width: none;
	}
}

/* ==========================================================================
   2. Local numbers
   ========================================================================== */

.srh-stats--location {
	border-bottom: var(--srh-border);
}

.srh-loc-stats__note {
	max-width: 70ch;
	margin: var(--srh-space-6) 0 0;
	color: var(--srh-grey-500);
	font-size: var(--srh-fs-sm);
	line-height: 1.6;
}

/* ==========================================================================
   3. Why here
   ========================================================================== */

.srh-loc-why__grid {
	display: grid;
	align-items: start;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}

.srh-loc-why__body {
	display: flex;
	max-width: 70ch;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--srh-space-4);
}

.srh-loc-why__copy {
	color: var(--srh-grey-500);
	line-height: var(--srh-lh-body);
}

.srh-loc-why__copy > * + * {
	margin-top: var(--srh-space-4);
}

.srh-loc-why__copy h3 {
	margin-top: var(--srh-space-6);
	color: var(--srh-ink);
	font-size: var(--srh-fs-h5);
}

/* Depot address sits above the shared fact list in the sticky panel. */
.srh-loc-depot__address {
	display: flex;
	align-items: flex-start;
	gap: var(--srh-space-3);
	margin: 0;
	padding-bottom: var(--srh-space-4);
	border-bottom: 1px solid var(--srh-hairline);
	color: var(--srh-white);
	font-size: var(--srh-fs-sm);
	line-height: 1.5;
}

.srh-loc-depot__address svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--srh-yellow);
}

@media (max-width: 900px) {
	.srh-loc-why__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   4. Coverage — "also covered" list
   ========================================================================== */

.srh-loc-more {
	margin-top: var(--srh-space-8);
	padding-top: var(--srh-space-6);
	border-top: 1px solid var(--srh-on-dark-40);
}

.srh-loc-more__title {
	margin: 0 0 var(--srh-space-4);
	color: var(--srh-on-dark-70);
	font-size: var(--srh-fs-sm);
	font-weight: var(--srh-fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.srh-loc-more__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--srh-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.srh-loc-more__list li {
	margin: 0;
}

.srh-loc-more__list a,
.srh-loc-more__list span {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid var(--srh-on-dark-40);
	border-radius: var(--srh-radius-pill);
	color: var(--srh-white);
	font-size: var(--srh-fs-sm);
	text-decoration: none;
	transition: border-color var(--srh-transition), background-color var(--srh-transition);
}

.srh-loc-more__list a:hover,
.srh-loc-more__list a:focus-visible {
	border-color: var(--srh-yellow);
	background: rgba(255, 255, 255, 0.08);
	color: var(--srh-white);
}

/* ==========================================================================
   5. Local reviews
   ========================================================================== */

.srh-loc-reviews__grid {
	display: grid;
	gap: var(--srh-space-6);
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
}

.srh-loc-reviews__grid > li {
	display: flex;
	margin: 0;
	min-width: 0;
}

@media (max-width: 1024px) {
	.srh-loc-reviews__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.srh-loc-reviews__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   6. Services here
   ========================================================================== */

.srh-loc-services .srh-services-list__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.srh-loc-services .srh-services-list__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.srh-loc-services .srh-services-list__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}