/* SITE 87 CABARET NEW OPEN — responsive
   調整順は カラム減少 → 縦積み → 余白 → 写真比率 → 折畳み → 表カード化 → 最後に見出し
   本文・料金・時刻・住所・ラベルは 14px 未満へ縮めない */

/* ---------- 1440px 以上: --container(1160px) が上限 ---------- */

/* ---------- 1280〜1439px: 変更なし ---------- */

/* ---------- 1024〜1279px: 4列→2列。ナビが収まらないので補助ボタンを整理する ----------
   1024〜1279px 帯は「PCナビ + ドロワーなし + 固定CTAなし」のまま成立させる。
   ここで補助リンクだけを畳み、ナビ項目そのものは減らさない。 */
@media (max-width: 1279px) {
  .header__actions .btn--outline { display: none; }
  .infocards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1099px) {
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "main" "aside";
  }
  .recruit-band { grid-template-columns: 1fr; }
  .recruit-band__media { aspect-ratio: 21 / 9; }
  .reserve { grid-template-columns: 1fr; }
}

/* ---------- 〜1023px: ヘッダーをドロワーへ、2カラム→1カラム ----------
   このブレークポイントは components.js の「PC幅へ戻ったら閉じる」判定（>1023）と一致させる */
@media (max-width: 1023px) {
  :root { --header-h: 64px; --anchor-offset: 84px; }
  .header__nav { display: none; }
  .header__burger { display: inline-flex; }
  .header__inner { gap: var(--sp-3); }
  .header__actions { margin-inline-start: auto; }
  .header__actions .btn--outline { display: none; }

  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail { grid-template-columns: 1fr; gap: var(--sp-5); }
  .detail__media { max-width: 400px; }
  .access-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- 〜767px: 完全1カラム＋固定CTA ---------- */
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px) + 14px); }
  .cta-bar { display: block; }

  .section__head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  /* 人物カードは2列（写真とキャッチは残す） */
  .grid { gap: var(--sp-3); }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person__body { padding: var(--sp-3); }
  .person__name { font-size: 1.0625rem; }

  /* 日付・住所・予約開始はヒーロー直下のカードで読める形に保つ */
  .infocards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .infocard { padding: var(--sp-3); }
  .countdown { padding: var(--sp-4); }
  .countdown__units { gap: var(--sp-3); }
  .facts__row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .hero__actions { display: grid; grid-template-columns: 1fr; }
  .hero__actions .btn { min-width: 0; }

  .timeline__item { grid-template-columns: 1fr; gap: 4px; }
  .price-cards { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item--wide { grid-column: span 2; }

  .news-list__link { grid-template-columns: 1fr; gap: 4px; }
  .info-list__row { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .recruit-band__body { padding: var(--sp-5) var(--sp-4); }
  .shift-group { grid-template-columns: 1fr; gap: var(--sp-2); }
  .shift-group__time { padding-top: 0; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); }

  .detail__week { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .steps__item { grid-template-columns: 40px 1fr; gap: var(--sp-3); }
  .steps__item::before { width: 40px; height: 40px; }

  /* 表はカード化（PCで横並びの情報をSPで消さずに縦へ変換する） */
  .table-wrap--cardable .table { min-width: 0; }
  .table-wrap--cardable .table thead { display: none; }
  .table-wrap--cardable .table tr {
    display: grid;
    gap: 4px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-s);
    padding: var(--sp-3);
    background: var(--c-card);
  }
  .table-wrap--cardable .table tbody tr + tr { margin-top: var(--sp-3); }
  .table-wrap--cardable .table td {
    display: grid;
    grid-template-columns: 8em 1fr;
    gap: var(--sp-3);
    border: 0;
    padding: 3px 0;
    text-align: left;
  }
  .table-wrap--cardable .table td.num { text-align: left; }
  .table-wrap--cardable .table td::before {
    content: attr(data-th);
    font-size: var(--fs-note);
    font-weight: 700;
    color: var(--c-muted);
  }
}

/* ---------- 〜479px（390pxを正） ---------- */
@media (max-width: 479px) {
  :root { --gutter: 16px; }
  /* ヘッダーの補助ラベルを折り畳む（テンプレート名はフッターで読める） */
  .header__brand-sub { display: none; }
  .header__brand-name { font-size: 1.0625rem; }
  /* 切替ボタンは補足（未公開／公開中）を畳んで横並びを保つ。
     畳まないと 320px でラベルが収まらず文書全体の横スクロールを生む
     （実測: 対策前は 320px で 347px まで伸びていた）。 */
  .statebar__btns { width: 100%; }
  .statebar__btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; white-space: normal; }
  .statebar__sub { display: none; }
  .cta-bar a { padding-inline: 2px; }
  .modal__dialog { padding-inline: var(--sp-4); }
  .table-wrap--cardable .table td { grid-template-columns: 1fr; gap: 0; }
  .article__nav .btn { flex: 1 1 100%; }
}

/* ---------- 〜359px（320pxでもヘッダー・カードを破綻させない） ---------- */
@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .header__mark { display: none; }
  .header__brand-name { font-size: 1rem; letter-spacing: 0.01em; }
  .header__actions .btn--primary { padding-inline: 12px; }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; gap: var(--sp-3); }
  .infocards { grid-template-columns: 1fr; }
  .person__tags { display: none; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item--wide { grid-column: span 1; }
}

/* ---------- 印刷 ---------- */
@media print {
  .header, .cta-bar, .drawer, .drawer-backdrop, .modal, .lightbox,
  .statebar, #kyabel-promo { display: none !important; }
  body { background: #fff; color: #111; padding-bottom: 0; }
}