/**
 * creapulse-tools — CTA banner (feature 036).
 *
 * Dresses the .cpt-cta-banner columns as the charte's call-to-action callout
 * (brand/visual-identity.md §5): subtle surface, rule border, 8px corners,
 * and a 4px left rule in the accent — "for what must stop the eye, a
 * call-to-action callout for instance". Values from CreapulseTools\Brand,
 * through the --cp-* variables; nothing here names a colour.
 *
 * The layout itself is NOT here: the two native columns split the row and
 * stack on a narrow screen without this sheet. It only dresses them.
 */

/*
 * Two classes, not one: Enfold sets `border-color` on every `div` of its
 * content area (`.main_color div`, specificity 0,1,1), which beat a lone class
 * and would turn the accent rule grey — as it once did for the TL;DR.
 */
.wp-block-columns.cpt-cta-banner {
	gap: 1rem 1.5rem;
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--cp-surface-subtle);
	border: 1px solid var(--cp-rule);
	border-left: 4px solid var(--cp-accent);
	border-radius: 8px;
}

.wp-block-columns.cpt-cta-banner p,
.wp-block-columns.cpt-cta-banner .wp-block-buttons {
	margin: 0;
}

/* Stacked (WordPress stacks columns under 782px): the button follows the text. */
@media (max-width: 781px) {

	.wp-block-columns.cpt-cta-banner .wp-block-buttons {
		justify-content: flex-start;
	}
}