/* assets/css/sections/content.css — 内容层（博客 / 客户案例 / 常见问题）共用样式。
   列表卡与正文骨架复用 components/card.css、components/prose.css 与 sections/page.css,
   这里只补三块内容层独有的东西：
   1. 列表卡底部的日期行（.list-meta);
   2. 文章 / 案例详情页的正文窄栏（.article）与文末区块（.article-note / .related);
   3. 常见问题页的分类跳转（.faq-nav）与分组（.faq-group）。
   引入位置：sections 层内、page.css 之后、cta.css 之前。 */

/* ============ 1. 列表页：文章与案例卡片 ============ */
.list-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  font-size:13px; color:var(--muted);
}

/* ============ 2. 详情页：正文窄栏与文末区块 ============ */
/* 标题区与正文都左对齐到版心（与全站 page-hero 一致），不再收窄居中。 */
.article-head{ max-width:none; margin-inline:0; }
.article-head .tag{ margin-top:20px; }
/* 无目录的短文（正文小节少于 3 节）仍用 46em 的舒适阅读宽度居中 */
.article{ max-width:46em; margin-inline:auto; }
/* 正文颜色比全站 muted 深一档：长文阅读的底色对比更稳（沿用隐私政策的正文色） */
.article .prose p, .article .prose li{ color:#33475E; }
.article .prose h2{ margin-top:48px; font-size:26px; font-weight:700; scroll-margin-top:96px; }
.article .prose h2:first-child{ margin-top:0; }

/* 长文页（main.js 生成目录后加 .wrap--with-toc）：正文 + 右侧 sticky 目录铺满版心 */
.wrap--with-toc{
  display:grid; grid-template-columns:minmax(0,1fr) 256px;
  gap:0 72px; align-items:start;
}
.wrap--with-toc > .article{ grid-column:1; max-width:none; margin-inline:0; }
.wrap--with-toc > .article-note{ grid-column:1; max-width:none; margin-inline:0; margin-top:40px; }
.wrap--with-toc > .related{ grid-column:1 / -1; }
.article-toc{ grid-column:2; grid-row:1; position:sticky; top:100px; }
.article-toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.article-toc a{
  display:block; padding:7px 0 7px 16px; margin-left:-1px;
  border-left:2px solid transparent;
  font-size:13.5px; line-height:1.6; color:var(--muted); text-decoration:none;
}
.article-toc a:hover{ color:var(--ink); }
.article-toc a.is-current{ color:var(--cinnabar); border-left-color:var(--cinnabar); }

/* 文末说明块：场景说明、口径提醒这类不该混进正文的话 */
.article-note{
  max-width:46em; margin:40px auto 0; padding:18px 20px;
  border:1px solid var(--line); border-left:3px solid var(--cinnabar);
  background:var(--surface);
}
.article-note p{ font-size:14px; color:var(--muted); }
.article-note p + p{ margin-top:8px; }

/* 继续阅读：占满整个版心，与上方正文形成"窄—宽"的收束节奏 */
.related{ margin:56px 0 0; padding-top:32px; border-top:1px solid var(--line-dark); }
.related h2{ font-size:21px; font-weight:700; }
.related .card-grid{ margin-top:20px; }

/* ============ 3. 常见问题页：分类跳转与分组 ============ */
.faq-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.faq-nav a{
  display:inline-flex; padding:6px 14px; background:var(--surface);
  border:1px solid var(--line-dark); font-size:14px; text-decoration:none;
}
.faq-nav a:hover{ border-color:var(--cinnabar); color:var(--cinnabar); }
.faq-group{ padding-block:56px; border-top:1px solid var(--line-dark); }
.faq-group:first-child{ padding-top:0; border-top:0; }
.faq-group .sec-head{ position:static; margin-bottom:0; }

@media (max-width:1020px){
  /* 窄屏收起目录，正文回到舒适阅读宽度 */
  .wrap--with-toc{ display:block; }
  .article-toc{ display:none; }
  .wrap--with-toc > .article{ max-width:46em; margin-inline:auto; }
  .wrap--with-toc > .article-note{ max-width:46em; margin-inline:auto; }
}

@media (max-width:680px){
  .faq-group{ padding-block:40px; }
  .article .prose h2{ margin-top:36px; font-size:23px; }
  .related{ margin-top:40px; }
  .article-note{ padding:16px; }
}