/* assets/css/pages/archive.css
   Archive / Tag / Category 一覧のカードグリッド＋見出し
   依存: base.css のレイヤ宣言（@layer base, comp, pages, util）
===================================================== */

@layer pages {

  /* ===============================
     アーカイブタイトル（投資戦略 など）の見出し域
  =============================== */

  .archive .archive-header.list-header{
    max-width: var(--cd-read-width);
    margin: clamp(20px, 4vw, 32px) 0 1.6rem;
    /* 上：検索バーとの距離 / 下：カードとの距離 */
    display: flex;
    align-items: flex-end;
  }

  .archive .archive-title.list-title{
    margin: 0;
    padding-block: 12px 14px;
  }

  .archive .archive-description{
    max-width: var(--cd-read-width);
    margin: 0 auto 1.8rem;
  }

  /* ===============================
     一覧カードのグリッド（Homeと同設計）
  =============================== */

  .archive .entry-grid{
    container-type: inline-size; /* @container をこの要素基準で */
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin-top: 12px;
  }

  /* 横一列スクロールにしたい時は .is-one-row を併用（任意） */
  .archive .entry-grid.is-one-row{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
  }

  /* コンテナが狭くなったら自動で詰める（Container Query） */
  @container (max-width: 60rem){
    .archive .entry-grid{
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
    }
    .archive .entry-grid.is-one-row{
      grid-auto-columns: minmax(220px, 1fr);
    }
  }

  /* Fallback: コンテナクエリ非対応ブラウザ向け */
  @supports not (container-type: inline-size){
    @media (max-width: 1320px){
      .archive .entry-grid{
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
      }
    }
  }

}