/*------------------------------------*\
    
    CTA Banner Block - Specific Styling
    
    This file contains styles specific to the CTA Banner block.
    The block primarily uses the full-width-image-text component
    styles but can be extended here for CTA-specific customizations.
    
\*------------------------------------*/

/* CTA Banner specific overrides */
.cta-banner {
    /* Add any CTA banner specific styles here */
}

.cta-banner .btn-group {
    /* CTA button group spacing */
    margin-top: 30px;
}

.cta-banner .btn-group .btn {
    /* Individual CTA button spacing */
    margin-right: 15px;
    margin-bottom: 15px;
}

.cta-banner .btn-group .btn:last-child {
    margin-right: 0;
}

/* Responsive adjustments for CTA banner */
@media (min-width: 768px) {
    .cta-banner .btn-group {
        margin-top: 40px;
    }
    
    .cta-banner .btn-group .btn {
        margin-right: 20px;
        margin-bottom: 0;
    }
}

/* CTA banner background style variations */
.cta-banner.bg-dark-blue .sub-heading {
    color: rgba(255, 255, 255, 0.8);
}

.cta-banner.bg-dark-blue .full-width-image-text__headline {
    color: var(--white);
}

.cta-banner.bg-dark-blue .full-width-image-text__description {
    color: rgba(255, 255, 255, 0.9);
}