/* ============================================================
   视频幻灯片样式 - Qiye Child Theme
   banner-video.css
   ============================================================ */

/* 视频幻灯片容器：相对定位，撑满父幻灯片高度 */
.featured-slide-video {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background-color: #000;
}

/* 关键修复：确保 owl-item 包裹层也有足够高度 */
.owl-carousel .owl-item .featured-slide-video {
    height: 100%;
}

/* 背景视频：绝对定位全覆盖，object-fit 保持比例裁剪 */
.banner-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none; /* 防止视频拦截点击事件 */
    /* iOS Safari 强制硬件加速 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* 视频幻灯片中的遮罩层：层级高于视频 */
.featured-slide-video .featured-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/*
 * 文字层：不覆盖 .container 的定位方式！
 * 父主题用 CSS Table 布局居中文字：
 *   .container = height:100%; position:relative
 *   .banner-wrap = display:table; position:absolute; top:0; left:0; height:100%; z-index:99
 *   .banner-info = display:table-cell; vertical-align:middle
 * 这里只需要给 .banner-wrap 加 z-index 让它在视频之上即可
 */
.featured-slide-video .banner-wrap {
    z-index: 2;
}

/* Owl Carousel 切换时视频幻灯片不要 background-image 的空白 */
.featured-slide-video[style*="background-image"] {
    background-image: none !important;
}

/* ============================================================
   移动端响应式修复 - 视频保持 16:9 比例，容器自适应
   ============================================================ */

/* 平板竖屏 (768px - 959px) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .featured-slide-video {
        height: 56.25vw !important;
        min-height: 350px !important;
        max-height: 500px !important;
    }
}

/* 手机横屏 (480px - 767px) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .featured-slide-video {
        height: 56.25vw !important;
        min-height: 260px !important;
        max-height: 420px !important;
    }
}

/* 手机竖屏 (<=479px) - 最关键：保持16:9比例 */
@media only screen and (max-width: 479px) {
    .featured-slide-video {
        /* 16:9 比例 = 56.25% 宽度 */
        height: 56.25vw !important;
        min-height: 180px !important;
        max-height: 320px !important;
    }

    .banner-video-bg {
        object-fit: cover;
        /* 视频填满容器，保持比例 */
        width: 100% !important;
        height: 100% !important;
    }

    /* 遮罩层加深，确保文字可读 */
    .featured-slide-video .featured-overlay {
        background: rgba(0, 0, 0, 0.45);
    }
}

/* iOS Safari 视频播放兼容 */
@supports (-webkit-touch-callout: none) {
    .banner-video-bg {
        -webkit-object-fit: cover;
    }
}