/* ============================================================
   yt-cards.css — 首页视频卡 YouTube 浅色版覆盖层
   加载顺序:必须在 cb-home-bundle(.min).css / cb-yt.css 之后
   (宿主 bundle 里同类选择器为 !important,靠"后加载 + 等特异性"取胜)

   结构两条路径:
   A. 手术产物 / bootstrap 填充: <a class="yt-card card video-preview">
      .yt-thumb(.thumb.cb-thumb) > img + .yt-duration / .yt-info > .yt-title + .yt-meta
   B. React VideoCard: div.card.yt-card(只加 class,结构照旧,CSS 映射)

   颜色全部走主题变量;唯一例外:时长徽章 rgba(0,0,0,.8) 底
   (YouTube 基准硬性要求,白字 rgba(255,255,255,.98) 属于徽章的一部分)。
   ============================================================ */

/* ---------- 1. 网格:桌面 4 列,gap 16px 12px;<1200px 降级照旧(bundle 现行断点) ---------- */
@media (min-width: 1200px) {
  body.page-home .grid,
  body.page-home #contentArea .grid,
  body.page-home .category-block > .grid,
  body.page-home #hotGrid,
  body.page-home #topGrid,
  body.page-home #vipGrid,
  body.page-home #followGrid,
  body.page-home #catFocusGrid,
  body.page-home #contentArea.yt-card-grid,
  body.page-home #contentArea.is-cat-focus,
  body.page-home #contentArea.is-yt-home-flat {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    /* 2026-10-10: 对齐 YouTube 实测 —— 4 列 grid 的间距是 column 16 / row 40
       (docs/YOUTUBE_LIVE_CHROME.md「home cards 4-col 16×40」)。此前这里是 16/12,
       行距只有 YT 的 40%, 卡片纵向挤成一坨。 */
    row-gap: 40px !important;
    column-gap: 16px !important;
  }
}

/* ---------- 2. 手术卡 <a class="yt-card"> 基线 ---------- */
body.page-home a.yt-card {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  min-width: 0 !important;
  text-decoration: none !important;
  color: var(--text-primary) !important;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent;
}
body.page-home a.yt-card:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-radius: 12px !important;
}

/* 缩略图:16:9 / 12px 圆角(YouTube 基准) */
body.page-home a.yt-card .yt-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--panel-soft) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
body.page-home a.yt-card .yt-thumb > img,
body.page-home a.yt-card .yt-thumb > .thumb-placeholder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  transition: filter .2s ease !important;
}
body.page-home a.yt-card .yt-thumb > .thumb-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-secondary) !important;
}

/* hover:缩略图轻微亮度变化(变暗一档,预览视频层不受影响——filter 只挂 img) */
body.page-home a.yt-card:hover .yt-thumb > img,
body.page-home .card.yt-card:hover .thumb img {
  filter: brightness(.92) !important;
}
body.page-home .card.yt-card .thumb img {
  transition: filter .2s ease !important;
}

/* 时长徽章:右下角,黑 80 底白字 12px,圆角 4px(YouTube 基准) */
body.page-home .yt-duration,
body.page-home .card.yt-card .duration {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  left: auto !important;
  top: auto !important;
  background: rgba(0, 0, 0, .8) !important;
  color: rgba(255, 255, 255, .98) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
  padding: 3px 4px !important;
  border-radius: 4px !important;
  border: 0 !important;
  letter-spacing: 0 !important;
  z-index: 3 !important;
}

/* 信息区:本轮无频道头像列;grid 列宽给未来 36px 头像列留好位置
   (加头像时改回 36px minmax(0,1fr) auto 即可) */
body.page-home a.yt-card .yt-info {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 4px !important;
  align-items: start !important;
  padding: 12px 0 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* 标题:14px / 500 / 两行截断(YouTube 基准) */
body.page-home a.yt-card .yt-title {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  max-height: 40px !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  overflow-wrap: break-word !important;
}

/* meta:12px 次级灰,纯文本无图标(YouTube 基准) */
body.page-home a.yt-card .yt-meta {
  grid-column: 1 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}

/* ⋮ 菜单:信息区右列,hover 才现身 */
body.page-home a.yt-card .card-menu-wrap {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  justify-self: end !important;
  align-self: start !important;
  z-index: 4 !important;
}

/* ---------- 3. React 卡(div.card.yt-card)增量:meta 无头像/无作者行 ---------- */
body.page-home .card.yt-card .info.video-info-grid,
body.page-home .card.yt-card .video-info-grid {
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 4px !important;
}
body.page-home .card.yt-card .channel-picture {
  display: none !important; /* 频道头像列本轮不加,DOM 留位,后续直接恢复 */
}
body.page-home .card.yt-card .video-author {
  display: none !important; /* meta 收敛为「观看数 · 时间」,作者行后续随头像列恢复 */
}
body.page-home .card.yt-card .cb-card-play {
  display: none !important; /* YouTube 缩略图无播放按钮遮罩 */
}

/* ---------- 4. 骨架屏(数据未到):灰块 thumb + 两行文字条,shimmer 扫过 ---------- */
body.page-home .cb-yt-skel-grid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  row-gap: 40px !important;
  column-gap: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
@media (max-width: 1199px) {
  body.page-home .cb-yt-skel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 32px !important;
  }
}
@media (max-width: 599px) {
  body.page-home .cb-yt-skel-grid {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 8px !important;
    row-gap: 24px !important;
  }
}

