/* =========================================================
   SITE 115 — CONCAFE MENU & GOODS / responsive.css
   MASTER §7 の幅区分に合わせた調整。カラム減少→縦積み→余白調整→
   写真比率→折畳み→表カード化→見出しサイズの順で適用する。
   ナビ⇔ドロワーの切替とカテゴリのボトムシート化はすべて 1100px を境にする
   （components.js の matchMedia と揃え、境界帯でナビとドロワーが
   両方消える／両方出る事故を防ぐ）。
   ========================================================= */

/* ---------- 〜479px（基準） ---------- */
html, body { max-width: 100%; }
.container, .container--narrow { width: 100%; }
body { padding-bottom: calc(var(--h-ctabar) + env(safe-area-inset-bottom)); }

.hdr__nav { display: none; }
.hdr__toggle { display: inline-flex; }
/* 電話番号はモバイル幅では表示しない（トグルボタンと共存させると390pxで折り返せず
   横スクロールが発生するため）。電話はドロワー・フッター・固定CTAから到達できる。 */
.hdr__tel { display: none; }

.hero__grid { grid-template-columns: 1fr; }
.hero__media { order: -1; }
.hero__title { font-size: var(--fs-h1); }
.hero__cta .btn { flex: 1 1 auto; }

.cats-grid, .menu-grid, .goods-grid, .cast-grid, .event-grid, .gallery-grid, .term-grid, .role-grid,
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

.menu-toolbar { flex-direction: column; align-items: stretch; }
.menu-toolbar__tabs { display: none; }
.menu-sheet-trigger { display: inline-flex; }

.detail-hero { grid-template-columns: 1fr; }
.detail-hero .ph { max-width: 280px; margin: 0 auto; }

.access-grid { grid-template-columns: 1fr; }

.news-card { grid-template-columns: 1fr; }
.news-card .ph { aspect-ratio: 16 / 9; }
.news-card__body { padding: var(--sp-4); }

.schedule-panel__list { grid-template-columns: 1fr; }
.week-list { grid-template-columns: repeat(4, 1fr); }

.ftr__grid { grid-template-columns: 1fr; }
.endcta .container { flex-direction: column; align-items: flex-start; }

/* タップ領域・横スクロール保険 */
a, button { min-height: var(--tap); }
.hdr__brand, .chip, .badge, .stock-badge { min-height: 0; }

/* ---------- 480〜767px ---------- */
@media (min-width: 480px) {
  .cats-grid, .menu-grid, .goods-grid, .cast-grid, .gallery-grid,
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hero__cta .btn { flex: none; }
}

/* ---------- 768〜1023px ---------- */
@media (min-width: 768px) {
  .section { padding: var(--sp-9) 0; }
  .cats-grid, .goods-grid, .cast-grid, .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .event-grid, .term-grid, .role-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-hero { grid-template-columns: 260px 1fr; }
  .detail-hero .ph { max-width: none; margin: 0; }
  .access-grid { grid-template-columns: 1fr 1fr; }
  .news-card { grid-template-columns: 200px 1fr; }
  .news-card .ph { aspect-ratio: 4 / 3; }
  .schedule-panel__list { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .week-list { grid-template-columns: repeat(7, 1fr); }
}

/* ---------- 1024〜1439px：ナビ・ドロワー切替（1100px）／固定CTA非表示 ---------- */
@media (min-width: 1024px) {
  .cats-grid { grid-template-columns: repeat(4, 1fr); }
  .goods-grid, .cast-grid, .gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
  .term-grid, .role-grid { grid-template-columns: repeat(3, 1fr); }
  .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 1100px) {
  .hdr__nav { display: block; }
  .hdr__toggle { display: none; }
  .hdr__tel { display: flex; }
  .cta-bar { display: none; }
  body { padding-bottom: 0; }
  .menu-toolbar__tabs { display: flex; }
  .menu-sheet-trigger { display: none; }
}

/* ナビの折り返し防止（1100〜1279pxの境界帯対策。文字縮小で逃げない） */
@media (min-width: 1100px) and (max-width: 1279px) {
  .hdr__nav ul { gap: var(--sp-4); }
  .hdr__nav a { font-size: 0.9rem; }
  .hdr__inner { gap: var(--sp-3); }
}

/* ---------- 1440px以上 ---------- */
@media (min-width: 1440px) {
  :root { --w-container: 1240px; }
}

/* 極小幅の保険（数字・料金が切れないように） */
@media (max-width: 359px) {
  .week-list { grid-template-columns: repeat(4, 1fr); }
  .hdr__brand-sub { display: none; }
}