/* ============================================
   案例视频页专用样式（配合 style.css）
   视觉：沿用全站深蓝 #0A3459 + 金 #C9A05C
   卡片语言与方案库一致：顶部金线 / 金色编号角标 / hover 浮起
   ============================================ */

.v-cards { margin: 0 16px; display: grid; gap: 18px; }
.v-card {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid #E4EAF1;
  box-shadow: 0 8px 22px rgba(10, 52, 89, .12);
  transition: transform .25s ease, box-shadow .25s ease;
  color: var(--blue-deep);
  text-decoration: none;
}
.v-card::before {                       /* 顶部金色光线，与方案卡同款 */
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-bright) 30%, #fff 50%, var(--gold-bright) 70%, transparent);
  opacity: .9;
  z-index: 2;
}
.v-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(10,52,89,.24); }

/* 封面区 16:9 */
.v-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse 120% 80% at 80% -10%, rgba(27,111,181,.55), transparent 60%),
    radial-gradient(ellipse 100% 70% at 10% 110%, rgba(228,193,133,.14), transparent 60%),
    linear-gradient(155deg, #0B2C4C 0%, var(--blue) 90%);
  overflow: hidden;
}
.v-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.v-card:hover .v-cover img { transform: scale(1.04); }

/* 无封面占位 */
.v-cover .v-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  color: rgba(255,255,255,.28);
}

/* 中央播放按钮 */
.v-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9A05C, #E4C287);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 8px rgba(255,255,255,.14);
  transition: transform .25s ease;
  z-index: 3;
}
.v-card:hover .v-play { transform: translate(-50%, -50%) scale(1.1); }

/* 平台角标（左上） */
.v-plat {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(11, 37, 69, .82);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 3px 10px;
  backdrop-filter: blur(4px);
}
.v-plat .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); }
.v-plat.dy .dot { background: #ff4d6a; }   /* 抖音红点 */

/* 右上角编号角标：与方案卡同款金色书签式 */
.v-card .so-no {
  position: absolute;
  top: 0; right: 0;
  z-index: 3;
  background: linear-gradient(120deg, #C9A05C, #E4C287);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 0 16px 0 12px;
  box-shadow: 0 2px 8px rgba(201,160,92,.38);
}

/* 卡片文字区 */
.v-body { padding: 14px 16px 14px; }
.v-body h3 {
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--blue-deep);
  margin-bottom: 5px;
}
.v-body .v-sum {
  font-size: 12.5px;
  color: #5B6B7C;
  line-height: 1.7;
  margin-bottom: 12px;
}
.v-watch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid #B9CBE0;
  padding: 9px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  transition: background .2s, color .2s, border-color .2s;
}
.v-watch::after { content: "↗"; font-size: 14px; transition: transform .2s; }
.v-card:hover .v-watch { background: var(--blue); border-color: var(--blue); color: #fff; }

/* 空态 */
.v-empty {
  margin: 10px 16px 0;
  background: var(--white);
  border: 1px dashed #C9DAEB;
  border-radius: 16px;
  padding: 46px 20px;
  text-align: center;
  color: var(--gray);
  font-size: 13.5px;
  line-height: 1.8;
}
.v-empty b { display: block; font-size: 16px; color: var(--blue-deep); margin-bottom: 4px; }

/* 页面顶部说明条 */
.v-lead {
  margin: 0 16px 16px;
  font-size: 12.5px;
  color: var(--gray);
  line-height: 1.7;
  text-align: center;
}

/* 桌面端：两列网格 */
@media (min-width: 640px) {
  .v-cards { max-width: 960px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); }
  .v-empty { max-width: 960px; margin-left: auto; margin-right: auto; }
  .v-lead { max-width: 960px; margin-left: auto; margin-right: auto; }
  .v-body h3 { font-size: 18px; }
}