feat: port cms article detail layout into trade-pro (hero/body/related)

Task 10d: rewrite trade-pro article.html from the thin pro-article
skeleton to the cms news/[slug].astro design (pixel baseline
dist/hesupipe/en/news/<slug>/):

- hero reuses the 10c sf-tp-page-hero component (cover as bg image +
  brand-soft overlay) with the breadcrumb inside; the platform contract
  class .pro-article-hero stays on the hero section and the pro-base
  centered/giant-h1 skeleton is flattened by specificity in pro.css
- meta row (category pill - publish_date - author), rich-text body via
  body_copy with a cms rich-body typographic layer, divider, author
  card, next-story navigation
- related band below the content: More News side box (120px thumb rows,
  3 items, self and next-story excluded) + dark side CTA + back link,
  1fr+300px grid collapsing at 900/620
- date field is meta.fields.publish_date (blueprints post definition),
  rendered raw as YYYY-MM-DD
- new responsive rules live in the 10d media blocks appended at the end
  of pro.css to avoid the 10c source-order cascade trap; the 620 hero
  h1 compact size is re-declared at the same specificity because the
  10d no-media h1 reset (0,4,0) outranks the 10c 620 rule (0,3,0)
- tests: test_trade_pro_article_layout_structure builds a site with a
  cover/date/rich-body post plus 4 other posts and asserts hero/meta/
  body/author/next/related structure, .pro-article-hero presence, no
  bare arrow characters

Co-Authored-By: Claude Code <noreply@anthropic.com>

themes/trade-pro/pages/article.html

