/*
 * CTA band. Dark by default; colour comes from the shared band system, so it
 * can be switched to white or light grey without its text disappearing.
 */

.cta-two-columns__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sp-xl);
	align-items: center;
	padding-top: var(--sp-md);
	border-top: 1px solid var(--c-border);
}

.bg-inverse .cta-two-columns__row {
	border-top-color: rgba(255, 255, 255, 0.18);
}

.cta-two-columns .block__title {
	max-width: 24ch;
	margin-top: var(--sp-xs);
}

/* No colour here: a block-level colour loads after the shared band rules
   and would override the light text on a dark band. */
.cta-two-columns .prose {
	margin-top: var(--sp-sm);
}

@media (max-width: 782px) {
	.cta-two-columns__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-lg);
	}

	.cta-two-columns__action .btn {
		width: 100%;
	}
}