/* ============================================================
   文章详情页（方案 G，作用域 .article-detail-g，类名前缀 .ad-）
   设计稿：docs/preview/ai-images/二级页-G风格/5-文章详情.png
   公共结构（页头、两栏、侧栏卡、目录、推广卡、.pg-prose 基础排版）在 page-g.css，
   这里只写本页专属：正文卡、正文细节排版、上一篇下一篇、侧栏高度控制、手机适配。
   ============================================================ */

/* 页头下方第一段：上下留白收窄，正文卡紧跟页头 */
.article-detail-g .artd-section { padding: 24px 0 72px; }
.article-detail-g .pg-hero--slim .pg-hero-copy h1 { max-width: 640px; }
.article-detail-g .pg-hero-meta a { color: inherit; transition: color .15s; }
.article-detail-g .pg-hero-meta a:hover { color: #fff; }
/* 信息行（分类 · 日期 · 阅读时长 · 浏览）折行时，分隔点不能落在第二行开头：
   每项不拆行，每项前面都挂一个点（第一项也挂）；整行往左多伸出「点 + 两侧间距」那么宽，再用 clip-path 把这段裁掉，
   于是每行开头那一项的点正好落在被裁掉的区域里，行中间的点照常显示，第一行的位置和原来一样。
   点的宽度固定成 .28125em（15px 下 4.22px，和原来的字形宽度一致），换字体时左缘也能对齐 */
.article-detail-g .pg-hero-meta {
  margin-left: calc(-20px - .28125em);
  clip-path: inset(-6px -6px -6px calc(20px + .28125em));
}
.article-detail-g .pg-hero-meta > * { white-space: nowrap; }
.article-detail-g .pg-hero-meta > *::before {
  content: "·";
  display: inline-block;
  width: .28125em;
  margin: 0 10px;
  text-align: center;
  color: rgba(255, 255, 255, .6);
}

/* ── 正文卡 ── */
.article-detail-g .artd-card { padding: 36px 40px 32px; }
.article-detail-g .artd-cover { margin-bottom: 28px; }
.article-detail-g .artd-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 620;
  object-fit: cover;
  border-radius: 16px;
  background: var(--g-bg-blue);
}

/* ── 正文排版（方案 A「清爽阅读」，2026-10-26 用户拍板；在 .pg-prose 基础上细化）──
   只用 CSS 改观感，不改正文 HTML、不加任何文字；h2 小方块是 h2 内部的绝对定位伪元素，不影响锚点位置
   （h2 / h3 的 scroll-margin-top 在 page-g.css 的 .pg-prose，目录跳转不会被固定导航挡住） */
