/* =========================================================
   dy5 模板 - 语义化栅格 vod.css
   ---------------------------------------------------------
   作用：把原模板 Bootstrap 风格的条目栅格 class
   （col-lg-* / col-md-* / col-sm-* / col-xs-*）
   等价替换为语义化的 vod-item / vod-rank-item。
   视觉宽度与原模板完全一致：
     断点沿用原模板：默认(<768px) / ≥768 / ≥1024 / ≥1440
     语义：宽度值 = 每行显示 N 个条目
   ========================================================= */

/* ---- 基础：所有栅格条目 ---- */
.vod-item,
.vod-rank-item {
    position: relative;
    min-height: 1px;
    float: left;
}

/* =========================================================
   默认（手机，<768px）— 等价 col-xs-*
   ========================================================= */
.vod-item { width: 33.3333333%; padding: 10px; }                 /* col-xs-3：每行3个 */
.vod-rank-item { width: 50%; padding: 0 !important; }            /* col-xs-2 + padding-0：每行2个 */

/* 猜你喜欢（详情/播放页 .myui-vodlist__bd）：col-xs-3 每行3个 */
.myui-vodlist__bd .vod-item { width: 33.3333333%; }

/* 资讯条目（首页 .myui-vodlist__media）：col-xs-1 每行1个 */
.myui-vodlist__media .vod-item { width: 100%; }

/* 头部下拉导航（.nav-list）：col-xs-3 每行3个 */
.nav-list .vod-item { width: 33.3333333%; }

/* 选集列表（详情页 .myui-content__list，由 JS 动态加 class）：col-xs-2 每行2个 */
.myui-content__list .vod-item { width: 50%; }

/* ---- 平板（≥768px）— 等价 col-sm-* ---- */
@media (min-width: 768px) {
    .vod-item { width: 25%; }                                    /* col-sm-4：每行4个 */
    .vod-rank-item { width: 25%; }                               /* col-sm-4：每行4个 */
    .myui-vodlist__bd .vod-item { width: 25%; }                  /* col-sm-4：每行4个 */
    .myui-vodlist__media .vod-item { width: 50%; }               /* col-sm-2：每行2个 */
    .nav-list .vod-item { width: 20%; }                          /* col-sm-5：每行5个 */
    .myui-content__list .vod-item { width: 25%; }                /* col-sm-4：每行4个 */
}

/* ---- 桌面（≥1024px）— 等价 col-md-* ---- */
@media (min-width: 1024px) {
    .vod-item { width: 16.6666667%; }                            /* col-md-6：每行6个 */
    .vod-rank-item { width: 16.6666667%; }                       /* col-md-6：每行6个 */
    .myui-vodlist__bd .vod-item { width: 20%; }                  /* col-md-5：每行5个 */
    .myui-vodlist__media .vod-item { width: 33.3333333%; }       /* col-md-3：每行3个 */
    .nav-list .vod-item { width: 20%; }                          /* col-md-5：每行5个 */
    .myui-content__list .vod-item { width: 16.6666667%; }        /* col-md-6：每行6个 */
}

/* ---- 大屏（≥1440px）— 等价 col-lg-* ---- */
@media (min-width: 1440px) {
    .vod-item { width: 16.6666667%; }                            /* col-lg-6：每行6个 */
    .vod-rank-item { width: 16.6666667%; }                       /* col-lg-6：每行6个 */
    .myui-vodlist__bd .vod-item { width: 20%; }                  /* 原仅 col-md-5，无 col-lg-*，继承 md */
    .myui-vodlist__media .vod-item { width: 33.3333333%; }       /* col-lg-3：每行3个 */
    .nav-list .vod-item { width: 20%; }                          /* col-lg-5：每行5个 */
    .myui-content__list .vod-item { width: 16.6666667%; }        /* col-lg-6：每行6个 */
}

/* ---- 移动端收窄（原内联样式 [class*=col-] 的等价）---- */
@media (max-width: 767px) {
    .vod-item { padding: 5px; }
}