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/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}
+}