/* pages/news.css — 新闻列表页（bundle 4:227「NEWS-list」，1920×3836）
   断点：base 移动流式；≥768 加大留白/两列；≥1280 按 1920 设计稿精确几何（frontend-execute.md §2.1/§2.3） */

/* ---------- 子页面导航（同 solutions.css：白底黑字、下滑吸附置顶、分隔线淡出） ---------- */
.page-sub .site-nav {
  position: sticky; /* 子页导航在文档流内，sticky 吸附不产生内容位移（fixed 会掉 96px） */
  top: 0;
  background: var(--color-bg-page);
  color: var(--color-text-1);
}

.page-sub .site-nav.is-scrolled {
  position: sticky; /* 必须 sticky：本选择器 (0,3,0) 压过 components.css 的 .site-nav.is-scrolled (0,2,0) */
  top: 0;
  height: 6rem; /* 保持 96px：子页导航在流内，缩到 88 会把下方内容顶上 8px */
}

.page-sub .site-nav__inner {
  border-color: transparent;
}

.page-sub .site-nav__menu a:hover {
  color: var(--color-primary);
}

.page-sub .site-nav__toggle span {
  background: var(--color-text-1);
}

/* ---------- 面包屑（4:358：x=82，y=146） ---------- */
.pn-crumbs {
  margin: var(--space-12) var(--space-6) 0;
  font-size: var(--font-size-body-sm);
  letter-spacing: -.02em;
}

.pn-crumbs ol {
  display: flex;
  align-items: center;
  gap: .625rem;
}

.pn-crumbs svg {
  flex: none;
}

.pn-crumbs [aria-current] {
  letter-spacing: 0;
}

/* ---------- 页头（4:352：块 x=50–1870 y=237；标题 y=265；图标 175 右上；黑线 y=435） ---------- */
.pn-hero {
  position: relative;
  margin: 4.5rem var(--space-6) 0; /* 面包屑底 165 → 237 */
}

.pn-hero__icon {
  position: absolute;
  top: .1875rem; /* 图标 y=240（块顶 237 + 3） */
  right: 2.0625rem; /* 图标 x=1662，右缘距块 33 */
  width: 6rem;
  height: 6rem;
  color: var(--color-text-3); /* i-hero-env 描边灰 #999 */
}

.pn-hero__title {
  margin-inline: 2rem; /* 标题 x=82 */
  padding-top: 1.75rem; /* y=265 */
  max-width: 45.9375rem; /* 735 */
  font-size: clamp(1.75rem, 1rem + 2.6vw, var(--font-size-h1));
  line-height: var(--line-height-title); /* 60/48 */
  font-weight: var(--font-weight-medium);
}

.pn-hero__rule {
  margin-top: 3.125rem; /* 线 y=435（标题底 385 + 50） */
  border: 0;
  border-top: 1px solid var(--color-text-1); /* Line 4 */
}

/* ---------- 焦点新闻（4:333：块 x=145–1776 y=515–1127；图 910×510，红块 755×475 叠右下 34px。
   base/md 纵向堆叠（图上红下），≥1280 横向叠放并精确命中设计值） ---------- */
.pn-feat {
  position: relative;
  margin: 5rem 7.5% 0 7.5521%; /* 上 80，左 145/1920，右 144/1920 */
}

.pn-feat__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 910 / 510;
  object-fit: cover;
}

/* 红块随文档流负 margin 叠放（grid 方案的 % 相对网格列而非容器，基准错误已弃用） */
.pn-feat__panel {
  position: relative; /* 稳定绘制在图上层 */
  box-sizing: border-box;
  margin-top: 0;
  padding: 2.5rem;
  background: var(--color-primary);
  color: #fff;
}

.pn-feat__date {
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
}

/* 1280–1920 红块文字随宽度微缩，防止内容高于图+留白（1920 时命中设计值 32/48、20/34） */
.pn-feat__title {
  margin-top: 1.875rem; /* y=102（日期底 72 + 30） */
  font-size: clamp(1.5rem, .9375vw + 14px, 2rem); /* 32 @1920 */
  line-height: 1.5; /* 48/32 */
  font-weight: var(--font-weight-extrabold); /* 设计稿 Jost-ExtraBold（Jost 可变字重 100–900） */
  letter-spacing: -.02em;
}

