/*
	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;
}

.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);

	&::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. */
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: rgb(0 0 0 / 0.5);
	}
}

/*
	CTA's own content width, narrower than the shared .is-condensed value
	(--container-condensed, 720px — also used by Forms and FAQs List) rather
	than widening that token itself, which would change those other blocks
	too. 900px is a block-specific dimension, not on the spacing scale, same
	"one-off, not tokenized" reasoning as Hero's 800px row height or Page
	Banner's 500px. Three classes (matching .cta__inner's real combined
	class list: container.is-condensed.cta__inner) is what beats
	.container.is-condensed's own max-width on specificity, rather than
	relying on cta.css simply loading after layout.css.
*/
.container.is-condensed.cta__inner {
	max-width: 56.25rem; /* 900px */
}

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