@@ -1 +1,89 @@
-<section class="pro-article-hero"><div class="pro-wrap pro-article-width"><span class="pro-eyebrow">LATEST NEWS / INSIGHTS</span><h1>{{page.title}}</h1><p>{{page.summary}}</p>{% if fields.get('publish_date') %}<time>{{fields.get('publish_date')}}</time>{% endif %}</div></section><article class="pro-wrap pro-article-content">{% if page.cover %}<img class="pro-article-cover" src="{{safe_image(page.cover)}}" alt="{{page.title}}">{% endif %}{{body_copy(content,page)}}<a class="pro-text-link" href="/news/">{{ icon('arrow-left') }} Back to news</a></article>
+{# trade-pro article detail — cms 文章详情设计移植（Task 10d）。
+   区块序列对照 D:/project/cms/runtimes/astro-site-runtime/src/pages/[locale]/news/[slug].astro
+   （像素基准 dist/hesupipe/en/news/<slug>/）：
+   面包屑（hero 顶部）→ PageHero（眉题=分类 / h1 / 导语 / 封面底图 + brand-soft 罩）
+   → meta 行（分类胶囊 · 发布日期 · 作者）→ 富文本正文 → 分隔线 → 作者卡
+   → 下一篇导航 → More News 相关盒（120px 缩略图 + 分类 + 标题）+ 深色侧栏
+   CTA + 返回列表（1fr + 300px 双列带）。
+   与 cms 的结构决策：
+   1. .pro-article-hero 平台契约类保留挂在 hero 上（test_theme_pro_v3 对所有
+      主题 article 页断言该类存在）；pro-base 骨架的居中排版与巨型 h1 由
+      pro.css 的 article 作用域规则按特异性压平。
+   2. cms 的“下一篇”按全量列表顺序取模回绕、相关阅读同 tag 优先补位；
+      平台 groups['post'] 无稳定语义顺序，简化为：下一篇 = 排除自身后首条，
+      相关盒 = 其余文章取 3（与下一篇去重，小数据集不出现重复链接）。
+   3. 日期字段是 meta.fields.publish_date（blueprints 为 post 定义的发布日期
+      字段），YYYY-MM-DD 原串直出（cms 同款，不做本地化重排）；作者缺省回落
+      “{site.name} Editorial Team”（cms 的 HESU Team 位）。
+   4. cms 正文区分富文本/纯文本双通道（纯文本首段 lead-para 放大）；平台正文
+      统一走 body_copy（.pro-rich 基线 + pro.css 的 sf-tp-article-body 排版层），
+      无纯文本分支。
+   5. 页尾 CTA 横幅由 pro.html 的 .pro-end-cta 承担，cms 的 Cta 组件不重复。 #}
+{% set tp_others = groups['post']|rejectattr('route','equalto',page.route)|list %}
+{% set tp_next = tp_others[0] if tp_others else none %}
+{% set tp_related = tp_others[1:4] %}
+<section class="sf-tp-page-hero sf-tp-article-hero pro-article-hero">
+  {% if page.cover %}<img class="sf-tp-page-hero-bg" src="{{ safe_image(page.cover) }}" alt="" width="1600" height="900" fetchpriority="high" decoding="async">{% endif %}
+  <div class="sf-tp-page-hero-overlay" aria-hidden="true"></div>
+  <div class="wrap">
+    <nav class="sf-tp-breadcrumb sf-tp-article-breadcrumb" aria-label="Breadcrumb" data-reveal>
+      <a href="/">Home</a><a href="/news/">News</a><span class="sf-tp-breadcrumb-current">{{ page.title }}</span>
+    </nav>
+    <div class="sf-tp-page-hero-copy" data-reveal style="--reveal-i: 1">
+      <span class="eyebrow">{{ fields.get('category') or 'NEWS & INSIGHTS' }}</span>
+      <h1>{{ page.title }}</h1>
+      {% if page.summary %}<p class="sf-tp-page-hero-lead">{{ page.summary }}</p>{% endif %}
+    </div>
+  </div>
+</section>
+<article class="section sf-tp-article-content">
+  <div class="wrap">
+    <div class="sf-tp-article-meta" data-reveal>
+      <span class="sf-tp-tag">{{ fields.get('category') or 'News' }}</span>
+      {% if fields.get('publish_date') %}<span class="sf-tp-article-meta-dot" aria-hidden="true">·</span><time datetime="{{ fields.get('publish_date') }}">{{ fields.get('publish_date') }}</time>{% endif %}
+      <span class="sf-tp-article-meta-dot" aria-hidden="true">·</span>
+      <span>{{ fields.get('author') or (site.name ~ ' Editorial Team') }}</span>
+    </div>
+    <div class="sf-tp-article-body" data-reveal>{{ body_copy(content, page) }}</div>
+    <div class="sf-tp-article-divider" aria-hidden="true"></div>
+    <footer class="sf-tp-article-foot">
+      <div class="sf-tp-article-author">
+        <div class="sf-tp-article-avatar" aria-hidden="true">{{ (site.name or 'S')[:1]|upper }}</div>
+        <div>
+          <strong>{{ fields.get('author') or (site.name ~ ' Editorial Team') }}</strong>
+          <span>{{ (footer_text or site.tagline or 'Industry insights and company news from our team.')|truncate(80, True, '…') }}</span>
+        </div>
+      </div>
+    </footer>
+    {% if tp_next %}
+    <a class="sf-tp-next-story" href="{{ safe_href(tp_next.route) }}" data-reveal>
+      <span class="sf-tp-next-story-label">Next story</span>
+      <span class="sf-tp-next-story-title">{{ tp_next.title }} {{ icon('arrow-right', cls='sf-tp-icon--sm') }}</span>
+    </a>
+    {% endif %}
+  </div>
+</article>
+{% if tp_related %}
+<section class="section section--soft sf-tp-article-related">
+  <div class="wrap sf-tp-article-side">
+    <div class="sf-tp-article-side-box" data-reveal>
+      <h3>More news</h3>
+      {% for p in tp_related %}
+      <a class="sf-tp-article-side-item" href="{{ safe_href(p.route) }}">
+        <div class="sf-tp-article-side-media sf-tp-card-media">{{ cover(p, 'post') }}</div>
+        <div class="sf-tp-article-side-text">
+          <span class="sf-tp-article-side-tag">{{ fields_of(p).get('category') or 'News' }}</span>
+          <span class="sf-tp-article-side-title">{{ p.title }}</span>
+        </div>
+      </a>
+      {% endfor %}
+    </div>
+    <div class="sf-tp-article-side-cta" data-reveal style="--reveal-i: 1">
+      <span class="eyebrow">{{ site.name }}</span>
+      <h3>Ready to source with confidence?</h3>
+      <a class="sf-tp-btn" href="/contact/">Get a quote {{ icon('arrow-right') }}</a>
+    </div>
+    <a class="sf-tp-article-back" href="/news/">{{ icon('arrow-left', cls='sf-tp-icon--sm') }} Back to news</a>
+  </div>
+</section>
+{% endif %}

themes/trade-pro/pro.css

@@ -365,3 +365,83 @@
   .sf-theme-trade-pro .sf-tp-news-aside{margin-block-start:var(--sf-tp-space-8)}
   .sf-theme-trade-pro .sf-tp-page-num,.sf-theme-trade-pro .sf-tp-page-arrow{min-width:32px;height:32px}
 }
