/* 视频卡片墙（首页模块位）—— 颜色跟站点主题变量 */
.vgg { container-type: inline-size; margin-bottom: 16px; }
.vgg__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.vgg__head[hidden] { display: none; }
.vgg__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; display: flex; align-items: center; gap: 7px; }
.vgg__title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--ls-primary, #3b82f6); }
.vgg__more { font-size: 12px; color: var(--ls-text-muted, #9ca3af); text-decoration: none; white-space: nowrap; }
.vgg__more:hover { color: var(--ls-primary, #3b82f6); }
.vgg__more[hidden] { display: none; }

.vgg__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 1px;
}
.vgg__track::-webkit-scrollbar { display: none; }
/* 超过三张时固定每张三分之一宽，横向滑动而不是挤在一起 */
.vgg__track.is-scroll { grid-auto-columns: calc((100% - 24px) / 3); }

.vgg__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--ls-bg-hover, #eef1f5);
  text-decoration: none;
  aspect-ratio: 16 / 10;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
.vgg__card.is-skel { animation: vgg-pulse 1.4s ease-in-out infinite; }
@keyframes vgg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.vgg__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.vgg__card:hover .vgg__img { transform: scale(1.06); }

.vgg__shade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
  transition: opacity .22s ease;
  pointer-events: none;
}

.vgg__badge {
  position: absolute;
  right: 9px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.vgg__badge svg { width: 10px; height: 10px; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

.vgg__empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  border-radius: 12px;
  border: 1px dashed var(--ls-border, #e2e8f0);
  color: var(--ls-text-muted, #9ca3af);
  font-size: 12px;
}

@container (max-width: 460px) {
  .vgg__track,
  .vgg__track.is-scroll { grid-auto-columns: 45%; }
}
@container (max-width: 280px) {
  .vgg__track,
  .vgg__track.is-scroll { grid-auto-columns: 66%; }
}

/* 视频名：默认藏起来，鼠标移到卡片上才浮出来 */
.vgg__name {
  position: absolute;
  left: 10px; right: 44px; bottom: 7px;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .22s ease, transform .22s ease;
}
.vgg__card:hover .vgg__name,
.vgg__card:focus-visible .vgg__name { opacity: 1; transform: none; }
/* 悬停时压一层暗色，白字才压得住画面 */
.vgg__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .06) 75%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  z-index: 1;
}
.vgg__card:hover::after,
.vgg__card:focus-visible::after { opacity: 1; }
.vgg__badge { z-index: 2; }
.vgg__name { z-index: 2; }
/* 触屏没有悬停，直接常显 */
@media (hover: none) { .vgg__name { opacity: 1; transform: none; } }