/* ============================================================
   Sunswell news 详情页样式（正文块 + 模板组件）
   ------------------------------------------------------------
   包含两部分的样式，一个文件搞定：

   A. 正文内容块（选择器前缀 #nw-body）
      摘要 / 信息卡 / 表格 / 判断框 / 折叠问答 / 要点卡
      由内容侧产出 HTML 时使用，模板不需要管。

   B. 模板组件（选择器前缀 .ns- / .nw-）
      左栏目录、询盘卡、延伸指南、作者卡、CTA、底部相关区
      由模板固定输出，937 篇共用。

   ------------------------------------------------------------
   放置方式（推荐）：
     新建 /public/static/css/news-detail.css，把本文件全部内容贴进去，
     在 news 详情页模板的 </head> 前引用：
       <link rel="stylesheet" href="/public/static/css/news-detail.css">

     不要直接追加到全站 style.css：
       · 单独文件只作用于 news 页，其他页面不加载
       · 出问题整文件撤掉即可，不会波及首页和产品页
       · 若必须追加到 style.css，请贴在最末尾，保证在原有规则之后

   配套：给技术_左侧目录脚本.js（目录生成与高亮）
   参考：预览_新版结构_左侧栏与作者卡.html
   ============================================================ */

/* ---------- ① 摘要块（H1 下方灰底蓝边导语） ---------- */
#nw-body .nw-lede{
  font-size:18px; line-height:1.66; color:#22405c;
  background:#f7f9fb; border-left:4px solid #1f4e79;
  padding:16px 20px; margin:0 0 28px; border-radius:0 6px 6px 0;
}

/* ---------- ② Key facts 信息卡（6 行参数表） ---------- */
#nw-body .nw-facts{
  border:1px solid #e3e9ef; border-radius:10px;
  overflow:hidden; margin:0 0 32px;
}
#nw-body .nw-facts-t{
  background:#1f4e79; color:#fff;
  padding:11px 18px; font-weight:700; font-size:17px;
}
#nw-body .nw-facts table{ width:100%; border-collapse:collapse; max-width:100%; }
#nw-body .nw-facts td{
  padding:11px 18px; font-size:14.5px;
  border-top:1px solid #eef2f6; vertical-align:top; line-height:1.55;
}
#nw-body .nw-facts td:first-child{
  width:34%; color:#12395c; font-weight:700; background:#f7f9fb;
}
#nw-body .nw-facts tr:first-child td{ border-top:0; }

/* ---------- ③ 正文表格（替代老文章写死的 width:800px） ---------- */
#nw-body .nw-tbl{
  width:100%; max-width:100%; border-collapse:collapse;
  margin:16px 0 26px; font-size:14px; table-layout:fixed;
}
#nw-body .nw-tbl th{
  background:#12395c; color:#fff; text-align:left;
  padding:11px 13px; font-weight:700; font-size:13.5px;
}
#nw-body .nw-tbl td{
  padding:11px 13px; border-bottom:1px solid #e3e9ef;
  vertical-align:top; line-height:1.55;
  word-break:break-word; overflow-wrap:anywhere;
}
#nw-body .nw-tbl tr:nth-child(even) td{ background:#fafcfd; }

/* 对比表：首列加粗加底色（table 加 class="nw-tbl nw-cmp"） */
#nw-body .nw-cmp td:first-child{
  font-weight:700; color:#12395c; background:#f7f9fb; width:22%;
}

/* ---------- ④ 判断框（Judgement call，橙色左边框） ---------- */
#nw-body .nw-call{
  border-left:3px solid #f5a623; background:#fffbf3;
  padding:13px 17px; margin:18px 0 24px;
  font-size:15px; border-radius:0 5px 5px 0;
}
#nw-body .nw-call b{ color:#8a5a00; }

/* ---------- ⑤ Key takeaways 要点卡（正文底部） ---------- */
#nw-body .nw-take{
  background:#f7f9fb; border:1px solid #e3e9ef; border-radius:10px;
  padding:20px 24px; margin:34px 0 0;
}
#nw-body .nw-take-t{
  /* 用 div 而非 h2：站点把 h2 锁在 22px，设 19px 无效 */
  margin:0 0 12px; font-size:19px; font-weight:800; color:#12395c;
}
#nw-body .nw-take ol{ margin:0; padding-left:21px; }
#nw-body .nw-take li{ margin-bottom:9px; font-size:15px; }

