/* =========================================================
   4/5 · 页面层 pages/lists.css —— 栏目列表页 / 搜索页
   ---------------------------------------------------------
   本文件被「栏目列表页」与「搜索结果页」共用
   （theme.json：styles.pages.lists 与 styles.pages.search 都指向它），
   因为两页的产出物是同一种东西：一张卡片结果网格。

   类名前缀：.list-*

   ⚠️ 说明一句「为什么这个文件这么薄」：
      列表页的构成几乎全是公共组件 ——
      内页通栏 .page-hero、面包屑 .crumb、区块 .section、
      产品卡 .pcard、图集网格 .lb-grid、分页 .pager、空态 .empty-box。
      它们**有意**留在 components.css：首页、详情页也在用同一套，
      放这里会让「只换列表页样式」变成「顺手改掉首页」。
      这个文件因此只承担「列表页独有的那一层」：
      结果网格的列数密度，以及列表页专属的微调。
   ========================================================= */

/* 列表页 / 搜索页的结果网格。
   与首页产品目录（.pgrid）分开命名，是为了能单独调密度 ——
   比如首页想要大图 3 列，列表页想要一屏看更多、改 4 列，
   两边互不影响。 */
.list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 1024px) {
    .list-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .list-grid { grid-template-columns: 1fr; }
}