/* SITE 90 — レスポンシブ
   調整順（MASTER §7）: カラム減少 → 縦積み → 余白 → 写真比率 → 折畳み → 表カード化 → 最後に見出し
   本文・料金・時刻・住所・フォームラベルは16px、注記は14pxを下回らせない。
   ドロワーと固定CTAの切替は 1023px で一致させる（components.js の DRAWER_BP = 1024 と同値）。
   担当仕様: SPは料金と流れを先に表示し、CAST画像は遅延読み込みのまま初期表示を軽くする。 */

/* ============ 1024px 以上: 横並びのイベントカード ============ */
@media (min-width: 1024px) {
  /* 写真列を本文列の高さに合わせる。aspect-ratio のままだと本文が長いカードで
     写真の下に地色の帯が残る。1カラムへ落ちる幅では aspect-ratio を効かせる。 */
  .event-item__media { height: 100%; aspect-ratio: auto; min-width: 0; }
  .event-item__media img { height: 100%; }
  .event-item__body { min-width: 0; }
  /* 含まれるもの / 別料金になるものは、料金ラダーの右で2枚を縦に積む */
  .include-cols { gap: var(--sp-4); }
}

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

/* ============ 1279px 以下: ナビの余白を詰める（文字は縮めない） ============ */
@media (max-width: 1279px) {
  .global-nav__list { gap: 11px; }
  /* 電話はドロワー・フッター・アクセスから到達できるため、ラベルを畳んでアイコンのみにする */
  .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)); }
  .price-panel { gap: var(--sp-5); }
  .flow-layout { gap: var(--sp-6); }
}

/* ============ 1119px 以下: 2カラムの比率調整 ============ */
@media (max-width: 1119px) {
  .price-panel { grid-template-columns: minmax(0, 1fr); }
  .include-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-layout { grid-template-columns: minmax(0, 1fr); }
  .enjoy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .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); }
  .fact { padding: var(--sp-4); }
  .fact__val { font-size: 26px; }
  .fact__val--text { font-size: 19px; }
}

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

  /* 固定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; }
  /* 電話はドロワー・フッター・アクセスから到達できるためヘッダーから外す。
     残したままだと 390px でロゴ（店名）が右端で切れる。 */
  .header-actions .btn--tel { display: none; }
  .mobile-cta { display: block; }

  .brand__sub { display: none; }

  .hero { padding-block: var(--sp-6) 0; }
  .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
  .fact:nth-child(2n) { border-right: 0; }
  .fact:nth-last-child(-n+2) { border-bottom: 0; }

  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .split, .split--wide-left, .access-layout, .person-detail { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .enjoy-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__media { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .event-item__body { padding: var(--sp-5); }

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

  /* 人物カードは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; }
  .enjoy-grid, .role-grid, .include-cols { grid-template-columns: minmax(0, 1fr); }
  .noneed__list { grid-template-columns: minmax(0, 1fr); }
  .noneed { padding: var(--sp-5) var(--sp-4); }

  .hero__actions .btn { flex: 1 1 100%; }
  .hero__band-cap { padding-inline: var(--sp-4); }

  /* 写真は情報量が少ないため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); 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); }

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

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

  .cta-band { padding: var(--sp-5) 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); }
  .ladder__row, .ladder__head, .ladder__foot, .stepper { padding-inline: var(--sp-4); }
  .flow__item { padding-left: var(--sp-5); }
}

/* ============ 479px 以下: 390px を正 ============ */
@media (max-width: 479px) {
  .container { padding-inline: 14px; }
  /* ヘッダーの主要CTA（ご予約）はアイコンのみへ。
     ラベルを出したままだと 320px でロゴ＋CTA＋メニューが収まらない。
     読み上げ名は HTML の aria-label で保持し、文字ラベルは固定CTA・ドロワーにも出る。 */
  .header-actions .btn--reserve .btn__label { display: none; }
  .header-actions .btn--reserve { width: var(--tap); padding-inline: 0; }
  /* タグは2件までに抑える（全件は詳細ページで表示） */
  .person-card__tags li:nth-child(n+3) { display: none; }
  .schedule-row__tags li:nth-child(n+3) { display: none; }
  .role-card, .enjoy-card, .include-card, .step-list__item { padding: var(--sp-4); }
  .page-head { padding-block: var(--sp-6) var(--sp-5); }
  .fact { padding: var(--sp-3) var(--sp-4); }
  .fact__val { font-size: 24px; }
  .fact__val--text { font-size: 17px; }
  .ladder__row--total .ladder__num { font-size: 26px; }
  .lightbox__bar { flex-wrap: wrap; }
  .week-strip { gap: 6px; }
  .week-strip__cell { padding: 10px 2px; }
  .event-item__body { padding: var(--sp-4); }
  .stepper { gap: var(--sp-2) var(--sp-3); }
}

/* ============ 360px 以下の保険（320pxでもヘッダーを破綻させない） ============ */
@media (max-width: 360px) {
  .container { padding-inline: 12px; }
  .brand__name { font-size: 17px; letter-spacing: 0.05em; }
  .brand__mark { width: 30px; height: 30px; }
  .header-actions .btn { padding-inline: 12px; }
  .week-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-cta__list { grid-template-columns: 1fr 1fr 1.35fr; }
  .tab { padding-inline: 12px; }
  .fact-grid { 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; }
}