/* ---------- ⑥ FAQ 折叠（details / summary） ---------- */
#nw-body details.nw-faq{ border-bottom:1px solid #e3e9ef; padding:15px 0; }
#nw-body details.nw-faq summary{
  font-weight:700; color:#12395c; cursor:pointer; list-style:none;
  font-size:16.5px; position:relative; padding-right:28px; line-height:1.5;
}
#nw-body details.nw-faq summary::-webkit-details-marker{ display:none; }
#nw-body details.nw-faq summary::after{
  content:"＋"; position:absolute; right:0; top:-3px;
  font-size:19px; color:#6b7b8c;
}
#nw-body details.nw-faq[open] summary::after{ content:"−"; }
#nw-body details.nw-faq p{ margin:11px 0 0; font-size:15px; color:#33475b; }

/* ---------- ⑦ 移动端适配 ---------- */
@media (max-width:768px){
  #nw-body .nw-lede{ font-size:16px; padding:14px 16px; }
  #nw-body .nw-tbl{ font-size:12.5px; }
  #nw-body .nw-tbl th,
  #nw-body .nw-tbl td{ padding:9px 9px; }
  #nw-body .nw-facts td{ padding:9px 11px; font-size:13px; word-break:break-word; }
  #nw-body .nw-facts td:first-child{ width:38%; }
}

/* ============================================================
   ⑧ 顺带修一个存量 bug
   现有 news 正文表格写死 style="width:800px"，
   手机屏 390px 时必然横向溢出。这条兜底：
   ============================================================ */
.news_content_text table,
.news_content_title table{ max-width:100% !important; }

/* ============================================================
   验收清单
   □ 桌面：摘要块灰底蓝边、信息卡蓝头、表格深蓝表头、
          判断框橙边、FAQ 可展开、要点卡浅灰框
   □ 手机 390px：表格不横向溢出，信息卡两列正常换行
   □ 任取一篇老文章：表格不再溢出
   ============================================================ */

/* ============================================================
   ⑨ 左侧栏（新版结构）
   构成：On this page 目录 + 询盘卡 + 信任标记
   注意：目录由 JS 自动生成，不在后台字段里维护
   ============================================================ */

