/**
 * 知识锦囊页 — Editorial / SaaS 科技文档风
 * 作用域：.jinang-page
 */

.jinang-page {
  --jin-bg: #f4f6f9;
  --jin-bg-elev: #fafbfc;
  --jin-text: #1a1d21;
  --jin-muted: #6b7280;
  --jin-faint: #9ca3af;
  --jin-line: rgba(15, 23, 42, 0.06);
  --jin-line-strong: rgba(148, 163, 184, 0.35);
  --jin-blue-soft: rgba(37, 99, 235, 0.08);
  --jin-blue-line: rgba(37, 99, 235, 0.42);
  --jin-read: min(100%, 46rem);
  --jin-figure-radius: 10px;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* 不铺实色底，让全站 html 点阵 + 渐变透出来 */
.jinang-page .jinang-canvas {
  position: relative;
  min-height: 100vh;
  background: transparent;
}

/* 极淡噪点（叠在站点点阵之上，不挡点） */
.jinang-page .jinang-canvas::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* 勿作用于 #navbar：否则会把 Tailwind 的 fixed 盖成 relative，顶栏会随滚动消失 */
.jinang-page .jinang-canvas > *:not(#navbar) {
  position: relative;
  z-index: 1;
}

/* —— Nav：与全站 styles.css 中 #navbar / .nav-bar--scrolled 一致（main.js 统一处理滚动） —— */
.jinang-page #navbar .nav-link {
  color: inherit;
}

.jinang-page #navbar .nav-link:hover {
  color: #111827;
}

/* Hero：版式与字号在 jinang.html 中用 Tailwind 与首页首屏对齐；不铺 hero 渐变以便 html 点阵透出。 */

/* —— 渐隐分隔（替代粗 border-t） —— */
.jinang-page .jinang-section-divider {
  height: 1px;
  margin: 4.5rem 0 4.25rem;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(15, 23, 42, 0.08) 20%,
    rgba(15, 23, 42, 0.08) 80%,
    transparent 100%
  );
}

/* —— 正文栏 —— */
.jinang-page .jl-editorial-prose {
  max-width: var(--jin-read);
  font-size: 1rem;
  line-height: 1.82;
  color: #334155;
}

.jinang-page .jl-editorial-prose section {
  counter-reset: none;
}

.jinang-page .jl-editorial-prose p {
  margin: 0 0 1.15em;
}

.jinang-page .jl-editorial-prose p + p {
  margin-top: -0.2em;
}

.jinang-page .jl-editorial-prose ul,
.jinang-page .jl-editorial-prose ol {
  margin: 0 0 1.35em;
  padding-left: 1.35rem;
}

.jinang-page .jl-editorial-prose ul {
  list-style-type: disc;
}

.jinang-page .jl-editorial-prose ol {
  list-style-type: decimal;
}

.jinang-page .jl-editorial-prose li {
  margin: 0.45em 0;
  padding-left: 0.1rem;
}

.jinang-page .jl-editorial-prose li::marker {
  color: #2563eb;
  font-weight: 700;
}

.jinang-page .jl-editorial-prose li > strong:first-child,
.jinang-page .jl-editorial-prose p > strong:first-child {
  color: #0f172a;
}

.jinang-page .jl-editorial-prose h2 {
  scroll-margin-top: 5.5rem;
  margin: 0 0 1.15rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--jin-line-strong);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
  color: #0f172a;
}

.jinang-page .jl-editorial-prose section:not(:first-of-type) h2 {
  margin-top: 0.15rem;
}

.jinang-page .jl-editorial-prose h3 {
  position: relative;
  scroll-margin-top: 5.5rem;
  margin: 2.4rem 0 0.85rem;
  padding-left: 0.85rem;
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.38;
  color: #0f172a;
}

.jinang-page .jl-editorial-prose h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2563eb, #7c3aed);
}

.jinang-page .jl-editorial-prose h2 + p,
.jinang-page .jl-editorial-prose h3 + p,
.jinang-page .jl-editorial-prose h3 + ul,
.jinang-page .jl-editorial-prose h3 + ol {
  margin-top: 0;
}

.jinang-page .jl-editorial-prose a:not(.jinang-cta-link) {
  color: #2563eb;
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.25);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.jinang-page .jl-editorial-prose a:not(.jinang-cta-link):hover {
  color: #1d4ed8;
  text-decoration-color: rgba(29, 78, 216, 0.45);
}

.jinang-page .jl-editorial-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.88em;
  padding: 0.16em 0.42em;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(248, 250, 252, 0.9);
  color: #1e40af;
}

.jinang-page .jl-editorial-prose strong {
  font-weight: 750;
  color: #172033;
}

.jinang-page .jl-editorial-prose blockquote {
  margin: 1.5rem 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--jin-blue-line);
  background: linear-gradient(90deg, var(--jin-blue-soft), transparent);
  border-radius: 0 8px 8px 0;
  color: #475569;
}

.jinang-page .jl-editorial-prose section > ul,
.jinang-page .jl-editorial-prose section > ol {
  padding-top: 0.1rem;
}

.jinang-page .jl-editorial-prose section > ul:not(.jinang-toc-list),
.jinang-page .jl-editorial-prose section > ol {
  border-left: 1px solid rgba(148, 163, 184, 0.22);
  padding-left: 1.45rem;
}

