/* 批次18 · 视频栏目专属样式（videoList.jsp / videoDetail.jsp 引用，?v=20260915h）
   基调：YouTube 频道页质感——深蓝页头、16:9 网格卡、播放器优先详情。全站 style.min.css 不在此改。 */

/* ===== 列表页头（深蓝横幅） ===== */
.vh-head{background:linear-gradient(135deg,#01215c 0%,#0b3f8f 60%,#0b75be 100%);color:#fff;padding:26px 0 20px;}
.vh-crumb{font-size:12.5px;color:#bcd3ee;margin-bottom:10px;}
.vh-crumb a{color:#e8f1fb;text-decoration:none;}
.vh-crumb a:hover{color:#fff;text-decoration:underline;}
.vh-crumb span{margin:0 6px;color:#6f97c9;}
.vh-crumb i{margin-right:4px;}
.vh-h1{font-size:30px;line-height:1.25;font-weight:700;margin:0 0 8px;color:#fff;font-family:'Oswald','Poppins',Arial,sans-serif;text-transform:none;}
.vh-lead{font-size:14.5px;line-height:1.65;color:#d6e6f8;margin:0 0 14px;max-width:820px;}
.vh-chips{display:flex;flex-wrap:wrap;gap:8px;}
.vh-chip{display:inline-block;padding:6px 14px;border-radius:16px;font-size:13px;line-height:1.4;color:#dcecfb;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);text-decoration:none;transition:background .2s;}
.vh-chip:hover{background:rgba(255,255,255,.22);color:#fff;}
.vh-chip.active{background:#fff;color:#0b3f8f;border-color:#fff;font-weight:700;}

/* ===== 卡片网格 ===== */
.v-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:26px;}
.v-card{background:#fff;border:1px solid #e8ecf1;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(16,42,67,.06);transition:box-shadow .3s,transform .3s;}
.v-card:hover{box-shadow:0 10px 26px rgba(16,42,67,.14);transform:translateY(-2px);}
.v-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#05070d;}
.v-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.v-card:hover .v-thumb img{transform:scale(1.04);}
.v-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(200,30,30,.9);transition:transform .25s,background .25s;}
.v-play::after{content:"";position:absolute;left:22px;top:16px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;}
.v-card:hover .v-play{transform:translate(-50%,-50%) scale(1.1);background:rgba(220,30,30,1);}
.v-chip-mini{position:absolute;left:10px;bottom:10px;background:rgba(1,33,92,.82);color:#fff;font-size:11.5px;line-height:1;padding:5px 9px;border-radius:3px;letter-spacing:.3px;}
.v-info{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1;}
.v-title{font-size:16px;line-height:1.4;margin:0 0 6px;font-weight:600;}
.v-title a{color:#17273c;text-decoration:none;}
.v-title a:hover{color:#0b75be;}
.v-date{font-size:12.5px;color:#8b98a9;margin-bottom:8px;}
.v-date i{margin-right:5px;}
.v-desc{font-size:13.5px;line-height:1.6;color:#5b6a7d;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.v-info .my_more1{margin-top:auto;align-self:flex-start;}

/* 精选大卡：图 7 : 文 5 横排（仅第 1 页第 1 条） */
.v-card--hero{grid-column:1/-1;flex-direction:row;}
.v-card--hero .v-thumb{width:58.3333%;aspect-ratio:16/9;flex:none;}
.v-card--hero .v-info{width:41.6667%;padding:24px 28px;justify-content:center;}
.v-card--hero .v-title{font-size:23px;margin-bottom:10px;}
.v-card--hero .v-title a{font-weight:700;}
.v-card--hero .v-desc{-webkit-line-clamp:4;font-size:14.5px;}

.v-empty{background:#fff;border:1px dashed #c9d5e2;border-radius:10px;padding:34px;text-align:center;color:#5b6a7d;font-size:15px;margin-top:26px;}
.v-empty a{color:#0b75be;font-weight:600;}

/* 无封面卡（imgPath 空的兜底） */
.v-card--noimg .v-info{padding-top:18px;}

/* ===== 分页（SSR） ===== */
.v-pages{text-align:center;padding:26px 0 4px;font-size:14px;}
.v-pages a,.v-pages span{display:inline-block;min-width:36px;padding:7px 12px;margin:0 3px;border:1px solid #d8e0e9;border-radius:5px;color:#33465c;text-decoration:none;background:#fff;}
.v-pages a:hover{border-color:#0b75be;color:#0b75be;}
.v-pages .cur{background:#0b75be;border-color:#0b75be;color:#fff;font-weight:700;}
.v-pages .gap{border:none;background:none;color:#9aa7b6;}

/* ===== 详情页：播放器优先版式 ===== */
.vp-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;margin-top:24px;align-items:start;}
.vp-main{min-width:0;}
.vp-stage{position:relative;background:#05070d;border-radius:12px;overflow:hidden;box-shadow:0 14px 34px rgba(5,20,40,.28);}
.vp-stage > video,.vp-player{display:block;width:100%;aspect-ratio:16/9;background:#05070d;}
.vp-facade{position:relative;aspect-ratio:16/9;cursor:pointer;display:block;}
.vp-facade img{width:100%;height:100%;object-fit:cover;display:block;}
.vp-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35));pointer-events:none;}
.vp-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:rgba(200,30,30,.92);transition:transform .25s,background .25s;z-index:2;}
.vp-play::after{content:"";position:absolute;left:33px;top:24px;border-style:solid;border-width:18px 0 18px 30px;border-color:transparent transparent transparent #fff;}
.vp-facade:hover .vp-play,.vp-facade:focus .vp-play{transform:translate(-50%,-50%) scale(1.08);background:#e02020;}
.vp-facade:focus{outline:3px solid #0b75be;outline-offset:3px;}
.vp-frame{display:block;width:100%;aspect-ratio:16/9;border:0;}
.vp-cover{display:block;width:100%;height:auto;}

.vp-titlebar{margin:18px 0 4px;}
.vp-h1{font-size:24px;line-height:1.35;font-weight:700;color:#17273c;margin:0 0 10px;}
.vp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;color:#8b98a9;margin-bottom:8px;}
.vp-meta i{margin-right:5px;}
.vp-chip{background:#eef4fb;color:#0b75be;border:1px solid #cfe1f5;border-radius:14px;padding:4px 12px;font-size:12.5px;text-decoration:none;}
.vp-chip:hover{background:#0b75be;color:#fff;}
.vp-chip-all{background:#f4f6f9;color:#5b6a7d;border-color:#e3e8ef;}
.vp-chip-all:hover{background:#5b6a7d;color:#fff;}
.vp-lede{border-left:4px solid #0b75be;background:#f6f9fd;padding:12px 16px;margin:14px 0 18px;font-size:14.5px;line-height:1.7;color:#43566b;border-radius:0 6px 6px 0;}
.vp-rich{margin-top:8px;}
.vp-rich img{max-width:100%;height:auto;}
.vp-rich .yt-facade{max-width:640px;}

/* ===== 侧栏 ===== */
.v-side{position:sticky;top:86px;}
.v-side .block{background:#fff;border:1px solid #e8ecf1;border-radius:10px;padding:14px 16px;margin-bottom:18px;box-shadow:0 1px 3px rgba(16,42,67,.06);}
.v-side .nav_h4{font-size:15.5px;font-weight:700;color:#01215c;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid #eef2f7;text-transform:uppercase;letter-spacing:.4px;}
.v-rel{display:flex;gap:10px;padding:8px 4px;border-radius:6px;text-decoration:none;}
.v-rel:hover{background:#f3f7fc;}
.v-rel + .v-rel{border-top:1px solid #f0f3f7;}
.v-rel-thum{position:relative;flex:0 0 124px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#05070d;}
.v-rel-thum img{width:100%;height:100%;object-fit:cover;display:block;}
.v-rel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:rgba(200,30,30,.88);}
.v-rel-play::after{content:"";position:absolute;left:10px;top:7px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;}
.v-rel-info{min-width:0;display:flex;flex-direction:column;gap:6px;}
.v-rel-t{font-size:13px;line-height:1.45;color:#17273c;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.v-rel:hover .v-rel-t{color:#0b75be;}
.v-rel-d{font-size:11.5px;color:#94a2b3;}

/* ===== 响应式 ===== */
@media only screen and (max-width:1260px){
  .v-grid{gap:18px;}
}
@media only screen and (max-width:1024px){
  .v-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vp-layout{grid-template-columns:minmax(0,1fr) 290px;gap:22px;}
  .v-side{position:static;}
}
@media only screen and (max-width:900px){
  .v-card--hero{flex-direction:column;}
  .v-card--hero .v-thumb,.v-card--hero .v-info{width:100%;}
  .v-card--hero .v-title{font-size:20px;}
}
@media only screen and (max-width:768px){
  .vp-layout{grid-template-columns:1fr;}
  .v-side{margin-top:26px;}
}
@media only screen and (max-width:640px){
  .v-grid{grid-template-columns:1fr;}
  .vh-h1{font-size:24px;}
  .vp-h1{font-size:19px;}
  .v-play{width:48px;height:48px;}
  .v-play::after{left:19px;top:13px;border-width:11px 0 11px 18px;}
  .vp-play{width:64px;height:64px;}
  .vp-play::after{left:25px;top:18px;border-width:14px 0 14px 23px;}
}