/* =========================================================
   responsive.css  ── レスポンシブ・ブレークポイント集約

   【このファイルの責務】
   各ページ・コンポーネントに共通するグリッドレイアウトの
   ブレークポイント切り替えをここに集約する。

   コンポーネント固有のレスポンシブ（吹き出しサイズ変更など）は
   各ファイル内に書いてあるため、このファイルは「グリッドやカラム数の
   切り替え」に絞った最小構成とする。

   【ブレークポイント一覧】
   980px : 書架カードの icon サイズ（大→中）
   820px : 2カラムグリッドを1カラムに切り替え
   768px : モバイルナビゲーション
   680px : SP全般（文字サイズ・余白など）

   【触るべきとき】
   ・グリッドが1カラムに切り替わるブレークポイントを変えたい → 820px ブロック
   ・SP のカラム数をさらに細かく制御したい → 680px ブロック

   【注意】
   コンポーネント固有の SP スタイルは各 CSS ファイルの末尾に記述済み。
   ここはあくまでグリッド系の切り替えのみ。
========================================================= */

/* =========================================================
   820px  ── 2カラム → 1カラム切り替え
========================================================= */
@media (max-width: 820px) {

  /* カード・書架グリッドを1カラムに */
  .shelves-2x2,
  .cards,
  .series-grid {
    grid-template-columns: 1fr !important;
  }

  /* ヒーローの余白を縮小 */
  .hero__inner {
    padding: 28px 20px 22px;
  }

  /* アーカイブページのカード余白 */
  .archive .page-header,
  .archive .inside-article {
    padding: 22px 22px;
  }

  .archive .inside-article::before {
    top: 18px;
    bottom: 18px;
  }

  /* アーカイブのタイトル文字サイズ */
  .archive .page-header h1 {
    font-size: clamp(1.2rem, 5vw, 1.55rem);
    line-height: 1.32;
  }

  .archive .entry-title {
    font-size: clamp(1.15rem, 4.8vw, 1.45rem);
    line-height: 1.36;
  }

  .archive .archive-description,
  .archive .entry-summary,
  .archive .entry-summary p {
    font-size: 15px;
  }
}

/* =========================================================
   680px  ── SP 全般
========================================================= */
@media (max-width: 680px) {

  /* トップページのタイトル左余白 */
  .home .inside-article > .entry-header,
  .home .entry-header,
  .home h1.entry-title,
  .home .entry-title {
    padding-left: 20px;
  }

  /* ロビーの余白 */
  .library-lobby {
    padding: 48px 16px 68px 20px;
  }

  /* ヒーロー下余白 */
  .hero {
    margin-bottom: 34px;
  }

  /* サイトタイトル文字 */
  .site-title {
    font-size: 28px;
    line-height: 1.55;
    letter-spacing: .06em;
  }

  /* サブタイトル・リード */
  .subtitle,
  .hero__lead {
    font-size: 16px;
    line-height: 1.9;
  }

  /* セクション */
  .section {
    margin-top: 58px;
  }

  .section__title {
    font-size: 18px;
    padding-bottom: 10px;
  }

  /* セクション見出しの装飾ラインを非表示 */
  .section__title::before,
  .section__title::after {
    display: none;
  }

  .section__desc {
    font-size: 14px;
  }

  /* カード汎用 */
  .card {
    padding: 18px;
  }

  .card__top {
    gap: 12px;
  }

  .card__icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }

  .card__name {
    font-size: 17px;
  }

  .card__role {
    font-size: 13px;
  }

  /* ピル */
  .pill,
  .lb-pill {
    min-height: 38px;
    font-size: 12px;
    padding: 8px 14px;
  }

  /* シリーズカード */
  .series-card {
    padding: 18px 18px 17px;
  }

  .series-card__title {
    font-size: 18px;
  }

  .series-card__desc {
    font-size: 14px;
  }

  /* フッターリンク */
  .lobby-links {
    margin-top: 58px;
  }
}