/* SITE 92 — レスポンシブ
   調整順（MASTER §7）: カラム減少 → 縦積み → 余白 → 写真比率 → 折畳み → 表カード化 → 最後に見出し
   本文・料金・時刻・住所・徒歩分数・フォームラベルは16px、注記は14pxを下回らせない。
   ドロワーと固定CTAの切替は 1023px で一致させる（components.js の DRAWER_BP = 1024 と同値）。
   担当仕様: モバイルは地図より徒歩案内を先に置き、固定CTAは 電話 / LINE / 地図。 */

/* ============ 1024px 以上: 横並びのイベントカード ============ */
@media (min-width: 1024px) {
  /* 写真列を本文列の高さに合わせる。aspect-ratio のままだと本文が長いカードで
     写真の下に地色の帯が残る。1カラムへ落ちる幅では aspect-ratio を効かせる。
     ここで aspect-ratio を必ず解除すること。
     比率を持つグリッド項目は justify-self:stretch が効かず、
     height:100% から幅を逆算して列幅を超え、隣の本文列（予約ボタン）の上へ
     重なってクリックを奪う（overflow:hidden のため見た目には出ず、
     横スクロール検査にもかからない種類の不具合）。 */
  .event-item__media { height: 100%; aspect-ratio: auto; min-width: 0; }
  .event-item__media img { height: 100%; }
  .event-item__body { min-width: 0; }
}

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

/* ============ 1279px 以下: ナビの余白を詰める（文字は縮めない） ============ */
@media (max-width: 1279px) {
  .global-nav__list { gap: 10px; }
  /* 電話番号の文字はヘッダーから外す。番号はヒーロー・固定CTA・フッターに残る。 */
  .header-actions .btn--tel .btn__label { display: none; }
  .header-actions .btn--tel { width: var(--tap); padding-inline: 0; }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .local-hero__grid { gap: var(--sp-5); }
}

/* ============ 1119px 以下: 2カラムの比率調整 ============ */
@media (max-width: 1119px) {
  .local-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .point-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .person-detail { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-5); }
  .access-grid--wide-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ============ 1023px 以下: ドロワー・固定CTA（同じBPで一斉に切り替える） ============ */
