/* ═══════════════════════════════════════════════════════════════
   BLOG — 文章详情页与 CMS 草稿预览页共用样式。

   版式与视觉参数完全对齐站内长文页（/use-cases/massage-studio，
   即 home-redesign.css 的 .ucs* 体系）：同一套 --c-* / --db-* 令牌、
   同一条 760px 阅读栏、同样的字号阶梯与留白节奏。blog 只补这套体系里
   没有的三样东西：Markdown 正文排版、右侧目录、预览页状态位。

   为什么正文用元素选择器而不是给每个节点挂类名：
   正文来自 CMS 的 Markdown，详情页在构建期渲染、预览页在浏览器里渲染，
   两边都只能拿到 <h2>/<p>/<ul> 这类裸标签。若依赖逐个加类名，预览页
   就对不上，「预览和线上长得一样」这个前提会失效。

   作用域：所有规则写在 .db-home 之下（bodyClass 传入），与站内其余
   深色主题页面互不干扰。由 BaseLayout 的 styles 属性按需引入。

   ⚠️ 改这里的数值前先看一眼 home-redesign.css 的 .ucs-* 段落，
      两边一旦漂移，文章页和案例页就会长成两样。
   ═══════════════════════════════════════════════════════════════ */

/* ── 页面氛围：与案例文章页（db-ucs）同一组暖色柔光 ───────────
   正文只有 760px，两侧留白很大，光斑压在 body 背景上不参与前景层叠，
   因此不影响文字对比度。background-attachment: fixed 让它随视口固定。 */
