/* =====================================================================
   pages/electrical-services.css — Electrical Services archive + single.

   The light service card, the alternating detail band, the cross-link row and
   the quote block are all components; see assets/css/components/ —
   service-card.css and service-page.css in particular. Only what is specific
   to these two pages lives here.
   ===================================================================== */

/* ===============================================================
   Archive (Electrical Service-Listing-Page.png)
   =============================================================== */

/* The headline is broken by the editor's own line break; the measure only has
   to be wide enough that Poppins does not introduce a second one. The design's
   longest line ("complete electrical team") draws 735px wide. */
.post-type-archive-electrical_service .page-hero {
	--page-hero-measure: 52rem;
}

/*
 * Unlike the Solar listing, this design splits the grid across two bands: the
 * intro sits on the tinted cream (436px tall, ~118/114 padding) and the cards
 * below it on plain cream. So they are two sections rather than one.
 */
/* 103px of padding, not the 120px section default — the same tighter rhythm the
   detail bands use, measured from the band's 436px height against its head. */
.services-intro-section {
	padding-block: 6.4375rem;
	background-color: var(--background-alt);
}

/* The two-line centred title measures ~46px by x-height on a 52px baseline, and
   the design leaves 32.5px of ink-to-ink air below it against the 47.5px the
   global 24px margin produces. */
.services-intro-section .section-title {
	margin-bottom: 1rem;
	font-size: calc(var(--h2-size) * .885);
	line-height: 1.13;
}

/*
 * The card band carries its own padding rather than --section-spacing: the
 * export measures 68.5px above the first row and 69.5px below the last, because
 * the tinted band above it already supplies the section's top rhythm.
 */
.services-grid-section {
	padding-block: 4.3125rem;
	background-color: var(--background-color);
}

/* ===============================================================
   Single service page (Electrical-Service-Inner-Page.png)
   This design runs the same tighter rhythm as the solar inner page: ~100px
   bands against the listing's ~120px.
   =============================================================== */
.single-electrical_service {
	--section-spacing: 6.25rem;
}

/* -- Hero -- */
/* The design's hero band is 609px tall. */
/*
 * The copy is not centred on this hero: the design sits it 19.75px below the
 * band's centre, where the component's 80/64 padding puts it 8px below. The
 * asymmetry, not the total, is what positions it.
 */
.single-electrical_service .page-hero {
	min-height: 38.0625rem;
	padding-block: 6.1875rem 4rem;
	--page-hero-measure: 52rem;
}

/*
 * This hero's internal rhythm, from the export's ink-to-ink gaps: 14px from the
 * eyebrow's baseline to the headline's cap, 27.5px from the headline to the
 * paragraph, 28px from the paragraph to the buttons. The component's defaults
 * suit the About and Contact heroes, which leave more air below the paragraph.
 */
.single-electrical_service .page-hero__eyebrow {
	margin-bottom: 0;
}

.single-electrical_service .page-hero__title {
	margin-bottom: 1.375rem;
}

.single-electrical_service .page-hero__text {
	margin-bottom: 1.3125rem;
}

/* -- Cross-links -- */
/*
 * Five across, as drawn. The design's gap is 17.5px, and its longest label
 * ("Alarm System Installation") draws in 223px of Satoshi where Poppins needs
 * 237 — so the pill's inner spacing is shaved and the label set one step down to
 * keep it on the single line the design gives it. This override disappears when
 * the licensed heading face lands; see the note on --font-secondary in global.css.
 */
.single-electrical_service .service-links {
	gap: 1.09375rem;
}

.single-electrical_service .service-link {
	gap: .625rem;
	padding-inline: .875rem;
}

.single-electrical_service .service-link__label {
	font-size: 1.0625rem;
}

/* -- How it works -- */
/* This export sits the band's photo 96px from each of the band's own edges,
   where the solar one uses 83/99.5; see components/service-page.css. */
.single-electrical_service .service-detail--single {
	padding-block: 6rem;
}

/* -- Benefits grid -- */
/*
 * Tinted here, between the plain-cream "how it works" band above and the quote
 * block below — the reverse of the solar inner page, which tints the quote.
 * 95px of padding: the export leaves 96.5px below the cards and 108px above the
 * eyebrow's cap, against 101.5/113.5 at the page's 100px default.
 */
.benefits-section {
	padding-block: 5.9375rem;
	background-color: var(--background-alt);
}


/* ---------------------------------------------------------------
   In-page service navigation
   The service cards link to the detail sections on this page. This
   stylesheet is only enqueued here, so the smooth scroll stays scoped
   to this page. The site header is position: relative, so no
   scroll-margin-top offset is needed.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}