/* ========================================================================================
 * cta-band.css - .cta-band, .cta-band__body, .cta-band__actions (L2 layer).
 * Ported from .cd-cta (docs/design-source/homepage-template.html, search ".cd-cta").
 * Always a dark ground (solid ground-deep, or a photo behind a fixed scrim), so its
 * typography flip is baked in here rather than requiring a separate .on-dark class.
 * ======================================================================================== */

.cta-band{
	position:relative;isolation:isolate;overflow:hidden;
	border-radius:var(--cd-r-lg);padding:var(--cd-8) var(--cd-6);
	background:var(--cd-ground-deep);color:var(--cd-white);
}
.cta-band--photo{
	background-image:var(--bg);background-size:cover;background-position:center;
}
.cta-band--photo::after{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--cd-ground-deeper) 84%,transparent)}

.cta-band h2,.cta-band h3,.cta-band h4{color:var(--cd-white)}
.cta-band p{color:var(--cd-ink-invert-muted)}
.cta-band .eyebrow{color:var(--cd-ink-accent-invert)}
/* Same treatment as .on-dark .btn--ghost (button.css): baked in directly so a .cta-band,
   which is never anything but a dark ground, does not also need an .on-dark class to read
   correctly. */
.cta-band .btn--ghost{--btn-fg:var(--cd-white);--btn-border:var(--cd-white);
	--btn-bg-hover:var(--cd-white);--btn-fg-hover:var(--cd-ground-deep);--btn-border-hover:var(--cd-white)}

.cta-band__body{
	position:relative;z-index:1;
	display:flex;flex-direction:column;gap:var(--cd-5);align-items:center;text-align:center;
	max-width:56ch;margin-inline:auto;
}
.cta-band__actions{display:flex;gap:var(--cd-3);flex-wrap:wrap;justify-content:center}