/* =====================================================================
   components/service-page.css — the blocks both service designs share.

   The Solar and Electrical listing/detail designs draw three constructions
   identically, so they live here rather than in either page stylesheet:

     .service-detail   the alternating photo + copy band
                       (template-parts/global/service-detail.php), plus the
                       --single variant used on a service's own page
     .service-links    the "explore our other services" row of icon + label
                       links at the foot of every service page
     .service-body     the editor's post content, when a service has any

   Page-specific bands (what's included, FAQs, options, benefits) stay in
   assets/css/pages/{solar,electrical}-services.css.
   ===================================================================== */

/* ---------------------------------------------------------------
   Service detail sections — alternating bands
   --------------------------------------------------------------- */
/*
 * These bands run a touch tighter than --section-spacing. Derived by measurement
 * rather than assumption: the row is vertically centred, so the photo frame's
 * centre gives the band's centre, and the CTA button's bottom edge gives the copy
 * column's bottom — together they fix the padding at 98.5–100px across all ten
 * detail bands in the two listing exports, against the 120px section default.
 */
.service-detail {
	padding-block: 6.1875rem;
	background-color: var(--background-color);
}

.service-detail--alt {
	background-color: var(--background-alt);
}

/*
 * The design's two columns are 794.5px wide with a 65px gutter, not Bootstrap's
 * 24px: in every export the photo's left edge is 125.5 and the copy column's
 * text starts at 985, which only works at that gutter. It also makes the frame
 * exactly the 795px the aspect ratios below are quoted against — at gx-4 the
 * column is 827px and the photo renders 32px too wide, which is what threw the
 * "how it works" band 13px short.
 */
.service-detail .row {
	--bs-gutter-x: 4.0625rem;
}

/*
 * Both listing exports draw this photo frame at 795 x 480 — the same frame as
 * About's. (An earlier 795/506 measured the frame's drop shadow as part of the
 * photo.)
 */
.service-detail__frame {
	aspect-ratio: 795 / 480;
}

/*
 * 17px on a 29px baseline, not the 16px/1.8 body default. Proved by the wrap,
 * which is the one measure a substituted font cannot muddy: at 16px the second
 * paragraph of the "how it works" copy collapses from two lines to one and the
 * checklist below it drifts up to 70px out of position, while at 17px all eleven
 * text rows in that column land within 4.5px of the export. The band height is
 * identical either way — it is set by the photo — so only a row-by-row
 * comparison catches this.
 */
.service-detail .section-intro {
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* 14.5px below the eyebrow, not the global 20px: the export leaves 29px from
   its baseline to the heading's cap where 20px produces 34.5px. */
.service-detail .section-eyebrow {
	margin-bottom: .90625rem;
}

/*
 * Every export draws this heading smaller than a centred section title:
 * measured by lowercase x-height against the rendered page it is 39.4px on the
 * solar inner page and 42px on the listings, against the 52px --h2-size.
 */
.service-detail__title {
	margin-bottom: 1.25rem;
	/* Expressed against --h2-size so it follows every breakpoint step in
	   media.css instead of needing its own. */
	font-size: calc(var(--h2-size) * .77);
	line-height: 1.21;
}

.service-detail__cta {
	margin-top: 2.25rem;
}

/* -- The "how it works" band on a service's own page -- */
/*
 * The two inner-page designs place this band differently, so the shared value is
 * the solar one and the electrical page overrides it: measuring the photo's edges
 * against the band's (the photo is the taller column in both exports) gives
 * 83/99.5 on the solar page and 96/96.5 on the electrical one.
 * The photo is shallower than a listing detail's: 795 x 439.5 against 795 x 480.
 */
.service-detail--single {
	padding-block: 5.1875rem 5.6875rem;
}

.service-detail--single .service-detail__frame {
	aspect-ratio: 1590 / 877;
}

/*
 * Centred section titles on a service page measure ~46px by x-height against
 * the rendered 52px --h2-size, on a 48.5px baseline. Every one of these
 * sections exists only on a service page, so the rule can live here and serve
 * both designs instead of being repeated in each page stylesheet.
 */
.options-section .section-title,
.benefits-section .section-title,
.more-services-section .section-title {
	font-size: calc(var(--h2-size) * .885);
	/* 47.5px between the two lines' cap tops in the export, against 50 at 1.06. */
	line-height: 1.032;
}

/* ---------------------------------------------------------------
   Explore our other services — a row of icon + label links
   --------------------------------------------------------------- */
.more-services-section {
	background-color: var(--background-color);
	/* Both designs leave noticeably more room below this last band than above it. */
	padding-bottom: 8.5rem;
}

.service-links {
	display: grid;
	/*
	 * Five across at the design's width, dropping a column at a time below it.
	 * The 308px track is the width the longest label ("Solar System Upgrades")
	 * needs to stay on one line as drawn, so the row re-flows instead of letting
	 * labels wrap — auto-fit does that without a rule per breakpoint.
	 */
	grid-template-columns: repeat(auto-fit, minmax(19.25rem, 1fr));
	/* The exports' gap is 17.5–22.5px; 20 buys the last couple of pixels the
	   longest label needs, and is the change no-one can see. */
	gap: 1.25rem;
	padding: 0;
	margin: 1.25rem 0 0;
	list-style: none;
}

.service-link {
	display: flex;
	align-items: center;
	gap: .75rem;
	height: 100%;
	/* Trimmed from the exports' 20px/15px by a few pixels: it buys the ~6px the
	   longest label ("Solar System Upgrades") needs to stay on one line at five
	   across in Poppins, which is wider than the design's Satoshi. */
	padding: 1.09375rem 1.125rem;
	background: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.service-link:hover,
.service-link:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(255, 158, 69, .45);
	box-shadow: var(--shadow-sm);
}

.service-link__label {
	font-family: var(--font-secondary);
	/* 18px: the exports measure 18.6px by cap height, and it is the largest step
	   that keeps "Solar System Upgrades" on one line at five across, as drawn. */
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--heading-color);
}

/* ---------------------------------------------------------------
   Service single — editor content
   --------------------------------------------------------------- */
.service-body {
	background-color: var(--background-color);
}

.service-body .entry-content > * + * {
	margin-top: 1.25rem;
}

.service-body .entry-content h2,
.service-body .entry-content h3 {
	margin-top: 2.5rem;
}

.service-body .entry-content ul,
.service-body .entry-content ol {
	padding-left: 1.25rem;
}

.service-body .entry-content li + li {
	margin-top: .5rem;
}