/*
 * Closing CTA card.
 *
 * Measured off the 1440px frame: a full-width dark card (1296px inside the
 * container, ~412px tall, 32px radius) over a data-visualisation image. The
 * headline sits left, a short paragraph and two pill buttons stack on the right.
 */

.cta {
	padding-block: var(--section-y);
	background: var(--color-bg-default);
}

.cta__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* A minimum only - space-between opens it to the design's ~92px at 1440. */
	gap: clamp(var(--space-32), 4.5vw, 64px);
	min-height: 412px;
	/* Asymmetric in the design: the headline starts 56px in, the buttons stop
	   80px short of the right edge. */
	padding: 56px 80px 56px 56px;
	border-radius: 24px;
	overflow: hidden;

	/* Data-viz photo under a flat veil; --cta-bg is set inline. 78% of
	   #060A18 reproduces the export's tone across the whole card - the chart
	   stays readable but the copy sits on near-black. */
	background:
		linear-gradient(rgb(6 10 24 / 78%), rgb(6 10 24 / 78%)),
		var(--cta-bg) center / cover no-repeat,
		var(--color-surface-dark);
}

.cta__left {
	flex: 0 1 auto;
	min-width: 0;
}

.cta__title {
	margin: 0;
	font-size: clamp(28px, 3.35vw, 48px);
	line-height: 1.27;
	color: var(--color-text-inverse);
}

/* Wide enough for the two pills to sit on one row, as in the design. */
.cta__right {
	flex: 0 1 500px;
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
}

/* Narrower than the column, so the lead breaks before "Pre-processed" instead
   of splitting it at the hyphen. */
.cta__lead {
	margin: 0;
	max-width: 460px;
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: rgb(255 255 255 / 88%);
}

.cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
}

/* Both CTAs are pills in this section. */
.cta__btn {
	border-radius: var(--radius-full);
}

.cta__btn--light {
	background: var(--color-bg-default);
	color: var(--color-text-primary);
}

.cta__btn--light:hover {
	background: var(--color-surface-light);
}

.cta__btn--light:active {
	background: var(--color-surface-gray);
	box-shadow: inset 0 2px 4px rgb(0 0 0 / 10%);
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 900px) {
	.cta__card {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-32);
		min-height: 0;
		padding: var(--space-48) var(--space-32);
	}

	.cta__right {
		flex: 0 1 auto;
	}

	.cta__lead {
		max-width: none;
	}

	/* The desktop line break fights the narrower measure; let it flow. */
	.cta__title br {
		display: none;
	}
}

@media (max-width: 767px) {
	.cta__card {
		padding: var(--space-32) var(--space-24);
	}

	.cta__actions {
		width: 100%;
		flex-direction: column;
	}
}