/**
 * Service pages (Design 03 "Bright Coastal"): templates/page-service.html with the sections from
 * inc/service-sections.php. Reuses the homepage system: .wrap containers, the section rhythm
 * (clamp(4.5rem, 9vw, 8rem)), Poppins headings, ruled rows, navy bands, the hero kicker, lead,
 * actions and Google badge, and the homepage process, FAQ, sister-company and estimate sections.
 * Only the service hero, intro, related cards and breadcrumbs are new.
 */

/* ------------------------------------------------------------------ hero (split: copy | photo) */
.svc-hero {
	padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(3rem, 6vw, 5.5rem);
	background: var(--navy-2);
	color: var(--on-dark);
}

.svc-hero__in {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}

.svc-hero .svc-hero__title {
	max-width: 18ch;
	font-size: clamp(2.1rem, 1.3rem + 2.7vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.035em;
	color: #fff;
}

.svc-hero__copy > .gbadge,
.svc-hero__copy > p:has(> .gbadge) {
	margin-top: 2.25rem;
}

.svc-hero__media {
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--navy);
}

.svc-hero__media img,
.svc-intro__media img,
.svc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Breadcrumbs ([hydro_breadcrumbs], hydro-core) on the navy hero. */
.hydro-crumbs {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.hydro-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hydro-crumbs li {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	color: var(--on-dark-muted);
}

.hydro-crumbs li + li::before {
	content: "/";
	content: "/" / ""; /* a visual separator only: screen readers already hear a list */
	margin: 0 0.65rem;
	color: var(--on-dark-muted);
}

/* W1: the approved light-hero breadcrumb (Figma R / Breadcrumb 729:68, 2–4 levels), for the Layout 01
   heroes of the 23-page build: [hydro_breadcrumbs class="hydro-crumbs--light"], plus
   "hydro-crumbs--center" inside the centred hero. Links cobalt, intermediate unpublished ancestors
   muted text, current page navy; the trail wraps at 390 / 320 px and never scrolls sideways. */
.hydro-crumbs--light {
	margin-bottom: 1rem;
	font-size: var(--hydro-breadcrumb);
	line-height: 1.8;
}

.hydro-crumbs--center ol {
	justify-content: center;
	text-align: center;
}

.hydro-crumbs--light li {
	min-width: 0;
	min-height: 1.5rem;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.hydro-crumbs--light li + li::before {
	margin: 0 0.375rem;
	color: var(--field-border);
}

.hydro-crumbs.hydro-crumbs--light a {
	color: var(--ocean);
	text-decoration-thickness: 1px;
}

.hydro-crumbs.hydro-crumbs--light a:focus-visible {
	outline-color: var(--ocean);
}

.hydro-crumbs--light [aria-current="page"] {
	color: var(--ink);
	font-weight: 500;
}

.hydro-crumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.hydro-crumbs a:hover {
	text-decoration-thickness: 2px;
}

.hydro-crumbs a:focus-visible {
	outline-color: var(--teal);
}

/* ------------------------------------------------------------------ intro + what's included */
.svc-intro {
	padding-block: clamp(4.5rem, 9vw, 8rem);
}

.svc-intro__top {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 7vw, 7.5rem);
	align-items: start;
}

.svc-intro .svc-intro__lede {
	margin-top: 1.75rem;
	font: 500 clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem)/1.55 var(--display);
	color: var(--ink);
}

.svc-intro__copy > p:not(.svc-intro__lede) {
	margin-top: 1.1rem;
	color: var(--muted);
}

.svc-intro__copy a {
	font-weight: 600;
	color: var(--ocean-ink);
}

.svc-intro__scope > .is-style-kicker {
	margin-bottom: 1.1rem;
}

.svc-scope {
	border-bottom: 1px solid var(--line);
}

.svc-scope > .svc-scope__item {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: 0.5rem 2rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--line);
}

.svc-scope h3 {
	font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
}

.svc-scope p {
	color: var(--muted);
}

.svc-intro__media {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-top: clamp(3.5rem, 7vw, 6rem);
}

.svc-intro__media > .wp-block-image {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--paper-2);
}

.svc-intro__media > .wp-block-image + .wp-block-image {
	aspect-ratio: auto;
}

.svc-intro__media.is-single {
	grid-template-columns: minmax(0, 1fr);
}

.svc-intro__media.is-single > .wp-block-image {
	aspect-ratio: 21 / 9;
}

/* ------------------------------------------------------------------ related services + areas */
.svc-related {
	padding-block: clamp(4.5rem, 9vw, 8rem);
	background: var(--paper);
}

.svc-related__head {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 1.25rem clamp(2.5rem, 7vw, 7.5rem);
	align-items: end;
}

.svc-related__head p {
	max-width: 36rem;
	color: var(--muted);
}

.svc-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.svc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.svc-card__media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: 0.6rem;
	background: var(--paper-2);
}

.svc-card__media img {
	transition: transform 0.8s var(--ease);
}

.svc-card:hover .svc-card__media img {
	transform: scale(1.04);
}

.svc-card h3 {
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
}

.svc-card h3 a {
	color: var(--ink);
	text-decoration: none;
}

/* The whole card is the click target. */
.svc-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.svc-card:hover h3 a {
	color: var(--ocean-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.svc-card p {
	color: var(--muted);
}

.svc-areas {
	margin-top: clamp(3.5rem, 7vw, 5.5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--line);
}

.svc-areas > .is-style-kicker {
	margin-bottom: 1rem;
}

.svc-areas .svc-areas__lede {
	max-width: 40rem;
	margin-bottom: 1.25rem;
	font: 500 clamp(1.05rem, 1rem + 0.3vw, 1.2rem)/1.55 var(--display);
	color: var(--ink);
}

.svc-areas > p:not(.svc-areas__lede, .is-style-kicker, .is-style-arrow-link) {
	margin-top: 0.35rem;
	color: var(--muted);
}

.svc-areas strong {
	font-weight: 600;
	color: var(--ink);
}

.svc-areas > .is-style-arrow-link {
	margin-top: 1.5rem;
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1099px) {
	.svc-hero__in,
	.svc-intro__top,
	.svc-related__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.svc-hero__media {
		aspect-ratio: 16 / 10;
		max-width: 46rem;
	}

	.svc-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.svc-scope > .svc-scope__item {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.svc-hero__media {
		aspect-ratio: 3 / 2;
	}

	.svc-intro__media {
		grid-template-columns: minmax(0, 1fr);
	}

	.svc-intro__media > .wp-block-image + .wp-block-image,
	.svc-intro__media.is-single > .wp-block-image {
		aspect-ratio: 3 / 2;
	}

	.svc-related__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.svc-card {
		display: grid;
		grid-template-columns: min(6rem, 28vw) minmax(0, 1fr);
		gap: 0.3rem 1.1rem;
		align-items: start;
	}

	.svc-card__media {
		grid-row: 1 / 3;
		margin: 0;
		aspect-ratio: 1;
	}
}