/* 智觉官网 · 文章页版式（受控页专用）
   2026-08-30 新增。原则：不动全站 style.css（风险隔离），
   仅作用于 .zj-article / .zj-crumb / .rel-box 范围内。
*/

/* ── 阅读容器：760px，中文最佳阅读宽度 ── */
.zj-article{max-width:760px;margin:0 auto;padding:0 24px}
.zj-article>*:first-child{margin-top:0}

/* ── 文章头部元信息（作者/日期/分类，从正文提取，不重复显示） ── */
.zj-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:0 0 20px;margin:0 0 30px;border-bottom:1px solid #e7e3da;font-size:13px;color:#5f5e5a}
.zj-meta .zm-item{display:inline-flex;align-items:center;gap:5px}
.zj-meta .zm-item b{font-weight:600;color:#16202b}
.zj-meta .zm-tag{padding:3px 11px;border-radius:20px;background:#e1f5ee;color:#0b5340;font-size:12px;font-weight:600;letter-spacing:.3px}

/* ── 正文排版：可读性优先 ── */
.zj-article p{font-size:16px;line-height:1.95;color:#2b2b2b;margin:0 0 20px;letter-spacing:.2px}
.zj-article p:last-child{margin-bottom:0}

/* ── 标题层级：h2 左侧色条，段落间距拉开 ── */
.zj-article h2{font-size:23px;font-weight:700;color:#16202b;line-height:1.45;margin:46px 0 18px;padding-left:14px;border-left:4px solid #0f6e56;letter-spacing:-.3px}
.zj-article h3{font-size:18px;font-weight:700;color:#16202b;line-height:1.5;margin:32px 0 12px;letter-spacing:-.2px}
.zj-article h2:first-of-type{margin-top:4px}

/* ── 列表 ── */
.zj-article ul,.zj-article ol{margin:0 0 22px;padding-left:24px}
.zj-article li{font-size:16px;line-height:1.9;color:#2b2b2b;margin-bottom:10px;padding-left:2px}
.zj-article li:last-child{margin-bottom:0}
.zj-article ul>li::marker{color:#0f6e56}

/* ── 表格：干货的核心呈现 ── */
.zj-article .zj-table{width:100%;border-collapse:separate;border-spacing:0;margin:26px 0 30px;font-size:14.5px;line-height:1.7;border:1px solid #e7e3da;border-radius:12px;overflow:hidden}
.zj-article .zj-table th{background:#e1f5ee;color:#0b5340;font-weight:700;text-align:left;padding:13px 16px;font-size:14px;border-bottom:1px solid #cfe6dd;white-space:nowrap}
.zj-article .zj-table td{padding:13px 16px;color:#3a3a3a;border-bottom:1px solid #f0ede6;vertical-align:top}
.zj-article .zj-table tr:last-child td{border-bottom:0}
.zj-article .zj-table tr:nth-child(even) td{background:#fcfbf8}
.zj-article .zj-table th:first-child{border-top-left-radius:12px}
.zj-article .zj-table th:last-child{border-top-right-radius:12px}

/* ── 内链：可辨识但不刺眼，配合权重流转 ── */
.zj-article a{color:#0b5340;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(15,110,86,.35);border-radius:3px;transition:color .18s,text-decoration-color .18s,background .18s}
.zj-article a:hover{color:#c41230;text-decoration-color:rgba(196,18,48,.55);background:rgba(196,18,48,.05)}

/* ── 面包屑（可见导航，补齐站内路径） ── */
.zj-crumb{background:#f6f4ef;border-bottom:1px solid #e7e3da}
.zj-crumb .container{max-width:1200px;margin:0 auto;padding:0 24px;font-size:12.5px;color:#8a8780;display:flex;align-items:center;gap:8px;height:42px}
.zj-crumb a{color:#5f5e5a;text-decoration:none;transition:color .18s}
.zj-crumb a:hover{color:#0f6e56}
.zj-crumb .zc-sep{color:#c9c6bd}
.zj-crumb .zc-cur{color:#16202b;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 相关阅读：卡片网格（原为裸链接） ── */
.rel-box{max-width:760px;margin:56px auto 0;padding:0 24px}
.rel-box>h2{font-size:19px;font-weight:700;color:#16202b;margin:0 0 18px;padding-left:12px;border-left:4px solid #0f6e56;letter-spacing:-.2px}
.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.rel-box .rel-link{display:block;padding:16px 18px;background:#fff;border:1px solid #e7e3da;border-radius:12px;font-size:14.5px;font-weight:600;color:#16202b;line-height:1.5;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s,color .15s}
.rel-box .rel-link:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(22,32,43,.08);border-color:#0f6e56;color:#0b5340}
.rel-empty{font-size:13.5px;color:#8a8780;padding:12px 0}

/* ── 移动端 ── */
@media(max-width:640px){
  .zj-article{padding:0 18px}
  .zj-article p{font-size:15.5px;line-height:1.9}
  .zj-article h2{font-size:20px;margin:34px 0 14px}
  .zj-article h3{font-size:17px}
  .zj-article li{font-size:15.5px}
  .rel-grid{grid-template-columns:1fr}
  .rel-box{padding:0 18px;margin-top:40px}
  .zj-crumb .container{padding:0 18px;height:38px}
}

/* ══════════ 干货呈现组件 ══════════
   全部纯 CSS + 原生 <details> 实现，零 JavaScript ——
   站点 CSP 为「零外链、零内联脚本」基线，任何 JS 折叠/交互都会破坏该基线。
   内容源写法见仓库根《文章干货组件规范.md》。
   ══════════════════════════════════ */

/* ── 组件1：关键数据卡（数字墙） ── */
.zj-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px;margin:28px 0 32px}
.zj-stat{background:#fff;border:1px solid #e7e3da;border-radius:12px;padding:18px 14px;text-align:center}
.zj-stat .zv{display:block;font-size:27px;font-weight:800;color:#0b5340;line-height:1.15;letter-spacing:-.5px}
.zj-stat .zv small{font-size:14px;font-weight:700;margin-left:1px}
.zj-stat .zl{display:block;font-size:12.5px;color:#5f5e5a;margin-top:7px;line-height:1.5}

/* ── 组件2：要点框（结论/提示/警示） ── */
.zj-note{border-radius:12px;padding:16px 20px;margin:24px 0;border:1px solid;font-size:15px;line-height:1.85}
.zj-note .zn-t{display:block;font-weight:700;font-size:14px;margin-bottom:6px;letter-spacing:.3px}
.zj-note p{margin:0;font-size:15px;line-height:1.85}
.zj-note p+p{margin-top:10px}
.zj-note--key{background:#e1f5ee;border-color:#b8e0d2;color:#0b5340}
.zj-note--key .zn-t{color:#0b5340}
.zj-note--info{background:#eef4fb;border-color:#d3e2f2;color:#1b4a6b}
.zj-note--info .zn-t{color:#1b4a6b}
.zj-note--warn{background:#fdf3e7;border-color:#f2ddbd;color:#7a4f10}
.zj-note--warn .zn-t{color:#7a4f10}

/* ── 组件3：步骤流程（自动编号 + 连接线） ── */
.zj-steps{counter-reset:zjstep;margin:26px 0 30px;padding:0;list-style:none}
.zj-steps>li{counter-increment:zjstep;position:relative;padding:0 0 20px 44px;font-size:15.5px;line-height:1.85;color:#2b2b2b}
.zj-steps>li::before{content:counter(zjstep);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;background:#0f6e56;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.zj-steps>li:not(:last-child)::after{content:"";position:absolute;left:13.5px;top:32px;bottom:2px;width:1.5px;background:#d7ece4}
.zj-steps>li b{color:#16202b}

/* ── 组件4：判断清单（适合 / 不适合） ── */
.zj-check{list-style:none;margin:18px 0 26px;padding:0}
.zj-check>li{position:relative;padding:8px 0 8px 32px;font-size:15.5px;line-height:1.85;color:#2b2b2b}
.zj-check>li::before{content:"✓";position:absolute;left:0;top:8px;width:21px;height:21px;border-radius:50%;background:#e1f5ee;color:#0b5340;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.zj-check--no>li::before{content:"✕";background:#fcebeb;color:#a32d2d}

/* ── 组件5：结论条（一句话定调） ── */
.zj-verdict{background:#16202b;color:#e8edf2;border-radius:14px;padding:20px 24px;margin:30px 0;font-size:15.5px;line-height:1.9}
.zj-verdict .zv-t{display:block;font-size:12.5px;font-weight:700;letter-spacing:1.5px;color:#16b89a;margin-bottom:8px}
.zj-verdict b{color:#16b89a}
.zj-verdict a{color:#16b89a;text-decoration:underline;text-underline-offset:3px}

/* ── 组件6：FAQ 折叠（原生 details，零 JS） ── */
.zj-faq{border:1px solid #e7e3da;border-radius:12px;margin:12px 0;background:#fff;overflow:hidden}
.zj-faq>summary{cursor:pointer;padding:14px 18px;font-size:15.5px;font-weight:600;color:#16202b;list-style:none;display:flex;align-items:center;gap:10px;transition:background .15s}
.zj-faq>summary::-webkit-details-marker{display:none}
.zj-faq>summary::after{content:"+";margin-left:auto;font-size:19px;font-weight:400;color:#0f6e56;line-height:1}
.zj-faq[open]>summary::after{content:"−"}
.zj-faq>summary:hover{background:#faf8f4}
.zj-faq-a{padding:0 18px 16px;font-size:15px;line-height:1.9;color:#3a3a3a}

/* ── 干货组件：移动端适配 ── */
@media(max-width:640px){
  .zj-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .zj-stat{padding:14px 10px}
  .zj-stat .zv{font-size:22px}
  .zj-note{padding:14px 16px;font-size:14.5px}
  .zj-note p{font-size:14.5px}
  .zj-steps>li{padding-left:38px;font-size:15px}
  .zj-verdict{padding:16px 18px;font-size:15px}
  .zj-faq>summary{padding:12px 15px;font-size:15px}
}

/* ── 配图：图片容器 / 响应式 / 图注 ──
   图片为 webp 三档（480/800/1200），内容源用 <figure class="zj-figure">
   配 srcset + sizes；width/height 已写入，避免布局抖动（CLS）。
   图片放 site/assets/images/cases/，命名规则：场景-项目-前后状态。 */
.zj-figure{margin:28px 0 32px}
.zj-figure img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid #e7e3da;background:#f6f4ef}
.zj-figure figcaption{margin-top:10px;font-size:13px;color:#5f5e5a;line-height:1.65;text-align:center;padding:0 8px}
@media(max-width:640px){
  .zj-figure{margin:20px 0 24px}
  .zj-figure figcaption{font-size:12.5px}
}