/* ============================================================
   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:flex !important;
  flex-wrap:wrap;
  gap:0;
  width:100%;
}
/* 注意层级：.jsv-g1 的直接子元素是 .container-fluid，
   .col-sm 广告条在 container-fluid 内部（indexhead.js 的嵌套结构）。 */
.jsv-g1 > .container-fluid{
  width:100%;
  max-width:100%;
  padding-left:0;
  padding-right:0;
}
.jsv-g1 .col-sm{
  flex:0 0 100% !important;
  max-width:100% !important;
  display:block !important;
}
/* 横幅图按容器宽度自适应，不再溢出 */
.jsv img,
.jsv-g1 img{
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:contain;
}
.jsv a{ display:block; width:100%; }

/* 横幅区最多保留首条，避免把播放器整体挤出首屏 */
.jsv-g1 .col-sm:nth-child(n+2){ display:none !important; }

/* 横幅区最多占首屏一小部分，避免把播放器整体挤出首屏。
   app.css 中存在更高特异性的 .container-fluid > .row > .col-sm 之类规则，
   这里用 !important 强制生效。 */
@media (max-width:767px){
  .jsv-g1 > .col-sm:not(:first-child){ 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 高度 ---------- */
.videoPlayContainer{
  position:relative;
  width:100%;
  background:#000;
  overflow:hidden;
}
/* 用 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{
  position:relative;
  width:100%;
  height:100%;
}
.bofang_box > div{ width:100%; }

/* ---------- 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. 视频列表栅格（首页 / 侧栏推荐） ---------- */
.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%; } }
@media (max-width:399px){ .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%; }
.ad-layer{
  position:absolute;
  left:6px;
  bottom:6px;
  z-index:2;
}