/**
 * css/components/closing.css — Website 2.0 shared component library (#122)
 *
 * Closing CTA — statement + solid button + a single decorative art slot:
 * the ACF `art_image` when populated, or a placeholder box when it is
 * empty. The slot lives inside the 1314px content frame, vertically
 * centred in the band (owner directive, 2026-08-19): 650x450 from 1222px
 * up, scaling down through 1025-1221px once the copy column has hit its
 * own floor, holding a constant 24px gap from it, hidden below 1025px.
 * Reference: media.html `.closing` — deviated from deliberately on the
 * art's position; see `.cg-closing__art` below.
 *
 * #400 (reviewer punch list, 2026-08-18): the prior `circle` / `pixels`
 * (Services) / `balloons` (Tech & AI) decorative-art branches are retired
 * outright, per the owner's decision — this file no longer carries their
 * rules.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

/*
 * The art slot's size lives here, on the section, because the section
 * needs it too: the slot is absolutely positioned and vertically centred
 * (see below), so a closing row whose copy is shorter than the slot would
 * let the slot hang out of the section and paint over the band above and
 * below — #411 review F1 (upward) and N1 (downward). Every `closing`
 * sub-field is `required: 0` in ACF, so an editor clearing the body copy
 * is an ordinary state, not a contrived one (N1 reproduced +15.8px of
 * bleed with the body cleared, +112.8px with body and CTA both cleared).
 *
 * `min-height` therefore floors the section at exactly the slot's height,
 * only at the widths where the slot renders. Because `box-sizing:
 * border-box` is global (reset.css:22-26) and the slot's containing block
 * is this element's padding box, a centred slot in a section at least as
 * tall as the slot is inside it on both edges by construction, at every
 * width, for any content.
 *
 * WIDTH — the owner's directive (2026-08-19): the art stays inside the
 * established content frame rather than running to the browser edge. The
 * frame is `.cg-band`'s `padding-inline: var(--pad-x)` (band.css:18) —
 * 1314px centred, gutters flooring at 84px (tokens.css:172). The frame is
 * shared by exactly two things, so their widths are defined together:
 *
 *   frame = min( 1314, 100vw - 168 )   art + 24px gap + copy = frame
 *
 * WHICH ONE GIVES (owner, 2026-09-03): the copy, not the art. The art
 * holds its 650x450 spec as far down as it can, and only scales over the
 * last stretch before it is hidden at 1024px. Previously the copy column
 * was pinned at 640px at every width and the art absorbed the whole
 * squeeze on its own — it was already down to 368px at 1200px and 193px
 * at the 1025px hide point, which read as broken rather than responsive.
 *
 * Pinning 640px was never load-bearing: `.cg-statement` is
 * `clamp(32px, 3vw, 56px)` (type.css:39), so the headline is already
 * smaller at a smaller viewport and a proportionally narrower column is
 * what matches it. The copy therefore takes the squeeze first, down to a
 * 380px floor, and only then does the art start to scale:
 *
 *   copy = clamp( 380, 100vw - 842, 640 )     art = frame - 24 - copy
 *        = 640 at >=1482px                        = clamp( 453, 100vw - 572, 650 )
 *
 * So: 650x450 from 1222px up (was 1482px), scaling 650 -> 453 across
 * 1222-1025px (was 650 -> 193 across 1482-1025px), hidden below 1025px.
 * `842` is `84 + 84 + 24 (gap) + 650 (art)`; `572` is `84 + 84 + 24 +
 * 380 (copy floor)`. The two clamps are complements — one is the frame
 * minus the other — so the 24px gap is an identity rather than a
 * coincidence, holding at every integer width and not merely at sampled
 * ones, and both floors land together on exactly 1025px (453 + 24 + 380
 * = 857 = the frame there).
 *
 * The one caveat on "24px": `--pad-x` is `100vw`-based (tokens.css:172),
 * and `100vw` includes a classic scrollbar's width where the platform has
 * one (Windows/Linux Chrome), so the real gap there is `24 - scrollbar`,
 * roughly 7-9px. That is NOT a regression — the same subtraction fell out
 * of the pre-2026-09-03 formula, which was `100vw`-based in exactly the
 * same way — and it is invisible to the probes in `.context/`, which run
 * headless on macOS overlay scrollbars. Stated so nobody "fixes" a 9px
 * gap on Windows by pulling the frame off `--pad-x`.
 *
 * The height is derived, not restated: 650 x 9/13 = 450, the #400 spec.
 * An explicit `height` on the slot (rather than `aspect-ratio`) keeps the
 * two in lockstep and drops the dependency on `aspect-ratio` support,
 * which would otherwise collapse the slot to zero height on Safari < 15
 * (#411 review, follow-up 5).
 */
