/* ============================================
   Yichuan Paper — /videos/ 页面专属样式
   仅由 /videos/index.html 引用，不影响首页。
   前缀 vid- / vpage- 避免与 main.css 冲突。
   ============================================ */

/* --- 页面顶部（复用 .hero 深色版式，压缩高度） --- */
.vpage-hero {
  min-height: auto;
  padding: 140px 0 72px;
}
.vpage-hero .hero-content { max-width: 780px; }
.vpage-hero h1 { font-size: 2.9rem; margin-bottom: 16px; }
/* 背景图：等价于 main.css 的 .hero-img（该页不用 id=hero-img，避免首页视差逻辑误判） */
.vpage-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
}

/* 面包屑 */
.vid-crumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.85rem; color: rgba(255,255,255,0.62);
  margin-bottom: 18px;
}
.vid-crumb a { color: rgba(255,255,255,0.82); }
.vid-crumb a:hover { color: var(--accent); }
.vid-crumb i { font-size: 0.6rem; opacity: 0.6; }

/* 顶部要点 */
.vid-hero-points {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 4px 0 26px;
}
.vid-point {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 50px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.88); font-size: 0.82rem; font-weight: 500;
}
.vid-point i { color: var(--accent); }

/* --- 视频区 --- */
.vid-section { padding: var(--section-padding) 0 90px; background: var(--bg-light); }

/* 分组标题：2026-10-10 第二轮起页面只有「生产过程」一组（3 条），
   故 `--feature` 现在表示这组里的第 1 条（首屏那条）。 */
.vid-group-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.35rem; font-weight: 700; color: var(--primary);
  margin: 0 0 22px;
}
.vid-group-title i { color: var(--accent); font-size: 0.92em; }

.vid-feature { max-width: 960px; margin: 0 auto 28px; }

.vid-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  max-width: 960px; margin: 0 auto;
}

.vid-card {
  background: var(--white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex; flex-direction: column;
}
.vid-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }

.vid-frame {
  position: relative; background: var(--primary-dark);
  aspect-ratio: 16 / 9; line-height: 0;
}
.vid-frame video {
  width: 100%; height: 100%; display: block;
  object-fit: contain; background: #000;
}
.vid-card--feature .vid-frame { aspect-ratio: 16 / 9; }

.vid-meta { padding: 20px 22px 24px; }
.vid-meta h3 {
  font-size: 1.02rem; font-weight: 700; color: var(--primary);
  margin-bottom: 8px; display: flex; align-items: center; gap: 9px;
}
.vid-card--feature .vid-meta h3 { font-size: 1.25rem; }
.vid-meta h3 i { color: var(--accent); font-size: 0.95em; }
.vid-meta p { font-size: 0.9rem; color: var(--text-light); line-height: 1.65; }

/* --- 说明 + 行动条 --- */
.vid-note {
  margin-top: 44px; padding: 34px 36px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: rgba(255,255,255,0.86);
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.vid-note-text { display: flex; align-items: flex-start; gap: 14px; max-width: 640px; }
.vid-note-text i { color: var(--accent); font-size: 1.35rem; margin-top: 3px; }
.vid-note-text p { font-size: 0.98rem; line-height: 1.7; margin: 0; }
.vid-note-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.vid-note .btn-outline { border-color: rgba(255,255,255,0.45); }

/* 其它纸种入口（回到首页产品区） */
.vid-more {
  margin-top: 26px; text-align: center; font-size: 0.92rem; color: var(--text-light);
}
.vid-more a { color: var(--primary); font-weight: 600; }
.vid-more a:hover { color: var(--accent); }

/* --- 响应式 --- */
@media (max-width: 1024px) {
  .vpage-hero h1 { font-size: 2.3rem; }
}
@media (max-width: 768px) {
  .vpage-hero { padding: 116px 0 52px; }
  .vpage-hero h1 { font-size: 1.9rem; }
  .vid-section { padding-bottom: 60px; }
  .vid-grid { grid-template-columns: 1fr; gap: 20px; }
  .vid-feature { margin-bottom: 20px; }
  .vid-group-title { font-size: 1.15rem; margin-bottom: 16px; }
  .vid-meta { padding: 16px 18px 20px; }
  .vid-note { padding: 26px 20px; }
  .vid-note-actions { width: 100%; }
  .vid-note-actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .vid-point { font-size: 0.78rem; padding: 6px 12px; }
}

/* RTL 微调 */
[dir="rtl"] .vid-crumb { flex-direction: row-reverse; }
[dir="rtl"] .vid-meta h3 { flex-direction: row-reverse; }
[dir="rtl"] .vid-note-text { flex-direction: row-reverse; }