.article-detail-g .artd-body { font-size: 17px; line-height: 1.85; color: #374151; }
.article-detail-g .artd-body > * + * { margin-top: 1.15em; }
.article-detail-g .artd-body p { color: inherit; } /* 盖掉 .pg-card p 的次要灰 */
.article-detail-g .artd-body > p:first-child { font-size: 17.5px; color: #1F2937; }
.article-detail-g .artd-body > :first-child,
.article-detail-g .artd-body > [style*="display: none"]:first-child + * { margin-top: 0; }

/* 标题：h2 前一个 12px 圆角小蓝块（不是左边框竖条），上方拉开间距；h3 深蓝 */
.article-detail-g .artd-body h2 { position: relative; margin-top: 2.3em; padding-left: 24px; font-size: 23px; line-height: 1.45; font-weight: 800; color: #111827; }
.article-detail-g .artd-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(.725em - 6px);
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, #60A5FA, #2563EB);
  box-shadow: 0 0 0 4px #DBEAFE;
}
.article-detail-g .artd-body h3 { margin-top: 1.8em; font-size: 18px; line-height: 1.5; font-weight: 700; color: #1D4ED8; }
.article-detail-g .artd-body h4 { margin-top: 1.3em; font-size: 17px; font-weight: 700; color: var(--g-title); }
.article-detail-g .artd-body h2 + *,
.article-detail-g .artd-body h3 + *,
.article-detail-g .artd-body h4 + * { margin-top: .7em; }

/* 列表：ul 蓝色小圆点，ol 蓝色圆形数字（按每个 ol 重新计数） */
.article-detail-g .artd-body ul,
.article-detail-g .artd-body ol { padding-left: 0; list-style: none; }
.article-detail-g .artd-body li + li { margin-top: .5em; }
.article-detail-g .artd-body li > ul,
.article-detail-g .artd-body li > ol { margin-top: .5em; }
.article-detail-g .artd-body ul > li { position: relative; padding-left: 22px; }
.article-detail-g .artd-body ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(.925em - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3B82F6;
}
.article-detail-g .artd-body ol { counter-reset: artd-ol; }
.article-detail-g .artd-body ol > li { position: relative; padding-left: 38px; counter-increment: artd-ol; }
.article-detail-g .artd-body ol > li::before {
  content: counter(artd-ol);
  position: absolute;
  left: 0;
  top: calc(.925em - 12px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  color: #fff;
  background: #2563EB;
}

/* 加粗：淡蓝荧光下划线，折行时每行都带 */
.article-detail-g .artd-body strong,
.article-detail-g .artd-body b {
  padding: 0 1px;
  font-weight: 700;
  color: #111827;
  background: linear-gradient(transparent 62%, #DBEAFE 62%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 图片：16px 圆角 + 浅描边 + 轻阴影，居中 */
.article-detail-g .artd-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 6px auto 4px;
  border: 1px solid #E5EAF3;
  border-radius: 16px;
  background: #F5F9FF;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}
.article-detail-g .artd-body figure { margin-left: 0; margin-right: 0; }
.article-detail-g .artd-body figcaption { margin-top: 8px; font-size: 14px; color: var(--g-muted); text-align: center; }
.article-detail-g .artd-body hr { height: 1px; border: 0; background: var(--g-line); }
.article-detail-g .artd-body a { word-break: break-all; }

/* 提示类引用：浅蓝整块底 + 左侧圆形「i」，不用左竖条 */
.article-detail-g .artd-body blockquote {
  position: relative;
  padding: 14px 18px 14px 50px;
  border: 0;
  border-radius: 14px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--g-blue-darker);
  background: var(--g-bg-blue);
}
.article-detail-g .artd-body blockquote::before {
  content: "i";
  position: absolute;
  left: 18px;
  top: 17px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font: 700 13px/20px Georgia, "Times New Roman", serif;
  text-align: center;
  color: #fff;
  background: var(--g-blue);
}
.article-detail-g .artd-body blockquote > * + * { margin-top: .5em; }
.article-detail-g .artd-body blockquote strong { color: inherit; }

/* 官方说明：控制器在正文第一段后注入的 p.art-official-note。浅蓝卡 + 左侧盾牌勾图标（lucide shield-check，
   URL 编码的 SVG 作遮罩），图标和首行文字垂直居中对齐；不加文字标签、不用左竖条，原文一字不改 */
.article-detail-g .artd-body .art-official-note {
  position: relative;
  margin: 24px 0;
  padding: 14px 18px 14px 46px;
  border: 1px solid #DBEAFE;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.8;
  color: #1F2937;
  background: linear-gradient(180deg, #F5F9FF, #EEF5FF);
}
.article-detail-g .artd-body .art-official-note::before {
  content: "";
  position: absolute;
  left: 18px;
  top: calc(14px + .9em - 8px);
  width: 16px;
  height: 16px;
  background: #2563EB;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 代码：行内浅灰底圆角 */
.article-detail-g .artd-body code { padding: .12em .42em; border-radius: 6px; font-size: .9em; color: #0F172A; background: #F1F5F9; word-break: normal; overflow-wrap: anywhere; } /* 一行放不下才断，优先在空格处断，不从单词中间切 */
.article-detail-g .artd-body pre {
  overflow-x: auto;
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  background: #F1F5F9;
}
.article-detail-g .artd-body pre code { padding: 0; color: var(--g-text); background: none; word-break: normal; overflow-wrap: normal; white-space: pre; }

/* 表格：脚本把正文 table 加上 .pg-table 并包进 .pg-table-wrap（底座：overflow-x 横向滑动）；
   本页：圆角容器 + 轻阴影、表头浅蓝、斑马纹、单元格靠左便于读长句 */
.article-detail-g .artd-body .pg-table-wrap { margin-top: 1.4em; border: 1px solid #E5EAF3; border-radius: 16px; box-shadow: 0 6px 20px rgba(15, 23, 42, .05); }
.article-detail-g .artd-body .pg-table { min-width: 560px; margin: 0; font-size: 15px; line-height: 1.65; }
.article-detail-g .artd-body .pg-table th,
.article-detail-g .artd-body .pg-table td { padding: 12px 16px; text-align: left; vertical-align: top; }
.article-detail-g .artd-body .pg-table td { color: #374151; }
.article-detail-g .artd-body .pg-table th,
.article-detail-g .artd-body .pg-table thead td {
  white-space: nowrap; /* 表头不逐字折行，列多时整表横向滑动 */
  font-weight: 700;
  color: #1E3A8A;
  background: #EFF6FF;
}
.article-detail-g .artd-body .pg-table tbody tr:nth-child(even) td { background: #F8FAFC; }
.article-detail-g .artd-body .pg-table tbody tr:last-child td { border-bottom: 0; }
.article-detail-g .artd-body .pg-table strong,
.article-detail-g .artd-body .pg-table b { background: none; }

/* ── 上一篇 / 下一篇 ── */
.article-detail-g .artd-pn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid #F1F5F9;
}
.article-detail-g .artd-pn-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--g-line);
  border-radius: 16px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.article-detail-g a.artd-pn-item:hover {
  border-color: var(--g-bg-blue-2);
  box-shadow: var(--g-shadow-sm);
  transform: translateY(-2px);
}
.article-detail-g .artd-pn-empty { border-style: dashed; background: transparent; }
.article-detail-g .artd-pn.is-single .artd-pn-empty { visibility: hidden; }
.article-detail-g .artd-pn-item img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--g-bg-blue);
}
.article-detail-g .artd-pn-item svg.lucide { width: 18px; height: 18px; color: var(--g-muted); }
/* 相关教程的日期：底座 .pg-mini-post time 是 #9CA3AF（白底 2.54:1），本页压到 #6B7280（4.8:1） */
.article-detail-g .pg-mini-post time { color: var(--g-muted); }
.article-detail-g a.artd-pn-item:hover svg.lucide { color: var(--g-blue-deep); }
.article-detail-g .artd-pn-text { flex: 1 1 auto; min-width: 0; }
.article-detail-g .artd-pn-text small { display: block; font-size: 13px; color: var(--g-muted); }
.article-detail-g .artd-pn-text b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--g-title);
  transition: color .15s;
}
.article-detail-g a.artd-pn-item:hover b { color: var(--g-blue-deep); }

/* ── 侧栏：底座 .pg-aside 整列吸顶；三张卡加起来常比屏幕高，吸顶后推广卡底部会永远看不到。
   这里把侧栏限高为一屏，空间不够时只压缩「文章目录」（目录自己内部滚动，脚本会把当前项滚进可视区）；
   屏幕很矮时再收起「相关教程」，保证推广卡完整可见 ── */
@media (min-width: 961px) {
  .article-detail-g .artd-aside {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--pg-nav-h) - 36px);
  }
  .article-detail-g .artd-aside > * { flex: none; }
  .article-detail-g .artd-toc-card {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 150px;
  }
  .article-detail-g .artd-toc { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* 目录被压矮、下面还有项时底部渐隐，提示可以滚（is-more 由脚本切换） */
  .article-detail-g .artd-toc.is-more {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  }
}
@media (min-width: 961px) and (max-height: 860px) {
  .article-detail-g .artd-related { display: none; }
}

/* ============ 响应式 ============ */
@media (max-width: 960px) {
  .article-detail-g .artd-section { padding: 16px 0 56px; }
  .article-detail-g .artd-card { padding: 28px 28px 26px; }
  /* 单栏时侧栏排在正文后面，目录已经失去导航意义，只保留相关教程和推广卡 */
  .article-detail-g .artd-toc-card { display: none; }
  .article-detail-g .artd-aside { position: static; }
}
@media (max-width: 640px) {
  .article-detail-g .artd-section { padding: 12px 0 44px; }
  .article-detail-g .pg-layout { gap: 16px; }
  .article-detail-g .artd-card { padding: 22px 18px 20px; border-radius: 20px; }
  .article-detail-g .artd-cover { margin-bottom: 20px; }
  .article-detail-g .artd-cover img,
  .article-detail-g .artd-body img { border-radius: 12px; }
  .article-detail-g .artd-body { font-size: 16.5px; }
  .article-detail-g .artd-body > p:first-child { font-size: 17px; }
  .article-detail-g .artd-body h2 { padding-left: 22px; font-size: 20px; }
  .article-detail-g .artd-body h3 { font-size: 17px; }
  .article-detail-g .artd-body .pg-table { min-width: 520px; font-size: 14px; }
  .article-detail-g .artd-body .pg-table th,
  .article-detail-g .artd-body .pg-table td { padding: 9px 12px; }
  .article-detail-g .artd-pn { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; padding-top: 22px; }
  .article-detail-g .artd-pn-empty { display: none; }
  .article-detail-g .artd-pn-item img { width: 52px; height: 52px; }
}

/* ============ 动效（2026-10-25）：只动 transform / opacity / box-shadow / color / background ============
   悬停 0.22s、缓动 cubic-bezier(.2,.7,.2,1)；卡片上浮 4px；缩略图放大 1.04；卡片里 3D 图标放大 1.06。
   进场 data-reveal 只挂在文末上一篇下一篇、相关教程、推广卡上（规则在 page-g.css）；正文、标题、封面、目录卡不加。 */

/* 目录：当前项颜色 + 浅底平滑过渡，左侧圆点只用 transform 放大，不改尺寸和位置 */
.article-detail-g .artd-toc a {
  padding-right: 10px;
  border-radius: 10px;
  transition: color .22s cubic-bezier(.2,.7,.2,1), background-color .22s cubic-bezier(.2,.7,.2,1);
}
.article-detail-g .artd-toc a::before {
  transition: transform .22s cubic-bezier(.2,.7,.2,1), background-color .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s cubic-bezier(.2,.7,.2,1);
}
.article-detail-g .artd-toc a:hover { background-color: #F5F9FF; }
.article-detail-g .artd-toc a.is-active { background-color: var(--g-bg-blue); }
/* 覆盖底座「改尺寸放大」的写法：圆点保持 8px，原位置放大 1.5 倍（12px），光圈 2.7px × 1.5 ≈ 4px */
.article-detail-g .artd-toc a.is-active::before {
  left: 2px;
  top: 15px;
  width: 8px;
  height: 8px;
  background: var(--g-blue);
  transform: scale(1.5);
  box-shadow: 0 0 0 2.7px var(--g-bg-blue-2);
}

/* 上一篇 / 下一篇：上浮 4px + 蓝色柔阴影，缩略图放大 1.04 */
.article-detail-g .artd-pn-item {
  transition: border-color .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s cubic-bezier(.2,.7,.2,1), transform .22s cubic-bezier(.2,.7,.2,1);
}
.article-detail-g a.artd-pn-item:hover {
  box-shadow: 0 16px 40px rgba(37, 99, 235, .12);
  transform: translateY(-4px);
}
.article-detail-g .artd-pn-item img,
.article-detail-g .artd-related .pg-mini-post img,
.article-detail-g .artd-promo .pg-promo-art {
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
.article-detail-g a.artd-pn-item:hover img { transform: scale(1.04); }
.article-detail-g .artd-pn-text b,
.article-detail-g a.artd-pn-item svg.lucide,
.article-detail-g .pg-mini-post b { transition: color .22s cubic-bezier(.2,.7,.2,1); }

/* 相关教程：每条做成可上浮的小卡；左右各让出 10px 内边距、再用负外边距抵掉，静止时文字位置不变 */
.article-detail-g .artd-related .pg-mini-post {
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 14px;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s cubic-bezier(.2,.7,.2,1), background-color .22s cubic-bezier(.2,.7,.2,1);
}
.article-detail-g .artd-related .pg-mini-post:hover {
  background-color: #fff;
  box-shadow: 0 16px 40px rgba(37, 99, 235, .12);
  transform: translateY(-4px);
}
.article-detail-g .artd-related .pg-mini-post:hover img { transform: scale(1.04); }

/* 推广卡：悬停时 3D 图标放大 1.06（按钮的动效走全站 .pg-btn） */
.article-detail-g .artd-promo:hover .pg-promo-art { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .article-detail-g a.artd-pn-item:hover,
  .article-detail-g .artd-related .pg-mini-post:hover,
  .article-detail-g a.artd-pn-item:hover img,
  .article-detail-g .artd-related .pg-mini-post:hover img,
  .article-detail-g .artd-promo:hover .pg-promo-art { transform: none; }
}

/* 图片骨架屏（A 扫光）：变量、动画、失败占位在 page-g.css 末尾。
   正文图片只给带 width 的（后端补了宽高、浏览器能按比例先占位的）加，没宽高的老图片保持原样；height:auto 不能改 */
.article-detail-g .artd-pn-item img:not(.is-sk-done),
.article-detail-g .artd-body img[width]:not(.is-sk-done) {
  background: var(--sk-shine) 150% 0 / 200% 100% no-repeat, var(--sk-icon) center / 40px auto no-repeat, var(--sk-bg);
  animation: sk-shimmer 1.5s linear infinite;
}
.article-detail-g .artd-pn-item img:not(.is-sk-done) { background-size: 200% 100%, 22px auto; }
.article-detail-g .artd-pn-item .sk-fail { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 10px; }
.article-detail-g .artd-body .sk-fail { height: auto; max-width: 100%; margin: 6px auto 4px; border: 1px solid #E5EAF3; border-radius: 16px; }
@media (max-width: 640px) {
  .article-detail-g .artd-pn-item .sk-fail { width: 52px; height: 52px; }
  .article-detail-g .artd-body .sk-fail { border-radius: 12px; }
}