.pn-feat__title a {
  color: inherit;
}

.pn-feat__rule {
  margin-top: 1.875rem; /* y=228（标题底 198 + 30） */
  border: 0;
  border-top: 1px solid #fff; /* Line 326 */
}

.pn-feat__desc {
  margin-top: 1.8125rem; /* y=258（线底 229 + 29） */
  font-size: clamp(1.0625rem, .4219vw + 11.9px, 1.25rem); /* 20 @1920 */
  line-height: 1.7; /* 34/20 */
  letter-spacing: -.02em;
  /* 左对齐（2026-09-21 用户要求，全档位）。
     原为 justify：卡内只有 2–3 行短段落时，除末行外每行都被强拉到满宽、词距被撑开，
     末行却只剩 36–102px（1920 实测）→ 观感既不像左对齐也不像居中。改 left 后字形分布自然。
     ⚠ 不要改回 justify —— 这段是「短段落 + 中英混排」，justify 天然不适用。 */
  text-align: left;
}

.pn-feat__panel .btn-more {
  display: flex;
  width: fit-content;
  margin-top: 1.875rem; /* y=389（导语底 359 + 30） */
  margin-left: auto;    /* 设计 (563,389)：右缘距块 40，右对齐 */
}

/* 红块内 Learn More：白字 + 灰盒（组件基础为黑字，页面级变体） */
.btn-more--light {
  color: #fff;
}

/* ---------- 焦点新闻轮播（3 屏叠放 + 交叉淡入；2026-09-17 由静态单条改造） ---------- */
/* 3 屏同处 1/1 格 → 容器高 = 最高一屏（切屏不跳高）。列宽用 minmax(0,1fr) 而非 auto：
   auto 列会按 max-content 撑宽，内容一长就横向溢出。 */
.pn-feat__slides {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.pn-feat__slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden; /* 同时移出 tab 顺序与无障碍树，未激活屏的链接不可聚焦 */
  /* ⚠ visibility 是离散属性：写 `visibility .5s` 会在时长中点才翻转，淡入会被推迟。
     用 `0s linear .5s` → 淡出时延迟隐藏（等淡完），淡入时立即可见。 */
  transition: opacity .5s ease-out, visibility 0s linear .5s;
}

.pn-feat__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease-out, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .pn-feat__slide,
  .pn-feat__slide.is-active {
    transition: none;
  }
}

/* ---------- 入场动效（2026-09-20 用户规格）----------
   首次进入视口时：首屏的「左图从左往右平行移入」+「右侧红块（含文字）从右往左移入」，
   两者相向落位后固定不动，随后才开始自动轮播（时序由 js/news.js 控制）。

   实现要点：
   · 只作用于首屏（`.pn-feat__slide--intro`，HTML 上显式标记），第 2/3 屏不受影响
     —— 否则切到第 2 屏时它也会带上起始位移、整屏飞出。
   · 两个「半屏」各自从容器外侧滑入 → 必须由 `.pn-feat__slides` 的 overflow 裁掉容器外的部分。
     ⚠ overflow 只在入场期间挂（`.is-entering`），落位后立即撤掉：
       常驻会让面板内 Learn More 的 focus-visible 外描边被裁。
   · ⚠ **用 @keyframes，不要改回 transition**：transition 需要「变更前的计算样式」与「变更后」不同才会跑，
     而 is-entering 与 is-in 常在同一帧内被连续加上（section 本就在视口内时必现）→ 浏览器来不及把
     起始位移算成变更前样式 → 过渡被整条跳过、元素直接出现在终点。
     实测（逐帧探针 .workbuddy-ai/tmp/probe-news-intro-frames.js）：transition 版在 1440×900 与
     375×667 下「类都挂上了但位移恒为 0」，1920×1080 才碰巧有动画；@keyframes + fill both 三档全正常。
   · 起始态由 JS 同步加类产生（脚本在 body 末尾、首帧前执行），不会闪出最终位置。
     无 JS / prefers-reduced-motion 时不加类 → 直接呈最终位置，退化为静态单条（与改造前一致）。
   · ⚠ 本区块不在 [data-m-stagger] 内、也没有 data-m-anim，故不受 motion.css 的
     transition 覆盖陷阱（坑 29）影响。若日后给 .pn-feat 加 data-m-anim，需重新核对特异性。 */
