/* SITE 70 — レスポンシブ
   調整順（MASTER §7）: カラム減少 → 縦積み → 余白 → 写真比率 → 折畳み → 表カード化 → 最後に見出し
   本文・料金・時刻・住所・フォームラベルは 16px、注記は 14px を下回らせない。
   ドロワー化と固定CTAの出現は同じ 1023px で切り替える（1024〜1279px に
   「ドロワーなのに固定CTAが無い」空白帯を作らないため）。 */

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

/* ============ 1279px 以下: ヘッダーの電話ラベルを短縮 ============ */
@media (max-width: 1279px) {
  .header-actions .btn--tel .btn__label { display: none; }
  .header-actions .btn--tel { width: var(--tap); padding-inline: 0; }
  .global-nav__list { gap: 12px; }
  .global-nav__link { font-size: 14px; }

  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .host-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upcoming-layout { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--sp-5); }
  .event-card { grid-template-columns: 280px minmax(0, 1fr); }
  .info-strip__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
  .info-strip__item:nth-child(3) { border-right: 0; padding-right: 0; }
  .info-strip__item:nth-child(-n+3) { border-bottom: 1px solid var(--c-line); }
  .info-strip__item:nth-child(4) { padding-left: 0; }
}

/* ============ 1023px 以下: ドロワー・固定CTA ============ */
@media (max-width: 1023px) {
  :root { --h-header: 60px; }

  /* 固定CTAの実高 = 項目の min-height（--h-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; }
  .header-actions .btn--reserve .btn__label { display: inline; }
  /* 電話はドロワー・固定CTA・フッターから到達できるため、ヘッダーからは外す
     （390pxでロゴ＋予約＋メニューが収まる幅を確保する） */
  .header-actions .btn--tel { display: none; }
  .mobile-cta { display: block; }

  .brand__sub { display: none; }

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

  /* ヒーローは縦積み。画像 → 文字の順にして、日付とタイトルを画像の外で読ませる */
  .hero-panel { grid-template-columns: minmax(0, 1fr); }
  .hero-panel__body { padding: var(--sp-6) var(--sp-5); }
  .hero-panel__media::after { background: linear-gradient(0deg, rgba(17, 17, 17, 0.6) 0%, rgba(17, 17, 17, 0) 40%); }

  .upcoming-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .first-summary { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .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-card { grid-template-columns: minmax(0, 1fr); }

  .info-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-strip__item,
  .info-strip__item + .info-strip__item { padding-inline: 0 var(--sp-4); }
  .info-strip__item:nth-child(2n) { border-right: 0; padding-right: 0; padding-left: var(--sp-4); }
  .info-strip__item:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--c-line); }
  .info-strip__item:nth-child(2n+1) { padding-left: 0; }

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

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

  /* SPでもイベントバナーは16:9のまま。日付とタイトルを早く読ませるため縦を伸ばさない。 */
  .hero-panel__body { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .hero-panel__actions .btn { flex: 1 1 100%; }
  .hero-price { width: 100%; }

  /* 人物カードは 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; }
  /* トップの横型カードは1列のリストへ（一覧ページの2列グリッドと役割を分ける） */
  .host-grid { grid-template-columns: minmax(0, 1fr); }

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

  .info-strip__grid { grid-template-columns: minmax(0, 1fr); }
  .info-strip__item,
  .info-strip__item + .info-strip__item {
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
    padding-inline: 0 !important;
  }
  .info-strip__item:last-child { border-bottom: 0; }

  /* 定義リストの表をカード化 */
  .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: 6px; padding-block: var(--sp-4); }

  .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); }
  .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; }

  .schedule-row { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "thumb name" "thumb time"; gap: 4px var(--sp-3); }
  .schedule-row__thumb { grid-area: thumb; width: 56px; align-self: center; }
  .schedule-row__info { grid-area: name; }
  .schedule-row__time { grid-area: time; text-align: left; }

  .event-card__body { padding: var(--sp-4); }
  .event-card__head { grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-3); }
  .upcoming-item { grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-3); }
  .event-date__day { font-size: 28px; }

  .cal__cell { min-height: 50px; }
  .cal-nav__label { min-width: 6.5em; font-size: var(--fs-h4); }

  .filter-bar, .event-filter { padding: var(--sp-3); }
  .sort-control { width: 100%; }
  .sort-control .select { flex: 1; min-width: 0; }
}

/* ============ 479px 以下: 390px を正 ============ */
@media (max-width: 479px) {
  .container { padding-inline: 14px; }
  /* 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); }
  .hero-panel__body { gap: var(--sp-3); }
  .mobile-cta__item { font-size: var(--fs-note); }
  .lightbox__bar { flex-wrap: wrap; }
  .week-strip { gap: 6px; }
  .week-strip__cell { padding: 10px 2px; }
  .cal__cell { min-height: 46px; padding: 4px 2px; }
  .cal__tag { padding: 0 2px; }
  .host-row { grid-template-columns: 84px minmax(0, 1fr); }
  .event-card__head { grid-template-columns: 64px minmax(0, 1fr); }
  .upcoming-item { grid-template-columns: 64px minmax(0, 1fr); }
}

/* ============ 360px 以下の保険 ============ */
@media (max-width: 360px) {
  .week-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-price__value { font-size: 26px; }
  .cal__tag--event { font-size: var(--fs-note); padding: 0 1px; }
}