/* ==========================================================================
   home.css — 首页 (spec 03)
   --------------------------------------------------------------------------
   1. 页面栅格 .pg-hom（§1.2 / §2.0）
   2. 图标栏 .sm-cats（§2.3 / §2.6）
   3. 轮播 .sm-swiper（§2.4）
   4. 文章卡 .sm-articles / .sm-article（§2.5 / §2.12）
   5. Top Stories .pg-hom-top-stories（§2.5）
   6. 对比推荐 .sm-comp-with（§2.13）
   7. 横滚箭头 .sm-slider-arrow（§2.10-C）
   8. 产品卡首页变体补充（§2.10 A/B/C/D）

   2~7 是原站 index.css 里的通用组件，主题的 components.css 尚未收录，
   因此放在这里全局提供（首页、频道页、榜单页共用）。
   ========================================================================== */

/* ==========================================================================
   1. 页面栅格 .pg-hom
   ========================================================================== */
.pg-hom-swiper,
.pg-hom-cats,
.pg-hom-top-stories{margin:0 0 var(--mv) 0}
.pg-hom-swiper{grid-area:swiper}
.pg-hom-cats{grid-area:cats;background:linear-gradient(-225deg,#d2f9f0 0%,#f6e9fc 48%,#c8c2fa 100%)}
.pg-hom-apps{grid-area:apps;background:linear-gradient(to left,#f3e7e9 0%,#e3eeff 99%,#e3eeff 100%)}
.pg-hom-top-stories{grid-area:news}

@media (min-width:750px){
  .pg-hom{display:grid;grid-template:"apps apps" "swiper news" "cats cats" "rest rest" / 520px 1fr;grid-gap:0 9px}
  .pg-hom .pg-hom-swiper{width:520px;height:260px;box-shadow:var(--sp-shadow-card)}
  .pg-hom .aside-360{grid-area:rest;min-width:0}
}

/* 主列/侧栏之间的动态内容流：盒子之间靠 .sm-box 自身的 margin 分隔 */
.sm-dyn-content{min-width:0}

/* ==========================================================================
   2. 图标栏 .sm-cats
   ========================================================================== */
/* .sm-cats 基础件在 components.css §17；本节只留首页专属的排布覆盖。 */

/* 合作商家栏：移动端纵排 5 列（隐藏第 5 项），桌面横排 6 列 */
@media (max-width:749.98px){
  .pg-hom-apps .sm-cats>a:nth-child(5){display:none}
}
@media (min-width:750px){
  .pg-hom-apps .sm-cats{--per-row:6;padding:0 12px}
  .pg-hom-apps .sm-cats>a{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left}
  .pg-hom-apps .sm-cats>a>span{padding:8px 0;margin:0 12px 0 0;flex:0 0 auto}
  .pg-hom-apps .sm-cats>a>b{margin-top:0;min-width:0}
  .pg-hom-apps .sm-cats>a img{width:32px;height:32px}
}

/* 品类图标栏：列数随宽度递减，多出的项直接隐藏（原站行为） */
@media (min-width:750px){
  .pg-hom-cats .sm-cats>a{font-size:.9rem}
}
@media (min-width:750px) and (max-width:859.98px){
  .pg-hom-cats .sm-cats{--per-row:10}
  .pg-hom-cats .sm-cats>a:nth-child(n+11){display:none}
}
@media (min-width:860px) and (max-width:1079.98px){
  .pg-hom-cats .sm-cats{--per-row:12}
  .pg-hom-cats .sm-cats>a:nth-child(n+13){display:none}
}
@media (min-width:1080px){
  .pg-hom-cats .sm-cats{--per-row:14}
  .pg-hom-cats .sm-cats>a:nth-child(n+15){display:none}
}

/* 3. 轮播 .sm-swiper —— 在 components.css §18。 */

/* 4. 文章卡 .sm-articles / .sm-article —— 在 components.css §20。 */

/* ==========================================================================
   5. Top Stories .pg-hom-top-stories
   ========================================================================== */
.pg-hom-top-stories{display:flex;background:#778899;color:#fff}
.pg-hom-top-stories .sm-box-header{padding:9px}
.pg-hom-top-stories .sm-box-title{width:24px;display:flex;justify-content:center}
.pg-hom-top-stories .sm-box-title h2{writing-mode:vertical-lr;transform:rotate(180deg);color:#fff;white-space:nowrap}
.pg-hom-top-stories>.x{flex:1;min-width:0;padding:.5714rem .5714rem .5714rem 0;overflow:hidden}
.pg-hom-ts-posts{grid-gap:6px!important;padding:0!important}
.pg-hom-ts-posts>.sm-article{border:1px solid #8594a3;height:132px}
.pg-hom-ts-posts>.sm-article>a{font-size:14px}
/* US 站移动端整盒隐藏 */
@media (max-width:749.98px){
  .pg-hom-top-stories{display:none!important}
}
@media (min-width:750px){
  .pg-hom-top-stories .sm-box-header{padding:12px}
  .pg-hom-ts-posts>.sm-article{height:118px}
}
/*
 * 原站在 750–960 因选择器优先级不足，.pg-hom-ts-posts 的降级列数被
 * .sm-articles.scroll 的 repeat(--per-row,1fr) 覆盖，挤出 56px 窄卡（spec §6.1）。
 * 这里按原站作者的意图提高优先级，让降级真正生效：960 以下 2 列显 4 条，
 * 840 以下 1 列显 2 条。
 */
@media (min-width:750px) and (max-width:959.98px){
  .sm-articles.scroll.pg-hom-ts-posts{grid-template-columns:repeat(2,1fr)}
  .pg-hom-ts-posts>.sm-article:nth-child(n+5){display:none}
}
@media (min-width:750px) and (max-width:839.98px){
  .sm-articles.scroll.pg-hom-ts-posts{grid-template-columns:1fr}
  .pg-hom-ts-posts>.sm-article:nth-child(n+3){display:none}
}

/* ==========================================================================
   6. 对比推荐 .sm-comp-with
   ========================================================================== */
.sm-comp-with>a{display:grid;grid-template:"name1 img1 vs img2 name2" minmax(36px,auto) / 1fr 36px 36px 36px 1fr;font-size:13px;line-height:18px;align-items:center;padding:8px var(--ph);border-top:1px solid var(--color-border);color:var(--color-text);contain:content}
.sm-comp-with>a>img{max-width:36px;max-height:36px;justify-self:center;object-fit:contain}
.sm-comp-with>a>img:nth-child(1){grid-area:img1}
.sm-comp-with>a>img:nth-child(2){grid-area:img2}
.sm-comp-with>a>span:nth-child(3){grid-area:name1;padding-right:6px}
.sm-comp-with>a>span:nth-child(4){grid-area:vs;justify-self:center;color:#708090;font-weight:700}
.sm-comp-with>a>span:nth-child(5){grid-area:name2;text-align:right;padding-left:6px}
.sm-comp-with>a:hover{background:honeydew;color:var(--color-link-hover)}
@media (min-width:750px){
  /* 页面作用域：原站 index.css 没有全局 .sm-box-group margin，
     不加 .pg-hom 会污染对比页 / 详情页（QA）。 */
  .pg-hom .sm-box-group{margin:var(--mv) 0}
  .pg-hom *>.sm-box-group:first-child{margin-top:0}
}

/* 7. 横滚箭头 .sm-slider-arrow —— 在 components.css §19。 */

/* ==========================================================================
   8. 产品卡首页变体补充
   ==========================================================================
   本节原先收留了一批 *全局* 的 .sm-products 规则（.grid 的 overflow/负边距、
   .scroll 的滚动条与内边距、侧栏 list 的无边框…）。它们对频道页/榜单页同样必要，
   放在页面样式表里既误导又不能按模板条件入队，已整体并入 components.css §7。
   这里只保留首页专属的规则。
   ========================================================================== */
/* 移动端 max-row-2 只显示前 6 张（3 列 × 2 行） */
@media (max-width:749.98px){
  .sm-products.grid.max-row-2 .sm-product:nth-child(n+7){display:none}
}