.pn-feat.is-entering .pn-feat__slides {
  overflow: hidden;
}

.pn-feat.is-entering .pn-feat__slide--intro .pn-feat__media {
  transform: translateX(-100%); /* 起始位：图停在容器左外侧 */
}

.pn-feat.is-entering .pn-feat__slide--intro .pn-feat__panel {
  transform: translateX(100%); /* 起始位：红块+文字停在容器右外侧 */
}

.pn-feat.is-entering.is-in .pn-feat__slide--intro .pn-feat__media {
  animation: pn-intro-in-left var(--m-dur) var(--m-ease) both;
}

.pn-feat.is-entering.is-in .pn-feat__slide--intro .pn-feat__panel {
  animation: pn-intro-in-right var(--m-dur) var(--m-ease) both;
}

@keyframes pn-intro-in-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes pn-intro-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pn-feat.is-entering .pn-feat__slide--intro .pn-feat__media,
  .pn-feat.is-entering .pn-feat__slide--intro .pn-feat__panel {
    transform: none;
    animation: none;
  }
}

/* 轮播指示器（4:347：3 枚 22×22 圆点，间距 15，贴容器底缘；仅桌面档显示，移动端为非关键装饰隐藏。
   原为静态装饰，2026-09-17 改为可点击的切屏按钮 → button 承载尺寸与焦点环，i 承载圆点本体。
   ⚠ 2026-09-20 用户要求：设计稿的「横向六边形」改为圆形。
     如需改回六边形：clip-path: polygon(0% 50%, 25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%);
     并删掉 border-radius。 */
.pn-feat__marks {
  position: absolute;
  left: 24.9457%; /* 407/1631 */
  bottom: 0;
  display: none;
  gap: .9375rem;
}

.pn-feat__marks button {
  display: block;
  width: 1.375rem; /* 22 */
  height: 1.375rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pn-feat__marks i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 2026-09-20：原横向六边形 clip-path 改圆形（22×22 → 直径 22） */
  background: var(--color-gold);
  opacity: .3; /* 未激活（设计稿 Polygon 2/3 @0.3） */
  transition: opacity .3s ease-out;
}

.pn-feat__marks button.is-active i {
  opacity: 1; /* 激活 = 设计稿 Polygon 1 全不透明 */
}

/* 焦点环放在 button 上而非 i：button 是 22×22 的命中盒，环贴着圆点外侧更规整
   （2026-09-20 前 i 带 clip-path 时会被裁，现在虽已改圆角，仍沿用此结构） */
.pn-feat__marks button:focus-visible {
  outline: 2px solid var(--color-text-1);
  outline-offset: 3px;
}

/* ---------- 新闻网格（4:237：块 x=50–1870 y=1227；黑线块内 y=60；卡组 y=140，560×491，列距 70 行距 80） ---------- */
.pn-grid {
  margin-top: 6.25rem; /* 焦点区底 1127 → 1227 */
  padding-inline: 3.125rem;
}

.pn-grid__rule {
  margin: 3.75rem 0 0; /* 线 y=1287（块顶 1227 + 60） */
  border: 0;
  border-top: 1px solid var(--color-text-1); /* Line 5 */
}

.pn-grid__list {
  display: grid;
  margin-top: 4.9375rem; /* 卡组 y=1367（线底 1288 + 79） */
  list-style: none;
}

/* 媒体窗：overflow:hidden 裁住 hover 时 scale 放大的图片，不溢出到相邻卡片 */
.pn-card__media {
  overflow: hidden;
}

.pn-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 360;
  object-fit: cover;
  transform: scale(1);
  transition: transform .6s var(--m-ease, cubic-bezier(0.075, 0.82, 0.165, 1));
}

.pn-card__body {
  position: relative;
  margin-top: 1.875rem; /* 内容 y=390（图底 360 + 30） */
  padding-right: 3.4375rem; /* 标题宽 505（右缘让位箭头 35+20） */
}

.pn-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 设计稿标题区固定 2 行（64px） */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  font-weight: var(--font-weight-regular);
  transition: color .3s ease; /* 与 index 的 .news-card__title 同款 */
}

