/* /css/home.css — ホーム(js/home.js)の段だけ。カード部品は既存(.stream-card 等)を流用する。
   重みづけは列数で付ける(ADR-08 §5.1): ① 配信 = PC 4 列 / モバイル 2 列、④ チャンネル = 丸 PC 8 列 / モバイル 4 列。 */

.home-page section[hidden] { display: none !important; }

/* ① 今配信中 — bubblegum の auto-fill(!important)より強く、4 列に固定する */
.stream-grid.home-live-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .stream-grid.home-live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 768px)  { .stream-grid.home-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ② 新着ショート — 9:16 の帯(横スクロール・本文幅の約 13% = 配信サムネより背が高い比率) */
.home-shorts-strip {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.home-short {
  flex: 0 0 132px; scroll-snap-align: start; text-decoration: none; color: var(--b-ink, #4a1f2e);
  /* 2026-09-30 P2: flex の子の min-width は既定 auto = 中身の最小幅より細くならない。スペースの無い長い
     キャプション・名前がカードを 531px まで押し広げ、帯全体が 987px に伸びていた (P0 §4・staging 実測) */
  min-width: 0;
}
.home-short-thumb {
  position: relative; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden;
  background: #1a0b12; border: var(--b-border-thin, 1.5px solid #4a1f2e);
}
.home-short-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-short-live {
  position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 999px;
  background: #e0245e; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
/* 予告ショートの時刻チップ (ADR-06 §2.5「予告付きが先頭・時刻チップ」・契約 A6)。配信中と同じ位置・配信中が優先 */
.home-short-upcoming {
  position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--b-ink, #4a1f2e); color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap;
}
.home-short-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-width: 0; }
.home-short-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.home-short-name { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-short-caption {
  font-size: 11.5px; line-height: 1.35; margin-top: 2px; color: var(--b-ink2, #7e3a55);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere; /* スペースの無い長い文字列も 2 行で折る (P2) */
}
@media (max-width: 768px) { .home-short { flex-basis: 112px; } }

/* ④ チャンネル — 丸アバター・名前・配信中は LIVE 印だけ(数字は出さない = ADR-14 D7) */
.home-channel-grid {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px 10px; padding: 4px 0 8px;
}
@media (max-width: 1100px) { .home-channel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .home-channel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-channel { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; min-width: 0; }
.home-channel-avatar {
  position: relative; width: 100%; max-width: 84px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: visible;
}
.home-channel-avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  border: var(--b-border-thin, 1.5px solid #4a1f2e); background: #fff;
}
.home-channel.is-live .home-channel-avatar img { box-shadow: 0 0 0 3px var(--b-pink, #ff2d7a); }
.home-channel-live {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  padding: 0 6px; border-radius: 999px; background: #e0245e; color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 16px; letter-spacing: 0.06em;
}
.home-channel-name {
  font-size: 12px; font-weight: 700; color: var(--b-ink, #4a1f2e);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-channel:hover .home-channel-avatar img { transform: translateY(-2px); transition: transform .15s; }

/* ⚠ 色は bubblegum の --b-* だけを使う。--text-primary 等は styles.css の暗色テーマ側に解決されることがある
   (staging で .home-channel-name が rgb(255,232,244) になった・2026-09-20)。 */