/* ============================================================
   n1.315nn.com 布局错位修复补丁
   作用：补齐 app.css / all.css 中缺失的自定义栅格类，
        并约束播放器与前置广告容器的尺寸。
   说明：app.css 与 all.css 中不存在 col-60 / col-30 等自定义
        栅格类定义，导致模板中大量使用的栅格结构退化为块级
        元素，播放器与广告区域因此错位。本补丁只补规则，
        不改动原有样式文件。
   ============================================================ */

/* ---------- 1. 补齐自定义栅格系统 ---------- */
.row{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-right:-8px;
  margin-left:-8px;
}
/* 只补 padding/position，不覆盖 Bootstrap 自带的 .col-sm 等宽度
   （app.css 中 .col-sm 为 flex-grow:1，必须保持原样） */
.row > [class*="col-"]{
  position:relative;
  min-height:1px;
  padding-right:8px;
  padding-left:8px;
}

/* 缺失的自定义栅格列宽（app.css/all.css 中均无定义） */
.col-20{ flex:0 0 16.666667%; max-width:16.666667%; }
.col-30{ flex:0 0 25%;       max-width:25%; }
.col-40{ flex:0 0 33.333333%;max-width:33.333333%; }
.col-50{ flex:0 0 41.666667%;max-width:41.666667%; }
.col-60{ flex:0 0 58.333333%;max-width:58.333333%; }
.col-70{ flex:0 0 66.666667%;max-width:66.666667%; }
.col-80{ flex:0 0 83.333333%;max-width:83.333333%; }
.col-100{flex:0 0 100%;      max-width:100%; }

/* ---------- 1b. 广告容器 .jsv 系列（app.css 中完全缺失） ----------
   indexhead.js 注入的横幅广告容器，无约束导致 960x60 图片
   以原始尺寸纵向堆叠，把播放器整体挤到屏幕外。 */
.jsv{
  width:100%;
  margin-bottom:8px;
  overflow:hidden;
}
.jsv-g1{
  display:block !important;
  width:100%;
}
/* 注意层级：.jsv-g1 的直接子元素是 .container-fluid，
   .col-sm 广告条在 container-fluid 内部（indexhead.js 的嵌套结构）。 */
.jsv-g1 > .container-fluid{
  display:block !important;
  width:100%;
  max-width:100%;
  padding-left:0;
  padding-right:0;
}
/* 广告条全部保留，一行一个纵向排列 */
.jsv-g1 .col-sm{
  display:block !important;
  flex:0 0 100% !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  float:none !important;
  padding-left:0;
  padding-right:0;
  margin-bottom:6px;
}
/* 横幅图统一固定高度 60px（960x60 / 960x80 都归一到同一高度），
   宽度撑满容器；object-fit:fill 保证整张图完整显示、不裁切。
   注：广告内容与条数完全保留（一行一个），仅约束尺寸。 */
.jsv img,
.jsv-g1 img{
  display:block;
  width:100% !important;
  height:60px !important;
  max-width:100% !important;
  object-fit:fill;
}
/* 图源失效(naturalWidth=0)的横幅不占空白高度 */
.jsv img:not([src]),
.jsv-g1 img:not([src]){
  display:none !important;
}
/* app.css 里有 .jsv-g1 a{display:block;height:60px}，会把每条横幅锁死在
   60px 高，960x60 的图被裁掉下半截、还溢出压到下一条上。
   这里把 a 的高度也统一成 60px，与图片一致，不再溢出。 */
.jsv a,
.jsv-g1 a{
  display:block;
  width:100%;
  height:60px !important;
  max-height:none !important;
  line-height:0;
}
/* 已加载的横幅之间保留原有间距 */
.jsv-g1 .col-sm:empty{ display:none !important; }

/* 主内容区（left / right 两栏）：左侧视频，右侧推荐 */
#videoShowPage .left{  flex:0 0 66.666667%; max-width:66.666667%; }
#videoShowPage .right{ flex:0 0 33.333333%; max-width:33.333333%; }

