/*
	The CTA's background image is layered in a ::before rather than set directly
	on the section, so the bg-{token} class keeps ownership of background-color
	and its paired text colour. The two no longer overwrite each other.
*/
.flex-section--cta {
	position: relative;
	isolation: isolate;
}

/*
	Header colour, by request: Dark BG's own token (var(--color-dark-bg))
	instead of layout.css's own .bg-muted h1..h6 rule (--color-heading,
	the site's teal) — the same "use Dark BG's colour as a strong-contrast
	foreground here, not its usual role as a section background" choice
	already made for the Resources block's Connect card title. Applies to
	Muted OR Gradient (layout.css's own .bg-gradient rule uses the same
	Muted-toned foreground pairing, just with a decorative gradient fill on
	top) — both need the same contrast fix for the same reason. Three
	classes/selectors here (.flex-section--cta.bg-muted .cta__header)
	outrank .bg-muted h1..h6 (one class + one type), so this wins
	regardless of source order.
*/
.flex-section--cta.bg-muted .cta__header,
.flex-section--cta.bg-gradient .cta__header {
	color: var(--color-dark-bg);
}

.flex-section--cta.has-bg-image {
	/* The image can be anything, so force the light-on-dark pairing rather than
	   trusting whichever bg-{token} the editor also picked. */
	color: var(--color-dark-fg);

	/*
		Explicit, not left to the inheritance above — layout.css's own
		`.bg-default h1..h6` (now `.bg-* h1..h6` for every real background,
		not just Default) rule targets the bare heading element directly,
		and an explicit rule on an element always beats an inherited value
		regardless of specificity. Confirmed live: with no override here,
		a Default-background CTA with an image rendered its header in
		--color-heading (the site's teal), not white, while the button —
		already using button--outline's own explicit contrast logic — was
		unaffected. Same bug class already hit and fixed this way for the
		Options/Benefits/Resources cards.
	*/
	& .cta__header,
	& .cta__text {
		color: var(--color-dark-fg);
	}

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image: var(--cta-bg-image);
		background-position: var(--cta-bg-position, 50% 50%);
		background-size: cover;
		background-repeat: no-repeat;
	}

	/*
		Scrim — without it, headline contrast depends entirely on the photo. Uses
		the same Style Guide overlay tokens as the banner (--overlay-*), so the CTA
		image and a banner image get one consistent treatment set once in Theme
		Settings. Was a hard-coded rgb(0 0 0 / 0.5).

		::after paints after ::before within this isolated section, so mix-blend-
		mode blends the overlay against the image behind it.
	*/
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: var(--overlay-color);
		opacity: var(--overlay-opacity);
		mix-blend-mode: var(--overlay-blend);
	}
}

/*
	Higher specificity than .container's own max-width (layout.css), which
	this would otherwise tie with — both are a single class selector, so the
	winner would depend on stylesheet load order rather than reading as an
	obvious override.
*/
.flex-section--cta .cta__inner {
	max-width: var(--container-cta);
}

.cta__header {
	font-size: var(--cta-header-font-size);
}

.cta__text {
	font-size: var(--cta-text-font-size);
}

.cta__inner > * + * {
	margin-block-start: var(--space-8);
}

/* Room for an optional second (outline) button next to the first.
   justify-content: center, not just the inherited text-align: center from
   .text-center (markup) — that centres inline/text content, but a flex
   row's own children need the flex-specific property to follow suit. */
.cta__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
}