/**
 * Section: cta-banner
 *
 * Extracted from template-parts/cta_banner.php.
 * Loaded via trunorth_enqueue_section('cta-banner').
 */

.CTA-Banner {
        position: relative;
        /* Full-width bg. Content + arrow grouped tight, centered as a
           unit in the viewport with moderate gap between them. */
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: calc(var(--vw) * 4) calc(var(--vw) * 5) !important;
        background-color: #f5f5f5;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: calc(var(--vw) * 3);
        box-sizing: border-box;

        /* Undo the global section>* auto-margin rule so items stay
           grouped in the center instead of being spread apart. */
        > * {
            max-width: none !important;
            margin: 0 !important;
        }

        .CTA-Banner-Content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.5rem;

            h3 {
                font-size: var(--font-large);
                font-weight: 700;
                color: #4a4a4a;
            }
        }
    }