@media (max-width:991px){
  #videoShowPage .left,
  #videoShowPage .right{ flex:0 0 100%; max-width:100%; }
}
@media (max-width:767px){
  .col-20,.col-30,.col-40,.col-50,.col-60,.col-70,.col-80{
    flex:0 0 100%;
    max-width:100%;
  }
}
@media (max-width:575px){
  .col-30{ flex:0 0 50%; max-width:50%; }
  .col-40,.col-50,.col-60,.col-70,.col-80{
    flex:0 0 100%;
    max-width:100%;
  }
}

/* ---------- 2. 播放器容器：16:9 自适应，杜绝 0 高度 ----------
   注意两点：
   1) app.css 中 #videoShowPage .videoPlayContainer{display:inline-block}，
      inline-block 会让容器宽度塌缩，需强制块级；
   2) grow 时 flex 布局会把剩余空间留白——本项目详情页只有左栏、
      没有右栏，所以让左栏占满整行。 */
#videoShowPage .row > .left.col-60,
#videoShowPage .row > .left{
  flex:0 0 100% !important;
  max-width:100% !important;
}
#videoShowPage .row > .right{
  flex:0 0 100% !important;
  max-width:100% !important;
  margin-top:16px;
}
/* 详情页「视频推荐」栏同样套在 .col-60（58.33%）里 → 右侧空一半，
   铺满整行后 4 列卡片从 173px 放大到 292px */
#videoShowPage > .row > .col-60{
  flex:0 0 100% !important;
  max-width:100% !important;
}
.videoPlayContainer{
  display:block !important;
  position:relative;
  width:100% !important;
  max-width:100% !important;
  background:#000;
  overflow:hidden;
}
/* 关闭 app.css 里配套的 .scale（padding 撑高的旧方案） */
.videoPlayContainer .scale{ margin-top:0 !important; }
/* 用 aspect-ratio 锁定 16:9，老浏览器回退到固定高度 */
.videoPlayContainer{
  aspect-ratio:16 / 9;
  height:0;
  padding-bottom:56.25%;   /* 回退方案：16:9 高度 */
  position:relative;
}
@supports (aspect-ratio:16 / 9){
  .videoPlayContainer{
    height:auto;
    padding-bottom:0;
    aspect-ratio:16 / 9;
  }
}
/* AliPlayer 渲染出的 .prism-player 撑满容器 */
.videoPlayContainer .prism-player,
.videoPlayContainer #J_prismPlayer{
  position:absolute !important;
  top:0;
  left:0;
  width:100% !important;
  height:100% !important;
}
/* 播放器外部包裹层
   ⚠ 这个 .bofang_box 是旧 AliPlayer 的遗留占位层，里面只剩一段已执行的
   <script>，但它是 position:relative 且排在 .dplayer(absolute) 之后，
   会整个盖在播放器上方吞掉 mousemove / click：
     · 播放中 DPlayer 隐藏控制栏后，鼠标划过也唤不出来 → "按钮不见了"
     · 点视频也没反应
   这里让它不再拦截指针事件（内容为空壳，隐藏不影响任何功能）。 */
.bofang_box{
  position:relative;
  width:100%;
  height:100%;
  pointer-events:none !important;
  z-index:0;
}
.bofang_box > div{ width:100%; }

/* DPlayer 控制栏：常显 + 提升层级，确保播放/暂停/进度/全屏等按钮始终可见 */
.videoPlayContainer .dplayer-controller{
  opacity:1 !important;
  transform:none !important;
  pointer-events:auto !important;
  z-index:20;
}
.videoPlayContainer .dplayer.dplayer-hide-controller .dplayer-controller{
  opacity:1 !important;
  transform:none !important;
}
/* 中间的播放/暂停大按钮：暂停时正常显示，不被其它层遮挡 */
.videoPlayContainer .dplayer-bezel{
  z-index:15;
}

/* ---------- 3. 前置广告：容器居中 + 图片不再拉伸/溢出 ---------- */
.pre-ad-wrap{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  z-index:9999;
  text-align:center;
  overflow:hidden;
}
/* 广告内容整体居中 */
.pre-ad-wrap a{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:90%;
  max-height:80%;
  line-height:0;
}
.pre-ad-wrap img{
  display:block;
  width:auto;
  height:auto;
  max-width:90%;
  max-height:80%;
  /* 定尺寸广告图按原比例完整显示，不裁切、不变形 */
  object-fit:contain;
  margin:0;
}
@media (max-width:767px){
  .pre-ad-wrap a{ max-width:80%; max-height:60%; }
  .pre-ad-wrap img{ max-width:80%; max-height:60%; }
}

