/* products-home-v10 — ホームの PRODUCTS（予告）の配置。products-parts-v1.css の後、既存の CSS すべての後に読む。2026-09-28。
   オーナー「このUIだとPRODUCTSというカテゴリがSTUDIOにしかかかってないように見える」
   → 見出しを2つの帯の外（黒の地）に置き、その下に STUDIO の帯と HUB の帯を続けて並べる。2つの帯は同じ組み
     （左の列に名乗り、右の2列に画面）にして、同じ見出しの下の兄弟だと分かるようにする。
   縦の寸法（インクで測る。docs/DESIGN-DETAIL-STANDARD.md §2・契約 §7-3）
     LIVE の最後のインク → 見出しのインク 96（節 → 節）
     見出しのインク → STUDIO の帯の端 32（見出し → 中身。NEWS・WORKS の実測 33〜35 と同じ役割）
     帯の端 → 最初の文字 96、最後の中身 → 帯の端 96（スマホ 64 / 64）
     HUB の帯の端 → NEWS の見出しのインク 96（スマホ 64）
   列：3 列（1440 で 368 / 32 / 368 / 32 / 368）。左の列が名乗り、2〜3 列目が画面。 */

/* study16.css の「.study16 #main > :not(.s14-opening) { width: min(1168px, …) }」（詳細度 1,2,0）より強く、#main の幅いっぱいにする */
#main > #products.pvh {
  width: 100%;
}
#products.pvh {
  position: relative;
  width: 100%;
  max-width: none;                           /* 旧 study48-products と同じく #main の幅いっぱい（帯を全幅に） */
  margin: 0;
  padding: 0;
  overflow-x: clip;                          /* 帯の 100vw の地がページを広げない */
  background: transparent;
  color: #f3ecdc;
  scroll-margin-top: 72px;
}
#products.pvh .pvh-head {
  display: flex;
  align-items: baseline;
  margin: -6px 0 28px;                       /* LIVE の最後の字面 → 見出しの字面 96、見出しの字面 → 帯の端 32（実測で合わせた値） */
  padding: 0 var(--site-gutter, max(var(--page-pad, 24px), calc((100vw - var(--site-max, 1168px)) / 2)));
}
#products.pvh .pvh-head h2 { margin: 0; }

#products.pvh .pvh-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 46px;                             /* 格子の行の間：インクで 48（契約の Grid row gap） */
  align-items: start;
}
#products.pvh .pv-id { grid-column: 1; }
#products.pvh .pvh-ts { grid-column: 2 / 4; align-self: stretch; display: flex; flex-direction: column; }   /* 名乗りの列と同じ高さに */
#products.pvh .pvh-ts > .pv-ts { flex: 1 1 auto; }
#products.pvh .pvh-tpl { grid-column: 1 / -1; }

/* HUB（オーナー 2026-09-28「HUBのほうもパーツの配置が悪すぎて隙間だらけ」）：STUDIO と同じ組みにして、兄弟に見せる。
   1 段目：名乗り ＋ チケットのボード。ボードは名乗りの列の高さに合わせる（ボードの列は製品と同じくスクロールする領域なので、
          画面の下端で切れる。KanbanBoard.tsx:577-582 overflow-y-auto）。
   2 段目：カレンダー（2/3）＋ 日程調整（1/3）を同じ高さに。カレンダーの升は高さに合わせて伸びる。注記は段の下に 1 つ。 */
#products.pvh .pvh-kb { grid-column: 2 / 4; align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
#products.pvh .pvh-kb > .pv-kb-screen { flex: 1 1 0; min-height: 0; }
/* 2 段目は一つの入れ物（カレンダー・日程調整・注記）。注記を格子の独立した行にすると、負の余白で行の高さが 0 に潰れ、
   最後の行の間の分だけ帯が伸びた（実測 118）ため */
#products.pvh .pvh-hub-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 0; align-items: stretch; min-width: 0; }
#products.pvh :is(.pvh-cal, .pvh-poll) { display: flex; flex-direction: column; min-width: 0; }
#products.pvh :is(.pvh-cal, .pvh-poll) > .pv-screen { flex: 1 1 auto; }
#products.pvh .pvh-cal { grid-column: 1 / 3; }
#products.pvh .pvh-poll { grid-column: 3; }
#products.pvh .pvh-hub-note { grid-column: 1 / -1; }                    /* 画面 → 注記の字面 8（.pv-note の余白 5） */

/* HUB の帯の端 → NEWS の見出し 96（見出しの箱は 44px の ALL NEWS の基線に揃って 6px 下がるため 90。products-bands-v1 と同じ値） */
#news.edition-news { margin-top: 84px; }   /* 帯の端 → NEWS の字面 96（実測） */

/* ---------- 1100 未満：名乗りを上の段に、図を下の段へ ---------- */
@media (max-width: 1099px) {
  #products.pvh .pv-id { grid-column: 1 / -1; }
  #products.pvh .pvh-ts { grid-column: 1 / -1; }
  #products.pvh .pvh-kb { grid-column: 1 / -1; }
  #products.pvh .pvh-kb > .pv-kb-screen { flex: none; height: 320px; }   /* 名乗りと横に並ばないので、ボードの高さを決める */
  /* 名乗りは1列のまま、機能の一覧だけ2列に（行の高さが揺れない組み方） */
  #products.pvh .pv-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  #products.pvh .pvh-tpl { margin-top: -2px; }                  /* タブレットでは直前が注記：インクで 48 */
}

/* ---------- タブレット（768〜1023）：格子を2列にし、カレンダーと日程調整を上下に ---------- */
@media (max-width: 1023px) {
  #products.pvh .pvh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #products.pvh .pvh-cal, #products.pvh .pvh-poll { grid-column: 1 / -1; }
  #products.pvh .pvh-poll { margin-top: 46px; }                        /* 上下に積む：カレンダー → 日程調整の見出し 48（インク） */
}

/* ---------- スマホ（≤767） ---------- */
@media (max-width: 767px) {
  #products.pvh .pvh-head { margin: -6px 0 19.5px; }        /* LIVE → 見出し 64、見出し → 帯 24（インク） */
  #products.pvh .pvh-grid { row-gap: 30px; }                /* インクで 32（実測） */
  #products.pvh .pv-id { display: flex; }
  #products.pvh .pv-id .pv-name { font-size: 32px; line-height: 40px; gap: 12px; }
  #products.pvh .pv-id .pv-name img { width: 40px; height: 40px; }
  #products.pvh .pv-id .pv-lead { margin-top: 6px; font-size: 18px; line-height: 28px; }   /* インクで 16 */
  #products.pvh .pv-id .pv-feat { margin-top: 5px; grid-template-columns: minmax(0, 1fr); }   /* 機能は 1 列（2 列だと説明が 1〜3 字ずつ折れた） */
  #products.pvh .pv-id .pv-u { margin-top: -19.5px; }
  #products.pvh .pv-id .pv-kicker { margin-top: -3px; }
  #products.pvh .pv-ts { grid-template-columns: minmax(0, 1fr); }
  #products.pvh .pvh-kb > .pv-kb-screen { height: 400px; }   /* 状態のタブ ＋ 進行中の列（製品のスマホの表示） */
  #products.pvh .pvh-poll { margin-top: 30px; }                        /* カレンダー → 日程調整の見出し 32（インク） */
  #news.edition-news { margin-top: 49px; }
}