/* components/cta-banner.css — dark full-bleed CTA block.
 * Shared by Home (final CTA) and About (CTA to Products).
 */

.cta-banner {
    background-color: var(--color-section-dark-bg);
    position: relative;
}

.cta-banner.has-bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Dark overlay so the (always-light) title/subtitle/button stay readable
   over an arbitrary admin-uploaded photo. */
.cta-banner.has-bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-section-dark-bg);
    opacity: 0.72;
}

.cta-banner .container {
    max-width: 640px;
    position: relative;
}

.cta-banner-title {
    color: var(--color-section-dark-text);
    margin-bottom: var(--space-4);
}

.cta-banner-subtitle {
    color: var(--color-section-dark-text-dim);
    font-size: 1.1875rem;
    margin-bottom: var(--space-8);
}

.cta-banner-btn {
    margin-top: var(--space-2);
}