/* ============================================================
   video.css —— 视频作品（video.html）独有样式
   影片列表卡片
   依赖公共 css/style.css（.video-feature 特写为公共组件）
   ============================================================ */

/* ============ 视频列表卡片 ============ */
.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.vid-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(28,79,161,0.06); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.vid-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.vid-thumb { position: relative; height: 210px; overflow: hidden; cursor: pointer; }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); filter: brightness(0.82); }
.vid-card:hover .vid-thumb img { transform: scale(1.08); }
.vid-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.45); display: grid; place-items: center; color: #fff; font-size: 1.15rem; transition: all 0.4s var(--ease); }
.vid-play i { margin-left: 3px; }
.vid-thumb:hover .vid-play { background: var(--color-primary); border-color: var(--color-primary); transform: translate(-50%,-50%) scale(1.1); }
.vid-dur { position: absolute; bottom: 0.9rem; right: 0.9rem; background: rgba(10,31,71,0.8); color: #fff; font-size: 0.74rem; padding: 0.22rem 0.6rem; border-radius: 6px; letter-spacing: 0.04em; }
.vid-body { padding: 1.5rem 1.6rem; }
.vid-body .v-tag { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); font-weight: 600; }
.vid-body h3 { font-size: 1.18rem; color: var(--color-text-main); margin: 0.45rem 0 0.5rem; }
.vid-body p { color: var(--color-text-secondary); font-size: 0.9rem; font-weight: 300; }

/* ============================================================
   RESPONSIVE —— 视频作品独有组件
============================================================ */
@media (max-width: 1200px) {
    .vid-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .vid-grid { grid-template-columns: 1fr; }
}