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

/*
	.cta__inner also carries .container.is-condensed (cta.php), which caps
	it at --container-condensed (720px, layout.css) — the same shared
	modifier Page Banner/Forms/etc. all use. This widens it to
	--container-narrow (900px, tokens.css — the same token Page Banner's
	own content group and One Column Content's Left/Center alignment
	already use) for CTA only, without touching .is-condensed itself for
	any other block. All three real classes in the selector
	(.container.is-condensed.cta__inner) so this reliably outweighs
	.container.is-condensed's own specificity regardless of load order,
	rather than depending on this file loading after layout.css.
*/
.container.is-condensed.cta__inner {
	max-width: var(--container-narrow);
}

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

/*
	Fallback gap for any adjacency the two specific rules below don't cover —
	e.g. Heading directly followed by the button with no Text field set.
*/
.cta__inner > * + * {
	margin-block-start: var(--space-4);
}

/* Heading -> Sub-header: 16px, same as the generic fallback above — a
   sub-header reads as tightly coupled to the heading it sits under, not a
   new paragraph-level gap the way Text below it gets. Still its own
   explicit rule (not just relying on the fallback) so it stays correct
   regardless of what .cta__inner's own generic gap is ever changed to. */
.cta__heading + .cta__subheader {
	margin-block-start: var(--space-4); /* 16px */
}

/* Heading -> Text, and Sub-header -> Text: 32px either way — Sub-header is
   optional, so Text needs the same gap whichever one immediately precedes
   it. Every selector here is class + adjacent-sibling (specificity 0,2,0),
   so they beat the generic child-combinator fallback above (0,1,0) without
   needing !important. */
.cta__heading + .cta__text,
.cta__subheader + .cta__text {
	margin-block-start: var(--space-6); /* 32px */
}

/* Text -> Button: 48px. */
.cta__text + .cta__cta {
	margin-block-start: var(--space-8); /* 48px */
}

/* Sub-header -> Button (no Text set): 32px, not the generic 16px fallback
   above — same explicit-rule treatment every other adjacency here gets,
   so it stays correct regardless of what .cta__inner's own generic gap is
   ever changed to. */
.cta__subheader + .cta__cta {
	margin-block-start: var(--space-6); /* 32px */
}

.cta__heading {
	font-size: var(--cta-heading-size);
	font-weight: var(--font-weight-light);
	text-transform: uppercase;
}

/* Below 48em, --font-size-6 (48px, tokens.css) instead of --cta-heading-size
   (72px) — reuses the general type scale's own 48px step rather than a
   second one-off literal, since it happens to match exactly. */
@media (max-width: 47.99em) {
	.cta__heading {
		font-size: var(--font-size-6); /* 48px */
	}
}

/* 24px — the same value --font-size-4 now holds, though this stays its
   own literal rather than switching to var(--font-size-4): same "distinct
   use, not a coupled reuse" reasoning tokens.css already uses for
   --faqs-question-size and others, so a future change to the general
   type scale doesn't silently drag this one along with it. */
.cta__subheader {
	font-size: 1.5rem; /* 24px */
	font-weight: var(--font-weight-regular); /* 400 */
}

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