/* ============================================================
   dy5 语义栅格 vod.css
   —— 等价 dy5.css 的 10 栅格体系（断点 768 / 1024 / 1440）
   条目类型：
     .vod-item       视频网格 / 轮播 / 导航按钮 / 资讯 / 播放源 / 选集 / 猜你喜欢
     .vod-rank-item  文本排行条目（原 col-lg-6 col-md-6 col-sm-4 col-xs-2 组合）
   宽度值与原 col-* 完全等价，模板 <style> 中不再重复书写。
   ============================================================ */

/* ---------- 基础（position / 内边距 / 浮动，等价 .col-* 基础段） ---------- */
.vod-item,
.vod-rank-item { position: relative; min-height: 1px; padding: 10px; float: left; }
@media (max-width: 767px) {
    .vod-item,
    .vod-rank-item { padding: 5px; }
}

/* ---------- .vod-item 默认档：等价 col-lg-6 col-md-6 col-sm-4 col-xs-3 ---------- */
.vod-item { width: 33.3333333%; }                     /* xs 3   <768 */
@media (min-width: 768px)  { .vod-item { width: 25%; } }                /* sm 4 */
@media (min-width: 1024px) { .vod-item { width: 16.6666667%; } }        /* md 6 */
@media (min-width: 1440px) { .vod-item { width: 16.6666667%; } }        /* lg 6 */

/* ---------- .vod-rank-item：等价 col-lg-6 col-md-6 col-sm-4 col-xs-2 ---------- */
.vod-rank-item { width: 50%; }                        /* xs 2   <768 */
@media (min-width: 768px)  { .vod-rank-item { width: 25%; } }           /* sm 4 */
@media (min-width: 1024px) { .vod-rank-item { width: 16.6666667%; } }   /* md 6 */
@media (min-width: 1440px) { .vod-rank-item { width: 16.6666667%; } }   /* lg 6 */

/* ---------- 顶部导航分类按钮：等价 col-lg-5 col-md-5 col-sm-5 col-xs-3 ---------- */
.nav-list .vod-item { width: 33.3333333%; }           /* xs 3   <768 */
@media (min-width: 768px)  { .nav-list .vod-item { width: 20%; } }      /* sm 5 */
@media (min-width: 1024px) { .nav-list .vod-item { width: 20%; } }      /* md 5 */
@media (min-width: 1440px) { .nav-list .vod-item { width: 20%; } }      /* lg 5 */

/* ---------- 首页最新资讯条目：等价 col-lg-3 col-md-3 col-sm-2 col-xs-1 ---------- */
.myui-vodlist__media .vod-item { width: 100%; }       /* xs 1   <768 */
@media (min-width: 768px)  { .myui-vodlist__media .vod-item { width: 50%; } }            /* sm 2 */
@media (min-width: 1024px) { .myui-vodlist__media .vod-item { width: 33.3333333%; } }    /* md 3 */
@media (min-width: 1440px) { .myui-vodlist__media .vod-item { width: 33.3333333%; } }    /* lg 3 */

/* ---------- detail/play 猜你喜欢：等价 col-md-5 col-sm-4 col-xs-3 ---------- */
.myui-vodlist__bd .vod-item { width: 33.3333333%; }   /* xs 3   <768 */
@media (min-width: 768px)  { .myui-vodlist__bd .vod-item { width: 25%; } }               /* sm 4 */
@media (min-width: 1024px) { .myui-vodlist__bd .vod-item { width: 20%; } }               /* md 5 */
@media (min-width: 1440px) { .myui-vodlist__bd .vod-item { width: 20%; } }               /* lg 沿用 md 5 */

/* ---------- detail 播放源剧集列表：等价 col-md-6 col-sm-4 col-xs-2 ---------- */
.myui-content__list.sort-list .vod-item { width: 50%; }                 /* xs 2   <768 */
@media (min-width: 768px)  { .myui-content__list.sort-list .vod-item { width: 25%; } }              /* sm 4 */
@media (min-width: 1024px) { .myui-content__list.sort-list .vod-item { width: 16.6666667%; } }      /* md 6 */
@media (min-width: 1440px) { .myui-content__list.sort-list .vod-item { width: 16.6666667%; } }      /* lg 沿用 md 6 */

/* ---------- play 选集按钮：等价 col-md-2 col-sm-5 col-xs-3 ---------- */
.myui-content__list.playlist .vod-item { width: 33.3333333%; }         /* xs 3   <768 */
@media (min-width: 768px)  { .myui-content__list.playlist .vod-item { width: 20%; } }              /* sm 5 */
@media (min-width: 1024px) { .myui-content__list.playlist .vod-item { width: 50%; } }              /* md 2 */
@media (min-width: 1440px) { .myui-content__list.playlist .vod-item { width: 50%; } }              /* lg 沿用 md 2 */

/* ---------- flickity 轮播（等价 dy5.css ⑫ 段，选择器 .col-lg-6 → .vod-item） ---------- */
.flickity .vod-item { float: none; display: block; }
#index-hot.flickity .vod-item {
    -webkit-flex: 0 0 16.6666667%; flex: 0 0 16.6666667%;
    max-width: 16.6666667%; scroll-snap-align: start;
}
@media (max-width: 1439px) {
    #index-hot.flickity .vod-item { -webkit-flex-basis: 16.6666667%; flex-basis: 16.6666667%; max-width: 16.6666667%; }
}
@media (max-width: 1023px) {
    #index-hot.flickity .vod-item { -webkit-flex-basis: 25%; flex-basis: 25%; max-width: 25%; }
}
@media (max-width: 479px) {
    #index-hot.flickity .vod-item { -webkit-flex-basis: 33.3333333%; flex-basis: 33.3333333%; max-width: 33.3333333%; }
}