/* =========================================================
   Solar Scaffolding (page-solar-scaffolding.php)

   Live builds this page out of alternating copy/photograph rows rather than
   the shared service-page shape: text left against a 720x402 photograph,
   then the same pair reversed, then a narrow 360x402 portrait beside the
   "Why choose us" list. Between the first two sits a plain column of three
   service blurbs at live's 1020px measure.
   ========================================================= */
/* Live paints the body band charcoal and keeps black for the closing call to
   action alone -- the same two tones the service pages use, in the same
   order. */
.sp-solar { background: #313130; }

/* Live's type on this page: section headings at the h2 scale, the three
   service blurbs at h3, and everything else -- body copy, banner intro,
   closing line and footnote -- at a flat 17px. */
.sp-solar__copy p { font-size: 1.0625rem; }

.sp-solar__row {
	display: grid;
	grid-template-columns: 660fr 720fr;
	column-gap: 60px;
	align-items: start;
}
/* Live alternates which side the photograph falls on. */
.sp-solar__row--reverse { grid-template-columns: 720fr 660fr; }
/* The closing row's portrait is half the width of the other two. */
.sp-solar__row--narrow { grid-template-columns: 1020fr 360fr; }

.sp-solar__block + .sp-solar__block { margin-top: clamp(2rem, 3.4vw, 62px); }

.sp-solar__media img {
	width: 100%;
	display: block;
	object-fit: cover;
	aspect-ratio: 720 / 402;
}
.sp-solar__row--narrow .sp-solar__media img { aspect-ratio: 360 / 402; }

.sp-solar__copy .sp-h2 { line-height: 1.05; margin-bottom: 1.25rem; }
.sp-solar__copy p { line-height: 1.65; margin-bottom: 1.1rem; }
.sp-solar__copy p:last-child { margin-bottom: 0; }
.sp-solar__copy a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sp-solar__copy a:hover { color: var(--primary-color); }

/* ---------------- Our Solar Scaffolding Services ----------------
   A plain column, no photograph; live keeps it to 1020px. */
.sp-solar__services { max-width: 1020px; }
.sp-solar__services > .sp-h2 { margin-bottom: 1.5rem; }
.sp-solar__service + .sp-solar__service { margin-top: 1.75rem; }
.sp-solar__service .sp-h3 { color: #fff; line-height: 1.1; margin-bottom: .6rem; }

/* ---------------- Why choose Roman Scaffolding? ----------------
   Live's bullets, on the same measure the About page uses for its list. */
.sp-solar__list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .8rem; }
.sp-solar__list li { line-height: 1.5; font-size: 1.0625rem; }
.sp-solar__list li::marker { color: rgba(255, 255, 255, .7); }

/* ---------------- Closing call to action ----------------
   Live keeps this on the body's black rather than a band of its own. */
.sp-solar-cta { background: #000; text-align: center; padding-block: clamp(2.5rem, 3.3vw, 60px) clamp(2.5rem, 4vw, 3.75rem); }
/* Live sets this closing heading at its h1 scale. It stays an <h2> element so
   the page keeps a single level 1, and only borrows the size. */
.sp-solar-cta .sp-h2 {
	color: #fff;
	font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.43rem);
	line-height: 1.05;
	margin-bottom: 1.5rem;
}
.sp-solar-cta__text { max-width: 835px; margin: 0 auto 1.75rem; font-size: 1.0625rem; line-height: 1.5; }
.sp-solar-cta__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sp-solar-cta__text a:hover { color: var(--primary-color); }
.sp-solar-cta .sp-footnote { margin-top: 1.1rem; font-size: 1.0625rem; font-style: italic; }

/* The banner's intro pair is live's ordinary 17px copy, not the 23.9px lead
   the tall banner gives a single line. */
.page-banner--solar .page-banner__text { font-size: 1.0625rem; line-height: 1.4; max-width: 714px; }

@media (max-width: 991.98px) {
	.sp-solar__row,
	.sp-solar__row--reverse,
	.sp-solar__row--narrow { grid-template-columns: 1fr; row-gap: 1.75rem; }
	/* Stacked, the photograph follows the copy it belongs to on every row. */
	.sp-solar__row--reverse .sp-solar__media,
	.sp-solar__row--narrow .sp-solar__media { order: 2; }
	.sp-solar__media img,
	.sp-solar__row--narrow .sp-solar__media img { aspect-ratio: 16 / 10; }
	.sp-solar__services { max-width: none; }
}