/*
 * MB Hero Split 2.1.3
 * Robust viewport breakout: hero is always full viewport width,
 * Elementor inner content remains boxed, media is exact right 50vw.
 */
.mb-hero-split{
    --mb-hero-height:650px;
    --mb-hero-left-bg:#fff;
    --mb-hero-overlay:rgba(0,0,0,0);
    --mb-hero-transition:850ms;

    position:relative!important;

    /* Break out of ANY boxed Elementor/page parent. */
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    align-self:stretch!important;

    padding-left:0!important;
    padding-right:0!important;
    min-height:var(--mb-hero-height)!important;
    isolation:isolate;
    overflow:hidden!important;
    background:var(--mb-hero-left-bg)!important;
}

/* Static fallback before JS initializes. Exact right half. */
.mb-hero-split::before{
    content:"";
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:50%!important;
    width:50%!important;
    height:100%!important;
    margin:0!important;
    z-index:0;
    pointer-events:none;
    background-image:var(--mb-hero-fallback-image,none);
    background-repeat:no-repeat;
    background-size:cover!important;
    background-position:var(--mb-hero-fallback-position,center center);
    background-color:#111;
}

.mb-hero-split.mb-hero-ready::before{
    opacity:0;
}

/* Rotating image area = exact right 50% of the viewport hero. */
.mb-hero-split > .mb-hero-media{
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:50%!important;
    width:50%!important;
    max-width:none!important;
    min-width:0!important;
    height:100%!important;
    min-height:100%!important;
    margin:0!important;
    padding:0!important;
    z-index:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
    background:#111;
}

.mb-hero-split > .mb-hero-media::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:4;
    background:var(--mb-hero-overlay);
    pointer-events:none;
}

/* Every slide physically covers the whole media half. No contain/letterbox. */
.mb-hero-split .mb-hero-slide{
    position:absolute!important;
    inset:-2.5%!important;
    width:105%!important;
    height:105%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    z-index:1;
    opacity:0;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center center;
    background-color:#111;
    will-change:opacity,transform;
    transform:translateZ(0) scale(1.01);
    transition:opacity var(--mb-hero-transition) cubic-bezier(.22,.61,.36,1);
}

.mb-hero-split .mb-hero-slide.is-active{
    opacity:1;
    z-index:2;
}

/* Elementor keeps this shell boxed. It is only the editable content grid. */
.mb-hero-split > .e-con-inner,
.mb-hero-split .mb-hero-layout-root{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    /* DO NOT override Elementor max-width here. */
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:minmax(var(--mb-hero-height),auto)!important;
    min-height:var(--mb-hero-height)!important;
    gap:0!important;
    align-items:stretch!important;
}

.mb-hero-split .mb-hero-left,
.mb-hero-split .mb-hero-right{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    align-self:stretch!important;
}

.mb-hero-split .mb-hero-left{
    grid-column:1!important;
    grid-row:1!important;
    position:relative!important;
    z-index:2!important;
    background:var(--mb-hero-left-bg)!important;
}

.mb-hero-split .mb-hero-right{
    grid-column:2!important;
    grid-row:1!important;
    position:relative!important;
    z-index:5!important;
    min-height:var(--mb-hero-height)!important;
    background:transparent!important;
    overflow:visible!important;
}

.elementor-editor-active .mb-hero-split .mb-hero-right{
    outline:1px dashed rgba(255,255,255,.24);
    outline-offset:-1px;
}

/* Tablet/mobile: media is a real full-width top row, content below. */
@media (max-width:1024px){
    .mb-hero-split{
        min-height:0!important;
    }

    .mb-hero-split::before,
    .mb-hero-split > .mb-hero-media{
        top:0!important;
        right:0!important;
        bottom:auto!important;
        left:0!important;
        width:100%!important;
        height:var(--mb-hero-height)!important;
        min-height:var(--mb-hero-height)!important;
    }

    .mb-hero-split > .e-con-inner,
    .mb-hero-split .mb-hero-layout-root{
        grid-template-columns:minmax(0,1fr)!important;
        grid-template-rows:var(--mb-hero-height) auto!important;
        min-height:0!important;
    }

    .mb-hero-split .mb-hero-right{
        grid-column:1!important;
        grid-row:1!important;
        min-height:var(--mb-hero-height)!important;
        width:100%!important;
        max-width:none!important;
    }

    .mb-hero-split .mb-hero-left{
        grid-column:1!important;
        grid-row:2!important;
        min-height:0!important;
        width:100%!important;
    }
}

@media (max-width:767px){
    .mb-hero-split .mb-hero-slide{
        inset:-1.5%!important;
        width:103%!important;
        height:103%!important;
    }
}

@media (prefers-reduced-motion:reduce){
    .mb-hero-split .mb-hero-slide{
        transition-duration:.2s!important;
        animation:none!important;
        transform:none!important;
    }
}