/* SITE 73 — レスポンシブ
   調整順（MASTER §7）: カラム減少 → 縦積み → 余白 → 写真比率 → 折畳み → 表カード化 → 最後に見出し
   本文・料金・時刻・住所・フォームラベルは 16px、注記は 14px を下回らせない。
   切替BPは 1023px で統一する（ドロワー化・固定CTA表示・情報バー格納を同時に行い、
   「ドロワーなのに固定CTAがない」空白帯を作らない）。 */

/* ============ 1440px 以上 ============ */
@media (min-width: 1440px) {
  .container { padding-inline: var(--sp-6); }
}

/* ============ 1279px 以下: ヘッダーのボタンをアイコン化 / 4列 → 3列 ============
   1120px に収まる項目数を先に決めている。文字を縮めずにラベルを畳んで幅を作る。 */
@media (max-width: 1279px) {
  .header-actions .btn--tel .btn__label,
  .header-actions .btn--find .btn__label { display: none; }
  .header-actions .btn--tel,
  .header-actions .btn--find { width: var(--tap); padding-inline: 0; }
  .global-nav__list { gap: 10px; }
  .global-nav__link { font-size: 14px; }

  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ 1023px 以下: ドロワー・固定CTA・情報バー格納 ============ */
@media (max-width: 1023px) {
  /* 固定CTAの実高 = 項目の min-height（--h-cta）+ 上辺の 1px ボーダー */
  body { padding-bottom: calc(var(--h-cta) + 1px + env(safe-area-inset-bottom, 0px)); }

  /* 情報バーの内容はドロワーと DASHBOARD の情報カードから到達できるため、上部からは外す */
  .infobar { display: none; }

  .global-nav { display: none; }
  .drawer-toggle { display: flex; }
  .header-actions { margin-left: auto; }
  /* 電話はドロワー・固定CTA・フッターから到達できるため、ヘッダーからは外す */
  .header-actions .btn--tel { display: none; }
  .mobile-cta { display: block; }

  .brand__sub { display: none; }

  .dashboard { padding-block: var(--sp-6) var(--sp-7); }
  .dashboard__top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .dashboard__media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard__media > :first-child { grid-column: auto; }

  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }

  .first-summary { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .split, .split--media-right, .access-layout, .person-detail { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .example-grid, .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .event-item { grid-template-columns: minmax(0, 1fr); }
  .event-item__body { padding: var(--sp-4); }

  .section { padding-block: var(--sp-7); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ 767px 以下: 完全1カラム / 表のカード化 / 絞り込みのボトムシート化 ============ */
@media (max-width: 767px) {
  .container { padding-inline: var(--sp-4); }

  /* 「HOSTを探す」は固定CTAの先頭に常時あるため、ヘッダーからは外す（390pxの幅を確保） */
  .header-actions .btn--find { display: none; }

  .dashboard__title { font-size: clamp(26px, 7vw, 34px); }
  .dashboard__cards { gap: var(--sp-2); }
  .dashboard__media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .dashboard__media > :nth-child(3) { display: none; }
  .dashboard__actions .btn { flex: 1 1 100%; }
  .info-card { padding: var(--sp-3); }
  .info-card__value { font-size: 22px; }

  /* 絞り込みはボトムシートへ。ページ側には開くボタンだけを残す。 */
  .filter-open { display: inline-flex; }
  .filter-dock { display: none; }
  /* シート内は縦積み。max-content 列のままだとチップ列が横にはみ出す。 */
  .filter-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .searchbar__field { flex: 1 1 100%; }
  .directory__toolbar { gap: var(--sp-2); padding: var(--sp-3); }
  .directory__controls { width: 100%; }
  .control { flex: 1 1 100%; }
  .control .select { flex: 1; min-width: 0; width: 100%; }
  .directory__more .btn { min-width: 0; width: 100%; }

  /* 人物カードは2列を維持（MASTER §7: 情報量により2列可） */
  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .person-card__body { padding: var(--sp-3) 10px; gap: 4px; }

  .shift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .schedule-day__body .shift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shift-chip { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 6px; }
  .shift-chip__thumb { width: 36px; }

  .example-grid, .role-grid, .floor-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .plan-grid { grid-template-columns: minmax(0, 1fr); }

  /* 定義リストの表をカード化 */
  .def-list__row { grid-template-columns: minmax(0, 1fr); }
  .def-list__key { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .confirm-list__row { grid-template-columns: minmax(0, 1fr); }
  .confirm-list__key { border-bottom: 1px solid var(--c-line); }

  /* NEWS 一覧を縦積みカードへ */
  .news-item { grid-template-columns: minmax(0, 1fr); gap: 5px; padding-block: var(--sp-3); }

  .event-mini__item { grid-template-columns: 84px minmax(0, 1fr); gap: var(--sp-3); }

  .week-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .section { padding-block: var(--sp-6); }
  .section-head { margin-bottom: var(--sp-4); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }

  .cta-band { padding: var(--sp-4); }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 100%; }

  .modal__foot { justify-content: stretch; }
  .modal__foot .btn { flex: 1 1 140px; }
}

/* ============ 479px 以下: 390px を正 ============ */
@media (max-width: 479px) {
  .container { padding-inline: 14px; }
  .header-actions .btn--reserve { padding-inline: 12px; }
  /* 390pxでは表示タグを2件までに抑える（続きは詳細ページで全件表示） */
  .person-card__tags li:nth-child(n+3) { display: none; }
  .plan-card { padding: var(--sp-4); }
  .role-card { padding: var(--sp-4); }
  .page-head { padding-block: var(--sp-6) var(--sp-5); }
  .lightbox__bar { flex-wrap: wrap; }
  .week-strip { gap: 6px; }
  .week-strip__cell { padding: 10px 2px; }
  /* 情報カードは390pxでも2列を維持する（4枚が縦に伸びてTODAYが遠くなるのを防ぐ） */
  .info-card__value--text { font-size: var(--fs-body); }
}

/* ============ 360px 以下の保険 ============ */
@media (max-width: 360px) {
  .week-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shift-grid, .schedule-day__body .shift-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============ 359px 以下: 店名＋予約＋メニューが1行に収まらない ============
   .brand は flex: none のままだと縮まず、ヘッダーが押し広げられて
   全ページに横スクロールが出る。店名だけを縮められるようにし、
   あふれは省略記号で受ける。360px では収まるため、この幅未満にだけ適用する。 */
@media (max-width: 359px) {
  .brand { flex: 0 1 auto; }
  .brand__name { overflow: hidden; text-overflow: ellipsis; }
}