body.db-home.db-blog {
  background-image:
    radial-gradient(780px 900px at 5% 40%, rgba(255, 122, 26, 0.26), transparent 62%),
    radial-gradient(740px 860px at 96% 64%, rgba(232, 72, 28, 0.2), transparent 62%),
    radial-gradient(620px 620px at 88% 0%, rgba(255, 170, 64, 0.18), transparent 66%),
    radial-gradient(620px 620px at 8% 100%, rgba(47, 92, 255, 0.08), transparent 66%),
    radial-gradient(1200px 600px at 70% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* 窄屏正文几乎占满宽度，光斑同尺寸会糊满整屏：缩小并压淡 */
@media (max-width: 900px) {
  body.db-home.db-blog {
    background-image:
      radial-gradient(420px 540px at 0% 20%, rgba(255, 122, 26, 0.16), transparent 64%),
      radial-gradient(400px 520px at 100% 74%, rgba(232, 72, 28, 0.13), transparent 64%),
      radial-gradient(1200px 600px at 70% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%);
  }
}

/* ═══════════════════════════════════════════════════════════════
   文章区块的上下留白

   坑：home-redesign.css 里的规则是 `.db-home section.blk { padding: 86px 0 }`,
   元素选择器限定了 section。文章页的容器是 <article class="blk ucs">，
   匹配不上，上下 padding 实际为 0 —— 标题会紧贴导航，正文会紧贴页脚。
   过去底部靠文末 CTA 的 margin-bottom: 78px 撑着，CTA 一删就塌了。

   这里按 §4 规范的区块间距 86px 显式补上，不依赖任何子元素的外边距。
   ═══════════════════════════════════════════════════════════════ */
.db-home.db-blog article.blk {
  padding: 86px 0;
}
@media (max-width: 820px) {
  .db-home.db-blog article.blk {
    padding: 58px 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Markdown 正文排版
   容器 .blg-body 与 .ucs-body 同一条 760px 阅读栏（宽度沿用 .ucs-body），
   这里只负责栏内的元素样式。
   ═══════════════════════════════════════════════════════════════ */
.db-home .blg-body {
  /* .db-home h1~h3 与 p 的 margin 被全局归零，正文里的间距全部自己给 */
  color: var(--c-text-body);
  font-size: 16.5px;
  line-height: 1.85;
  /**
   * 正文与头部（署名行 / 封面图）之间的间距。
   * 下面 `> :first-child { margin-top: 0 }` 把首个子元素的上边距归零，
   * 若这里不给，正文会直接贴在封面图或署名行下沿。
   * 取 40px：比正文内配图的 32px 大一档，明确「头部结束、正文开始」。
   */
  margin-top: 40px;
}
.db-home .blg-body > :first-child {
  margin-top: 0;
}

/* ── 标题 ───────────────────────────────────────────────────── */
/* h2 尺寸与 .ucs-h2 一致；h3 是 .ucs 体系里没有的一级，按同阶梯往下取。 */
.db-home .blg-body h2 {
  margin-top: 48px;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.24;
  color: var(--db-ink);
  scroll-margin-top: 90px;
}
.db-home .blg-body h3 {
  margin-top: 34px;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--db-ink);
  scroll-margin-top: 90px;
}
.db-home .blg-body h4 {
  margin-top: 28px;
  font-family: var(--db-body);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--db-ink);
  scroll-margin-top: 90px;
}

/* ── 段落与行内 ─────────────────────────────────────────────── */
.db-home .blg-body p {
  margin-top: 20px;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--c-text-body);
}
.db-home .blg-body strong {
  font-weight: 700;
  color: var(--db-ink);
}
.db-home .blg-body em {
  font-style: italic;
}
/* .db-home a 全局是 inherit + 无下划线（导航用），正文链接要单独恢复可识别性 */
.db-home .blg-body a {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.db-home .blg-body a:hover {
  color: var(--c-primary-hover);
}

/* ── 列表 ───────────────────────────────────────────────────── */
.db-home .blg-body ul,
.db-home .blg-body ol {
  margin: 20px 0 0;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--c-text-body);
}
.db-home .blg-body ul {
  list-style: disc;
}
.db-home .blg-body ol {
  list-style: decimal;
}
.db-home .blg-body li {
  margin-top: 10px;
}
.db-home .blg-body li::marker {
  color: var(--c-text-3);
}
/* 嵌套列表不再叠加外边距，否则三层以后会顶到栏外 */
.db-home .blg-body li ul,
.db-home .blg-body li ol {
  margin-top: 10px;
}

/* ── 引述 ───────────────────────────────────────────────────── */
/* 与 .ucs-quote 同形：左侧色条 + 斜体 */
.db-home .blg-body blockquote {
  margin: 28px 0 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--db-red);
}
.db-home .blg-body blockquote p {
  margin-top: 0;
  font-size: 17px;
  font-style: italic;
  line-height: 1.7;
  color: var(--db-ink);
}
.db-home .blg-body blockquote p + p {
  margin-top: 12px;
}
/* 中文没有真正的斜体，浏览器合成的倾斜观感差（与 .ucs-quote 同一处理） */
html[lang^='zh'] .db-home .blg-body blockquote p {
  font-style: normal;
}

/* ── 代码 ───────────────────────────────────────────────────── */
.db-home .blg-body code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 2px 6px;
  background: var(--c-sunken);
  border: 1px solid var(--db-line);
  border-radius: 6px;
}
.db-home .blg-body pre {
  margin: 24px 0 0;
  padding: 18px 20px;
  background: var(--db-ink);
  border-radius: var(--db-radius-sm);
  overflow-x: auto;
}
.db-home .blg-body pre code {
  padding: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #fff;
  background: none;
  border: 0;
  border-radius: 0;
}

/* ── 分割线 ─────────────────────────────────────────────────── */
.db-home .blg-body hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--db-line);
}

/* ── 图片 ───────────────────────────────────────────────────── */
/* 与 .ucs-img 同形：1px 描边 + 小圆角 + 柔和投影 */
.db-home .blg-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
  border: 1px solid var(--db-line);
  border-radius: var(--db-radius-sm);
  box-shadow: 0 14px 36px rgba(20, 18, 16, 0.08);
}

/* ── 表格 ───────────────────────────────────────────────────── */
/* 与 .ucs-table 同形。Markdown 渲染出的是裸 <table>，横向滚动靠 JS 包一层
   .blg-tablewrap；即便没包也不至于撑破栏宽。 */
