/**
 * Meridian Sections — CTA
 *
 * Figma 1:1217, updated by 232:174 ("CTAStrip"). A brand-blue card carrying a
 * prompt, an optional supporting line, and one button.
 *
 * The two comps agree on everything else — 64/64 band, 48/40 card padding, a 16px
 * radius, a 512px 30px/1.375 heading, and the white-disc button treatment — so the
 * newer one adds a paragraph and changes nothing already drawn.
 */

/*
 * Padding comes from custom properties the Padding Top/Bottom controls write
 * onto the widget wrapper. The fallbacks are the comp's 64px and stay the
 * documented default when the controls are untouched.
 */
.md-section.md-cta {
	padding-block: var(--md-section-pt, 4rem) var(--md-section-pb, 4rem);
	background-color: var(--md-white, #fff);
}

.md-cta__card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--md-space-lg, 2rem);
	padding: var(--md-space-xl, 3rem) 2.5rem; /* 48px / 40px */
	border-radius: 1rem; /* 16px */
	background-color: var(--md-blue, #006bb6);
	color: var(--md-white, #fff);
}

/*
 * The copy column, from 232:174. The card is a flex row, so the heading and the
 * supporting line need a wrapper or the paragraph lands beside the heading instead
 * of under it. It carries the 512px cap the heading used to, which is why a
 * title-only card — every CTA already placed — renders unchanged.
 */
.md-cta__copy {
	max-width: 32rem; /* 512px */
}

.md-cta__title {
	margin: 0;
	max-width: 32rem; /* 512px */
	color: var(--md-white, #fff);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	font-size: 1.875rem; /* 30px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.375; /* 41.25 / 30 */
	text-wrap: balance;
}

/*
 * 448px in the comp, inside a 512px block — pulled in a step from the heading
 * rather than matching it.
 *
 * The 0.75 white is the comp's own, and the same alpha the hero caption and the
 * icon-feature copy use on their grounds. See the README: on this saturated blue it
 * measures about 3.8:1, which is short of AA for 15px text — it ships as drawn, and
 * the figure is computed by the suite rather than asserted here.
 */
.md-cta__text {
	margin: 0;
	max-width: 28rem; /* 448px */
	color: rgba(255, 255, 255, 0.75);
	/* 16px, not the 15px drawn — the site's body-copy floor. See --md-text-small. */
	font-size: var(--md-text-small, 1rem); /* 16px */
	line-height: 1.625; /* 26px */
}

/* Only under a heading, so a copy-only card has no orphaned gap above it. */
.md-cta__title + .md-cta__text {
	margin-block-start: var(--md-space-xs, 0.75rem); /* 12px */
}

/* Body Copy is a rich editor, so the paragraphs inside are the editor's. */
.md-cta__text > p {
	margin: 0;
}

.md-cta__text > p + p {
	margin-block-start: var(--md-space-xs, 0.75rem);
}

/* On this ground a link has to be white and underlined to read as one at all. */
.md-cta__text a {
	color: var(--md-white, #fff);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.md-cta__action {
	flex: none;
}

/* --- Placement variants -------------------------------------------------- */
.md-cta__card--below {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.md-cta__card--center {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* The cap moved to the wrapper with the paragraph, so the wrapper is what has to
 * widen here — the heading rule alone would be clipped by a 512px parent. */
.md-cta__card--center .md-cta__copy,
.md-cta__card--center .md-cta__title {
	max-width: 40rem;
}

/* The paragraph is narrower than the block, so centring the block is not enough. */
.md-cta__card--center .md-cta__text {
	margin-inline: auto;
}

/* Side by side needs room for both; below the breakpoint the button drops
 * under the heading whatever the placement setting says. */
@media (max-width: 47.9375em) {
	.md-cta__card {
		flex-direction: column;
		align-items: flex-start;
		padding-inline: var(--md-space-md, 1.5rem);
	}

	.md-cta__card--center {
		align-items: center;
	}
}