/* 由 blog/JikGuard_Blog_Detail.html 生成。

   只收录详情页**独有**的两个 <style> 块：该设计稿前 13 个块和列表页
   blog/JikGuard_Blog.html 的 13 个块逐字节相同（字体 base64、排版、导航、页脚），
   已经在 blog.css 里了，所以详情页模板同时引 blog.css + 本文件，
   层叠顺序和设计稿一致（本文件的块在原文档里就排在最后）。
   手工追加的规则放在文件末尾。 */

/* ===== jg-blog-article-detail-styles ===== */
/* JikGuard Blog article detail — companion to the approved blog listing. */
.blog-detail-page{--j-ink:#112A44;--j-muted:#54708C;--j-blue:#017BFF;--j-border:#DFE8F1;--j-soft:#F4F8FD;background:#fff;color:var(--j-ink);overflow:clip}
.blog-detail-page a{transition:color .18s ease,background-color .18s ease,border-color .18s ease}
.blog-detail-page .detail-shell{width:min(1120px,calc(100% - 64px));margin-inline:auto}
.detail-hero{background:linear-gradient(132deg,#F4F8FE 0%,#FBFDFF 63%,#fff 100%);border-bottom:1px solid #E8EEF5;padding:37px 0 58px}
.detail-meta{display:flex;align-items:center;gap:14px;color:#496F98;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.detail-meta-dot{width:3px;height:3px;background:#A8BBD0;border-radius:50%}
.blog-detail-page #article-title{font-family:"Poppins",Inter,system-ui,sans-serif;letter-spacing:-.027em;font-size:clamp(38px,3.6vw,50px);line-height:1.18;max-width:940px;color:#102841;font-weight:600;margin:0 0 19px}
.detail-deck{max-width:795px;color:#557089;font-size:clamp(16px,1.37vw,18px);line-height:1.72;font-weight:400;margin:0}
.detail-cover-section{background:#fff;margin-top:-27px;position:relative;z-index:1}
.detail-cover-shell{width:min(1040px,calc(100% - 64px));margin-inline:auto}
.detail-cover-stage{position:relative;overflow:hidden;border:1px solid #D8E6F4;border-radius:12px;background:#0B3B6C;height:clamp(260px,27vw,370px)}
.detail-cover-stage .detail-cover-art{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.detail-cover-stage .detail-cover-art[hidden]{display:none!important}
.detail-cover-stage .detail-cover-art svg{width:100%;height:100%;display:block}
.detail-reading-section{background:white;padding:65px 0 76px}
.detail-reading-grid{width:min(1120px,calc(100% - 64px));margin:0 auto;display:grid;grid-template-columns:215px minmax(0,1fr);gap:91px}
.detail-toc{min-width:0}
.detail-toc-inner{position:sticky;top:96px;border-left:1px solid var(--j-border);padding:4px 0 0 18px}
.detail-toc-heading{text-transform:uppercase;font-size:11px;letter-spacing:.1em;font-weight:600;color:#7891AA;margin-bottom:20px}
.detail-toc-links{display:grid;gap:3px}
.detail-toc-links a{display:block;padding:10px 12px;margin-left:-19px;border-left:2px solid transparent;font-size:13px;line-height:1.55;font-weight:500;color:#67809B;text-decoration:none}
.detail-toc-links a:hover,.detail-toc-links a.active{color:#017BFF;border-left-color:#017BFF;background:#F4F9FF}
.detail-reader-col{min-width:0;max-width:772px}
.detail-article-content{font-family:"Poppins",Inter,system-ui,sans-serif;color:#3C5670;font-weight:400;font-size:16px;line-height:1.83;overflow-wrap:anywhere}
.detail-article-content p{margin:0 0 23px}
.detail-article-content .opening{font-size:18px;line-height:1.77;color:#173651;font-weight:500;margin:0 0 23px}
.detail-article-content h2{font-size:clamp(24px,2.05vw,29px);line-height:1.38;letter-spacing:-.025em;color:#102841;font-weight:600;margin:49px 0 18px;scroll-margin-top:100px}
.detail-article-content h3{font-size:19px;color:#16334D;line-height:1.4;font-weight:600;margin:29px 0 14px;scroll-margin-top:100px}
.detail-article-content ul,.detail-article-content ol{padding-left:23px;margin:2px 0 28px}
.detail-article-content li{padding-left:3px;margin:0 0 10px}
.detail-article-content li::marker{color:#017BFF}
.detail-article-content a{color:#017BFF;text-decoration-thickness:1px;text-underline-offset:3px}
.detail-pullquote{border-left:3px solid #017BFF;padding:16px 0 17px 25px;color:#214361;font-size:19px;line-height:1.72;font-weight:500;font-style:normal;margin:35px 0 32px;background:none}
.detail-info-table{overflow-x:auto;margin:32px 0 35px;border:1px solid #E0E9F2;border-radius:10px}
.detail-info-table table{width:100%;border-collapse:collapse;min-width:500px;font-size:14px;line-height:1.7}
.detail-info-table th{padding:14px 18px;background:#F2F7FD;text-align:left;color:#20466C;font-weight:600;border-bottom:1px solid #E0E9F2}
.detail-info-table td{padding:15px 18px;border-bottom:1px solid #E0E9F2;vertical-align:top}
.detail-info-table tr:last-child td{border-bottom:0}
.detail-info-table td:first-child{color:#16334D;font-weight:600;width:35%}
.detail-callout{background:#F4F9FE;border-left:3px solid #017BFF;border-radius:0 9px 9px 0;padding:23px 26px;margin:35px 0;color:#395979}
.detail-callout strong{display:block;font-size:14px;font-weight:600;color:#0C4A84;margin-bottom:8px}
.detail-callout p{margin:0}
.detail-more-section{background:#F5F9FD;border-top:1px solid #EBF0F5;padding:64px 0 72px}
.detail-more-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}
.detail-more-heading h2{font-size:27px;line-height:1.35;letter-spacing:-.02em;color:#102841;font-weight:600;margin:0}
.detail-more-heading a{font-weight:700;font-size:13px;color:#017BFF;text-decoration:none;white-space:nowrap}
.detail-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}
.detail-related-card{display:block;padding:27px 28px 26px;background:#fff;border:1px solid #E0E8F1;border-radius:10px;box-shadow:0 2px 10px #153E5F05;text-decoration:none!important;min-height:168px}
.detail-related-card:hover{border-color:#90BEED;box-shadow:0 14px 27px #133F6C12;transform:translateY(-1px)}
.detail-related-label{color:#6E8AA5;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;display:block;margin-bottom:13px}
.detail-related-title{font-size:19px;line-height:1.45;letter-spacing:-.015em;color:#142F49;font-weight:600;display:block;margin-bottom:15px}
.detail-related-arrow{color:#017BFF;font-weight:600;font-size:13px}
.detail-mobile-toc{display:none}
@media(max-width:960px){.detail-reading-grid{grid-template-columns:180px minmax(0,1fr);gap:44px}.detail-hero{padding-top:35px}}
@media(max-width:740px){.blog-detail-page .detail-shell,.detail-cover-shell,.detail-reading-grid{width:min(100% - 36px,600px)}.detail-hero{padding:27px 0 55px}.detail-meta{font-size:10px;gap:10px;margin-bottom:13px}.blog-detail-page #article-title{font-size:clamp(31px,8vw,40px);line-height:1.17;letter-spacing:-.025em;margin-bottom:17px}.detail-deck{font-size:15.5px;line-height:1.7}.detail-cover-section{margin-top:-23px}.detail-cover-stage{height:auto;aspect-ratio:1.8;border-radius:10px}.detail-reading-section{padding:39px 0 55px}.detail-reading-grid{display:block}.detail-toc{display:none}.detail-mobile-toc{display:block;border:1px solid #DFE9F4;border-radius:10px;margin-bottom:30px;background:#F8FBFF}.detail-mobile-toc summary{cursor:pointer;padding:14px 16px;font-size:13px;font-weight:600;color:#345B7E;display:flex;justify-content:space-between}.detail-mobile-toc nav{display:grid;padding:0 16px 14px;gap:11px}.detail-mobile-toc nav a{font-size:13px;color:#436B8E;text-decoration:none}.detail-article-content{font-size:15px;line-height:1.85}.detail-article-content .opening{font-size:17px}.detail-article-content h2{margin:38px 0 16px;font-size:24px}.detail-pullquote{font-size:18px;padding-left:19px;margin:28px 0}.detail-more-section{padding:47px 0 60px}.detail-more-heading h2{font-size:24px}.detail-related-grid{grid-template-columns:1fr;gap:12px}.detail-related-card{padding:22px;min-height:unset}.detail-related-title{font-size:18px}}
@media(max-width:375px){.blog-detail-page .detail-shell,.detail-cover-shell,.detail-reading-grid{width:calc(100% - 30px)}.detail-more-heading{align-items:flex-start;flex-direction:column;gap:9px}}
@media(prefers-reduced-motion:reduce){.blog-detail-page a,.detail-related-card{transition:none!important}}

/* ===== jg-blog-detail-final-cleanup ===== */
/* Editorial cleanup: no redundant breadcrumbs or back links; action arrows share one vector. */
.detail-hero{padding-top:42px}
.detail-reading-section{padding-bottom:61px}
.detail-more-heading .detail-action-link,
.detail-related-arrow{display:inline-flex;align-items:center;gap:8px}
.detail-more-heading .detail-action-link::after,
.detail-related-arrow::after{
  content:"";display:inline-block;width:16px;height:16px;flex:0 0 16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017BFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  transition:transform .18s ease;
}
.detail-more-heading .detail-action-link:hover::after,
.detail-more-heading .detail-action-link:focus-visible::after,
.detail-related-card:hover .detail-related-arrow::after,
.detail-related-card:focus-visible .detail-related-arrow::after{transform:translateX(3px)}
.detail-mobile-chevron{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}
.detail-mobile-chevron svg{width:16px;height:16px;fill:none;stroke:#017BFF;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.detail-mobile-toc[open] .detail-mobile-chevron svg{transform:rotate(180deg)}
@media(max-width:740px){.detail-hero{padding-top:30px}.detail-reading-section{padding-bottom:45px}}
@media(prefers-reduced-motion:reduce){.detail-mobile-chevron svg,.detail-more-heading .detail-action-link::after,.detail-related-arrow::after{transition:none!important}}

/* ============================================================
   以下为手工追加：设计稿里正文是写死的示例 HTML，真实正文来自后台
   （TextPlugin 的富文本 + Bootstrap4Picture 插件），用不到 .opening /
   .detail-pullquote / .detail-info-table / .detail-callout 这些装饰类，
   所以要给裸标签补上等价样式，否则表格无边框、图片会撑破栏宽。
   ============================================================ */

/* 封面：设计稿是内联 SVG（.detail-cover-stage svg 已有填充规则），
   真实文章换成 main_image，给 img 补等价规则。源图都是 700x300，
   比 1040x370 的展示区小，靠 cover 放大，所以不另外请求更大的缩略图。
   无图时露出 .detail-cover-stage 自带的深蓝底，不会是空白。 */
.detail-cover-stage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 富文本里的图片（含 Bootstrap4Picture 插件输出的 img/figure）。
   插件会写死 width/height 属性，只给 max-width 会压扁，必须配 height:auto。 */
.detail-article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 28px auto;
  border-radius: 10px;
}

.detail-article-content figure { margin: 28px 0; }

.detail-article-content figcaption {
  margin-top: 10px;
  color: #6E8AA5;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* 后台插入的 iframe（视频等）不会带响应式包裹 */
.detail-article-content iframe {
  max-width: 100%;
  border: 0;
}

/* 裸 <table>：设计稿的表格外面有 .detail-info-table 负责边框和横向滚动，
   富文本里没有这层包裹，所以把那套样式复刻到表格自身。

   :not(.detail-info-table *) 是必需的 —— 这几条和设计稿里 .detail-info-table table
   那几条特指度相同，而本文件排在后面，不排除的话会连带给包着的表格再加一层边框
   和外边距，表格底部会多出一条空白。 */
.detail-article-content table:not(.detail-info-table *) {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0 35px;
  font-size: 14px;
  line-height: 1.7;
  border: 1px solid #E0E9F2;
  border-radius: 10px;
}

.detail-article-content th:not(.detail-info-table *) {
  padding: 14px 18px;
  background: #F2F7FD;
  text-align: left;
  color: #20466C;
  font-weight: 600;
  border-bottom: 1px solid #E0E9F2;
}

.detail-article-content td:not(.detail-info-table *) {
  padding: 15px 18px;
  border-bottom: 1px solid #E0E9F2;
  vertical-align: top;
}

.detail-article-content tr:last-child td:not(.detail-info-table *) { border-bottom: 0; }

/* 裸 <blockquote>：同 .detail-pullquote */
.detail-article-content blockquote:not([class]) {
  border-left: 3px solid #017BFF;
  padding: 16px 0 17px 25px;
  color: #214361;
  font-size: 19px;
  line-height: 1.72;
  font-weight: 500;
  margin: 35px 0 32px;
}

/* 设计稿正文只用到 h2/h3，富文本里可能出现更深的层级 */
.detail-article-content h4 {
  font-size: 17px;
  color: #16334D;
  line-height: 1.45;
  font-weight: 600;
  margin: 24px 0 12px;
  scroll-margin-top: 100px;
}

.detail-article-content pre {
  overflow-x: auto;
  background: #F4F8FD;
  border: 1px solid #E0E9F2;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 28px 0;
  font-size: 13.5px;
  line-height: 1.7;
}

.detail-article-content code {
  font-size: .92em;
  background: #F2F7FD;
  border-radius: 4px;
  padding: 1px 5px;
}

.detail-article-content pre code { background: none; padding: 0; }

/* 目录层级缩进。data-depth 由 blog-detail.js 按"文章里最浅的那级"算出来，
   不是按标签名定的，所以整篇只有 h3 的文章不会平白缩进一格。 */
.detail-toc-links a[data-depth="1"] { padding-left: 25px; }
.detail-toc-links a[data-depth="2"] { padding-left: 38px; }
.detail-mobile-toc nav a[data-depth="1"] { padding-left: 13px; }
.detail-mobile-toc nav a[data-depth="2"] { padding-left: 26px; }

/* 正文一个小标题都没有时（短文、纯图文），目录区只剩"On this page"一个标题，
   由 blog-detail.js 给外层网格加 is-empty。

   注意类是加在 .detail-reading-grid 上而不是直接 display:none 掉 .detail-toc：
   网格是 215px + 1fr 两列，把第一个格子藏掉的话正文会顶上去占那 215px 的窄列。
   这里要连列定义一起改成单列。 */
/* 只清空目录栏的内容，列定义不动 —— 改成单列的话正文会整体左移，有目录和没目录
   的文章排版对不齐。手机端那个折叠目录没有占位问题，直接收起。 */
.detail-reading-grid.is-empty .detail-toc-inner,
.detail-reading-grid.is-empty .detail-mobile-toc { display: none; }

/* 标签行。设计稿里没有标签这个概念，但 v1 详情页有、链接也是实在的
   （/blog/tag/<slug>/），v2 不能把它们丢掉，所以在正文末尾补一行，
   配色沿用 .detail-meta / .detail-related-label 那套。 */
.detail-article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid #E4EBF3;
}

.detail-article-tags b {
  color: #6E8AA5;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-right: 3px;
}

.detail-article-tags a {
  display: inline-flex;
  align-items: center;
  height: 29px;
  padding: 0 13px;
  border: 1px solid #DCE7F2;
  border-radius: 999px;
  background: #F7FAFE;
  color: #39597A;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.detail-article-tags a:hover {
  border-color: #90BEED;
  background: #EEF6FF;
  color: #017BFF;
}