@media (max-width: 1023px) {
  :root { --h-header: 58px; }

  /* 固定CTAの実高 = 項目の min-height（--h-cta）+ 上辺の1pxボーダー。
     +1px しないと本文の末尾がCTAの下へ1pxもぐる。 */
  body { padding-bottom: calc(var(--h-cta) + 1px + env(safe-area-inset-bottom, 0px)); }

  .global-nav { display: none; }
  .drawer-toggle { display: flex; }
  .header-actions { margin-left: auto; }
  /* 「道順」ボタンは固定CTA・ドロワー・フッターから到達できるためヘッダーから外す
     （320〜390pxでロゴ＋電話＋メニューが収まる幅を確保する） */
  .header-actions .btn--map { display: none; }
  .mobile-cta { display: block; }

  .brand__sub { display: none; }

  /* ヒーローは単純な縦積み。事実の並びを先に読ませ、店舗概要表を後ろへ回す。 */
  .local-hero { padding-block: var(--sp-5) var(--sp-6); }
  .local-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .local-hero__body { order: 1; }
  .local-hero__aside { order: 2; }

  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .split, .split--wide-left, .person-detail,
  .access-grid, .access-grid--wide-left, .area-layout, .photo-pair {
    grid-template-columns: minmax(0, 1fr); gap: var(--sp-5);
  }
  /* 担当仕様: 地図より徒歩案内を先に見せる。
     DOM上も道順→地図の順に並べているため、順序の入れ替えは不要。 */
  .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__media { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .event-item__body { padding: var(--sp-5); }

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

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

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

  /* 事実の帯は1列。徒歩分数・料金の数字を縮めない。 */
  .fact-strip { grid-template-columns: minmax(0, 1fr); }
  .fact { border-right: 0; }
  .fact:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-line); }
  .fact:last-child { border-bottom: 0; }
  .local-hero__actions .btn { flex: 1 1 100%; }

  /* 写真は情報量が少ないため2列を維持 */
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .gallery-item--wide { grid-column: span 2; }

  /* 表をカード化（見出しは data-th から出す。文字は縮めない） */
  .data-table, .data-table thead, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; }
  .data-table { border: 0; background: transparent; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  /* caption は既定が display:table-caption のため、表をブロック化すると
     幅が潰れて1文字ずつ折り返す。カード化時は明示的にブロックへ戻す。 */
  .data-table caption { display: block; width: 100%; padding-inline: 0; }
  .data-table tbody tr {
    border: 1px solid var(--c-line-strong); border-radius: var(--radius);
    background: var(--c-surface); margin-bottom: var(--sp-3); overflow: hidden;
  }
  .data-table tbody tr:last-child { margin-bottom: 0; }
  .data-table tbody th {
    background: var(--c-bg-3); border-bottom: 1px solid var(--c-line);
    padding: 12px var(--sp-4);
  }
  .data-table tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
    padding: 10px var(--sp-4); text-align: right;
  }
  .data-table tbody td::before {
    content: attr(data-th);
    font-size: var(--fs-note); color: var(--c-muted); font-weight: 700;
    text-align: left; flex: none;
  }
  .data-table tbody td:not([data-th]) { justify-content: flex-start; text-align: left; }
  .data-table .note-cell { text-align: left; }
  .data-table tbody tr.is-highlight { border-color: var(--c-rose-line); }

  /* 定義リストの表をカード化 */
  .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); }

  /* 出勤行は「写真 / 名前・時間」の2列へ */
  .schedule-row { grid-template-columns: 58px minmax(0, 1fr); grid-template-areas: "thumb name" "thumb time"; gap: 6px var(--sp-3); }
  .schedule-row__thumb { grid-area: thumb; width: 58px; align-self: center; }
  .schedule-row__info { grid-area: name; }
  .schedule-row__time { grid-area: time; text-align: left; }

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

  .route-card, .route-panel { padding: var(--sp-4); }
  .copy-box { padding: var(--sp-4); }
  .copy-box__head .btn { width: 100%; }

  .section { padding-block: var(--sp-7); }
  .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; }

  .filter-bar { padding: var(--sp-4); }
  .filter-bar__row { flex-wrap: wrap; }
  .filter-bar__row .search-field { flex: 1 1 100%; }
  .search-clear { width: 100%; }
  .sort-control { width: 100%; }
  .sort-control .select { flex: 1; min-width: 0; }

  .today-head__link { margin-left: 0; width: 100%; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .step-list__item { padding: var(--sp-4); gap: var(--sp-3); }
}

/* ============ 479px 以下: 390px を正 ============ */
@media (max-width: 479px) {
  .container { padding-inline: 14px; }
  /* ヘッダーの電話ボタンはアイコンのみ（1279px以下で既に適用）。
     読み上げ名は aria-label で保持し、番号は固定CTA・ヒーロー・フッターに出る。 */
  /* タグは2件までに抑える（全件は詳細ページで表示） */
  .person-card__tags li:nth-child(n+3) { display: none; }
  .schedule-row__tags li:nth-child(n+3) { display: none; }
  .role-card, .point-card, .step-list__item { padding: var(--sp-4); }
  .page-head { padding-block: var(--sp-6) var(--sp-5); }
  .route-steps li { grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-2); }
  .route-steps__num { width: 26px; height: 26px; font-size: var(--fs-note); }
  .lightbox__bar { flex-wrap: wrap; }
  .week-strip { gap: 6px; }
  .week-strip__cell { padding: 10px 2px; }
  .event-item__body { padding: var(--sp-4); }
}

/* ============ 360px 以下の保険（320pxでもヘッダーを破綻させない） ============ */
@media (max-width: 360px) {
  .container { padding-inline: 12px; }
  .brand__name { font-size: 17px; letter-spacing: 0.05em; }
  .brand__mark { width: 28px; height: 28px; }
  .header-actions .btn { padding-inline: 10px; }
  .week-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-cta__item--tel { flex: 1.35 1 0; }
  .tab { padding-inline: 12px; }
  .route-body__station { font-size: var(--fs-h4); }
}