.mtvh-hero {
    display: flex;
    width: 100%;
    height: var(--mtvh-h-d, 850px);
    gap: var(--mtvh-gap-d, 15px);
    padding: var(--mtvh-pt-d, 20px) var(--mtvh-pr-d, 20px) var(--mtvh-pb-d, 20px) var(--mtvh-pl-d, 20px);
    background: var(--mtvh-bg, #fff);
    box-sizing: border-box;
    overflow: hidden;
}

.mtvh-video-item {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: var(--mtvh-radius, 0px);
}

.mtvh-video-item video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: var(--mtvh-fit, cover);
    object-position: var(--mtvh-position, center center);
    border: 0;
}

@media (max-width: 1024px) {
    .mtvh-hero {
        height: var(--mtvh-h-t, 650px);
        gap: var(--mtvh-gap-t, 10px);
        padding: var(--mtvh-pt-t, 15px) var(--mtvh-pr-t, 15px) var(--mtvh-pb-t, 15px) var(--mtvh-pl-t, 15px);
    }
}

@media (max-width: 767px) {
    .mtvh-hero {
        height: var(--mtvh-h-m, 500px);
        gap: var(--mtvh-gap-m, 5px);
        padding: var(--mtvh-pt-m, 10px) var(--mtvh-pr-m, 5px) var(--mtvh-pb-m, 10px) var(--mtvh-pl-m, 5px);
    }

    .mtvh-hero.mtvh-mobile-stack {
        flex-direction: column;
        height: auto;
    }

    .mtvh-hero.mtvh-mobile-stack .mtvh-video-item {
        flex: 0 0 var(--mtvh-h-m, 500px);
        height: var(--mtvh-h-m, 500px);
    }
}

/* v1.4: reliable iPhone fallback using one combined mobile MP4. */
.mtvh-mobile-combined {
    display: none;
}

@media (max-width: 767px) {
    .mtvh-hero.mtvh-use-mobile-combined > .mtvh-video-item {
        display: none;
    }

    .mtvh-hero.mtvh-use-mobile-combined .mtvh-mobile-combined {
        display: block;
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        overflow: hidden;
        border-radius: var(--mtvh-radius, 0px);
    }

    .mtvh-hero.mtvh-use-mobile-combined .mtvh-mobile-combined video {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center center;
        border: 0;
    }

    /* The combined video contains three equal-width panels. These overlays
       preserve the editable mobile gap/background look from WPBakery. */
    .mtvh-hero.mtvh-use-mobile-combined .mtvh-mobile-separator {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 2;
        width: var(--mtvh-gap-m, 5px);
        background: var(--mtvh-bg, #fff);
        pointer-events: none;
        transform: translateX(-50%);
    }

    .mtvh-hero.mtvh-use-mobile-combined .mtvh-mobile-separator-1 {
        left: 33.333333%;
    }

    .mtvh-hero.mtvh-use-mobile-combined .mtvh-mobile-separator-2 {
        left: 66.666667%;
    }
}