/* 左侧栏容器：sticky 跟随，内部可滚动 */
.news-side{
  position:sticky; top:90px;
  max-height:calc(100vh - 110px);
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin;
}
.news-side::-webkit-scrollbar{ width:5px }
.news-side::-webkit-scrollbar-thumb{ background:#cfd8e3; border-radius:3px }

/* ① On this page 目录 */
.ns-toc{
  border:1px solid #e3e9ef; border-radius:8px; overflow:hidden;
  margin:0 0 14px; background:#fff;
}
.ns-toc-t{
  margin:0; background:#1f4e79; color:#fff;
  font-size:14px; font-weight:700; padding:11px 14px;
  letter-spacing:.02em;
}
.ns-toc ol{
  margin:0; padding:9px 13px 10px 28px;
  font-size:12.5px; line-height:1.45; list-style:decimal;
}
.ns-toc li{ margin-bottom:9px; color:#7c8fa1 }
.ns-toc li:last-child{ margin-bottom:0 }
.ns-toc a{ color:#33506b; text-decoration:none; transition:color .15s }
.ns-toc a:hover{ color:#12395c; text-decoration:underline }
/* 当前所在章节高亮（JS 加 .is-active） */
.ns-toc li.is-active > a{ color:#1f4e79; font-weight:700 }
.ns-toc li.is-active{ color:#1f4e79 }

/* ② 询盘卡（同 special 的 is-68 视觉） */
.ns-quote{
  background:linear-gradient(160deg,#12395c,#1f4e79);
  color:#fff; border-radius:9px; padding:16px;
  margin:0 0 14px;
}
.ns-quote .ns-quote-h{ margin:0 0 7px; font-size:15px; color:#fff; font-weight:700 }
.ns-quote .ns-quote-d{ margin:0 0 12px; font-size:12.5px; color:#b0cde0; line-height:1.5 }
.ns-quote a{
  display:block; text-align:center; background:#f5a623; color:#12395c;
  font-weight:700; padding:10px 0; border-radius:5px;
  font-size:13.5px; text-decoration:none;
}
.ns-quote a:hover{ filter:brightness(1.06); text-decoration:none }
.ns-quote small{ display:block; margin-top:9px; font-size:10.5px; color:#8bb8e0 }

/* ③ 信任标记 */
.ns-trust{
  border:1px solid #e3e9ef; border-radius:8px;
  padding:11px 14px; font-size:11.5px; color:#6b7b8c;
  line-height:1.75; text-align:center; background:#fbfcfd;
}
.ns-trust b{ color:#12395c }

/* ============================================================
   ⑩ 作者卡（正文底部，E-E-A-T）
   ============================================================ */
.nw-author{
  display:flex; gap:14px; align-items:flex-start;
  border:1px solid #e3e9ef; border-radius:10px;
  padding:18px 20px; margin:30px 0 0; background:#fbfcfd;
}
.nw-author img{
  width:56px; height:56px; border-radius:50%;
  object-fit:cover; flex:none; background:#dfe7ee;
}
.nw-author__name{ font-size:15.5px; font-weight:800; color:#12395c; margin:0 0 3px }
.nw-author__role{ font-size:12px; color:#6b7b8c; margin:0 0 7px }
.nw-author__bio{ font-size:13.5px; color:#44586c; line-height:1.65; margin:0 }

/* ============================================================
   ⑪ 正文内联 CTA（一行文字链，不打断阅读）
   ============================================================ */
.nw-cta-line{
  border-left:3px solid #1f4e79; background:#f4f8fc;
  padding:12px 16px; margin:24px 0;
  font-size:15px; color:#33475b; border-radius:0 5px 5px 0;
}
.nw-cta-line a{ color:#1f4e79; font-weight:700; text-decoration:none; white-space:nowrap }
.nw-cta-line a:hover{ text-decoration:underline }

/* ⑫ 底部大 CTA */
.nw-cta-box{
  background:linear-gradient(135deg,#12395c,#24618f);
  border-radius:12px; padding:28px 32px; color:#fff;
  margin:32px 0 0; display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.nw-cta-box > div{ flex:1; min-width:240px }
.nw-cta-box .nw-cta-t{ margin:0 0 7px; font-size:19px; color:#fff; font-weight:700 }
.nw-cta-box .nw-cta-d{ margin:0; font-size:13.5px; color:#bcd6e8; line-height:1.6 }
.nw-cta-box a{
  background:#f5a623; color:#12395c; font-weight:800;
  padding:12px 24px; border-radius:6px; font-size:14.5px;
  white-space:nowrap; text-decoration:none;
}
.nw-cta-box a:hover{ filter:brightness(1.06); text-decoration:none }

/* ============================================================
   ⑬ 移动端：左侧栏折到正文下方，目录转为顶部折叠条
   ============================================================ */
@media (max-width:1024px){
  .news-side{ position:static; max-height:none; overflow:visible; margin-top:28px }
  /* 移动端把目录放到正文之前，避免用户滑到底才看到 */
  .ns-toc{ order:-1 }
}
@media (max-width:768px){
  .ns-toc ol{ font-size:12.5px; padding:9px 12px 10px 26px }
  .ns-toc li{ margin-bottom:6px }
  .nw-author{ padding:15px 16px; gap:12px }
  .nw-author img{ width:46px; height:46px }
  .nw-cta-box{ padding:22px 20px }
  .nw-cta-line{ font-size:14px; padding:11px 14px }
}

/* ============================================================
   ⑭ 关键修复：让左侧栏 sticky 真正生效
   原因：原模板用 float 布局，.col_lg_6 高度只等于自身内容高度，
        sticky 只能在自身高度内移动，滚动几屏后侧栏就消失了。
   做法：把 .news_box .row 改成 flex，两列自动等高，
        .col_lg_6 被拉伸到与正文同高，sticky 才能全程跟随。
   影响范围：仅 .news_box 内的 .row，不影响其他页面。
   ============================================================ */
@media (min-width:1025px){
  .news_box .row{
    display:flex;
    align-items:stretch;   /* 关键：让左列与右列等高 */
    gap:34px;
  }
  .news_box .row > .col_lg_6,
  .news_box .row > .col_lg_18{
    float:none;            /* 关掉原来的 float */
  }
  .news_box .row > .col_lg_6{
    width:23%; flex:0 0 23%; min-width:0;
  }
  .news_box .row > .col_lg_18{
    width:auto; flex:1 1 auto; min-width:0;
  }
  /* 左列内部再套一层，让 sticky 有可移动空间 */
  .news_box .row > .col_lg_6 > .col_box{
    height:100%;
  }
}

/* ============================================================
   ⑮ 信任标记并入询盘卡底部
   原为独立块，实测左栏三块合计 978px，超过 max-height 会触发
   侧栏内部滚动；并入询盘卡后降到 839px，一屏内完整可见。
   ============================================================ */
.ns-trust-line{
  border-top:1px solid rgba(255,255,255,.15);
  margin:13px -16px 0; padding:11px 16px 0;
  font-size:10.5px; line-height:1.7; color:#9fbcd4; text-align:center;
}
.ns-trust-line b{ color:#d3e5f3; font-weight:700; }

/* ============================================================
   ⑯ 左栏延伸指南（Related guides）
   只放 special，不放同簇 news：专题是「升级阅读」，不跟本文抢读者；
   同簇 news 放在底部 More reading。2 条，3 行内截断。
   ============================================================ */
.ns-guides{
  border:1px solid #e3e9ef; border-radius:8px;
  padding:14px 15px 4px; background:#fff; margin:0 0 14px;
}
.ns-guides-t{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:#8a9aab; font-weight:700; margin:0 0 11px;
}
.ns-guides ol{ list-style:none; margin:0; padding:0; }
.ns-guides li{ margin-bottom:12px; }
.ns-guides a{ display:flex; gap:7px; align-items:flex-start; text-decoration:none; }
.ns-guides a i{
  font-style:normal; flex:none; color:#9aabbb; font-weight:700;
  font-size:10.5px; line-height:1.68;
}
.ns-guides a div{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; font-size:12px; line-height:1.42; color:#1f4e79;
}
.ns-guides a:hover div{ color:#0d2f4f; text-decoration:underline; }

/* ============================================================
   ⑰ 底部相关区
   顺序必须是 CTA → 产品 → 阅读。产品若插到 CTA 之前，
   读者点进产品页就一去不回，主 CTA 白设。
   标题用 div 不用 h2/p，原因见文件开头的标签限制说明。
   ============================================================ */
.nw-rel{ margin:34px 0 0; }
.nw-rel-t{ font-size:16.5px; font-weight:800; color:#12395c; margin:0 0 13px; }
.nw-rel-prod{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin:0 0 26px; }
.nw-rel-prod a{
  display:block; border:1px solid #e3e9ef; border-radius:8px; overflow:hidden;
  text-decoration:none; background:#fff;
}
.nw-rel-prod a:hover{ box-shadow:0 3px 14px rgba(18,57,92,.09); }
.nw-rel-prod img{
  width:100%; height:138px; object-fit:contain; background:#fff; display:block;
}
.nw-rel-prod a > div{
  display:block; padding:9px 11px 11px; font-size:12.5px; line-height:1.4;
  color:#12395c; font-weight:700;
}
.nw-more{ border-top:1px solid #e3e9ef; }
.nw-more a{
  display:flex; gap:12px; align-items:baseline; padding:11px 0;
  border-bottom:1px solid #eef2f6; text-decoration:none;
}
.nw-more a > div{ flex:1 1 auto; min-width:0; font-size:14.5px; color:#1f4e79; line-height:1.5; }
/* 类型标记放行尾右对齐：只有 /projects/ 和 /special/ 才出现，/news/ 不打标 */
.nw-more em{
  flex:none; margin-left:auto; font-style:normal; font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; color:#a8b6c4; font-weight:700;
}
.nw-more a:hover div{ text-decoration:underline; }

@media (max-width:768px){
  .nw-rel-prod{ grid-template-columns:1fr 1fr; gap:10px; }
  .nw-rel-prod img{ height:120px; }
}

/* 案例行：取后台案例的 title + country + product + capacity
   不做图卡：案例首图为 1200x400 拼贴，缩略会糊；产品区已有大图，不重复 */
.nw-case-one{
  display:flex; gap:14px; align-items:flex-start;
  margin:0 0 24px; padding:13px 16px;
  background:#f7fafd; border-left:3px solid #1f4e79; border-radius:0 6px 6px 0;
  text-decoration:none;
}
.nw-case-one:hover{ background:#eef4fa; }
.nw-case-b{ flex:1 1 auto; min-width:0; }
.nw-case-t{
  margin:0 0 5px; font-size:14px; font-weight:700; color:#12395c; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nw-case-m{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:11.5px; color:#7c8fa1; line-height:1.55;
}
.nw-case-s{
  margin:3px 0 0; font-size:11.5px; color:#8a9aab; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nw-case-one em{
  flex:none; padding-top:3px; font-style:normal; font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; color:#7fa3c0; font-weight:700;
}