/* Layout: Call to action */

.cta__inner {
	text-align: center;
}

.cta__title {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-xs);
}

.cta__text {
	max-width: 50ch;
	margin-inline: auto;
	margin-bottom: var(--space-m);
	color: var(--color-muted);
	font-size: var(--text-lg);
}

.cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: center;
}

/*
 * Panel variant: a dark block with a notch cut out of the bottom-right corner.
 * The notch is a corner mask, not an image, so it scales with the box.
 */
.cta--panel .cta__inner {
	max-width: var(--container-default);
	padding: clamp(2rem, 1rem + 4vw, 4rem);
	text-align: left;
	background: var(--color-dark);
	color: var(--color-dark-text);
	border-radius: var(--radius-l);

	--notch: clamp(3rem, 8vw, 6rem);

	mask-image:
		linear-gradient(#000 0 0),
		linear-gradient(#000 0 0);
	mask-size:
		100% calc(100% - var(--notch)),
		calc(100% - var(--notch)) 100%;
	mask-position: top left, top left;
	mask-repeat: no-repeat;
	mask-composite: add;
}

.cta--panel .cta__title {
	max-width: 20ch;
	font-size: var(--text-3xl);
}

.cta--panel .cta__text {
	margin-inline: 0;
	max-width: 46ch;
	color: var(--color-dark-muted);
}

.cta--panel .cta__actions {
	justify-content: flex-start;
}

/* Buttons need to invert on the dark panel. */
.cta--panel {
	--color-accent: var(--color-brand-soft);
	--color-accent-hover: #ffffff;
	--color-accent-contrast: var(--color-dark);
	--color-text: var(--color-dark-text);
}