.db-home .blg-tablewrap {
  margin-top: 28px;
  overflow-x: auto;
  background: var(--db-card);
  border: 1px solid var(--db-line);
  border-radius: var(--db-radius-sm);
}
.db-home .blg-body table {
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.db-home .blg-tablewrap table {
  margin-top: 0;
}
.db-home .blg-body th,
.db-home .blg-body td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--db-line);
}
.db-home .blg-body thead th {
  font-family: var(--db-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--db-muted);
  background: rgba(20, 18, 16, 0.02);
}
.db-home .blg-body tbody td {
  color: var(--c-text-body);
}
.db-home .blg-body tbody tr:last-child td {
  border-bottom: 0;
}
.db-home .blg-body td strong {
  color: var(--db-ink);
}

/* ═══════════════════════════════════════════════════════════════
   相关阅读
   卡片直接复用集合页的 .uch-card，这里只把网格改成固定三列 ——
   .uch-grid 是 auto-fill(minmax(250px))，在 760px 阅读栏里会排成 2+1，
   三篇一行更整齐。
   ═══════════════════════════════════════════════════════════════ */
/* 有相关阅读时，文末 CTA 不再留 78px 底距，交给相关区统一收尾 */
.db-home .ucs-cta:has(+ .blg-related) {
  margin-bottom: 0;
}
.db-home .blg-related {
  max-width: 760px;
  margin: 56px auto 0;
  padding: 40px 0 78px;
  border-top: 1px solid var(--db-line);
}
.db-home .blg-related-head {
  margin: 0 0 24px;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  color: var(--db-ink);
}
.db-home .blg-related .uch-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .db-home .blg-related .uch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .db-home .blg-related .uch-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════
   目录（.ucs 体系里没有，blog 长文专属）

   正文 760px 居中后两侧留白很大，目录用 fixed 挂在右侧留白里，
   这样完全不侵入 .ucs 的居中布局 —— 正文位置与站内其他长文页
   （案例页）严格一致，预览看到的行宽位置就是读者看到的。
   窄屏留白不够时直接隐藏，不去挤压正文。

   曾试过把正文与目录作为一组整体居中（目录更贴近正文），但那要把
   正文左移 136px，预览页就不再代表线上观感，故放弃。
   ═══════════════════════════════════════════════════════════════ */
.db-home .blg-toc {
  display: none;
  position: fixed;
  /* 顶部 66px 导航 + 30px 呼吸 */
  top: 96px;
  /* 半个阅读栏 380px + 56px 间距（§4 间距阶梯；原为 20px，视觉上黏在正文右边缘） */
  left: calc(50% + 436px);
  width: 216px;
  /* 底部留 96px：与顶部对称，也给「接近页脚时淡出」留出过渡余量 */
  max-height: calc(100vh - 192px);
  overflow-y: auto;
  /* 高亮项超出可视区时由 JS 调 scrollTop 跟随（见 preview.astro 的 revealActive），
     平滑滚动让这个跟随看得出方向，而不是瞬间跳一下 */
  scroll-behavior: smooth;
  /* 目录自身滚到头时不要把滚动继续传给页面 —— 否则用户在目录上滚滚轮，
     页面会跟着一起动，看起来像失控 */
  overscroll-behavior: contain;
  /* Firefox：与下面的 webkit 规则同步 —— 平时不显示滚动条，hover 才出现 */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  /* 滚到页脚时由 JS 加 .is-hidden 淡出，避免盖住页脚内容 */
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
@media (hover: hover) {
  .db-home .blg-toc:hover {
    scrollbar-color: var(--c-line-strong) transparent;
  }
}
/**
 * 目录内部的滚动条：只在悬浮时显示。
 *
 * 常显会在正文右侧形成一条多余的灰色竖线，和目录左侧那条指示条抢注意力。
 * 宽度始终保留 4px（不在 hover 时才加宽）—— 滚动条占位变化会让条目文字
 * 左右跳一下，比多一条线更扎眼。
 */
.db-home .blg-toc::-webkit-scrollbar {
  width: 4px;
}
.db-home .blg-toc::-webkit-scrollbar-track {
  background: transparent;
}
.db-home .blg-toc::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background 0.2s ease;
}
@media (hover: hover) {
  .db-home .blg-toc:hover::-webkit-scrollbar-thumb {
    background: var(--c-line-strong);
  }
}
/**
 * 触屏等没有 hover 的环境：系统滚动条通常是 overlay 式（滚动时才浮现、
 * 停下即淡出），保持可见值即可，否则用户完全看不出这块还能滚。
 */
