/* SEO 落地页专属样式：复用 shared-page.css 的设计变量（--bg/--surface/--border/
   --gold/--gold-dim/--text/--text-dim/--radius）与 .header/.lang-switch/.lang-btn，
   在此基础上覆盖页面宽度（长文阅读需要比工具页 520px 更宽的版心）并新增文章排版
   （H1/正文段落/FAQ/CTA/交叉链接），不改 shared-page.css 本身——工具页的卡片式
   布局与本页的长文排版是两套不同的需求，强行合并反而互相牵连。
   此文件在 <link> 顺序上必须晚于 shared-page.css，才能覆盖 body 的 max-width。 */

body {
  max-width: 720px;
  padding: 0 0 48px;
}

.lang-switch a.lang-btn {
  text-decoration: none;
  display: inline-block;
}

.page-hero {
  padding: 32px 20px 8px;
}
.page-hero h1 {
  font-size: 26px;
  line-height: 1.3;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 12px;
}
.page-hero .lede {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}
.page-hero .byline {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: .3px;
}

.page-section {
  padding: 8px 20px 28px;
}
.page-section h2 {
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.page-section p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 14px;
}
.page-section p:last-child { margin-bottom: 0; }
.page-section ul {
  margin: 0 0 14px 20px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text);
}

.concept-figure {
  margin: 4px 20px 28px;
}
.concept-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.concept-figure figcaption {
  padding: 10px 4px 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 18px;
}
.comparison-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.comparison-card h3 { color: var(--gold-dim); font-size: 15px; margin-bottom: 8px; }
.comparison-card p { color: var(--text-dim); font-size: 13px; line-height: 1.7; margin: 0; }
@media (max-width: 520px) { .comparison-grid { grid-template-columns: 1fr; } }

.faq-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.faq-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.faq-item .q {
  font-size: 15px;
  color: var(--gold-dim);
  margin-bottom: 6px;
  font-weight: 600;
}
.faq-item .a {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
}

.cta-block {
  margin: 8px 20px 28px;
  padding: 24px 20px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
}
.cta-block p {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.cta-btn {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, #8a6f2e, #c9a84c);
  border-radius: 10px;
  color: #0f0e0c;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  text-decoration: none;
}

.cross-links {
  padding: 0 20px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cross-links a {
  font-size: 12px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: .5px;
}
.cross-links a:hover { border-color: var(--gold-dim); color: var(--gold); }

.page-footer {
  padding: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}
.page-footer a { color: var(--gold-dim); }
.page-footer .footer-links {
  margin-bottom: 10px;
  letter-spacing: .3px;
}

/* 分类落地页原来的文章卡片网格——改成左侧栏布局（见下方 .blog-layout）后不再被任何
   模板引用，是死代码，留着不影响任何东西，不强制清理 */
.article-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.article-card {
  display: block;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
}
.article-card h3 { color: var(--gold-dim); font-size: 15px; margin-bottom: 8px; }
.article-card p { color: var(--text-dim); font-size: 13px; line-height: 1.7; margin: 0 0 10px; }
.article-card .article-card-date { color: var(--text-dim); font-size: 11px; letter-spacing: .3px; }
.article-card:hover { border-color: var(--gold-dim); }
@media (max-width: 520px) { .article-card-grid { grid-template-columns: 1fr; } }

/* 博客左侧栏 + 正文两栏布局（分类落地页/文章详情页共用，见 templates/_blog_sidebar.html +
   templates/category.html + templates/article.html）。body.blog-page 比裸 body 选择器
   更具体，不影响其余 31 个静态科普/信任页（那些页面是独立静态 HTML，不 extends
   _base.html，也不会带 blog-page 这个 class） */
body.blog-page { max-width: 960px; }

.blog-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.blog-main { min-width: 0; }

.blog-sidebar {
  padding: 24px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: sticky;
  top: 20px;
}
.blog-sidebar-heading { font-size: 14px; color: var(--gold); letter-spacing: 1px; margin-bottom: 12px; }
.blog-sidebar-list { display: flex; flex-direction: column; gap: 4px; }
.blog-sidebar-item {
  display: block;
  padding: 10px 8px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid transparent;
}
.blog-sidebar-item-title { display: block; font-size: 13px; color: var(--text); line-height: 1.5; }
.blog-sidebar-item-date { display: block; font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.blog-sidebar-item:hover { border-color: var(--gold-dim); }
.blog-sidebar-item.active { border-color: var(--gold); background: rgba(201,168,76,.08); }
.blog-sidebar-item.active .blog-sidebar-item-title { color: var(--gold); }
.blog-sidebar-empty { color: var(--text-dim); font-size: 13px; padding: 8px; }

/* 520px 是给对称的 1fr 1fr 卡片网格用的断点；这里是"固定 220px + 弹性剩余"的非对称
   两栏，且容器本身有 max-width 封顶，700px 留一点安全余量，避免临近断点两栏都挤在一起 */
@media (max-width: 700px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; order: 2; }
  .blog-main { order: 1; }
}

/* 评论区（templates/article.html，Google 登录，见 app/api/v1/comments.py + static/comment-form.js） */
.comments-section {
  margin: 8px 20px 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.comments-section h2 {
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.comments-sign-in-prompt { color: var(--text-dim); font-size: 13px; margin: 10px 0; }
.comment-form { margin: 14px 0; }
.comment-form textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.comment-form button[type="submit"] {
  margin-top: 10px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #8a6f2e, #c9a84c);
  border: none;
  border-radius: 10px;
  color: #0f0e0c;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
}
.comment-form button[type="submit"]:disabled { opacity: .6; cursor: default; }
.comment-form-error { color: #c0524a; font-size: 13px; margin-top: 8px; }
.comment-list { margin-top: 18px; }
.comment-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.comment-item:last-child { border-bottom: none; }
.comment-avatar { width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.comment-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.comment-message { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0; white-space: pre-wrap; }
.comment-empty { color: var(--text-dim); font-size: 13px; }