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

/* ---------- 1440px 以上: コンテナ最大幅で止める（tokens の --container が上限） ---------- */

/* ---------- 1024〜1439px: 4列→3列 ---------- */
@media (max-width: 1279px) {
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .header__nav ul { gap: 12px; }
  /* ナビが収まらない帯域では項目を整理する（文字は縮小しない） */
  .header__actions .btn--ghost { display: none; }
}

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

/* ---------- 〜1023px: ヘッダーをドロワーへ、2カラム→1カラム ---------- */
@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .header__nav { display: none; }
  .header__burger { display: inline-flex; }
  .header__inner { gap: var(--sp-3); }
  .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: 420px; }
  .access-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 〜767px: 完全1カラム＋固定CTA ---------- */
@media (max-width: 767px) {
  /* ヘッダー実測高が 65px になる帯域。アンカー着地の余白もそれに合わせる */
  :root { --anchor-offset: 88px; }
  body { padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px) + 14px); }
  .cta-bar { display: block; }

  .hero__inner { min-height: auto; gap: var(--sp-4); }
  .hero__title { max-width: none; }
  .hero__facts {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-4);
  }
  .hero__fact dd { white-space: normal; }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero__actions .btn { min-width: 0; }

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

  /* CAST は2列カード（仕様: モバイル2列） */
  .grid--4, .grid--3, .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  /* TODAY はヒーロー直後の2列カード。横スクロールに頼らず4名までを見せ、残りは出勤ページへ */
  .today__scroller {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: var(--sp-3);
    overflow: visible;
    padding-bottom: 0;
  }
  .today__scroller > :nth-child(n + 5) { display: none; }
  .today__more { display: flex; width: 100%; }
  .today__more[hidden] { display: none; }
  .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__link { grid-template-columns: 1fr; gap: 6px; }
  .info-list__row { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .recruit-band__body { padding: var(--sp-5) var(--sp-4); }
  .slider__track { grid-auto-columns: minmax(260px, 84%); }

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

  .detail__week { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .header__brand { min-width: 0; }
  .header__brand-name { white-space: nowrap; }
  .header__actions .btn { min-height: 44px; padding: 10px 14px; font-size: var(--fs-label); }
  .steps__item { grid-template-columns: 40px 1fr; }
  .steps__item::before { width: 40px; height: 40px; }

  /* 表はカード化（PCで横並びの情報を消さずに縦へ変換する） */
  .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-m);
    padding: var(--sp-3) var(--sp-4);
    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: 8.5em 1fr;
    gap: var(--sp-3);
    border: 0;
    padding: 4px 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);
    color: var(--c-gold);
  }
}

/* ---------- 〜479px（390pxを正） ---------- */
@media (max-width: 479px) {
  :root { --gutter: 16px; }
  /* ヘッダーの補助ラベルを折り畳む（テンプレート名はフッターで読める） */
  .header__brand-sub { display: none; }
  .hero__facts { grid-template-columns: 1fr 1fr; }
  .hero__actions { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .cta-bar__inner { grid-template-columns: 1fr 1fr 1.3fr; }
  .cta-bar a { padding-inline: 2px; }
  .gallery-item__cap { font-size: var(--fs-note); }
  .modal__dialog { padding-inline: var(--sp-4); }
  .table-wrap--cardable .table td { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 359px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .today__scroller { grid-template-columns: 1fr; }
  .today__scroller > :nth-child(n + 3) { display: none; }
}

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