/* カバー横断ページ（docs/plans/cover_design_completion_2026-08-14.md §4）。
   動画カードは wc2（.vgrid / .vcard / .vplay）をそのまま使う。
   ここにはカバー固有の差分だけを置く（design_language.md §5.1.1）。 */

/* 原曲アーティストの索引カード。wc2 の面に載せるので枠は最小限にする。 */
.covers-wc2 .card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:14px}
.covers-wc2 .card{display:block;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);text-decoration:none;color:var(--ink);transition:border-color .2s,background .2s,transform .2s}
.covers-wc2 a.card:hover{border-color:rgba(var(--ga-rgb),.5);background:rgba(var(--ga-rgb),.08);transform:translateY(-2px)}
.covers-wc2 .card strong{display:block;font-size:14px;font-weight:800;letter-spacing:-.005em}
.covers-wc2 .card p{margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.5}

/* 390px級では、covers / 動画一覧の共通シェルと索引を縮小可能な1列へ。
   詳細ページなど他の wc2 面には波及させない。 */
@media (max-width: 480px) {
  .covers-page .wc2page {
    min-width: 0;
    max-width: 100%;
  }

  .covers-page .wide-index-summary,
  .covers-page .wide-index-summary .card-list,
  .covers-page .card-list,
  .covers-page .vgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 方法論ページの箇条書き。 */
.covers-wc2 .plain-list{margin:8px 0 0;padding-left:1.2em;line-height:1.9;color:var(--muted)}
.covers-wc2 .plain-list li{margin:0}
.covers-wc2 .section p{color:var(--muted);line-height:1.8}

/* ───────── 動画一覧（/ja/videos/ 系 17 URL）の描画予算 ─────────
   正本: docs/plans/video_hub_render_budget_and_top_nav_plan_2026-08-23.md §1-1 / §1-4。
   ブレークポイントは 860px に統一する（site-chrome.css:1222 の
   --chrome-header-height-mobile 切替と同じ値。計画書の 820px はヘッダー実装と
   40px ずれるため採らない）。 */

/* §1-1 表⇄カードの排他。旧テンプレの規則は .index-dashboard-page にスコープ
   されており、covers-page には1本も無かった（= 全幅で両方が描画されていた）。 */
.covers-page .index-table-surface .mobile-list { display: none; }
@media (max-width: 860px) {
  .covers-page .index-table-surface .table-wrap { display: none; }
  .covers-page .index-table-surface .mobile-list { display: grid; gap: 10px; }
}

/* §1-4 種別ボタンの追従＋モバイル横スクロール。
   390px では .video-tabs .button-link{flex:1 1 150px}（site.css:10002・860px 以下）が
   2 列に割り、「Performanc / e」「1,499 / 本」と単語の途中で折れていた。
   site.css の規則はグループ詳細にも効くので消さず、.covers-page 側の詳細度で勝つ。 */
.covers-page .video-tabs .button-link { flex: 0 0 auto; }
.covers-page .video-tab,
.covers-page .video-tab-count { white-space: nowrap; }
.wc2page .video-tabs-sticky {
  position: sticky;
  top: var(--chrome-header-height, 64px);
  z-index: 4;
  margin: 0 -4px;
  padding: 8px 4px;
  background: rgba(8, 11, 17, .94);
  backdrop-filter: blur(10px);
}
@media (max-width: 860px) {
  .wc2page .video-tabs-sticky { top: var(--chrome-header-height-mobile, 56px); }
  .covers-page .video-tabs,
  .covers-page .video-program-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .covers-page .video-tabs::-webkit-scrollbar,
  .covers-page .video-program-tabs::-webkit-scrollbar { display: none; }
  .covers-page .video-tab { flex: 0 0 auto; scroll-snap-align: start; }
}

/* §1-2 「さらに表示」。sentinel は自動追記のトリガーで、見た目は持たない。 */
.covers-page .index-load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
}
.covers-page .index-load-more .button-link[hidden] { display: none; }
.covers-page .index-load-more .small { margin: 0; color: var(--muted); }
.covers-page #videoRetryFetch { margin-left: 10px; }
#videoListSentinel { height: 1px; }

/* 最終行に1文字だけ落ちるのを避ける（レビュー §3-4・計画 §3）。
   .section-head .sub / .hub-lead の本体は wc2-detail.css / wc2-hub.css にあり、
   ここは covers 系（動画一覧・作品一覧）で後勝ちさせるための追記のみ。 */
.section-head .sub,
.hub-lead {
  text-wrap: pretty;
}