/* KEIRIN HEX の広い画面（幅 1280px 以上）の作り。site.css・race.css・ktop.css・kmap.css の後に重ねる。
   <link> に media="(min-width: 1280px)" が付いているので、1280px 未満ではそもそも読み込まない（中身も全部 @media の中）。
   中身: 内容の幅を 1400px まで・列を増やす（トップの開催・日のページの一覧と地図・レースのページのステージ（左に印・並び・主導権, 右に大きな展開の映像）と全幅の出走表・印の成績）。
   :has() が使えない古いブラウザでは 2 列にせず、幅を広げただけの 1 列のまま（@supports の中に入れてある）。
   外部読み込み・インラインの style なし（CSP）。大きさの上限は tests/test_keirin_site_wide.py が見る。 */
@media (min-width: 1280px) {
  :root { --wide: 1400px; --gut: 32px; --simw: clamp(560px, calc(100vh - 170px), 680px); }

  /* 共通: 頭の帯と本文を同じ幅にそろえる */
  .top { padding-left: max(var(--gut), calc((100% - var(--wide)) / 2 + var(--gut))); padding-right: max(var(--gut), calc((100% - var(--wide)) / 2 + var(--gut))); }
  main, main.race { max-width: var(--wide); padding-left: var(--gut); padding-right: var(--gut); }
  .race h1 { font-size: 2rem; }
  .race h2 { font-size: 1.2rem; }
  .foot { padding-left: var(--gut); padding-right: var(--gut); }

  /* トップ: 開催は 2 列・できることは 3 列 */
  .kt-hero h1 { font-size: 2.3rem; }
  .kt-hero .lead { max-width: 52em; font-size: 1.08rem; }
  .kt-day { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
  .kt-day > h2, .kt-day > .kt-packline, .kt-day > .kt-links { grid-column: 1 / -1; }
  .kt-day .kt-slot { margin-bottom: 20px; }
  .kt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .kt-news .what { flex-basis: 10em; }

  /* トップ: 競走得点だけで選ぶより（左に 違ったレース と 割合の棒・右に 最近の違ったレース. 高さをそろえる）。1 列のときは読める幅まで */
  .kv { padding: 24px 28px 22px; }
  .kv-body.two { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "tug roll" "rates roll"; column-gap: 40px; align-items: start; }
  .kv-body.two > .kv-tug { grid-area: tug; }
  .kv-body.two > .kv-rates { grid-area: rates; }
  .kv-body.two > .kv-roll { grid-area: roll; }
  .kv-body.one { max-width: 880px; }
  .kv .kv-bar.a .kv-pct { font-size: 24px; }
  .kv .kv-bar.b .kv-pct { font-size: 18px; }

  /* トップ: 答え合わせボードを広く（めくり板を大きく・時間帯ごとを 3 列） */
  .kt-b { --fw: 62px; }
  .kt-b .kt-st-num { --fw: 54px; }
  .kt-b .kt-stats { gap: 18px; }
  .kt-b .kt-stat { padding: 16px 18px 14px; }
  .kt-b .kt-st-label { font-size: 14px; }
  .kt-b .kt-st-basis { font-size: 12px; }
  .kt-b .kt-note, .kt-b .kt-lede { font-size: 13px; }
  .kt-sr-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .kt-tape-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

  /* 日のページ: 時間帯の中を 2 列（開催が 1 つだけなら横いっぱいに 6 列）・一覧は 4 列 */
  .slot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; align-items: start; }
  .slot > h2 { grid-column: 1 / -1; }
  .slot .cupbox { margin: 8px 0; }
  .rlist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .slot .cupbox:only-of-type { grid-column: 1 / -1; }
  .slot .cupbox:only-of-type .rlist { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rlist.days { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* 日のページの地図: 地図を大きく・右の札は固定のまま */
  .kd-stage { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 28px; }
  .kd-lead { max-width: 60em; }
  .kd-hub { min-height: 150px; }
  .kd-hub-date { font-size: 32px; }
  .kd-hub-lines li { font-size: 13px; }
  .kd-slot h3 { font-size: 1.1rem; }
  .kd-cup-h { font-size: 15px; }

  /* レースのページ: 数字の箱は 1 行・ページ内の移動の帯は要らない（印と映像は 1 画面目, 出走表は 2 画面目に収まる）。出走表は横いっぱい（横スクロールなし）・今節のタイルは少し大きく */
  .facts { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .jump { display: none; }
  .rstage .sec > h2:first-child { margin-top: 0; }
  .rstage-side > * + * { margin-top: 30px; }
  .rstage-main > * + * { margin-top: 24px; }
  .riders-sec { margin-top: 40px; }
  .riders { font-size: .9rem; }
  .riders th, .riders td { padding: 7px 9px; }
  .riders .c-car { width: 3.4rem; min-width: 3.4rem; }
  .riders .c-name { left: 3.4rem; min-width: 12rem; }
  .riders td.mt { padding: 5px 6px; }
  .mt-t { width: 52px; height: 44px; }
  .mt-t .mt-pos { font-size: 1.35rem; }
  .mt-t .mt-kim { font-size: .76rem; }
  .mt-t .mt-rno { font-size: .68rem; }
  .pack { max-width: 460px; }

  /* 印の成績: 表を 2 列 */
  .rec { min-width: 0; width: 100%; }
  .rec thead th { white-space: normal; }
  .rec thead th[rowspan] { white-space: nowrap; }

  /* 古い静的トップ（sites/keirin/index.html）: 長い文は読める幅に・カードは 4 列 */
  main:not(.race) > p, main:not(.race) > ul, main:not(.race) > ol, main:not(.race) > .scroll { max-width: 56em; }
  main:not(.race) .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main:not(.race) .figure { max-width: 980px; }

  @supports selector(:has(a)) {
    /* トップ: 毎日の使い方 + 時間帯パックを横に並べる（お知らせは横いっぱい） */
    main.race:has(> .kt-hero) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
    main.race:has(> .kt-hero) > * { grid-column: 1 / -1; }
    main.race:has(> .kt-hero) > .kt-use { grid-column: 1 / 7; }
    main.race:has(> .kt-hero) > .kt-pack { grid-column: 7 / -1; }

    /* 印の成績: 6 つの表を 2 列に */
    main.race:has(.rec) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
    main.race:has(.rec) > * { grid-column: 1 / -1; }
    main.race:has(.rec) > .sec { grid-column: auto; }

    /* 順送り: レース番号は左・前後のレースは右の同じ行に（日のページの前後の日は左に寄せる） */
    .racenav:has(.rnos) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
    .racenav:has(.rnos) .prevnext { order: 2; margin: 0; gap: 28px; }
    .racenav:has(.rnos) .rnos { order: 1; }
    .racenav:not(:has(.rnos)) .prevnext { justify-content: flex-start; gap: 36px; }

    /* レースのページ: ステージ = 左に 結果・印・見どころ・並び・主導権の見込み（女子は想定の位置取り）, 右に 大きな展開の映像（列の幅は画面の高さに合わせて 560〜680px.
       絵の頭に合わせてスクロールすると 絵 + 再生ボタン が 1 画面に入る大きさ. 追従（sticky）はしない: 節が画面より高いとボタンに届かなくなるため）。
       映像の枠（hidden で出て, JS が読めたときだけ見せる）が HTML にあれば右の列は最初から取っておく（後から列が現れて左がずれない）。
       映像が無い・JS が枠を消したときは 右の列を作らず, 左の節を 2 列の格子に広げる。文の並び（上から下）は HTML の順のまま。出走表はステージの下に全幅 */
    .rstage:has(> .rstage-main > *) { display: grid; grid-template-columns: minmax(0, 1fr) var(--simw); column-gap: 44px; align-items: start; margin-top: 10px; }
    .rstage:has(> .rstage-main > *) > .rstage-main { grid-column: 2; }
    .rstage:has(> .rstage-main > *) .k3-stage, .rstage:has(> .rstage-main > *) .simvid-v { max-width: none; }
    .rstage:not(:has(> .rstage-main > *)) > .rstage-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px; align-items: start; margin-top: 10px; }
    .rstage:not(:has(> .rstage-main > *)) > .rstage-side > * { margin-top: 0; }
  }
}