+
+/* ── Task 10d：article 文章详情（news/[slug].astro 移植）──
+   源 src/pages/[locale]/news/[slug].astro：PageHero（面包屑内置）+ meta 行 +
+   rich-body 富文本 + 分隔线 + 作者卡 + 下一篇导航 + More News 侧盒
+   （120px 缩略图行）+ 深色侧栏 CTA + 返回链接。hero 复用 10c 的
+   sf-tp-page-hero 组件（底图/罩层/内边距由其提供）。 */
+
+/* pro-base 的 .pro-article-hero 骨架（居中/浅底）与 .pro-article-hero h1
+   （clamp(40..75px) 巨型字）按特异性压平；0,3,0 > 0,1,0 / 0,1,1 */
+.sf-theme-trade-pro .sf-tp-article-hero.pro-article-hero{text-align:start}
+.sf-theme-trade-pro .sf-tp-article-hero .sf-tp-page-hero-copy h1{font-size:var(--sf-tp-font-size-display)}
+/* hero 内面包屑（cms：置 hero 顶部，宽度随 copy 收敛，900 放开） */
+.sf-theme-trade-pro .sf-tp-article-breadcrumb{margin-block-end:var(--sf-tp-space-5);max-width:min(56%,var(--sf-tp-container-content-max))}
+/* meta 行：tag 胶囊 · 发布日期 · 作者 */
+.sf-theme-trade-pro .sf-tp-article-meta{display:flex;align-items:center;gap:var(--sf-tp-space-2);font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-muted);margin-block-end:var(--sf-tp-space-5);flex-wrap:wrap}
+.sf-theme-trade-pro .sf-tp-article-meta-dot{color:var(--sf-tp-color-neutral-400)}
+/* 正文排版层（.pro-rich 基线之上，cms rich-body 同构；WP 迁移正文常带
+   figure/表格，class 属性被 sanitize 剥离故不做 alignleft/right 浮动分支） */
+.sf-theme-trade-pro .sf-tp-article-body{color:var(--sf-tp-color-text-secondary);line-height:var(--sf-tp-line-height-relaxed)}
+.sf-theme-trade-pro .sf-tp-article-body .pro-rich p{margin-block-end:var(--sf-tp-space-5)}
+.sf-theme-trade-pro .sf-tp-article-body .pro-rich h2,.sf-theme-trade-pro .sf-tp-article-body .pro-rich h3,.sf-theme-trade-pro .sf-tp-article-body .pro-rich h4{color:var(--sf-tp-color-text-primary);font-weight:var(--sf-tp-font-weight-bold);margin-block:var(--sf-tp-space-6) var(--sf-tp-space-3)}
+.sf-theme-trade-pro .sf-tp-article-body .pro-rich img{max-width:100%;height:auto;border-radius:var(--sf-tp-radius-md);margin-block:var(--sf-tp-space-4)}
+.sf-theme-trade-pro .sf-tp-article-body .pro-rich figure{margin-block:var(--sf-tp-space-6)}
+.sf-theme-trade-pro .sf-tp-article-body .pro-rich figcaption{margin-block-start:var(--sf-tp-space-2);font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-muted);text-align:center}
+.sf-theme-trade-pro .sf-tp-article-body .pro-rich ul,.sf-theme-trade-pro .sf-tp-article-body .pro-rich ol{padding-inline-start:var(--sf-tp-space-6);margin-block-end:var(--sf-tp-space-5)}
+.sf-theme-trade-pro .sf-tp-article-body .pro-rich li{margin-block-end:var(--sf-tp-space-2)}
+.sf-theme-trade-pro .sf-tp-article-body .pro-rich blockquote{border-inline-start:3px solid var(--sf-tp-color-border-brand);padding-inline-start:var(--sf-tp-space-4);color:var(--sf-tp-color-text-muted);margin-block-end:var(--sf-tp-space-5)}
+.sf-theme-trade-pro .sf-tp-article-body table{width:100%;border-collapse:collapse;font-size:var(--sf-tp-font-size-sm);margin-block:var(--sf-tp-space-6)}
+.sf-theme-trade-pro .sf-tp-article-body th,.sf-theme-trade-pro .sf-tp-article-body td{border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-default);padding:var(--sf-tp-space-3) var(--sf-tp-space-4);text-align:start;vertical-align:middle}
+.sf-theme-trade-pro .sf-tp-article-body tbody tr:nth-child(even) td{background:var(--sf-tp-color-neutral-50)}
+/* 分隔线 + 作者卡（cms article-foot：首字母头像 + 团队名 + 简介） */
+.sf-theme-trade-pro .sf-tp-article-divider{margin-block:var(--sf-tp-space-8);border-block-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle)}
+.sf-theme-trade-pro .sf-tp-article-author{display:flex;align-items:center;gap:var(--sf-tp-space-4)}
+.sf-theme-trade-pro .sf-tp-article-avatar{width:var(--sf-tp-space-12);height:var(--sf-tp-space-12);border-radius:var(--sf-tp-radius-full);background:var(--sf-tp-color-brand-primary);color:var(--sf-tp-color-text-on-brand);display:grid;place-items:center;font-size:var(--sf-tp-font-size-xl);font-weight:var(--sf-tp-font-weight-bold);flex:0 0 auto}
+.sf-theme-trade-pro .sf-tp-article-author strong{display:block;margin-block-end:var(--sf-tp-space-1)}
+.sf-theme-trade-pro .sf-tp-article-author span{font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-muted)}
+/* 下一篇导航（cms next-story：灰底卡，悬浮转 brand-soft） */
+.sf-theme-trade-pro .sf-tp-next-story{display:flex;flex-direction:column;gap:var(--sf-tp-space-2);margin-block-start:var(--sf-tp-space-8);padding:var(--sf-tp-space-5);background:var(--sf-tp-color-surface-muted);border-radius:var(--sf-tp-card-border-radius);transition:background-color var(--sf-tp-duration-fast) var(--sf-tp-easing-standard)}
+.sf-theme-trade-pro .sf-tp-next-story:hover{background:var(--sf-tp-color-surface-brand-soft)}
+.sf-theme-trade-pro .sf-tp-next-story-label{font-size:var(--sf-tp-font-size-xs);text-transform:uppercase;letter-spacing:var(--sf-tp-letter-spacing-wide);color:var(--sf-tp-color-text-muted);font-weight:var(--sf-tp-font-weight-semibold)}
+.sf-theme-trade-pro .sf-tp-next-story-title{font-size:var(--sf-tp-font-size-md);font-weight:var(--sf-tp-font-weight-semibold);color:var(--sf-tp-color-text-primary);display:inline-flex;align-items:center;gap:var(--sf-tp-space-2)}
+/* 相关阅读带（cms .side）：More News 盒占宽列 + 深色 CTA 300px + 返回整行 */
+.sf-theme-trade-pro .sf-tp-article-side{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:calc(var(--sf-tp-space-8) + var(--sf-tp-space-2));align-items:start}
+.sf-theme-trade-pro .sf-tp-article-side>.sf-tp-article-back{grid-column:1/-1}
+.sf-theme-trade-pro .sf-tp-article-side-box{background:var(--sf-tp-color-surface-default);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);border-radius:var(--sf-tp-card-border-radius);padding:var(--sf-tp-space-5)}
+.sf-theme-trade-pro .sf-tp-article-side-box h3{font-size:var(--sf-tp-font-size-sm);text-transform:uppercase;letter-spacing:var(--sf-tp-letter-spacing-wide);color:var(--sf-tp-color-text-muted);margin-block-end:var(--sf-tp-space-4)}
+.sf-theme-trade-pro .sf-tp-article-side-item{display:grid;grid-template-columns:120px 1fr;gap:var(--sf-tp-space-3);padding-block:var(--sf-tp-space-3);border-block-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle)}
+.sf-theme-trade-pro .sf-tp-article-side-item:last-child{border-block-end:0;padding-block-end:0}
+/* 媒体复用 sf-tp-card-media（4:3 + 裁剪 + 无图占位），补行内块与圆角 */
+.sf-theme-trade-pro .sf-tp-article-side-media{display:block;border-radius:var(--sf-tp-radius-xs)}
+.sf-theme-trade-pro .sf-tp-article-side-tag{display:block;font-size:var(--sf-tp-font-size-xs);color:var(--sf-tp-color-text-link);font-weight:var(--sf-tp-font-weight-semibold);margin-block-end:var(--sf-tp-space-1)}
+.sf-theme-trade-pro .sf-tp-article-side-title{display:block;font-size:var(--sf-tp-font-size-sm);font-weight:var(--sf-tp-font-weight-semibold);color:var(--sf-tp-color-text-primary);line-height:var(--sf-tp-line-height-snug)}
+.sf-theme-trade-pro .sf-tp-article-side-item:hover .sf-tp-article-side-title{color:var(--sf-tp-color-text-brand)}
+.sf-theme-trade-pro .sf-tp-article-side-cta{background:var(--sf-tp-color-surface-inverse);border-radius:var(--sf-tp-card-border-radius);padding:var(--sf-tp-space-5);display:grid;gap:var(--sf-tp-space-3);color:var(--sf-tp-color-text-inverse)}
+.sf-theme-trade-pro .sf-tp-article-side-cta .eyebrow{color:var(--sf-tp-color-text-inverse-muted)}
+.sf-theme-trade-pro .sf-tp-article-side-cta h3{font-size:var(--sf-tp-font-size-md);color:var(--sf-tp-color-text-inverse)}
+/* 深底上的按钮换白底品牌字（沿用应用带按钮反色方案） */
+.sf-theme-trade-pro .sf-tp-article-side-cta .sf-tp-btn{justify-self:start;background:var(--sf-tp-color-surface-default);border-color:var(--sf-tp-color-surface-default);color:var(--sf-tp-color-text-brand)}
+.sf-theme-trade-pro .sf-tp-article-back{font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-link);font-weight:var(--sf-tp-font-weight-semibold);display:inline-flex;align-items:center;gap:var(--sf-tp-space-2)}
+.sf-theme-trade-pro .sf-tp-article-back:hover{color:var(--sf-tp-color-text-link-hover)}
+
+/* ── article 响应式（cms 断点 1023/620 映射到平台 900/620；折叠规则收在
+   本任务媒体块内——10a/10c 的既有折叠块在本段之前，覆盖不到 10d 类名，
+   10d 也不依赖其折叠（10c 教训：同特异性按源顺序取胜））── */
+@media (max-width: 900px){
+  .sf-theme-trade-pro .sf-tp-article-breadcrumb{max-width:100%}
+  .sf-theme-trade-pro .sf-tp-article-side{grid-template-columns:1fr}
+}
+@media (max-width: 620px){
+  /* 本任务无媒体的 h1 复位（0,4,0）会压过 10c 的 620 hero 紧凑字号
+     （0,3,0）——同选择器补回移动端字号（cms 620：28px） */
+  .sf-theme-trade-pro .sf-tp-article-hero .sf-tp-page-hero-copy h1{font-size:28px;line-height:1.05}
+  .sf-theme-trade-pro .sf-tp-article-meta{font-size:var(--sf-tp-font-size-xs)}
+  .sf-theme-trade-pro .sf-tp-article-body .pro-rich p{font-size:13px}
+  .sf-theme-trade-pro .sf-tp-article-author span{font-size:var(--sf-tp-font-size-xs)}
+  .sf-theme-trade-pro .sf-tp-next-story{padding:var(--sf-tp-space-4)}
+  .sf-theme-trade-pro .sf-tp-article-side-box{padding:16px}
+  .sf-theme-trade-pro .sf-tp-article-side-item{grid-template-columns:72px 1fr}
+  .sf-theme-trade-pro .sf-tp-article-side-cta{padding:16px}
+}