/* Videos page */
.videos { background: var(--paper); }

.v-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 80px; background: var(--paper);
}
.v-nav-brand { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 28px; letter-spacing: 10px; }
.v-nav-links { display: flex; gap: 32px; }
.v-nav-links a { font-size: 11px; letter-spacing: 2px; color: var(--moss); }
.v-nav-links a.active { color: var(--ink); font-weight: 700; }
.v-nav-lang { font-size: 11px; letter-spacing: 1px; color: var(--moss); font-weight: 500; }

.v-hero {
  background: var(--ink); color: var(--paper); padding: 80px;
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
  min-height: 540px;
}
.v-hero h1 { font-size: 120px; line-height: 1; font-weight: 300; letter-spacing: -3px; }
.v-hero-jp { font-size: 20px; color: var(--stone); font-weight: 500; }
.v-meta { display: flex; gap: 48px; padding-top: 24px; }
.v-meta > div { display: flex; flex-direction: column; gap: 4px; }
.v-meta-v { font-size: 28px; font-weight: 300; }

.v-filter {
  display: flex; gap: 32px; padding: 18px 80px; background: var(--paper);
  border-bottom: 1px solid var(--stone);
}
.v-tab { font-size: 13px; letter-spacing: 2px; color: var(--moss); }
.v-tab.active { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--vermilion); padding-bottom: 4px; }

.v-feat {
  display: grid; grid-template-columns: 800px 1fr;
  padding: 60px 80px; gap: 32px; background: var(--paper);
}
.v-player {
  width: 100%; aspect-ratio: 16/9;
  background: var(--ink); border-radius: 0;
}
.v-player iframe { width: 100%; height: 100%; border: 0; }
.v-player video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.v-player-el { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.v-feat-info { display: flex; flex-direction: column; gap: 20px; padding-top: 16px; }
.v-feat-tag {
  background: var(--vermilion); color: var(--paper);
  padding: 4px 10px; font-size: 10px; letter-spacing: 2px; font-weight: 700;
  display: inline-block; align-self: flex-start;
}
.v-feat-info h2 { font-size: 36px; line-height: 1.3; }
.v-feat-en { font-size: 18px; font-style: italic; color: var(--moss); }
.v-feat-dek { font-size: 14px; line-height: 1.85; max-width: 480px; }
.v-feat-meta { display: flex; gap: 32px; padding-top: 16px; }
.v-feat-meta > div > div:first-child { font-size: 9px; letter-spacing: 2px; color: var(--vermilion); font-weight: 700; margin-bottom: 4px; }
.v-feat-meta > div > div:last-child { font-size: 18px; font-weight: 500; }

.v-grid-section { padding: 40px 80px 100px; background: var(--paper); }
.v-grid-head {
  display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px;
}
.v-grid-head h2 { font-size: 32px; }
.v-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.v-card { display: flex; flex-direction: column; gap: 16px; transition: transform 0.2s; }
.v-card:hover { transform: translateY(-4px); }
.v-thumb {
  aspect-ratio: 16/9; position: relative;
  display: flex; align-items: center; justify-content: center;
  color: var(--paper); font-size: 14px;
}
.v-thumb.placeholder-tone-warm { background: var(--beige); color: var(--ink); }
.v-thumb.placeholder-tone-ink { background: var(--ink); }
.v-thumb.placeholder-tone-beige { background: var(--stone); color: var(--ink); }
.v-thumb.placeholder-tone-vermilion { background: var(--vermilion); }
.v-thumb.placeholder-tone-moss { background: var(--moss); }
.v-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.v-dur {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.8); color: var(--paper);
  padding: 2px 8px; font-size: 10px;
}
.v-info { padding: 16px 4px; display: flex; flex-direction: column; gap: 6px; }
.v-name { font-size: 16px; font-weight: 500; }
.v-name-en { font-size: 11px; color: var(--moss); }

.v-social { display: flex; gap: 32px; font-size: 11px; letter-spacing: 2px; color: var(--stone); }

@media (max-width: 1024px) {
  .v-feat { grid-template-columns: 1fr; }
  .v-grid { grid-template-columns: 1fr 1fr; }
  .v-hero h1 { font-size: 80px; }
}

/* ============================================================================
   视频封面（后台截帧 / 平台缩略图）—— 铺满卡片，播放键与时长浮在其上
   ============================================================================ */
.v-thumb { overflow: hidden; }
.v-thumb .v-thumb-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
}
.v-thumb .v-play,
.v-thumb .v-dur { z-index: 2; }
.v-thumb::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35));
  pointer-events: none;
}

/* ============================================================================
   网格卡片里的「说明」文字（对应后台视频编辑页的「说明（前台显示）」字段）
   超出 4 行自动截断，避免不同视频的说明长短不一撑乱三列高度
   ============================================================================ */
.v-desc {
  font-size: 12px; line-height: 1.8; color: var(--moss);
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .v-desc { -webkit-line-clamp: 3; }
}