/**
 * Media CTA — the full-bleed photo band in Residential Roofing section 13.
 *
 * The Figma frame (1092:19765) is 606 tall at y=302 inside a 908 CTA section,
 * but the pale stats band above paints over its first 28px: sampling the export
 * down x=10 gives #F1FAF5 through y=329 and the green gradient from y=330. So
 * the band as RENDERED is 330..908 — 578 tall — and the padding below is
 * derived from the design's own text tops (heading glyphs 452, lede 601,
 * buttons 733) rather than from the frame's 150/120.
 *
 * A photograph bleeds to the viewport edges under a left-heavy #1A3412
 * gradient; copy stays inside the 1440 container. Both the image and the
 * gradient come from the shared section settings.
 */

/* Anchored to the BOTTOM of the photograph, not its centre.
 *
 * The Figma frame is 606 tall and the source is 1920x609, so the design shows
 * the image from its top with only its last 3px lost. Live the band is 578 —
 * the 28px the stats band paints over, per the note above — and `.section-image`
 * centres a `cover` background, which crops ~15px off BOTH ends and lifted the
 * roofer's head into the band's top edge, clipping his cap.
 *
 * Bottom-anchored, the visible rows are 30..609 against the design's 28..609:
 * the same framing to within 2px, and the subject sits where it is drawn. */
.media-cta {
	/* How far the photograph rises above the section — see the ::after note
	 * below. Declared here rather than left to the `var()` fallback so it shows
	 * up in the Styles panel and can be overridden per row or per breakpoint. */
	--media-cta-rise: 0px;

	position: relative;
	/* 115 top: measured as INK against the export, the design's heading opens at
	 * band row 117 and the 106 this was built with put ours at 108. The lede and
	 * the buttons were already within 2px, so the 9 goes on the top padding and
	 * comes back off the heading's own margin below.
	 *
	 * 115 bottom too, at the developer's instruction — an even block, where the
	 * design's own figure is 126 under a 115 top. */
	padding-block: 115px;
	background-position: center bottom;
	color: var(--white);
	/* A stacking context of its own, so the photo below can be lifted clear of
	 * the section above it. Without it a negative z-index child drops into the
	 * root's negative layer and paints BEHIND the previous section instead. */
	z-index: 1;
	/* `clip`, not `hidden`: the photo overhangs 35px on every side, and the
	 * left/right 35 pushed the document 35px wide — a horizontal scrollbar on
	 * all 37 pages carrying this block. `overflow-x: hidden` would force the
	 * other axis to `auto` and clip the vertical overhang with it; `clip` holds
	 * one axis without touching the other. */
	overflow-x: clip;
}

/**
 * The photograph is painted by ::after rather than by the section's own
 * background, so it can be positioned independently of the box that holds the
 * copy — the section background can only ever fill its element.
 *
 * The URL arrives as `--media-cta-image`: the template rewrites the declaration
 * `kerrigan_section_atts()` emits for an image background, so the section
 * itself paints nothing and the one ACF image field still drives the photo.
 * `background-image: inherit` was tried first and is a trap — it reads the
 * ELEMENT's computed background-image, so the section had to keep painting the
 * photo for the pseudo-element to have anything to inherit.
 *
 * `--media-cta-rise` (declared on the block above) lifts the top edge. At 0 the
 * pseudo-element covers exactly the element box and renders identically to the
 * plain background it replaced; give it a length and the photo extends up over
 * the section above. It must carry a unit — `calc(0 * -1)` is invalid in
 * `inset`, so `0px`, not `0`.
 */
.media-cta::after {
	position: absolute;
	z-index: -1;
	/* The photo overhangs the band at the top and sides rather than being
	 * clipped to it. The bottom stays at 0: the section paints above the one
	 * that follows it (z-index 1), so a -35 there laid the photo over the top
	 * 35px of the next section — the location map on most pages.
	 *
	 * The -35 top is NOT slack — it is sized to the photograph. The "Quality
	 * Roofing. / Built to Protect." file the 37 default rows share is a cut-out:
	 * 1920x609 with a fully TRANSPARENT 26px strip along its top, which the
	 * roofer's cap breaks through up to row 2. Lifting the photo 35px parks that
	 * transparent strip above the band, so the band's top edge lands where the
	 * opaque pixels start and the cap sticks out ~24px over it — the 23px
	 * break-out measured on the Contact export, at x 1332..1400. Pull the photo
	 * down to 0 and the transparent strip moves INSIDE the band, showing 26px of
	 * page-white along the top wherever the scrim has faded out.
	 *
	 * So this is only right for a photo with that transparent margin. A plain
	 * rectangular photo lifted 35px shows 35px of real image above the band
	 * instead, unscrimmed (::before is inset 0), painted over the section above.
	 * Those rows opt out with `media-cta--flush-top` — see the bottom of this
	 * file.
	 *
	 * The left and right -35 never show: `overflow-x: clip` on the block trims
	 * them, and they are only there so a rise cannot reveal a bare edge at the
	 * corners. */
	inset: calc(-35px - var(--media-cta-rise)) -35px 0;
	background-image: var(--media-cta-image, none);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	pointer-events: none;
}

.media-cta__inner {
	position: relative;
	z-index: 1;
	max-width: calc(var(--container-max) + (var(--container-pad) * 2));
}

/* The design holds this copy to roughly half the container so it never runs
 * under the photograph's subject on the right. */