/* 整卡可点（2026-09-20 用户要求「参照 index 的 LATEST NEWS 卡」）。
   这里用 <a> 直接**包裹整卡内容**，而不是其它卡片页那套 stretched link。原因：
   `.pn-card__body` 是 position:relative（给箭头方块定位用），它夹在标题与 .pn-card 之间
   → 若写成 `.pn-card__link::after { inset:0 }`，包含块会塌到 `.pn-card__body` 上，
     覆盖层只盖得住标题/日期，**盖不到图片**（点图片不跳转）。
   包裹式链接没有这个问题，并且顺带拿到两点好处：
     ① 天然只有一个链接 —— 不会与箭头方块重复被读屏朗读（无需 aria-hidden 兜底之外的技巧）
     ② 文字仍可划选复制（stretched link 的已知代价在这里不存在）
   ⚠ 因此卡内**不得**再出现 <a> / <button>（HTML 不允许 <a> 嵌套交互内容）；
     箭头已降级为 `<span class="pn-card__go btn-more" aria-hidden="true">` 纯装饰。
   ⚠ 这是全站唯一一处与其它卡片页（.pmod-card / .pmd-omcard / .psol-card / .psold-card /
     .news-card 的 stretched link）做法不同的地方 —— 改之前先读这段。 */
.pn-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pn-card__date {
  margin-top: .9375rem; /* y=469（标题底 454 + 15） */
  font-size: var(--font-size-body);
  line-height: 1.375rem; /* 22 */
  color: var(--color-gray-500);
}

/* 箭头方块 = 定位壳 + `.btn-more__icon`。
   视觉规格（35×35 / --radius-sm / gray-300 底 / text-2 箭头）与原来的 .pn-card__go 完全一致
   → **静止态外观零变化**，只是内部换成了「双箭头跑马灯」（与 index 新闻卡同一套组件）。
   视觉与动效全部交给 .btn-more__icon / .btn-more__arrow，壳本身不再画任何东西，
   避免与 .btn-more__icon 的背景色打架。
   ⚠ `.btn-more__icon` 里必须恰好两个箭头层（--in / --out）：漏写一个不会报错，但箭头会消失。 */
.pn-card__go {
  position: absolute;
  top: 0;
  right: 0;
}

/* 设计稿卡 1 即 hover 态（红标题 + 红盒白箭头），九卡统一实现为 hover/focus-within。
   hover 落在卡内**任意位置**（图片 / 标题 / 日期 / 空白）都要触发 → 必须由 .pn-card 代发：
   指针落在图片上时箭头方块本身并未被 hover，只靠 .btn-more:hover 会漏。 */
.pn-card:hover .pn-card__title,
.pn-card:focus-within .pn-card__title {
  color: var(--color-primary);
}

/* 箭头方块变红 + 双箭头跑马灯：取值镜像 components.css 的 .btn-more:hover 三条
   （方块变红 + 两层箭头同步 +200%）。特异性 (0,3,0) 与 components.css 的同名规则打平，
   但取值完全相同，不冲突。 */
.pn-card:hover .btn-more__icon,
.pn-card:focus-within .btn-more__icon {
  background: var(--color-primary);
  color: #fff;
}

.pn-card:hover .btn-more__arrow--in,
.pn-card:focus-within .btn-more__arrow--in  { transform: translateX(50%); }
.pn-card:hover .btn-more__arrow--out,
.pn-card:focus-within .btn-more__arrow--out { transform: translateX(150%); }

/* 图片 hover 放大：仅 ≥1280，倍数/时长与 index 的 .news-card 同款（1.06 / .6s var(--m-ease)）。
   ⚠ 不加 will-change：只在 hover 用却常驻提升图层，是反模式（本项目其它卡片同样不加）。
   ⚠ 媒体窗已 overflow:hidden → 绕图片自身中心放大即可，不需要 transform-origin 修正。 */
@media (min-width: 1280px) {
  .pn-card:hover .pn-card__media img {
    transform: scale(1.06);
  }
}

/* ---------- 分页（4:238：y=3080，静态 mock 同 solutions 页约定） ---------- */
.pn-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9375rem; /* 15 */
  margin-top: 5rem; /* 卡组底 3000 → 3080 */
}

.pn-pager__btn,
.pn-pager__num {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-body-lg);
  line-height: 1;
  color: var(--color-text-2);
  cursor: default;
}