@media (hover: none) {
  .db-home .blg-toc::-webkit-scrollbar-thumb {
    background: var(--c-line-strong);
  }
}
@media (prefers-reduced-motion: reduce) {
  .db-home .blg-toc {
    scroll-behavior: auto;
  }
}
.db-home .blg-toc.is-hidden {
  opacity: 0;
  visibility: hidden;
}
/* 1280px 以下右侧留白不足 216+56，目录直接隐藏而不是挤压正文 */
@media (min-width: 1280px) {
  .db-home .blg-toc {
    display: block;
  }
}
.db-home .blg-toc-head {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.db-home .blg-toc-list {
  display: flex;
  flex-direction: column;
}
.db-home .blg-toc-list a {
  display: block;
  padding: 6px 0 6px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-text-2);
  border-left: 2px solid var(--db-line);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.db-home .blg-toc-list a:hover {
  color: var(--c-primary);
  border-left-color: var(--c-primary);
}
.db-home .blg-toc-list a.is-active {
  color: var(--db-ink);
  font-weight: 600;
  border-left-color: var(--c-primary);
}
.db-home .blg-toc-list a.is-sub {
  padding-left: 24px;
  font-size: 12.5px;
}
.db-home .blg-toc-list a.is-sub.is-active {
  font-weight: 500;
}

/* 标题上方的「状态徽章 + 分类」一行，占位与 .ucs-hd .eyebrow 的 16px 下边距一致 */
.db-home .blg-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* 署名行头像：CMS 没有 author 字段，用品牌首字母占位，
   免得为文章作者往仓库里塞一堆头像资源。 */
.db-home .blg-avatar {
  display: grid;
  place-items: center;
  font-family: var(--db-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--db-ink);
}

/* ═══════════════════════════════════════════════════════════════
   署名行右侧的分享（沿用 .ucs-byline 的 13.5px 尺度）
   ═══════════════════════════════════════════════════════════════ */
.db-home .blg-share {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.db-home .blg-share-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--c-text-3);
  transition: color 0.15s ease, background 0.15s ease;
}
.db-home .blg-share-icon:hover {
  color: var(--db-ink);
  background: rgba(20, 18, 16, 0.05);
}
.db-home .blg-share-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.db-home .blg-share-icon.is-copied {
  color: var(--c-success);
}

/* ═══════════════════════════════════════════════════════════════
   草稿预览页专属（详情页不会出现）
   ═══════════════════════════════════════════════════════════════ */