.cg-closing {
	position: relative;

	--cg-closing-art-w: clamp( 453px, calc( 100vw - 572px ), 650px );
	--cg-closing-copy-w: clamp( 380px, calc( 100vw - 842px ), 640px );
	--cg-closing-art-h: calc( var( --cg-closing-art-w ) * 9 / 13 );
}

@media ( min-width: 1025px ) {
	.cg-closing {
		min-height: var( --cg-closing-art-h );
	}
}

/*
 * `right: var( --pad-x )` — the art's right edge sits on the content
 * frame's right edge, not the browser's (owner directive, 2026-08-19).
 * The absolute-positioning containing block is `.cg-closing`'s padding
 * box, i.e. the FULL section width (padding is inside that box), so an
 * inset of `--pad-x` is what reproduces the frame edge that the band's
 * `padding-inline` gives every other element in the section. It replaces
 * the earlier `--space-3` (30px), which pinned the art 30px off the
 * viewport edge and left it hanging outside the frame on wide screens —
 * 273px outside it at 1920px.
 *
 * A negative `right` is what must never come back: `.main` (style.css)
 * clips overflow on every page, so a bleed past its edge is silently
 * sliced off (#205).
 *
 * VERTICAL — centred in the section (owner directive, same date), not
 * anchored to its top. `top: 50%` + `translateY(-50%)` centres the slot
 * against `.cg-closing`'s padding box, so the art is optically centred
 * against the whole cream band rather than sitting against its top edge.
 * With the `min-height` above guaranteeing the section is at least as
 * tall as the slot, centring keeps the art inside BOTH edges for any
 * length of copy — which is what fixes #411 review F1 (a 40px cream notch
 * painted into the dark band above, from the pre-#400 `top: -40px`) and
 * N1 (the same artifact mirrored below, once `top: 0` spent the headroom
 * that had hidden it).
 *
 * This is a deliberate deviation from the design reference, which anchors
 * the art upward out of the section (`media.html:204` —
 * `.closing .cta-art { right: -30px; top: -40px }`). Those offsets were
 * tuned to one specific PNG whose top band is transparent; #400 turns
 * this into a slot for arbitrary uploaded art, where an opaque upload
 * bleeding out of the section reads as a bug rather than as design.
 *
 * Width and the 24px gap from the copy column: see `--cg-closing-art-w`
 * and `--cg-closing-copy-w` above. Hidden below 1025px, unchanged from
 * pre-#400 — the earlier `max-width: 1439px` hide was reverted (#411 review, F2: it deleted
 * decorative art at 1280/1366px, common laptop widths, on four pages
 * where nothing was broken).
 */
.cg-closing__art {
	position: absolute;
	right: var( --pad-x );
	top: 50%;
	z-index: 0;
	width: var( --cg-closing-art-w );
	height: var( --cg-closing-art-h );
	transform: translateY( -50% );
}

.cg-closing__art img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right center;
}

/* Empty-`art_image` state — a bordered box filling the slot at whatever
   size `.cg-closing__art` is currently rendering (650x450 from 1222px up),
   so designers can see exactly where the upload lands. Purely decorative
   (aria-hidden on the parent). */
.cg-closing__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	border: var( --hairline ) dashed var( --rule-strong );
	background: var( --cg-cream );
	box-sizing: border-box;
}

.cg-closing__inner {
	position: relative;
	z-index: 2;
	max-width: var( --cg-closing-copy-w );
}

.cg-closing .cg-statement {
	color: var( --accent );
}

.cg-closing .cg-body {
	margin-top: 30px;
	color: var( --cg-ink );
}

.cg-closing .cg-btn--solid {
	margin-top: 42px;
}

/*
 * Below 1025px the art slot drops out rather than reflowing further — it
 * is purely decorative (aria-hidden) and the CTA copy takes full width
 * instead. Unchanged from pre-#400 (was `.cg-closing__circle`/`__art`'s
 * cutoff there too); `--cg-closing-art-w` above already handles the
 * 1025–1221px scaling range, and its 453px floor lands exactly on this
 * breakpoint.
 */
@media ( max-width: 1024px ) {
	.cg-closing__art {
		display: none;
	}

	.cg-closing__inner {
		max-width: none;
	}
}