/* =========================================================
   開腸瑜伽協会 — レスポンシブ（SP/タブレット調整）
   役割: max-width ブレークポイントを一箇所に集約。余白・文字サイズ・
         画像比率・セクション高さ・グリッド段組・ナビ/フッターの折返し。
   依存: 全レイヤーの後に最後に読み込む（ここが最終上書き）。
   方針: 挙動系（prefers-reduced-motion / print）は各機能のファイルに置き、
         ここには画面幅由来の調整のみ。ブレークは 900 / 880 / 820 / 760 / 680 / 560。
   ========================================================= */

/* ---- 900px：グローバルナビをドロワー化・フッター段組 ---- */
@media (max-width: 900px) {
  .nav__link, .nav__cta, .nav__member { display: none; }
  .nav__toggle { display: inline-flex; }

  .site-footer__pre { grid-template-columns: 1fr; gap: var(--s-6); padding-bottom: var(--s-8); }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
  .footer-bar { flex-direction: column; align-items: flex-start; gap: var(--s-4); margin-top: var(--s-8); }
}

/* ---- 880px：2カラム系を1カラムへ（汎用split / concept / fullsec / overlaysec / whoweare / intro） ---- */
@media (max-width: 880px) {
  .split, .split--rev { grid-template-columns: 1fr; gap: var(--s-7); }

  .concept__inner { grid-template-columns: 1fr; gap: clamp(48px,9vw,72px); }
  .concept__verse { max-width: none; }

  .intro { min-height: 0; }
  .intro__head { letter-spacing: 0.1em; }

  /* 全面50/50 → 縦積み（テキスト上・メディア下） */
  .fullsec { height: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto; overflow: visible; }
  .fullsec__media { order: 2; height: auto; aspect-ratio: 4/5; }
  .fullsec__body { order: 1; padding: var(--section-y) var(--gutter); }

  .overlaysec { height: auto; min-height: 88vh; }
  .overlaysec__scrim { background:
    linear-gradient(0deg, rgba(247,244,239,0.92) 4%, rgba(247,244,239,0.56) 44%, rgba(247,244,239,0.12) 100%); }
  .overlaysec__body { max-width: none; }

  .whoweare { grid-template-columns: 1fr; min-height: 0; }
  .whoweare__media { aspect-ratio: 4/5; }
  .whoweare__body { padding: var(--s-9) var(--gutter); }

  /* Statement 動画バンド：パネルの内側余白を詰める */
  .stmtband { min-height: 88vh; }
  .stmtband__panel { max-width: none; padding: clamp(32px,8vw,52px) clamp(24px,7vw,44px); }

  /* 01 Our Work：タブレットでは2カラム・全カード縦積み */
  .works { grid-template-columns: 1fr 1fr; position: static; left: auto; transform: none; width: auto; }
  .work {
    grid-column: auto;
    padding: clamp(22px,5vw,32px) clamp(16px,4vw,24px) clamp(26px,6vw,34px); }
  .work--wide { grid-column: auto; flex-direction: column; align-items: stretch; gap: 0; }
  .work--wide .work__media { flex: none; width: 100%; margin-bottom: var(--s-5); }
}

/* ---- 820px：HERO ---- */
@media (max-width: 820px) {
  .hero { height: 100svh; }
  .hero__logo { height: clamp(176px, 32vh, 252px); }
  .hero__sub { max-width: 26ch; }
  .hero__scrim { background:
    radial-gradient(70% 52% at 50% 46%, rgba(247,244,239,0.46), transparent 70%),
    linear-gradient(180deg, rgba(247,244,239,0.12) 0%, rgba(247,244,239,0) 24%, rgba(34,28,24,0.12) 100%); }
}

/* ---- 760px：四段階 / 4導線を2カラム→1カラム ---- */
@media (max-width: 760px) {
  .stages { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .paths { grid-template-columns: 1fr; gap: var(--s-8); }
}

/* ---- 680px：ニュース行を縦積み ---- */
@media (max-width: 680px) {
  .news__row { grid-template-columns: 1fr; gap: var(--s-2); }
  .news__title { margin-left: 0; }
  .news__cat { order: -1; justify-self: start; width: auto; }
  .news__cat.tag { width: auto; }
}

/* ---- 560px：フッター段組を1カラムへ ---- */
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr; }

  /* 01 Our Work：かなり狭い幅では2列を維持せず1列へ */
  .works { grid-template-columns: 1fr; }
  .work:first-child { grid-column: auto; }
  .work:first-child .work__title { font-size: clamp(1.16rem, 5.6vw, 1.4rem); }
}