/* ===========================================================================
 * 正文排版（前台与管理台预览共用）
 *
 * ── 为什么要单独抽这一份 ──
 * 之前这套规则内联在 news-detail.html / industry-detail.html 等各个页面的
 * <style> 块里，而管理台预览用的是另一套 .content-studio__preview 样式。
 * 同一份 HTML 在两处套着不同的规则，于是「预览正常、发布后版式变形」：
 *   前台 .article-body h3 强制 20px 绿色 + margin 24px
 *   前台 .article-body img 强制圆角 8px + margin 12px
 *   前台 .article-body p  强制 margin-bottom 14px
 *   容器还压了 line-height:2 / font-size:15px
 * 预览里这些都不存在，作者按预览调好的版式一发布就被改写了。
 *
 * 抽成一份共用文件后，两边加载同一个样式表 —— 预览即所见。
 *
 * ── 一条重要原则 ──
 * 这里只提供**默认值**，绝不用 !important 覆盖作者写死的样式。
 * 作者在编辑器里手写 style="..." 或 <h3 style="font-size:28px"> 时，
 * 内联样式天然优先级更高，会正常生效 —— 这正是传统 HTML 稿件需要的行为。
 * 若这里加了 !important，作者怎么改都不生效，就成了另一种「版式变形」。
 * ======================================================================== */