.media-cta__heading {
	/* Same 657 measure as the body copy. */
	max-width: 657px;
	/* 10, not 21. Ink to ink the design leaves 44px between the heading's last
	 * line and the lede (233 -> 277); the 21 left 55, because Anek's 64px cap
	 * sits high in its 72px line box and the slack lands underneath. */
	margin: 0 0 10px;
	color: var(--white);
	font-family: var(--font-heading);
	font-size: var(--fs-64);
	font-weight: 700;
	line-height: var(--lh-heading);
}

/* The Figma text node is 657x96 — three lines. The 560 this was built with
 * forced a fourth and pushed the band 38px over. */
.media-cta__text {
	max-width: 657px;
	margin-bottom: 36px;
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
}

/* The design pairs these two 10px apart, not the global 20. */
.media-cta .btn-row {
	gap: var(--space-10);
}

.media-cta__text > :first-child { margin-top: 0; }
.media-cta__text > :last-child { margin-bottom: 0; }

/* The 36 above opens the gap to the button row. Where the copy IS the last
 * thing in the block that 36 is dead space under the band's content. */
.media-cta__text:last-child {
	margin-bottom: 0;
}

.media-cta__text a {
	color: var(--primary-green);
	/* 700 at the developer's instruction — the surrounding copy is 400, so the
	 * inline links carry weight as well as the accent colour. */
	font-weight: 700;
	text-decoration: none;
	transition: var(--transition);
}

.media-cta__text a:hover,
.media-cta__text a:focus-visible {
	color: var(--white);
	text-decoration: underline;
}

@media (max-width: 991px) {

	.media-cta {
		padding-block: var(--space-60);
	}

	.media-cta__heading,
	.media-cta__text {
		max-width: none;
	}

	/* 80% at the developer's instruction. The heading and copy release their own
	 * caps just above, so without a cap on the wrapper they run the full width
	 * and straight over the photograph's subject. Holding the block to 80% and
	 * pinning it left keeps it on the darkened side of the band. */
	.media-cta__inner {
		max-width: 80%;
		margin-left: 0;
	}
}

/* Phone. At 375 the 80% above leaves the copy in a 300px column with the photo
 * showing beside it, which wraps the buttons onto two lines — there is no room
 * to keep clear of the subject at this width, so the block takes it all. */
@media (max-width: 567px) {

	.media-cta__inner {
		max-width: 100%;
		margin-left: 0;
	}
}

/* --- content on the right (Contact section 7) --------------------------
 * 1920x650, padding 120/120, the copy a 650 column at container x 790 — i.e.
 * flush to the container's right edge. The band is also the one instance whose
 * scrim is a gradient rather than a flat wash: #010101 at 80% to 0, left to
 * right, so the roof stays readable under the copy.
 * ---------------------------------------------------------------------- */
.media-cta--right {
	padding-block: var(--space-120);
}

/* The eyebrow belongs to this group too. `.section-eyebrow` is a full-width
 * flex row, so left out of it the shamrock stayed at the container's left edge
 * while its heading sat 790px away on the right — a green mark alone in the
 * middle of the photograph. Given the column's own measure it starts where the
 * heading starts. */
.media-cta--right .media-cta__eyebrow,
.media-cta--right .media-cta__heading,
.media-cta--right .media-cta__text {
	max-width: 650px;
	margin-left: auto;
}

/* The white run is Regular and only the green words are Bold — the
 * `.section-title` convention (leading words 400, accented word 700), which
 * this block's own heading was never wired to. Confirmed on the Contact export:
 * "Fast and Reliable" is Anek Regular, "Storm Damage Repairs" Bold green.
 *
 * Scoped to the variant rather than made the block's default, because the
 * default is right for everything else: surveyed across the site, this is the
 * ONE media_cta heading carrying an accent span, against 37 rows of "Quality
 * Roofing. / Built to Protect." — no accent, and drawn bold throughout on the
 * same export. Lowering the base would have lightened all 37. */
.media-cta--right .media-cta__heading {
	font-weight: 400;
}

.media-cta--right .media-cta__heading span,
.media-cta--right .media-cta__heading .is-accent {
	font-weight: 700;
}

.media-cta--right.section-overlay-dark::before {
	background-color: transparent;
	background-image: linear-gradient(
		90deg,
		rgba(1, 1, 1, 0.8) 40%,
		rgba(1, 1, 1, 0) 100%
	);
}

@media (max-width: 991px) {

	.media-cta--right .media-cta__eyebrow,
	.media-cta--right .media-cta__heading,
	.media-cta--right .media-cta__text {
		max-width: none;
		margin-left: 0;
	}

	.media-cta--right {
		padding-block: var(--space-60);
	}
}

/* Contact section 7 puts the mark above the heading: the 35px shamrock sits at
 * the top of the copy column with the heading starting 65 below it, so 30
 * clear. */
.media-cta__eyebrow {
	margin-bottom: 30px;
}

/* --- flush top edge ----------------------------------------------------
 * For a row whose photograph is a plain rectangle rather than a cut-out with a
 * transparent top margin. The block's default lifts the photo 35px to hide that
 * margin (see the ::after note above); with nothing transparent to hide, the
 * same lift shows 35px of bare unscrimmed image above the band, laid over the
 * section before it — on Contact, a strip of rooftops across the foot of the
 * white two-column above "Fast and Reliable Storm Damage Repairs", whose photo
 * is 2560x783 with zero transparency.
 *
 * Opt in per row with the Extra CSS classes field. Kept separate from
 * `media-cta--right`, which is a layout choice: where the copy sits and whether
 * the photo has a cut-out margin are unrelated.
 * ---------------------------------------------------------------------- */
.media-cta--flush-top::after {
	inset-block-start: calc(-1 * var(--media-cta-rise));
}