/* 视频列表页特定样式 (Video List Page Specific Styles) */

/* 面包屑统一样式 */
.breadcrumb {
    margin-top: 0 !important;
    padding-top: 5px !important;
}

/* 移动端body padding调整 - 为双层导航腾出空间 */
@media screen and (max-width: 768px) {
    body#vodshow {
        padding-top: 110px !important;
    }
}

/* ========================================
   1. 页面布局
   ======================================== */

.vod-show-page {
    padding: 20px 0;
}

.vod-list-container {
    min-height: 400px;
}

.vod-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

/* 默认视频卡片样式 (桌面端6列) */
.vod-item {
    width: calc(16.666% - 13px);
}

.vod-pic {
    padding-top: 140%;
    position: relative;
}

.vod-pic img {
    position: absolute;
    top: 0;
    left: 0;
}

/* ========================================
   2. 无结果提示
   ======================================== */

.no-result {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.5);
}

.no-result p {
    font-size: 16px;
}

/* ========================================
   3. 响应式 - 移动端 (每行3个)
   ======================================== */

@media screen and (max-width: 768px) {
    .container {
        padding: 0 18px;
    }

    .vod-show-page {
        padding: 15px 0;
    }

    .vod-list {
        gap: 10px;
    }

    .vod-item {
        width: calc(33.333% - 7px);
        flex-shrink: 0;
    }

    .vod-pic {
        padding-top: 140%;
    }

    .vod-pic img {
        position: absolute;
        top: 0;
        left: 0;
    }
}

/* ========================================
   4. 响应式 - 平板 (每行4个)
   ======================================== */

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }

    .vod-item {
        width: calc(25% - 12px);
    }

    .vod-pic {
        padding-top: 140%;
    }

    .vod-pic img {
        position: absolute;
        top: 0;
        left: 0;
    }
}

/* ========================================
   5. 响应式 - 桌面 (每行6个)
   ======================================== */

@media screen and (min-width: 1025px) {
    .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 30px;
    }

    .vod-item {
        width: calc(16.666% - 13px);
    }

    .vod-pic {
        padding-top: 140%;
    }

    .vod-pic img {
        position: absolute;
        top: 0;
        left: 0;
    }
}