/* 草稿 / 已发布状态徽章 */
.db-home .blg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(232, 72, 28, 0.1);
  color: var(--c-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.db-home .blg-badge.is-published {
  background: rgba(21, 122, 67, 0.1);
  color: var(--c-success);
}

/* ═══════════════════════════════════════════════════════════════
   正文里的 FAQ

   两种形态，由 FAQ 在正文中的位置决定（见 blog-markdown.ts 的 enhanceFaqSections）：

   A. FAQ 在正文末尾（常态）→ `.blg-faq-sec`
      提升为独立区块插到 </article> 之后，结构与首页 #faq 逐字同构：
      section.blk.on-white + .wrap + .qa-grid + .qa-aside / .qa-list。
      因此白底、两栏比例、左栏 sticky、手风琴外观全部直接继承
      home-redesign.css，这里几乎不需要额外规则 —— 首页调整时自动跟随。

   B. FAQ 夹在正文中间（少见）→ `.blg-faq`
      保持流内，只做手风琴，不强行两栏（760px 放不下首页那 1132px 的两栏），
      也不挪位置 —— 作者把 FAQ 放中间是有意安排。

   ⚠️ 不要在这里重写颜色、字号、图标旋转等外观，那些跟着首页走。
   ═══════════════════════════════════════════════════════════════ */

/* ── A. 通栏区块形态 ────────────────────────────────────────── */
/* 紧跟在文章 article 之后，article 自身已有 86px 下留白，这里不再叠加上边距 */
.db-home.db-blog .blg-faq-sec {
  margin-top: 0;
}

/* ── B. 流内形态 ────────────────────────────────────────────── */
.db-home .blg-body .blg-faq {
  margin: 30px 0 40px;
}
/* 首页那条 `.qa-a p { padding: 0 60px 26px 4px }` 只适配单段答案；
   文章答案可能有多段、列表、代码块，把留白提到容器上，内部元素才能保持
   正文自己的节奏。仅流内形态需要 —— 通栏形态的右栏有 630px，够用首页的规则。 */
.db-home .blg-body .blg-faq .qa-a {
  padding: 0 60px 24px 4px;
}
.db-home .blg-body .blg-faq .qa-a p {
  padding: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-text-2);
}
.db-home .blg-body .blg-faq .qa-a > :first-child {
  margin-top: 0;
}
.db-home .blg-body .blg-faq .qa-a ul,
.db-home .blg-body .blg-faq .qa-a ol {
  margin: 12px 0 0;
  font-size: 15px;
}
.db-home .blg-body .blg-faq .qa-a li {
  line-height: 1.7;
  color: var(--c-text-2);
}
@media (max-width: 640px) {
  .db-home .blg-body .blg-faq .qa-a {
    padding: 0 2px 20px;
  }
}

/* ── 两种形态共有：答案里的多段落与列表 ─────────────────────── */
/* 首页答案恒为单个 <p>，没有这些情况；文章答案有，需要补节奏 */
.db-home .blg-faq-sec .qa-a > :first-child,
.db-home .blg-faq .qa-a > :first-child {
  margin-top: 0;
}
.db-home .blg-faq-sec .qa-a p + p {
  margin-top: 12px;
}
.db-home .blg-faq-sec .qa-a ul,
.db-home .blg-faq-sec .qa-a ol {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 15px;
  color: var(--db-muted);
}
.db-home .blg-faq-sec .qa-a li {
  line-height: 1.7;
}
.db-home .blg-faq-sec .qa-a li + li {
  margin-top: 6px;
}
/* 答案里的图片：收窄到答案栏宽度，不要撑破手风琴 */
.db-home .blg-faq-sec .qa-a img,
.db-home .blg-faq .qa-a img {
  max-width: 100%;
  height: auto;
  border-radius: var(--db-radius-sm);
}

/* 图片加载失败的提示（仅预览页会插入，见 preview.astro 的 flagBrokenImages）。
   裂图本身看不出是 403 还是 404，把地址摆出来，排查不必靠猜。 */
.db-home .blg-imgerr {
  display: block;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--c-danger);
  border-radius: var(--db-radius-sm);
  background: rgba(180, 35, 24, 0.06);
  color: var(--c-danger);
  font-size: 12.5px;
  line-height: 1.6;
  word-break: break-all;
}

/* 取数中的占位 / 失败提示 */
.db-home .blg-state {
  max-width: 620px;
  /* 上下留白由 article.blk 的 86px padding 提供，这里只补一点额外呼吸 */
  margin: 54px auto 34px;
  padding: 28px 32px;
  background: var(--db-card);
  border: 2px dashed var(--db-line);
  border-radius: var(--db-radius);
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text-2);
  text-align: center;
}
.db-home .blg-state.is-error {
  border-style: solid;
  border-color: var(--c-danger);
  color: var(--db-ink);
}

/* 正文为空时的提示 */
.db-home .blg-empty {
  margin-top: 32px;
  padding: 40px 24px;
  border: 2px dashed var(--db-line);
  border-radius: var(--db-radius-sm);
  color: var(--c-text-2);
  font-size: 13px;
  text-align: center;
}

/* 窄屏：署名行允许换行，分享图标退到下一行 */
@media (max-width: 620px) {
  .db-home .blg-share {
    width: 100%;
    margin: 8px 0 0;
  }
}