/* 视频课样式 — 复用 course-immersive.css 的 --ci-* 颜色变量,保持视觉一致 */
/* 容器复用白蓝系统(与 body[data-view="learn"] 的课程页对齐) */

.video-home{
  --vc-ink:#102f4b;
  --vc-muted:#5b7384;
  --vc-paper:#f6fbfe;
  --vc-card:#fffdf8;
  --vc-line:#dce6ef;
  --vc-teal:#1769c2;
  --vc-coral:#cf5f54;
  --vc-gold:#b8873a;
  min-height:100%;
  background:radial-gradient(120% 80% at 80% 0%,#eaf4ff 0%,transparent 60%),linear-gradient(180deg,#f8fcff,#f2f8fc);
  color:var(--vc-ink);
}

/* 顶部 hero */
.video-hero{
  padding:48px 32px 32px;
  max-width:1100px;
  margin:0 auto;
}
.video-hero-copy .video-eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:2px;
  color:var(--vc-teal);
  background:#eaf3ff;
  padding:4px 10px;
  border-radius:2px;
  margin-bottom:14px;
}
.video-hero-copy h1{
  font-family:"Songti SC","STSong",serif;
  font-size:clamp(28px,4vw,42px);
  font-weight:700;
  margin:0 0 12px;
  line-height:1.2;
}
.video-hero-copy h1 em{color:var(--vc-teal);font-style:normal;}
.video-hero-copy p{
  color:var(--vc-muted);
  font-size:15px;
  max-width:560px;
  margin:0;
  line-height:1.7;
}

/* 主体 */
.video-body{max-width:1100px;margin:0 auto;padding:0 32px 64px;}
.video-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--vc-line);
  margin-bottom:24px;
  flex-wrap:wrap;
}
.video-course-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.video-course-tab{
  border:1px solid var(--vc-line);
  background:#fff;
  color:var(--vc-ink);
  padding:8px 16px;
  border-radius:4px;
  cursor:pointer;
  font-size:14px;
  transition:border-color .15s,background .15s;
}
.video-course-tab:hover{border-color:var(--vc-teal);}
.video-course-tab.on{
  color:#fff;
  background:var(--tab-color,var(--vc-teal));
  border-color:var(--tab-color,var(--vc-teal));
}
.video-free-filter{font-size:13px;color:var(--vc-muted);display:flex;align-items:center;gap:6px;}
.video-free-filter input{cursor:pointer;}

/* 卡片网格 */
.video-stage .video-loading,.video-empty{
  padding:64px 16px;
  text-align:center;
  color:var(--vc-muted);
  font-size:14px;
}
.video-empty code{
  background:#eef4fa;
  padding:2px 6px;
  border-radius:3px;
  font-size:12px;
}
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}
.video-card{
  text-align:left;
  background:var(--vc-card);
  border:1px solid var(--vc-line);
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  padding:0;
  display:flex;
  flex-direction:column;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.video-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(16,47,75,.1);border-color:var(--vc-teal);}
.video-card.locked{opacity:.85;}
.video-card.done{border-color:var(--vc-teal);}

/* 卡片封面 */
.video-card-cover{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#1a3a5c,#0f2540);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.video-card-cover img{width:100%;height:100%;object-fit:cover;}
.video-card-cover-ph{
  font-size:40px;
  color:rgba(255,255,255,.4);
}
.video-card-badge{
  position:absolute;
  top:8px;
  right:8px;
  font-size:11px;
  padding:2px 8px;
  border-radius:2px;
  color:#fff;
  background:rgba(0,0,0,.55);
}
.video-card.free .video-card-badge{background:var(--vc-teal);}
.video-card.paid .video-card-badge{background:var(--vc-gold);}
.video-card-done{
  position:absolute;
  bottom:8px;
  left:8px;
  font-size:11px;
  padding:2px 8px;
  border-radius:2px;
  background:#2e7d32;
  color:#fff;
}
.video-card-lock{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,37,64,.5);
  color:#fff;
  font-size:14px;
}

/* 卡片信息 */
.video-card-meta{padding:12px 14px;}
.video-card-course{font-size:12px;color:var(--vc-teal);margin-bottom:4px;}
.video-card-title{
  font-size:15px;
  font-weight:600;
  margin-bottom:8px;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.video-card-foot{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--vc-muted);
}
.video-card-prog{color:var(--vc-teal);}
.video-card-bar{
  height:3px;
  background:var(--vc-line);
  border-radius:2px;
  margin-top:8px;
  overflow:hidden;
}
.video-card-bar i{display:block;height:100%;background:var(--vc-teal);}

/* 播放器弹窗 */
.video-player-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  background:rgba(8,20,35,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.video-player-modal[hidden]{display:none;}
.video-player-shell{
  width:min(960px,100%);
  background:#000;
  border-radius:6px;
  overflow:hidden;
  position:relative;
}
.video-player-close{
  position:absolute;
  top:8px;
  right:8px;
  z-index:10;
  background:rgba(0,0,0,.55);
  border:none;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.video-player-close:hover{background:rgba(0,0,0,.8);}
.video-player-wrap{
  aspect-ratio:16/9;
  background:#000;
}
.video-player-wrap .video-loading,.video-error{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
  color:#cfe0f0;
  font-size:14px;
  gap:12px;
  text-align:center;
  padding:24px;
}
.video-retry{
  background:var(--vc-teal);
  color:#fff;
  border:none;
  padding:8px 20px;
  border-radius:4px;
  cursor:pointer;
  font-size:14px;
}
.video-player-title{
  color:#fff;
  padding:12px 16px;
  font-size:15px;
  background:#111;
}
body.video-modal-open{overflow:hidden;}

/* 移动端适配 */
@media (max-width:640px){
  .video-hero{padding:32px 20px 20px;}
  .video-body{padding:0 20px 48px;}
  .video-toolbar{flex-direction:column;align-items:stretch;}
  .video-grid{grid-template-columns:1fr;gap:16px;}
  .video-player-modal{padding:0;}
  .video-player-shell{border-radius:0;width:100%;}
}