/* 关闭按钮：不被图片遮挡，点击区域足够大 */
.ad-close{
  position:absolute;
  right:8px;
  top:8px;
  z-index:10001;
  width:32px;
  height:32px;
  line-height:30px;
  text-align:center;
  font-size:26px;
  color:#fff;
  background:rgba(0,0,0,.55);
  border-radius:50%;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
}
.ad-close:hover{ background:rgba(0,0,0,.8); }

/* 倒计时文案固定在底部，不再随图片漂移 */
.count-text{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:10000;
  color:#fff;
  font-size:15px;
  line-height:1.4;
  background:rgba(0,0,0,.45);
  padding:3px 12px;
  border-radius:3px;
  white-space:nowrap;
}
@media (max-width:575px){
  .count-text{ font-size:13px; bottom:8px; }
  .ad-close{ width:28px; height:28px; line-height:26px; font-size:22px; right:6px; top:6px; }
}

/* ---------- 4. 视频列表栅格（首页 / 列表页 / 侧栏推荐） ---------- */

/* 列表页：左侧「视频分类」窄栏 + 右侧视频列表 并排。
   模板里分类栏用的是 Bootstrap 的 col-lg-11（91.67%），会独占整行
   把视频列表挤到下面去，必须限宽才能恢复左右排列。 */
#videoListPage > .row{
  align-items:flex-start;
  flex-wrap:wrap;
}
#videoListPage > .row > .cateContainer{
  flex:0 0 200px !important;
  max-width:200px !important;
  margin-right:14px;
}
/* 模板里紧跟在分类栏后面的空占位列（col-lg-1），去掉 */
#videoListPage > .row > .col-lg-1{
  display:none !important;
}
/* 右侧视频列表吃掉剩余宽度 */
#videoListPage > .row > .col-60,
#videoListPage > .row > .col-lg-48{
  flex:1 1 0 !important;
  max-width:calc(100% - 214px) !important;
  min-width:0 !important;
}
/* 分类栏里的长分类名不换行、超长省略，避免把侧栏撑破 */
#videoListPage .cateContainer ul li{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:991px){
  #videoListPage > .row > .cateContainer{ display:none !important; }
  #videoListPage > .row > .col-60,
  #videoListPage > .row > .col-lg-48{
    flex:0 0 100% !important;
    max-width:100% !important;
  }
}
#videoListPage .row > .right{
  flex:0 0 100% !important;
  max-width:100% !important;
  margin-top:16px;
}

.colVideoList{
  flex:0 0 25%;
  max-width:25%;
  padding-right:8px;
  padding-left:8px;
}
@media (max-width:991px){ .colVideoList{ flex:0 0 33.333333%; max-width:33.333333%; } }
@media (max-width:767px){ .colVideoList{ flex:0 0 50%; max-width:50%; } }
/* 仅超窄屏（<360px）才单列，常见 360/375/390 手机保持两列 */
@media (max-width:359px){ .colVideoList{ flex:0 0 100%; max-width:100%; } }

/* 视频卡片：等比封面，避免图片撑破栅格 */
.video-elem{
  position:relative;
  width:100%;
  overflow:hidden;
}
.video-elem .img{
  width:100%;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.video-elem .display.d-block{ display:block; width:100%; }

/* 封面比例：app.css 用 .scale{margin-top:60%}（5:3，偏矮），
   改成标准 16:9，预览图更高更接近视频截图 */
.video-elem .display .scale{
  margin-top:56.25% !important;
}
/* 标题区略放大，卡片整体更饱满 */
.video-elem .title{
  height:2.6rem !important;
  line-height:1.3rem !important;
  font-size:0.95rem !important;
}
/* 卡片之间留出纵向间距，避免贴在一起 */
.colVideoList{ margin-bottom:14px; }

.ad-layer{
  position:absolute;
  left:6px;
  bottom:6px;
  z-index:2;
}