/* 内容中心页专属样式。
   由 content/*.html（article、news_detail、tutorial_detail、news_list、
   help_list、announcement_list、tutorial_list）以及 partials/content_shell.html、
   partials/content_sidebar.html 中的内联 <style> 抽取合并而来。 */

/* ===== 两栏外壳（原 partials/content_shell.html）===== */
/* 版心与 .container 完全一致（同宽、同内边距），用同一套变量取值：
   页头/页脚/面包屑都走 .container，正文若自己另定一套 max-width，
   就会出现"面包屑左边界在 X、正文左边界在 X+4"这种肉眼可见的错位。
   宽度改由 --workspace-width 统一控制，不再在这里写死数字。 */
/* 左栏弹性、右栏固定 260：再窄放不下"栏目名 + 文章标题"，
   再宽会挤压正文行宽（超过 ~800 阅读吃力）。 */
.content-shell { max-width: var(--workspace-width); margin: 0 auto; padding: 20px 20px 48px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
/* minmax(0,1fr) 而非 1fr：默认 1fr 的最小尺寸是 auto，
   正文里若有 <pre> / 宽表格，会把整个网格撑破、右栏被挤出屏幕。 */
.content-main { min-width: 0; }
/* sticky 跟随：长文滚动时分类导航一直可见，与原站一致。
   只在两栏并排时生效（窄屏单列时 sticky 会让侧栏浮在正文上）。 */
.content-shell .content-side { position: sticky; top: 16px; }

/* 单列断点 900：低于此宽度两栏会挤到正文行宽不足 40 字符，
   降到单列并把侧栏移到正文之后（DOM 顺序即视觉顺序，无需 order）。
   不改 max-width —— 单列时仍要与面包屑对齐，只是网格少一列。 */
@media (max-width: 900px) {
    .content-shell { grid-template-columns: minmax(0, 1fr); }
    .content-shell .content-side { position: static; }
}

/* ===== 右侧栏（原 partials/content_sidebar.html）===== */
/* 两栏布局由 .content-shell 承载（见各页面模板），侧栏自身只负责盒子外观 */
.content-side { display: block; }
.content-side-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 4px 0 8px; position: relative; }
.content-side-title { font-size: 15px; font-weight: 600; color: #303133; margin: 0; padding: 14px 16px 12px; border-bottom: 1px solid #f0f2f5; }
/* 标题左侧那道蓝色短竖条是参考站的标志性细节，去掉会显得标题"没有归属" */
.content-side-title::before { content: ""; position: absolute; left: 0; top: 14px; width: 3px; height: 16px; background: #3b82f6; border-radius: 0 2px 2px 0; }

.content-side-list { list-style: none; margin: 6px 0 0; padding: 0; }
.content-side-link { display: flex; align-items: center; padding: 10px 16px; color: #606266; font-size: 14px; text-decoration: none; border-radius: 4px; margin: 0 6px; transition: background .15s, color .15s; }
.content-side-link:hover { background: #f5f7fa; color: #3b82f6; }
.content-side-link.is-active { color: #3b82f6; background: #eff6ff; font-weight: 600; }
/* 当前项前的圆点：同色实心，与未选中项形成"实心 vs 空心"的区分 */
.content-side-name::before { content: ""; display: inline-block; width: 6px; height: 6px; border: 1px solid #c0c4cc; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.content-side-link.is-active .content-side-name::before { border-color: #3b82f6; background: #3b82f6; }

.content-side-articles { list-style: none; margin: 6px 0 0; padding: 0; }
.content-side-articles li { padding: 0; }
.content-side-articles a { display: block; padding: 9px 16px; text-decoration: none; border-bottom: 1px dashed #f5f7fa; }
.content-side-articles li:last-child a { border-bottom: none; }
.content-side-articles a:hover .content-side-art-title { color: #3b82f6; }
/* 标题最多两行：一行截断会砍掉太多信息，两行足够辨识又不至于把侧栏撑高 */
.content-side-art-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #303133; font-size: 14px; line-height: 1.6; }

@media (max-width: 900px) {
    /* 窄屏侧栏落到正文下方：并排会让正文窄到难以阅读 */
    .content-side { width: 100%; }
}

/* ===== 列表页（原 content/news_list.html、help_list.html、announcement_list.html、tutorial_list.html）===== */
.content-list-head { margin-bottom: 16px; }
.content-list-head h1 { font-size: 22px; font-weight: 600; margin: 0 0 6px; color: #303133; }
.content-list-desc { color: #909399; font-size: 13px; margin: 0; }

/* 卡片流：与右栏组成原站那种"左侧一列公告"的观感 */
.content-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.content-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 18px 20px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.content-card:hover { border-color: #c7d2fe; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.content-card-title { display: block; font-size: 17px; font-weight: 600; color: #303133; text-decoration: none; margin-bottom: 10px; line-height: 1.5; }
.content-card-title:hover { color: #3b82f6; }
.content-card-excerpt { margin: 0 0 12px; color: #606266; font-size: 13px; line-height: 1.8; }
/* 「摘要」前缀标签 */
.content-card-tag { display: inline-block; background: #ecf5ff; color: #3b82f6; font-size: 12px; padding: 1px 6px; border-radius: 3px; margin-right: 8px; vertical-align: 1px; }
/* 底部一行：分类标签靠左、日期靠右 */
.content-card-meta { margin: 0; display: flex; align-items: center; gap: 10px; }
/* 分类标签：纯展示，所以没有 hover 态。
   配色与教程列表保持一致（浅灰底 + 中灰字），原蓝底白字过于抢眼。 */
.content-card-chip { background: #f2f4f7; color: #6b7280; font-size: 12px; padding: 3px 10px; border-radius: 3px; }
/* 分类标签改浅灰：原蓝底白字（#3b82f6）是页面里饱和度最高的色块，
   而分类只是文章的次要属性，却比标题还抢眼。改浅灰后与日期同一视觉层级，
   标题重新成为列表里的第一焦点。 */
.content-card-chip { background: #f2f4f7; color: #6b7280; font-size: 12px; padding: 3px 10px; border-radius: 3px; text-decoration: none; }

.content-card-date { margin-left: auto; color: #c0c4cc; font-size: 12px; }

.content-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.content-pager-link { color: #3b82f6; text-decoration: none; font-size: 14px; }
.content-pager-link:hover { text-decoration: underline; }
.content-pager-info { color: #909399; font-size: 13px; }
.content-empty { text-align: center; color: #c0c4cc; padding: 60px 0; }

/* 窄屏下卡片内边距收一点，避免文字被挤成细长条 */
@media (max-width: 600px) {
    .content-card { padding: 14px 16px; }
}

/* ===== 详情页正文块（原 content/article.html、news_detail.html、tutorial_detail.html）===== */
/* 详情页正文块：白底卡片，与原站一致 */
.content-detail { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 28px 32px 32px; }
.content-detail h1 { font-size: 26px; line-height: 1.45; margin: 0 0 14px; color: #303133; font-weight: 600; }
/* 元信息条：上方细线 + 下方留白，把标题与正文分隔开 */
.content-detail-meta { color: #909399; font-size: 13px; margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid #f0f2f5; }
.content-detail-meta .dot { margin: 0 6px; }
.content-detail-summary { background: #f8fafc; border-left: 3px solid #93c5fd; padding: 12px 16px; color: #475569; font-size: 14px; line-height: 1.8; margin: 0 0 24px; }
.article-body { font-size: 15px; line-height: 1.9; color: #303133; }
/* 教程的 h2 保留左侧竖条：步骤感更强，与新闻正文区分开 */
.article-body h2 { font-size: 19px; margin: 26px 0 12px; color: #303133; border-left: 4px solid #3b82f6; padding-left: 10px; }
.article-body h3 { font-size: 16px; margin: 20px 0 10px; color: #303133; }
.article-body p { margin: 0 0 14px; }
.article-body ul, .article-body ol { margin: 0 0 14px; padding-left: 24px; }
.article-body blockquote { margin: 0 0 14px; padding: 8px 16px; border-left: 3px solid #e5e7eb; color: #606266; background: #fafafa; }
.article-body code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.article-body pre { background: #0f172a; color: #e2e8f0; padding: 14px 16px; border-radius: 8px; overflow-x: auto; }
.article-body a { color: #3b82f6; }
.content-tool-cta { margin: 32px 0 20px; padding: 16px 18px; border: 1px dashed #93c5fd; border-radius: 8px; background: #eff6ff; }
.content-tool-cta p { margin: 0; font-size: 15px; }
.content-origin { font-size: 13px; color: #909399; word-break: break-all; }
.content-related { margin-top: 36px; border-top: 1px solid #f0f2f5; padding-top: 20px; }
.content-related h2 { font-size: 16px; margin: 0 0 12px; color: #303133; }
.content-related ul { list-style: none; margin: 0; padding: 0; }
.content-related li { padding: 8px 0; border-bottom: 1px dashed #f5f7fa; }
.content-related a { color: #303133; text-decoration: none; font-size: 14px; }
.content-related a:hover { color: #3b82f6; }
.content-related-date { color: #c0c4cc; font-size: 12px; margin-left: 8px; }

@media (max-width: 600px) {
    /* 窄屏收窄内边距：32px 在手机上会让正文只剩很窄一条 */
    .content-detail { padding: 20px 16px 24px; }
    .content-detail h1 { font-size: 21px; }
}