/* 分页左右按钮（2026-09-20 用户规格，与 solutions 的 .psol-pager__btn 同一套）：
   默认 = 浅灰块（gray-300 #d9d9d9）+ 灰箭头（text-2 #555）；
   hover / 按下 = 主红块（primary #c30e23）+ 白箭头。
   ⚠ 这两颗钮当前是 disabled（1/2/3 是静态 mock，没有真实翻页数据）。
     实测 Chrome 里 disabled 按钮的 :hover / :active **仍会匹配**（只有 focus() 无效），
     所以用裸 :hover / :active 而**不是** :hover:not(:disabled) —— 用户明确要求
     「hover/点击变红」（2026-09-20）。将来接上真实翻页、摘掉 disabled 时，这条规则原样继续生效。
   ⚠ 与 products-detail 的箭头钮**刻意相反**：那边是真实翻页控件，disabled 不参与变红
     （否则「上一页不可点」看起来却可点）。两处语义不同，别互相「统一」。
   ⚠ cursor 沿用上面共享规则的 default，**没有**改成 pointer：钮确实不可点，
     给 pointer 光标等于骗用户。接入真实翻页时摘掉 disabled，可另加
     .pn-pager__btn:not(:disabled) { cursor: pointer; }。 */
.pn-pager__btn {
  display: grid;
  place-items: center;
  width: 2.1875rem; /* 35 */
  height: 2.1875rem;
  border-radius: var(--radius-sm);
  background: var(--color-gray-300);
  transition: background-color .2s ease-out, color .2s ease-out;
}

.pn-pager__btn:hover,
.pn-pager__btn:active {
  background: var(--color-primary);
  color: #fff;
}

.pn-pager__btn svg {
  width: .4375rem;  /* 7 */
  height: .6875rem; /* 11 */
}

.pn-pager__btn--prev svg {
  transform: scaleX(-1);
}

.pn-pager__num.is-current {
  color: var(--color-primary);
}

/* ---------- 页尾标语（4:229：分页底 3115 → 标语 3215 间距 100；标语底 3344 → 页脚 3424 间距 80） ---------- */
.pn-slogan {
  margin: 6.25rem auto 5rem;
  padding: 0 var(--space-6);
  text-align: center;
}

.pn-slogan__text {
  max-width: 36.875rem; /* 590 */
  margin: 0 auto;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: var(--font-weight-medium);
}

.pn-slogan .btn-more {
  margin-top: 1.875rem;
}

/* ---------- 平板档（768–1279：加大留白，网格两列） ---------- */
@media (min-width: 768px) {
  .pn-crumbs {
    margin-inline: var(--space-10);
  }

  .pn-hero {
    margin-inline: var(--space-10);
  }

  .pn-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pn-slogan {
    padding: 0 var(--space-10);
  }
}

/* ---------- 桌面档（≥1280：1920 设计值精确命中） ---------- */
@media (min-width: 1280px) {
  .pn-crumbs {
    margin: 3.125rem 0 0 5.125rem; /* (82,146) */
  }

  .pn-hero {
    margin: 4.5rem 3.125rem 0; /* 块 (50,237)，与面包屑间距 72 */
  }

  .pn-hero__icon {
    width: 10.9375rem; /* 175 */
    height: 10.9375rem;
  }

  .pn-hero__title {
    font-size: var(--font-size-h1);
  }

  .pn-feat {
    margin-top: 5rem; /* 块 (145,515) */
  }

  .pn-feat__media {
    width: 55.79%; /* 图 910/1631 */
  }

  .pn-feat__panel {
    width: 46.29%;        /* 755/1631 */
    margin: -22.87% 0 0 auto; /* 垂直顶 y=137（图底 510 − 373）；margin-left:auto 右贴容器，
                                 两元素宽和 102.08% → 左缘自动叠图 34px（设计 x=876） */
  }

  .pn-feat__marks {
    display: flex;
  }

  .pn-grid__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 4.375rem; /* 70 */
    row-gap: 5rem;        /* 80 */
  }

  .pn-pager {
    margin-top: 5rem; /* y=3080 */
  }

  .pn-slogan {
    margin: 6.25rem auto 5rem; /* 分页底 3115 → 标语 3215；底 3344 → 页脚 3424 */
  }

  .pn-slogan__text {
    font-size: var(--font-size-h3);
    line-height: 2rem;
  }
}