body.page-home .cb-yt-skel {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
body.page-home .cb-yt-skel-thumb,
body.page-home .cb-yt-skel-line {
  background-image: linear-gradient(100deg,
    var(--card) 40%,
    var(--panel-soft) 50%,
    var(--card) 60%) !important;
  background-size: 200% 100% !important;
  background-color: var(--card) !important;
  animation: cbYtSweep 1.4s ease-in-out infinite !important;
}
body.page-home .cb-yt-skel-thumb {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 12px !important;
  flex: 0 0 auto !important;
}
body.page-home .cb-yt-skel-line {
  height: 12px !important;
  border-radius: 4px !important;
  width: 80% !important;
  margin-top: 12px !important;
}
body.page-home .cb-yt-skel-line.w2 {
  width: 50% !important;
  margin-top: 8px !important;
}
@keyframes cbYtSweep {
  from { background-position: 120% 0; }
  to { background-position: -20% 0; }
}
body.page-home .cb-yt-skel.is-static .cb-yt-skel-thumb,
body.page-home .cb-yt-skel.is-static .cb-yt-skel-line {
  animation: none !important;
  opacity: .55 !important;
}
@media (prefers-reduced-motion: reduce) {
  body.page-home .cb-yt-skel-thumb,
  body.page-home .cb-yt-skel-line {
    animation: none !important;
  }
}

/* ---------- 5. 空状态(YouTube 风格):居中图标 + 一句文案 + 4-6 张静态骨架卡 ---------- */
body.page-home .cb-yt-empty {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 48px 0 24px !important;
  margin: 0 !important;
  text-align: center !important;
}
body.page-home .cb-yt-empty-icon {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  background: var(--panel-soft) !important;
  color: var(--text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.page-home .cb-yt-empty-icon svg {
  width: 40px !important;
  height: 40px !important;
  display: block !important;
}
body.page-home .cb-yt-empty-title {
  margin-top: 16px !important;
  font-size: 18px !important;
  line-height: 26px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}
body.page-home .cb-yt-empty .cb-yt-empty-ghosts {
  grid-column: auto !important;
  width: 100% !important;
  margin-top: 32px !important;
}
/* 静态示意卡:桌面 6 张,窄屏收敛到 4 张 */
@media (max-width: 1199px) {
  body.page-home .cb-yt-empty-ghosts .cb-yt-skel:nth-child(n + 5) {
    display: none !important;
  }
}

/* ---------- 7. 通用视频网格(短视频页等服务端渲染场景) ---------- */
.yt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    /* 2026-10-10: 对齐 YouTube 卡片网格实测间距 column 16 / row 40 */
    gap: 40px 16px;
    padding: 12px 0 24px;
}
@media (max-width: 700px) {
    .yt-grid { grid-template-columns: repeat(2, 1fr); gap: 12px 8px; }
}

/* ---------- 8. YouTube 细节对齐: 卡片无边框 + 头像列 ---------- */
.yt-card {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.yt-thumb {
  border-radius: 12px !important;
  overflow: hidden;
}
.yt-info {
  display: flex !important;
  gap: 12px !important;
  margin-top: 12px !important;
  padding: 0 !important;
}
.yt-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--panel-soft, #f2f2f2);
  display: grid;
  place-items: center;
}
.yt-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-text {
  flex: 1;
  min-width: 0;
}
.yt-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-primary, #0f0f0f) !important;
  line-height: 1.4 !important;
  margin-bottom: 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.yt-meta {
  font-size: 12px !important;
  color: var(--text-secondary, #606060) !important;
  line-height: 1.4 !important;
}
.yt-channel {
  font-size: 12px !important;
  color: var(--text-secondary, #606060) !important;
  margin-bottom: 2px !important;
}