/*
 * pm-cta-band — the reusable CTA band (WO-26, frame 369:1419).
 *
 * Source frame: docs/design/frames/26-cta-band.json — a photo with a 20%
 * scrim, a white H2, one line of white body text and up to two buttons,
 * column centred, gap 16, padding 96 all sides. Reused at the foot of every
 * template that ends with a call to action.
 *
 * Compiled to assets/css/components/cta-band.css by src/build-tokens.mjs,
 * which substitutes the breakpoint markers (a comment holding `@bp <name>`)
 * with the pixel value from tokens/tokens.json. Custom properties cannot
 * resolve inside @media conditions and a bare integer is invalid CSS, so the
 * build appends the unit. Never type a breakpoint width here.
 *
 * Every colour is a --pm-color-* token; the heading's size, leading and
 * tracking are the WO-28 typography tokens. No hex value and no literal
 * breakpoint width may appear in this file.
 */

/*
 * The band is a full-width strip (the intro's full-bleed technique — the
 * scaffold body constrains content to a centred 72rem column), column
 * centred, gap 16, padding 96 all sides
 * (26-cta-band.json#measured.layout). 96 is --pm-space-24, 16 is
 * --pm-space-4.
 */
.pm-cta-band {
	position: relative;
	box-sizing: border-box;
	/*
	 * WO-99 AC 13 — `clip`, and `hidden` must not come back.
	 *
	 * Both clip the same rectangle (the padding box; `overflow-clip-margin`
	 * defaults to zero), so the photo and the scrim are contained exactly as
	 * before. The difference is invisible until something animates:
	 * `overflow: hidden` makes this element a SCROLL CONTAINER, `overflow:
	 * clip` does not. A `view()` timeline resolves against its subject's
	 * nearest ancestor scroll container, and reveal.js's SELECTOR_MAP stamps
	 * `[data-pm-reveal]` on blocks INSIDE this one — so with `hidden` their
	 * timeline resolved against this element, which never scrolls, froze at a
	 * fixed progress, and the reveal simply never ran. Measured before the
	 * fix: 108 frozen instances across nine pages and four viewports, stuck
	 * between 0.91 and 1.0 progress. Visible, and never animating.
	 *
	 * If you are here because a block does not animate: this is the thing to
	 * check first, on this element and on every ancestor of the block.
	 */
	overflow: clip;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	gap: var(--pm-space-4);
	padding: var(--pm-space-24);
}

/*
 * Photo variant — the frame: the photo sits under a 20% scrim (the
 * scrim-light role), the text is White (--pm-color-on-accent is the White
 * role, WO-26 AC 3). Volcanic Ink behind a slow-loading photo so the white
 * text never sits on an unstyled page flash.
 */
.pm-cta-band--photo {
	background-color: var(--pm-color-ink);
	color: var(--pm-color-on-accent);
}

/*
 * Light variant — for pages without photography: Powder Blush surface,
 * heading-text and body-text roles, no image, no scrim (WO-26 AC 6).
 */
.pm-cta-band--light {
	background-color: var(--pm-color-surface-alt);
	color: var(--pm-color-heading-text);
}

/*
 * The media layers: the cover photo beneath, the scrim above it, the
 * content above both (its position: relative wins the paint order). Both
 * layers are absolute and exactly inset: 0 — nothing to clip, but hidden
 * keeps any subpixel bleed of the full-bleed canvas inside the band.
 * Specificity ≥ (0,1,1) on the <img> — Elementor's own
 * `.elementor img { height: auto; max-width: 100% }` beats a single-class
 * selector (MISTAKES.md §C15).
 */
.pm-cta-band .pm-cta-band__media,
.pm-cta-band .pm-cta-band__scrim {
	position: absolute;
	inset: 0;
}

.pm-cta-band .pm-cta-band__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The scrim: the new scrim-light role — Texte at alpha 20
 * (26-cta-band.json#measured.background.scrim, rgba(0,0,0,0.2) computed).
 * WO-30's scrim at 70 stays for cards.
 */
.pm-cta-band .pm-cta-band__scrim {
	background-color: var(--pm-color-scrim-light);
}

/*
 * The content stack paints above the media layers.
 */
.pm-cta-band__heading,
.pm-cta-band__text,
.pm-cta-band__actions {
	position: relative;
}

/*
 * The H2 (WO-26 AC 3): Roboto ExtraLight 40 / 1 / -2 — the WO-28 H2 tokens
 * — in White on the photo variant, capped at the frame's 682px measure
 * (typed like the hero's 510px; no space or size token holds 682).
 */
.pm-cta-band__heading {
	margin: 0;
	max-width: 682px;
	font-family: var(--pm-font-family-base), system-ui, sans-serif;
	font-size: var(--pm-font-size-h2);
	font-weight: var(--pm-font-weight-200);
	line-height: var(--pm-leading-tight);
	letter-spacing: var(--pm-tracking-h2);
	text-align: center;
	color: var(--pm-color-on-accent);
	/* Break long Dutch compounds rather than overflow a 375px viewport. */
	overflow-wrap: break-word;
}

/*
 * The body line (WO-26 AC 3): Roboto Light 16 / 1.6 — the WO-28 body
 * tokens — in White on the photo variant, the same 682px measure.
 */
.pm-cta-band__text {
	margin: 0;
	max-width: 682px;
	font-family: var(--pm-font-family-base), system-ui, sans-serif;
	font-size: 1rem;
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-body);
	text-align: center;
	color: var(--pm-color-on-accent);
}

/*
 * Light variant recolours only: heading-text and body-text roles
 * (WO-26 AC 6). Layout, size and weight are the frame's, shared.
 */
.pm-cta-band--light .pm-cta-band__heading {
	color: var(--pm-color-heading-text);
}

.pm-cta-band--light .pm-cta-band__text {
	color: var(--pm-color-body-text);
}

/*
 * The button row: gap 16 when two (26-cta-band.json#measured.buttons
 * .container). Wraps below the point where two buttons plus the gap no
 * longer fit — the 375px judgement, since only the navigation is designed
 * for mobile (MISTAKES.md §C7); Dutch and French labels run 20–30% longer
 * (MISTAKES.md §E4).
 */
.pm-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pm-space-4);
}

/*
 * TODO(open-question): the extract measures one 1440 frame only —
 * MISTAKES.md §C7. Below tablet the padding becomes 64 block / 24 sides
 * (WO-26 AC 2 — developer judgement per MISTAKES.md §C7): 64 is
 * --pm-space-16, 24 is --pm-space-6. Owner: the designer, with the missing
 * mobile design.
 */
@media (max-width: 768px) {
	.pm-cta-band {
		padding: var(--pm-space-16) var(--pm-space-6);
	}
}