/* ---------- 移动端档（<768）：左右留白统一 24（--space-6）----------
   本站移动端基线为 24（crumbs / 规则线 / products / solutions / products-sub 一致），
   但本页有三处把「1920 设计值」直接写进了 base，导致移动端留白明显偏大：
     · .pn-hero__title  margin-inline 2rem（桌面 x=82 = 块缘 50 + 32）→ 移动端成了 24+32 = 56
     · .pn-feat         margin-inline 7.5% / 7.5521%（144/145 @1920）→ 375 下 ≈ 28
     · .pn-grid         padding-inline 3.125rem（桌面 x=50）→ 移动端 50（最大的一处）
   三处收齐到 24。≥768 / ≥1280 档完全不受影响。 */
@media (max-width: 767px) {
  /* 面包屑：与顶部导航的间距 48 → 18（用户规格「均上移 30px」，2026-09-17 全站 7 个有面包屑的页面统一）。
     base 的 --space-12(48) 是 1920 设计值（y=146 = 导航 96 + 50），移动端导航更矮、视觉密度更小 → 偏大。 */
  .pn-crumbs {
    margin-top: 1.125rem; /* 18 */
    font-size: .75rem; /* 12px（2026-09-20 移动端面包屑字号；base 为 --font-size-body-sm 14px） */
  }

  /* 面包屑 → 头部标题的间距 = 60（2026-09-20 用户要求，仅 <768）。
     base 的 .pn-hero margin-top 4.5rem(72) 是 1920 设计值（面包屑底 165 → 块顶 237），
     移动端按 60 收窄。≥768 / ≥1280 不受影响（它们各自有显式覆盖或沿用 base）。 */
  .pn-hero {
    margin-top: 3.75rem; /* 60 */
  }

  /* 页头右上角装饰图标：**仅移动端隐藏**（2026-09-20 用户要求）。
     图标沿用 base 的 absolute top:.1875rem right:2.0625rem（96×96），不参与布局流。 */
  .pn-hero__icon {
    display: none;
  }

  /* 标题右侧**不再**为装饰图标留白（2026-09-20 用户选择「一并去掉，标题铺满」）。
     原 padding-right 是为避让右上角图标而设（图标 6rem 宽、右距块 2.0625rem
     → 其左缘在块右缘内 8.0625rem 处，再留 3px 间隙），图标隐藏后该留白失去意义 → 归零。
     影响：375/430 下标题由 5 行回到 3 行，下方内容整体上移；767 档本就是 2 行 → 无变化。 */
  .pn-hero__title {
    margin-inline: 0;        /* 左缘与 crumbs / 规则线同缘 24 */
    padding-right: 0;
  }

  .pn-feat {
    margin-inline: var(--space-6);
  }

  /* 轮播卡底 → 下方黑线：160 → 80（2026-09-20 用户要求，仅 <768）。
     ⚠ base 的这个间距是**两处叠加**：.pn-grid 的 margin-top 100（1920 值）
       + .pn-grid__rule 的 margin-top 60。这里改成「一段」表达 —— .pn-grid 归零、
       间距全部交给 __rule，免得以后改一处以为改了全部。
     ⚠ 可加和、不存在 margin 折叠：.pn-grid 与 .pn-feat 都是 .section
       （layout.css 的 overflow:hidden → BFC），子元素 margin 不会外溢到父级。 */
  .pn-grid {
    margin-top: 0;
    padding-inline: var(--space-6);
  }

  .pn-grid__rule {
    margin-top: var(--space-20); /* 80 */
  }

  /* 九张卡之间的间距：0 → 20（2026-09-20 用户要求，仅 <768）。
     base 只声明了 display:grid 而**没有 gap**，≥768 段也只改列数、≥1280 才给 70/80
     → 移动端原本卡与卡相接（实测 0）。此处只补移动端；768–1279 仍为 0（不在本次范围）。
     只加 gap，不动 .pn-grid__list 的 margin-top 79（黑线 → 首卡的间距，用户未要求改）。 */
  .pn-grid__list {
    gap: var(--space-5); /* 20 */
  }
}