/* assets/css/pages/reading.css
   Reading pages（post/page/検索・アーカイブ見出しの“読み幅”統一）
   依存: base.css の --cd-read-width / --cd-gutter / --container-max / --container-pad
====================================================================== */

@layer pages {

  /* ===============================
     記事・固定ページ：読み幅 760px
     - ヘッダーだけ上下余白を少し広げて“顔”を整える
  =============================== */

  /* ヘッダー（タイトル＋メタ） */
  .single .entry-header,
  .page  .entry-header{
    max-width: var(--cd-read-width);
    margin-inline: auto;
    margin-top: clamp(18px, 4vw, 30px);
    margin-bottom: 1.9rem; /* TOC とぶつからないよう少し広めに */
  }

  .single .entry-title,
  .page  .entry-title{
    margin: .45em 0 .35em;
  }

  .single .entry-meta,
  .page  .entry-meta{
    margin: 0 0 1.2rem;
    font-size: .88rem;
    color: var(--cd-muted);
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
  }

  .single .entry-meta time,
  .page  .entry-meta time{
    white-space: nowrap;
  }

  /* 本文・フッター側（読み幅だけ揃える） */
  .single .entry-content,
  .single .entry-footer,
  .page  .entry-content,
  .page  .entry-footer{
    max-width: var(--cd-read-width);
    margin-inline: auto;
  }

  /* ===============================
     検索/アーカイブの“見出し域”も読み幅に寄せる
     （カードグリッドの幅は home.css 側に委譲）
  =============================== */

  .archive .entry-header,
  .search  .entry-header,
  .archive .archive-description,
  .search  .search-header{
    max-width: var(--cd-read-width);
    margin-inline: auto;
  }

  /* Archive / Search のタイトル位置を整える */
  .archive-header.list-header,
  .search-header.list-header{
    display: flex;
    align-items: flex-end;
  }

  .archive-title.list-title,
  .search-title.list-title{
    margin: 0;
    padding-block: 10px 12px;
  }

  /* ===============================
     本文の基本リズム（必要最低限）
     ※ .entry-content のベースは content.css、
        ここでは「.single/.page の一段目」だけを軽く整える
  =============================== */

  .single .entry-content > :where(p, ul, ol, blockquote, pre, figure, table),
  .page  .entry-content > :where(p, ul, ol, blockquote, pre, figure, table){
    margin-block: 1rem;
  }

  .entry-content > :first-child{ margin-top: 0; }
  .entry-content > :last-child{  margin-bottom: 0; }

  /* 画像・図表の基本挙動 */
  .entry-content :is(img, video, canvas, svg){
    max-width: 100%;
    height: auto;
  }

  /* 表のオーバーフロー対策（横スクロール） */
  .single .entry-content table,
  .page  .entry-content table{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* 任意：本文以外でも読み幅だけ適用したい時 */
  .reading-wrap{
    max-width: var(--cd-read-width);
    margin-inline: auto;
  }

  /* ==========================================================
     関連記事（.cd-related）— 基本は“読み幅(760px)”へ揃える
     ※ 見出しと中身を同じ幅に揃え、トップと同じカード設計で並べる
  ========================================================== */

  /* 帯（section）の左右パディングを打ち消して読み幅へ吸着 */
  /* 記事末尾の関連記事ブロック */
  .single .cd-related{
    padding-inline: 0; /* base.css の container-pad を上書き */
    margin-top: clamp(28px, 4vw, 40px);
    margin-bottom: clamp(20px, 3vw, 32px);
  }

  /* 脚注 (#FN) が直前にある場合：少しだけ近づける */
  .single #FN + .cd-related{
    margin-top: 2.0em;
  }

  /* entry-footer の直後に置くケースも一応ケア */
  .single .entry-footer + .cd-related{
    margin-top: clamp(24px, 4vw, 36px);
  }

  /* 見出しを読み幅に吸着（author と同じ幅感） */
  .single .cd-related .section-heading{
    max-width: var(--cd-read-width);
    margin: 0 auto 8px;
  }

  /* 中身のラッパ（実装ゆらぎ対策で2パターンに対応） */
  .single .cd-related__inner,
  .single .cd-related_inner{
    max-width: var(--cd-read-width);
    margin-inline: auto;
    container-type: inline-size; /* @container 用の基準（対応ブラウザで有効） */
  }

  /* カードの並び（トップと同設計） */
  .single .cd-related .entry-grid{
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin-top: 12px;
  }

  /* コンテナが狭い時は少し詰める（container query） */
  @container (max-width: 60rem){
    .single .cd-related .entry-grid{
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
    }
  }

  /* フォールバック（container未対応ブラウザ） */
  @supports not (container-type: inline-size){
    @media (max-width: 1320px){
      .single .cd-related .entry-grid{
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
      }
    }
  }

  /* === モバイル〜タブレット幅で、記事本文まわりにゆとりを足す === */
  @media (max-width: 834px){

    /* 画面端とのガターは .content-sidebar-wrap に集約 */
    .content-sidebar-wrap{
      padding-left:  clamp(8px, 3vw, 14px);
      padding-right: clamp(8px, 3vw, 14px);
      box-sizing: border-box;
    }

   /* 記事・固定ページのヘッダー／本文／フッター自体には
      余計な padding は持たせず、読み幅だけ維持 */
    .single .entry-header,
    .single .entry-content,
    .single .entry-footer,
    .single .cd-related,
    .page  .entry-header,
    .page  .entry-content,
    .page  .entry-footer{
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* === 記事導入（リード）強調：最初の1段落だけ少し大きく・淡く === */
  .single .entry-content > p:first-of-type,
  .page  .entry-content > p:first-of-type{
    font-size: 1.05em;
    line-height: 1.9;
    color: color-mix(in oklab, var(--cd-fg), var(--cd-muted) 32%);
    margin-top: 0;
    margin-bottom: 1.6em;
  }

  @media (max-width: 640px){
    .single .entry-content > p:first-of-type,
    .page  .entry-content > p:first-of-type{
      font-size: 1em;
      line-height: 1.8;
    }
  }

  /* === H2/H3 の前後リズム：セクションの切れ目を少しだけ強調 === */
  .single .entry-content h2,
  .page  .entry-content h2{
    margin-top: 3.5em;
    margin-bottom: 1.1em;
  }

  .single .entry-content h3,
  .page  .entry-content h3{
    margin-top: 1.5em;
    margin-bottom: .85em;
  }

  /* =========================================
     目次内のナンバリング強調（cd-toc__index）
  ========================================= */

  .cd-toc__index{
    display: inline-block;
    min-width: 1.6em;
    margin-right: .35em;
    font-weight: 600;
    color: color-mix(in oklab, var(--cd-accent), white 10%);
  }

  @media (max-width: 640px){
    .cd-toc__index{
      font-size: 1.05em;
    }
  }

} /* @layer pages */