/* =========================================================
   Service pages (template-parts/global/service-page.php)

   Live lays the trust block out as a narrow copy column beside one tall
   photograph, then a two-by-two grid of shots underneath. The column widths
   are live's: 654 / 714 with a 72px gutter, and the grid images sit on an
   11px gutter, so the two rhythms are deliberately different.
   ========================================================= */
.sp-service { background: #000; }

.sp-service__top {
	display: grid;
	grid-template-columns: 654fr 714fr;
	column-gap: 72px;
	align-items: stretch;
}
.sp-service__copy .sp-h2 { line-height: 1.05; margin-bottom: 1.5rem; }
.sp-service__copy p { line-height: 1.65; margin-bottom: 1.1rem; }
.sp-service__copy p:last-child { margin-bottom: 0; }
.sp-service__copy a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sp-service__copy a:hover { color: var(--primary-color); }

.sp-service__lead { margin: 0; }
.sp-service__zoom { display: block; position: relative; overflow: hidden; }
.sp-service__zoom img { transition: transform .45s ease, opacity .3s ease; }
.sp-service__zoom:hover img { transform: scale(1.04); opacity: .9; }
.sp-service__zoom:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
/* Same magnifier badge the gallery grid uses, so the photos read as openable. */
.sp-service__zoom::after {
	content: "";
	position: absolute; right: .85rem; bottom: .85rem;
	width: 2.4rem; height: 2.4rem; border-radius: 50%;
	background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 1.3rem no-repeat;
	opacity: 0; transform: scale(.85);
	transition: opacity .3s ease, transform .3s ease;
}
.sp-service__zoom:hover::after,
.sp-service__zoom:focus-visible::after { opacity: 1; transform: scale(1); }

/* Live runs the lead photo to the full height of the copy beside it, so the
   photo's bottom edge lands one grid gutter above the shots. The ::before
   spacer keeps live's 714/527 as a floor for short copy; the photo itself is
   taken out of flow so it can never size the row back. */
.sp-service__lead { position: relative; }
.sp-service__lead::before { content: ""; display: block; padding-top: calc(527 / 714 * 100%); }
.sp-service__lead .sp-service__zoom { position: absolute; inset: 0; }
.sp-service__lead img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.sp-service__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px;
	margin-top: 11px;
}
.sp-service__shot { margin: 0; }
.sp-service__shot img { width: 100%; display: block; object-fit: cover; }
.sp-service__shot .sp-service__zoom img { aspect-ratio: inherit; }
/* Live runs the first grid row shallower than the second. Scoped off the
   column gallery below, where every photo carries its own height. These two
   are only the flat grid's own rhythm: they set --shot-ratio rather than
   aspect-ratio, so a shot that declares a 'ratio' writes the variable inline
   and keeps its own height whichever row it lands in. Encapsulation's top row
   is live's 492 that way. */
.sp-service__grid:not(.sp-service__grid--columns) > .sp-service__shot:nth-child(-n+2) { --shot-ratio: 714 / 367; }
.sp-service__grid:not(.sp-service__grid--columns) > .sp-service__shot:nth-child(n+3) { --shot-ratio: 714 / 450; }
/* An odd last photograph has no partner, so it runs the full width instead of
   leaving a hole beside it, on live's 1440/534 band -- Encapsulation's three
   shots, two up and one across. A page wanting a different band declares its
   own 'ratio'. */
.sp-service__grid:not(.sp-service__grid--columns) > .sp-service__shot:nth-child(odd):last-child {
	grid-column: 1 / -1;
	--shot-ratio: 1440 / 534;
}
.sp-service__grid:not(.sp-service__grid--columns) > .sp-service__shot .sp-service__zoom,
.sp-service__grid:not(.sp-service__grid--columns) > .sp-service__shot img { aspect-ratio: var(--shot-ratio); }

/* ---------------- Commercial's shape ----------------
   No lead photograph, so the copy runs the full content width and the
   photographs fall into two declared columns underneath -- four left, three
   right on live, each keeping its own height. Live leaves 70px between the
   last paragraph and the first photo. */
.sp-service__top--full { grid-template-columns: 1fr; }
.sp-service__top--full + .sp-service__grid { margin-top: clamp(2rem, 3.8vw, 70px); }

.sp-service__grid--columns { align-items: start; }
.sp-service__col { display: grid; gap: 11px; align-content: start; }
/* Live's common shape; a photo that breaks it declares its own --shot-ratio. */
.sp-service__shot { --shot-ratio: 714 / 492; }
.sp-service__grid--columns .sp-service__zoom,
.sp-service__grid--columns .sp-service__shot img { aspect-ratio: var(--shot-ratio); }

/* ---------------- Closing strip ----------------
   Residential and Commercial close on a plain paragraph; Planning & Design
   closes on a call to action instead -- a heading, one larger line and the
   same two buttons, on the same charcoal band. The strip is not .sp-dark, so
   the heading has to be told it is on a dark ground. Live sets 43px under the
   heading, the figure .sp-final already uses. */
.sp-service-strip {
	background: #313130;   /* charcoal, matches live */
	color: rgba(255, 255, 255, .88);
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
	text-align: center;
}
.sp-service-strip__text { margin: 0 auto; max-width: 1440px; }
/* Roof Edge Protection closes on two paragraphs; live sets 17px between. */
.sp-service-strip__text + .sp-service-strip__text { margin-top: 17px; }
/* Scoped off the CTA variant, whose line is live's larger lead -- .lead-lg,
   which global.css already sizes at live's 23.9px. */
.sp-service-strip:not(.sp-service-strip--cta) .sp-service-strip__text {
	font-size: 1.0625rem;
	line-height: 1.6;
}
.sp-service-strip__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 1.75rem;
}

.sp-service-strip--cta .sp-h2 { color: #fff; margin-bottom: 43px; }

/* Buttons and nothing else -- live keeps them on the body's black, one grid
   gutter under the last photograph, so the band disappears and the section
   above gives up its bottom padding to close that gap. */
.sp-service:has(+ .sp-service-strip--bare) { padding-bottom: 0; }
.sp-service-strip--bare { background: #000; padding-top: 11px; }
.sp-service-strip--bare .sp-service-strip__actions { margin-top: 0; }

@media (max-width: 991.98px) {
	.sp-service__top { grid-template-columns: 1fr; row-gap: 2rem; }
	.sp-service__lead::before { display: none; }
	.sp-service__lead .sp-service__zoom { position: relative; inset: auto; }
	.sp-service__lead img { aspect-ratio: 16 / 10; }
}
@media (max-width: 575.98px) {
	.sp-service__grid { grid-template-columns: 1fr; gap: 8px; }
	.sp-service__col { gap: 8px; }
	.sp-service-strip--cta .sp-h2 { margin-bottom: 1.5rem; }
	.sp-service__grid--columns .sp-service__shot { --shot-ratio: 16 / 10; }
	/* One photo per row, so the odd last shot is no longer a wide band across
	   two columns -- it takes the same shape as the shots above it. Written
	   out in full because a media query adds no specificity of its own, and
	   this has to outweigh the same selector further up. */
	.sp-service__grid:not(.sp-service__grid--columns) > .sp-service__shot:nth-child(odd):last-child { --shot-ratio: 16 / 10; }
}