/* —— 轻量说明条（非 WordPress 框） —— */
.jinang-page .jinang-callout {
  margin-bottom: 2.75rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-left: 4px solid rgba(37, 99, 235, 0.5);
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.07) 0%, rgba(255, 255, 255, 0.45) 100%);
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #475569;
}

/* —— Editorial figure：与正文同宽，不再全屏铺开 —— */
.jinang-page figure.editorial-figure {
  width: 100%;
  max-width: var(--jin-read);
  margin: 2rem auto 2.15rem;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: transparent;
}

.jinang-page figure.editorial-figure img.editorial-figure__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--jin-figure-radius);
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.jinang-page figure.editorial-figure figcaption.editorial-figure__caption {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.012em;
  color: var(--jin-faint);
  text-align: left;
}

/* 进入视口：淡入 + 微上浮（不用 transform 做居中，避免与 breakout 冲突） */
.jinang-page figure.editorial-figure.editorial-figure--reveal {
  opacity: 0;
  position: relative;
  top: 12px;
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.jinang-page figure.editorial-figure.editorial-figure--reveal.is-visible {
  opacity: 1;
  top: 0;
}

/* —— TOC 桌面 —— */
.jinang-page .jinang-toc {
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.03);
  padding: 1rem 1rem 1.1rem;
  font-size: 0.8125rem;
}

.jinang-page .jinang-toc-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.75rem;
}

.jinang-page .jinang-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jinang-page .jinang-toc li {
  margin: 0;
}

/* 树状目录：一级 + 缩进子级 */
.jinang-page .jinang-toc-tree > li {
  margin-bottom: 0.55rem;
}

.jinang-page .jinang-toc-tree > li > a {
  font-weight: 500;
  color: #475569;
}

.jinang-page .jinang-toc-sub {
  list-style: none;
  margin: 0.2rem 0 0.15rem 0;
  padding: 0 0 0 0.6rem;
  border-left: 1px solid rgba(148, 163, 184, 0.4);
}

.jinang-page .jinang-toc-sub li {
  margin: 0;
}

.jinang-page .jinang-toc-sub a {
  font-size: 0.72rem;
  line-height: 1.38;
  padding: 0.3rem 0.35rem 0.3rem 0.45rem;
  margin: 0.02rem 0;
}

.jinang-page .jinang-toc--inline .jinang-toc-sub {
  border-left-color: rgba(148, 163, 184, 0.45);
  margin-left: 0.15rem;
}

.jinang-page .jinang-toc--inline {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.jinang-page .jinang-toc a {
  display: block;
  padding: 0.45rem 0.5rem 0.45rem 0.65rem;
  margin: 0.1rem 0;
  border-radius: 8px;
  color: #64748b;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s ease, background 0.2s ease;
  border-left: 2px solid transparent;
}

.jinang-page .jinang-toc a:hover {
  color: #1e40af;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), transparent);
}

.jinang-page .jinang-toc a.is-active {
  color: #1d4ed8;
  font-weight: 500;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent);
  border-left-color: rgba(37, 99, 235, 0.55);
}

/* —— TOC 移动端 —— */
.jinang-page .jinang-toc-mobile summary {
  list-style: none;
  cursor: pointer;
}

.jinang-page .jinang-toc-mobile summary::-webkit-details-marker {
  display: none;
}

.jinang-page .jinang-toc-mobile {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px);
  border-radius: 14px;
  overflow: hidden;
}

.jinang-page .jinang-toc-mobile summary {
  padding: 0.85rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jinang-page .jinang-toc-mobile summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid #94a3b8;
  border-bottom: 1.5px solid #94a3b8;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  margin-top: -0.2rem;
}

.jinang-page .jinang-toc-mobile[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 0.15rem;
}

.jinang-page .jinang-toc-mobile .jinang-toc-mobile-inner {
  padding: 0 0.75rem 1rem;
}

/* —— 底部 CTA 条 —— */
.jinang-page .jinang-cta-panel {
  margin-top: 3.5rem;
  padding: 1.5rem 1.35rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(248, 250, 252, 0.9) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.jinang-page .jinang-cta-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #2563eb;
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 99, 235, 0.25);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.jinang-page .jinang-cta-link:hover {
  color: #1d4ed8;
  border-bottom-color: rgba(29, 78, 216, 0.45);
}

/* —— Footer —— */
.jinang-page .jinang-footer {
  background: #0c0e12;
  color: #9ca3af;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.jinang-page .jinang-footer a {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.jinang-page .jinang-footer a:hover {
  color: #f1f5f9;
}

@media (max-width: 1023px) {
  .jinang-page .jl-editorial-prose {
    font-size: 1rem;
    line-height: 1.76;
  }

  .jinang-page .jinang-section-divider {
    margin: 3.5rem 0 3.25rem;
  }

  .jinang-page figure.editorial-figure figcaption.editorial-figure__caption {
    font-size: 0.7rem;
  }
}

/* 本页 CTA：克制 hover，避免「廉价弹跳」 */
.jinang-page .gradient-btn {
  transition: filter 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}

.jinang-page .gradient-btn:hover {
  transform: none;
  filter: brightness(1.06);
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .jinang-page figure.editorial-figure.editorial-figure--reveal {
    opacity: 1;
    top: 0;
    transition: none;
  }

  .jinang-page .gradient-btn:hover {
    box-shadow: none;
  }
}