/* ── BANNER ── */
#videos-banner {
  background: url('/asset/pages/videos/img/banner_teacher.png') center/cover no-repeat;
  min-height: 280px;
  display: flex; align-items: center; justify-content: center; text-align: center; position: relative;
}
#videos-banner::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.7); }
#videos-banner > * { position: relative; z-index: 1; }
#videos-banner h1 { font-family:var(--font-serif); font-size:clamp(24px,4vw,44px); font-weight:400; color:#fff; margin:0 0 12px; }
#videos-banner p  { color:var(--text-secondary); font-size: 15px; margin:0; letter-spacing:.1em; }
#videos-banner .stats { display:flex; gap:32px; justify-content:center; margin-top:20px; }
#videos-banner .stats span { font-size: 14px; color:var(--accent-gold); }

/* ── VIDEO GRID ── */
.videos-main { padding: var(--space-xl) 0; background: var(--bg-secondary); }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .video-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } }

/* ── VIDEO CARD ── */
.video-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
}
.video-card:hover { border-color: var(--border-gold); transform: translateY(-2px); box-shadow: var(--shadow-card); }

/* ── THUMBNAIL + PLAY BUTTON ON CARD ── */
.vc-thumb {
  position: relative;
  overflow: hidden;
}
.vc-thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}
.video-card:hover .vc-thumb img { transform: scale(1.05); }

.vc-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s;
}
.video-card:hover .vc-play-btn { background: rgba(255,255,255,0.08); }

.vc-play-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s, background 0.25s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  flex-shrink: 0;
}
.video-card:hover .vc-play-icon {
  transform: scale(1.12);
  background: #fff;
}
/* 三角形播放符号 */
.vc-play-icon::after {
  content: '';
  display: block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #111;
  margin-left: 3px;
}

/* ── CARD BODY ── */
.video-card .vc-body { padding: 12px 14px 14px; }
.video-card .vc-teacher { font-size: 14px; color:var(--text-muted); margin:0 0 4px; display:flex; align-items:center; gap:6px; flex-wrap: wrap; }
.video-card .vc-title { font-size: 14px; color:var(--accent-gold); margin:0 0 6px; line-height:1.4; }
.video-card .vc-school { font-size: 14px; color:var(--text-muted); margin:0; }

/* ── CTA ── */
.videos-cta { padding: var(--space-xl) 0; text-align: center; }
.videos-cta h2 { font-family:var(--font-serif); font-size:clamp(20px,3vw,28px); margin:0 0 var(--space-sm); color:var(--text-primary); font-weight:400; }
.videos-cta p { color:var(--text-muted); margin:0 0 var(--space-md); }

/* SEO transcript source: keep full text in HTML without affecting card layout */
.video-transcript-store {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}