.article-body {
  background: var(--ys-color-surface, #ffffff);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  line-height: 2;
  color: var(--text-mid, #4a4a4a);
  font-size: 15px;
  /* 字体必须两边一致：管理台预览原来用的是 Songti SC 衬线体，
     前台是 PingFang SC 黑体，同一篇稿子换了字体，行高、断行位置、
     整段占的高度全变了 —— 这是「预览和发布不一样」最直观的一条。 */
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  /* 长英文/URL 不撑破容器 */
  overflow-wrap: break-word;
}

/* 盒模型必须显式声明，不能吃宿主页面的全局重置 ——
   前台页面与管理台外壳一边 content-box、一边 border-box 时，
   同一份稿件两边算出的宽度不一样。

   默认取 border-box：公众号 / 365editor 这类排版稿件是按 border-box 写的，
   满屏都是 `width:100%; padding:20px` 的嵌套 section。
   给它们套 content-box 会让每一层都比父容器宽出一个内边距，
   手机上横向溢出 → 浏览器撑宽布局视口 → 整页被缩小、右侧留白、纵向拉长。
   实测 375px 视口下文档滚动宽 385px，正是「发布后手机端布局乱掉」。

   只有表格相关元素保留 content-box：老式 <th width="160"> 的 width 属性
   本来就是内容宽度语义，用 border-box 会把内边距吃进去，列宽对不上。 */
.article-body,
.article-body * {
  box-sizing: border-box;
}

.article-body table,
.article-body th,
.article-body td,
.article-body col,
.article-body colgroup {
  box-sizing: content-box;
}

.article-body h2 {
  font-size: 22px;
  color: var(--green-dark, #1a4d2e);
  margin: 28px 0 14px;
}

.article-body h3 {
  font-family: 'PingFang SC', 'Microsoft YaHei', serif;
  font-size: 20px;
  color: var(--green-dark, #1a4d2e);
  margin: 24px 0 12px;
}

.article-body h4 {
  font-size: 16px;
  color: var(--green-mid, #2d7a4e);
  margin: 16px 0 8px;
}

/* 所有块级间距都写成 margin 简写（含 margin-top），不依赖宿主页面有没有 `*{margin:0}` 重置。
   只写 margin-bottom 时，有重置的页面上边距是 0、没重置的是浏览器默认 1em，
   同一份稿件两边段间距就不一样了。 */
.article-body p { margin: 0 0 14px; }

/* 引用块与代码块：原来只有管理台预览有样式，前台是浏览器默认样式，
   于是带引用/代码的稿件一发布就走样。挪到共用文件，两边同一套。 */
.article-body blockquote {
  margin: 1.3em 0;
  padding: 12px 18px;
  border-left: 3px solid var(--green-mid, #2d7a4e);
  color: var(--ys-color-text-secondary, #5a6b62);
  background: var(--ys-color-warm-white, #f8faf7);
}

.article-body pre {
  margin: 14px 0;
  overflow-x: auto;
  padding: 16px;
  border-radius: 10px;
  color: var(--ys-color-green-soft, #e8f4ec);
  background: var(--ys-color-ink, #1a2e22);
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
}

.article-body code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: .92em;
}

.article-body pre code {
  padding: 0;
  background: none;
  color: inherit;
}
.article-body ul,
.article-body ol { padding-left: 24px; margin: 0 0 14px; }
.article-body li { margin: 0 0 6px; }

/* ── 图片：防溢出是底线，装饰性默认值要看稿件类型 ──
 *
 * max-width/height 必须保留，否则大图撑破容器。
 * 但 margin 和 border-radius 属于「替作者做主」的装饰，不能无差别施加：
 *
 * 365editor / 秀米 / 公众号这类排版稿件，整套版式建立在负边距叠压上
 * （实测这份稿件里有 margin:-145px、margin-top:-26px、margin-left:-30px），
 * 图片必须零间距紧贴。作者的 img 内联样式只写了 width/max-width/display，
 * 没写 margin —— 于是这里的 12px 就赢了，每张图凭空多出 24px 高度，
 * 叠压全部错位，方形设计图还被切成圆角。这就是「发布后布局乱掉」。
 *
 * 判定标志用 <section>：排版编辑器一律输出 section 树，
 * 手写 HTML 和 Word 粘贴几乎不用 section。判据准确且不需要 JS。
 */
.article-body img {
  max-width: 100%;
  height: auto;
}

/* 朴素稿件（作者没做排版，图片直接躺在正文里）才给默认间距与圆角 */
.article-body > img,
.article-body > p > img,
.article-body > figure > img {
  border-radius: 8px;
  margin: 12px 0;
}

/* ── 排版稿件铺满内容框 ──
 *
 * 365editor / 秀米 / 公众号稿件是**整版设计**：自带背景色、自带留白，
 * 按 360px 设计稿导出后靠百分比与 svg viewBox 自适应宽度。
 * 容器再套一圈 40px 内边距，等于把整幅设计用白边框起来 ——
 * 桌面端尤其明显，红色海报缩在卡片中间，四周一圈白。
 *
 * 判据用 `:has(> section)`：正文的直接子元素是 section，
 * 就说明这是整版稿件而非朴素图文。朴素稿件（p/h3/img）不受影响，
 * 仍然保留 40px 阅读留白 —— 那种内容贴边反而难读。
 */
.article-body.ys-full-bleed {
  padding: 0;
  /* 圆角必须显式保留：内容贴边之后，稿件自带的方角底色会一直铺到容器四角，
     只有 overflow:hidden 才能把它裁成圆角。少了任何一半，卡片就变成方的。 */
  border-radius: 16px;
  overflow: hidden;
}

/* :has() 只作渐进增强，必须**单独成条**：
   CSS 规范规定，选择器列表里只要有一个无效选择器，整条规则作废。
   合并写成 `.ys-full-bleed, .article-body:has(> section):not(.ys-no-bleed) { … }` 的话，
   在不支持 :has() 的浏览器上会连类名那一半一起丢掉 ——
   实测手机端就是这么没铺满的（内边距回到 16px）。
   铺满真正的依靠是 rich-content.js 打上的 .ys-full-bleed 类。 */
.article-body:has(> section):not(.ys-no-bleed) {
  padding: 0;
  overflow: hidden;
}

/* 整版稿件的顶层 section 撑满可用宽度。
 *
 * 用 JS 打的 .ys-bleed-top 类，而不是直接子代选择器 `> section`：
 * 管理台预览会把稿件再包一层 <div class="ys-article-body">，
 * 顶层 section 掉到第二层，`> section` 在那边永远匹配不到 ——
 * 实测就是这么导致「前台铺满、预览没铺满」两边分家的。
 * 保留 `> section` 那一半是给 JS 没跑起来时兜底。 */
.article-body .ys-bleed-top,
.article-body.ys-full-bleed > section {
  width: 100%;
  max-width: none;
}

.article-body:has(> section):not(.ys-no-bleed) > section {
  width: 100%;
  max-width: none;
}

/* 排版稿件内部：任何装饰性默认值都不施加，一切听作者的 */
.article-body section img,
.article-body section video,
.article-body section audio,
.article-body section p {
  margin: 0;
  border-radius: 0;
}

/* ── 正文里的元素必须免疫页面级全局规则 ──
 *
 * 这是「编辑器预览正常、发布到手机端垮掉」的确切原因，实测证据：
 *   frontend/css/mobile-unified.css 里有
 *       @media (max-width: 768px) { section { padding: 48px 0; ... } }
 *   这条是给**页面区块**（首页的「最新动态」「产品中心」等栏目）写的，
 *   但用的是裸元素选择器，会命中正文里稿件的每一个嵌套 section。
 *   365editor / 公众号稿件动辄几十层 section —— 实测一份稿件被加到
 *   54 个 section 上，每个上下各 48px，正文高度从 1118px 撑到 4229px，
 *   负边距叠压、grid 同格重叠全部错位。
 *
 * 管理台预览不加载 mobile-unified.css，所以预览一直是好的；
 * 而这条规则只在 ≤768px 生效，所以「电脑平板正常、只有手机端坏」。
 *
 * 这里把正文内的 section 恢复成「无主张」的状态。
 * 作者自己写的 padding/max-width 是内联样式，优先级更高，不受影响；
 * 没写的才回到默认值 —— 与预览环境完全一致。
 */
.article-body section {
  padding: 0;
  margin: 0;
  max-width: none;
  min-width: 0;
  scroll-margin-top: 0;
}

/* site-layout.css 的 `section > * { min-width: 0 }` 同样会漏进正文，
   影响 flex 子项的收缩行为；这里显式声明，两边保持一致。 */
.article-body section > * {
  min-width: auto;
}

/* 排版稿件用 <svg viewBox> + <foreignObject> 承载封面，靠 viewBox 等比缩放。
   前台样式链里有 svg 的 max-width:100%，管理台预览没有 —— 两边算出的
   封面宽度就会不同。这里显式声明：既保留防溢出，又让两边一致。 */
.article-body svg {
  max-width: 100%;
}

/*
 * 传统 HTML 稿件常用表格排版。不加约束时宽表会把手机端撑破，
 * 但也不能强行改成卡片（那就不是作者写的版式了）——
 * 由 rich-content.js 给它套一个可横向滚动的外框 .ys-table-scroll，
 * 版式原样保留，容器不被撑破。
 *
 * 注意：绝不能给 table 本身写 display:block —— 那会让表格失去表格布局，
 * 列宽不再对齐、colspan/rowspan 全部失效，正是「版式变形」本身。
 * 滚动只能加在外框上。
 */
.article-body .ys-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 表格宽度交给外框滚动，这里显式写 none：
   前台 site-layout.css 有 `table{max-width:100%}`、管理台没有，
   不显式声明就会一边压缩一边溢出。 */
.article-body table {
  max-width: none;
  margin: 14px 0;
}

/* 单元格的字号/颜色/底色必须由这里定，否则管理台 admin-shell.css 的
   `th{…font-size:13px;color:muted;background:#f7faf8}` / `td{…}`（0-0-1）
   会漏进预览，而前台没有这些规则 —— 同一张表两边字号底色都不同。
   这里的选择器是 0-1-1，两个宿主都盖得住。
   padding / border 故意不在这里声明：那两项由 rich-content.js 把
   cellpadding、border 属性提升成行内样式来保证，作者的老式写法才不会失效。 */
.article-body th,
.article-body td {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background-color: transparent;
  vertical-align: inherit;
  border: 0;
}

.article-body th {
  text-align: center;
  font-weight: 700;
}

/* 作者用固定宽度做的版式（常见于从 Word/公众号粘来的稿件）：
   窄屏下收进容器而不是让它溢出。
   表格及其单元格排除在外 —— 它们靠上面的滚动外框处理，
   在这里压 max-width 反而会把列挤扁，破坏作者的表格版式。 */
.article-body [style*="width:"]:not(table):not(td):not(th):not(col):not(colgroup) {
  max-width: 100%;
}

.article-body .ys-media { max-width: 100%; margin: 16px auto; clear: both; }
.article-body .ys-media img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.article-body .ys-media figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ys-color-muted, #6b7c72);
  text-align: center;
  line-height: 1.5;
}

.article-body::after { content: ""; display: table; clear: both; }

.article-body video,
.article-body audio {
  max-width: 100%;
  display: block;
}

/* 同 img：只有朴素稿件里的音视频才加装饰性间距与圆角 */
.article-body > video,
.article-body > audio,
.article-body > p > video,
.article-body > p > audio {
  margin: 14px 0;
  border-radius: 8px;
}

/* ── 手机端 ──
 * 只调容器内边距与基础字号，不动作者设定的元素级样式，
 * 否则又会出现「手机上和预览不一样」。 */
@media (max-width: 768px) {
  .article-body {
    padding: 22px 16px;
    font-size: 16px;
    line-height: 1.85;
  }

  /* 手机端同样铺满：整版稿件本来就是按手机宽度设计的，
     再留 16px 边距会让海报两侧露出白条。
     内容框尺寸保持不变，只是内容贴到框边。
     与上面同理，类名与 :has() 必须分成两条写。 */
  .article-body.ys-full-bleed {
    padding: 0;
  }

  .article-body:has(> section):not(.ys-no-bleed) {
    padding: 0;
  }

  .article-body h3 { font-size: 19px; }
  .article-body h4 { font-size: 16px; }
}