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

/* ---------- 1440px 以上: --container(1120px) が上限。広げすぎない ---------- */

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

/* ---------- 1024〜1279px: 4列→3列。ヘッダーの補助ボタンを1つ落として nowrap を守る ---------- */
@media (max-width: 1279px) {
  .header__actions .btn--outline { display: none; }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cal__cell { min-height: 104px; }
}

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

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

  .grid--4, .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nextev__grid { grid-template-columns: 1fr; }
  .nextev__media { order: -1; }
  .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; }
  .cal__cell { min-height: 96px; padding: 5px; }
  .cal__chip { font-size: var(--fs-note); padding: 4px 5px; }
}

/* ---------- 〜767px: 完全1カラム＋固定CTA＋カレンダーは日付順リストへ ---------- */
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px) + 14px); }
  /* 追従バーの導線が features=false で全滅した場合、バーは削除されるので下余白も戻す */
  body.no-cta-bar { padding-bottom: 0; }
  .cta-bar { display: block; }

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

  /* 7列グリッドはSPで文字が読めなくなるため、同じデータを日付順リストへ変換する
     （PCで見えていた情報を消さない。件数・定休日・関連キャストもリスト側に出す） */
  .cal { display: none; }
  .cal-list { display: block; }
  .cal-legend .k-event ~ span, .cal-legend { font-size: var(--fs-note); }

  .grid--4, .grid--3, .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .person__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .person__name { font-size: 1rem; }

  .nextev__actions { display: grid; grid-template-columns: 1fr; }
  .nextev__actions .btn { min-width: 0; }
  .storebar { gap: var(--sp-2) var(--sp-4); }

  .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(88px, 1fr)); }
  .steps__item { grid-template-columns: 40px 1fr; gap: var(--sp-3); }
  .steps__item::before { width: 40px; height: 40px; }

  .castbar { align-items: flex-start; }
  .castbar__tools { width: 100%; }

  /* 関連キャストはラベルを1行占有させ、名前チップが行頭から並ぶようにする */
  .event-people__label { flex: 1 0 100%; }

  /* 表はカード化（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-surface);
  }
  .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; }
  .cta-bar a.is-primary { flex-grow: 1.3; }
  .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%; }
  .calbar__month { min-width: 0; }
}

/* ---------- 〜359px（320pxでもヘッダー・カレンダーを破綻させない） ---------- */
@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .header__mark { display: none; }
  .header__brand-name { font-size: 1rem; letter-spacing: 0.02em; }
  .header__actions .btn--primary { padding-inline: 12px; }
  .grid--4, .grid--3, .grid--2 { gap: var(--sp-2); }
  .person__tags { display: none; }
  .cal-list__item { grid-template-columns: 54px minmax(0, 1fr); gap: var(--sp-2); }
  .calbar { gap: var(--sp-2); }
  .calbar__nav .btn { padding-inline: 10px; }
}

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