/**
 * Dark CTA band (template-parts/components/cta-band.php).
 *
 * Shared by the CFD page and, next, VISIO. The frame is .band in base.css:
 * width, page inset, radius, overflow and --color-surface-darkest all come
 * from there, so nothing in this file declares a surface or a width.
 */

.cta-band {
	/* The inset the band is already inset by, applied vertically too, so the
	   band's corners have the same clearance on all four sides. The 404 band
	   takes its margin from the same property for the same reason. */
	margin-block: var(--page-inset);
	padding-block: var(--section-pad-y);
}

/* Copy left, action right. 1fr auto rather than 1fr 1fr: the right column is
   one button, and reserving half the band for it would leave the copy at half
   measure to no purpose. The gap is the site's two-column gap, the one every
   section header uses. */
.cta-band__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 124px;
	align-items: center;
}

/* center here, unlike the section header's start. The rule that makes headers
   top-align is that centring ties the eyebrow-to-headline gap to the length of
   the description; there is no description in the right column here, only a
   button, so there is nothing for its height to be tied to. */

.cta-band__headline {
	color: var(--color-heading-text-on-dark);
}

.cta-band .eyebrow {
	margin-bottom: 32px; /* the eyebrow's own gap to the headline, site-wide */
}

.cta-band__text {
	margin-top: 32px;
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-line);
	font-weight: var(--type-body-lg-weight);
	color: var(--color-body-text-on-dark);
}

@media (max-width: 1024px) {
	/* Stacked, so the button is no longer a column and the 124px gutter has
	   nothing to hold apart. 32px is the stacking step the section header
	   takes at this width. */
	.cta-band__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		align-items: start;
	}

	/* Full width so its 44px target is the whole card edge to edge, rather
	   than a short button floating in a stacked block. */
	.cta-band__action .btn-primary {
		width: 100%;
		justify-content: center;
	}
}