/*
==========================================================================
BLUEPRINT — CTA
==========================================================================
*/

/* CONTACT PAGE - SIDEBAR SEP */
.contact-sidebar-sep .fl-separator {
    max-width: var(--sep-width);
}


/* SECTION — full width wrapper with hard cut background */

.rw-cta-section {
    width: 100%;
    background: linear-gradient(
            to bottom,
            #ffffff var( --cta-section-split, 75% ),
            var( --cta-section-bg ) var( --cta-section-split, 75% )
    );
    padding: 0 5%;
}


/* CARD */

.rw-cta-card {
    position: relative;
    overflow: hidden;
    background: var( --cta-card-bg );
    border-radius: var( --cta-border-radius, 17px );
}


/* HAZE LAYER — sits between card bg and content */

.rw-cta-haze {
    display: var( --cta-haze-display, none );
    position: absolute;
    inset: 0;
    background-color: var( --cta-haze-color, transparent );
    background-image: var( --cta-haze-bg, none );
    background-size: var( --cta-haze-bg-size, 20px 20px );
    z-index: 1;
    pointer-events: none;
}

.rw-cta-haze--image {
    background-color: transparent;
    background-image: var( --cta-haze-bg, none );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var( --cta-haze-img-opacity, 0.2 );
}


/* INNER — content wrapper */

.rw-cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: var( --cta-padding, 60px );
    max-width: 1340px;
    min-height: 314px;
    margin: auto;
}


/* CONTENT — eyebrow + heading */

.rw-cta-content {
    flex: 1;
    max-width: 850px;
}

.rw-eye-txt.rw-cta-eyebrow {
    display: block;
    color: var( --cta-eye-color, #ffffff );
    margin-bottom: 5px;
}

.rw-cta-heading {
    color: var( --cta-title-color, #ffffff );
    margin: 0;
}


/* ACTION — button wrapper */

.rw-cta-action {
    flex-shrink: 0;
}

/* Preset CTA — buttons from rw_render_buttons() (global icons + .rw-btn styles) */
.rw-cta-action .rw-btns.rw-cta-rw-btns {
    margin: 0;
    display: inline-flex;
}

.rw-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background:
        var( --cta-btn-bg ) padding-box,
        var( --cta-btn-stroke, var( --cta-btn-bg ) ) border-box;
    color:         var( --cta-btn-text );
    border:        var( --cta-btn-border-width, 0px ) solid transparent;
    min-width:     var( --rw-btn-min-w );
    border-radius: var( --cta-btn-radius, var( --rw-btn-radius, 4px ) );
    padding:       var( --cta-btn-padding, var( --rw-btn-pad-t, 12px ) var( --rw-btn-pad-r, 24px ) var( --rw-btn-pad-b, 12px ) var( --rw-btn-pad-l, 24px ) );
    font-size:     var( --rw-btn-font-size, 16px );
    font-weight:   var( --rw-btn-font-weight, 500 );
    text-transform: var( --rw-btn-case, capitalize );
    text-decoration: none;
    white-space:   nowrap;
    transition:    background 0.25s ease, color 0.25s ease;
}

.rw-cta-btn:hover {
    background:
        var( --cta-btn-hover-bg ) padding-box,
        var( --cta-btn-stroke-h, var( --cta-btn-stroke, var( --cta-btn-hover-bg ) ) ) border-box;
    color:           var( --cta-btn-hover-text );
    text-decoration: none;
}

/* Icon inside button */
.rw-cta-btn i,
.rw-cta-btn svg {
    display: block;
    line-height: 1;
    flex-shrink: 0;
}


/* RESPONSIVE */

@media screen and ( max-width: 768px ) {

    .rw-cta-section {
        padding: 0 4%;
    }

    .rw-cta-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
    }

    .rw-cta-content {
        width: 100%;
    }

    .rw-cta-action {
        width: 100%;
        display: flex;
        justify-content: center;
    }

}

@media screen and ( max-width: 480px ) {

    .rw-cta-section {
        padding: 0 3%;
    }

    .rw-cta-btn {
        text-align: center;
    }

}