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

/* ---------- 1440px 以上: --container（1120px）が上限。追加指定なし ---------- */

/* ---------- 1280〜1439px: グリッドを1段落とす ---------- */
@media (max-width: 1279px) {
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 1024〜1279px: ヘッダーの補助ボタンを整理（文字は縮小しない） ---------- */
@media (max-width: 1179px) {
  .gnav__list { gap: 8px; }
  /* 電話は固定CTA・ヒーロー・フッターからも辿れるため、この帯域ではヘッダーから外す */
  .header-actions .btn--tel { display: none; }
}

@media (max-width: 1099px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--wide-left { grid-template-columns: 1fr; }
  .room-card { grid-template-columns: 1fr; }
  .room-card__media { aspect-ratio: 16 / 9; }
}

/* ---------- 〜1023px: ヘッダーをドロワーへ、2カラム→1カラム ---------- */
@media (max-width: 1023px) {
  :root { --header-h: 64px; --anchor-offset: 88px; }
  .gnav { display: none; }
  .burger { display: inline-flex; }
  .header-actions { margin-inline-start: auto; }

  .grid--4 { grid-template-columns: repeat(2, 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-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rsv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__inner { min-height: min(52vw, 420px); }
}

/* ---------- 〜767px: 完全1カラム＋固定CTA ---------- */
@media (max-width: 767px) {
  :root { --anchor-offset: 84px; }
  /* 固定CTAで本文末が隠れないよう、バー高ぶんの余白を必ず確保する */
  body { padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px) + 12px); }
  .cta-bar { display: block; }
  .site-footer { margin-bottom: 0; }

  .hero__inner { min-height: auto; padding-block: var(--sp-6); }
  .hero__title { max-width: none; }
  .hero__facts { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

  /* 予約パネルは1カラムで縦積み。フォームはボトムシート（components.css）で全画面表示 */
  .rsv { padding-block: var(--sp-5); }
  .rsv__panel { padding: var(--sp-4); }
  .rsv__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .rsv__actions .btn { flex: 1 1 100%; }
  .rsv__rows > div { grid-template-columns: 6.5em 1fr; }

  .sec-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .plan-grid { grid-template-columns: 1fr; }
  .role-grid { grid-template-columns: 1fr; }
  .person__body { padding: var(--sp-3); }
  .person__name { font-size: 1rem; }

  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item--wide { grid-column: span 2; }

  .news-list a { grid-template-columns: 1fr; }
  .def > div { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .confirm__row { grid-template-columns: 1fr; gap: 2px; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer-info { grid-template-columns: 4.5em 1fr; }
  .detail__week { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .room-card__spec { grid-template-columns: 5.5em 1fr; }
  .steps li { grid-template-columns: 36px 1fr; }
  .steps li::before { width: 36px; height: 36px; }

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

/* ---------- 〜479px（390pxを正） ---------- */
@media (max-width: 479px) {
  :root { --gutter: 16px; }
  /* ヘッダーの補助ラベルを折り畳む（テンプレート名はフッターで読める） */
  .brand__sub { display: none; }
  .hero__facts { grid-template-columns: 1fr 1fr; }
  .cta-bar__list { grid-template-columns: 1.4fr 1fr 1fr; }
  .gallery-item__cap { font-size: var(--fs-note); }
}

/* ---------- 〜359px: 1列へ落として横スクロールを出さない ---------- */
@media (max-width: 359px) {
  /* 320pxでも「店名＋ご予約＋メニュー」が1行に収まるよう、余白と店名だけを詰める
     （本文・料金・時刻・ラベルの文字サイズは変えない） */
  .site-header__inner { gap: var(--sp-2); }
  .brand__name { font-size: 1rem; }
  .header-actions { gap: 6px; }
  .header-actions .btn { padding-inline: 12px; }
  .burger { width: 44px; }

  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .hero__facts { grid-template-columns: 1fr; }
  .cta-bar__list { grid-template-columns: 1fr 1fr; }
  .cta-bar__item--wide { grid-column: span 2; }
  /* CTAが2段になるぶんバー高が増えるので、本文末の余白も同じ高さへ更新する
     （罫線1px + padding上下 + タップ領域2段 + 段間5px = 108px） */
  :root { --cta-h: calc(var(--cta-tap) * 2 + 5px + var(--cta-pad) * 2 + 1px); }
}

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