/*
 * Closing banner block. Loaded only on pages that use it. Mobile first; desktop from 900px.
 * Source: the builder's ".band" CSS. Colours come from the look: --band-bg, --band-ink.
 * The main button uses the accent colour in both looks so it stands out on the band.
 */

.cta-band { padding: 48px 0; background: var(--band-bg); color: var(--band-ink); }

.cta-band__inner { display: grid; gap: 20px; }

.cta-band__title { margin: 0; font-size: 1.9rem; line-height: 1.1; color: inherit; }
.cta-band__text { margin: 8px 0 0; opacity: 0.85; }

.cta-band__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-band__ctas .button { flex: 1 1 150px; background: var(--accent); color: var(--on-accent); }
.cta-band__ctas .button--secondary { background: transparent; border-color: currentcolor; color: inherit; }
.cta-band__ctas .button--alert { background: transparent; border-color: var(--accent-2); color: inherit; }

/* A closing banner that ends the page sits flush against the footer (no gap). */
.site-main:has(> .cta-band:last-child) + .ftr { margin-top: 0; }

@media (min-width: 900px) {
	.cta-band { padding: 72px 0; }
	.cta-band__title { font-size: 2.9rem; }
	.cta-band__inner { grid-template-columns: 1fr auto; align-items: center; gap: 24px 48px; }
	.cta-band__ctas .button { flex: 0 0 auto; min-height: 56px; padding: 0 26px; font-size: 17px; }
}