
/* article_seo.css — Compact Content V2 (正文更窄，标题/元信息居中且顺序正确) */
:root{
  --vx-max: 1280px;
  --vx-gap: 26px;
  --vx-radius: 16px;
  --vx-shadow: 0 6px 22px rgba(0,0,0,.06);
  --vx-text: #111827;
  --vx-muted: #6b7280;
  --vx-border: #e5e7eb;
  --vx-bg: #f6f7f9;
  --vx-white: #ffffff;
  --vx-accent: #111827;
  --vx-brand: #0ea5e9;
}
html{scroll-behavior:smooth}
body{background:var(--vx-bg);color:var(--vx-text);}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
html,body{max-width:100%;overflow-x:hidden}

.vx-container{max-width:var(--vx-max);margin:0 auto;padding:0 16px;}
.vx-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:#71717a;font-size:12px;padding:10px 0;word-break:break-word}
.vx-breadcrumb a{color:#3f3f46}.vx-breadcrumb .current{color:#111827;font-weight:600}

/* Grid: 左列保持 240/260px；右列 1fr */
.vx-grid{
  display:grid;
  grid-template-columns:minmax(0,240px) minmax(0,1fr);
  grid-template-areas:"left article";
  gap:var(--vx-gap);
  padding:22px 0;
}
@media (min-width:1536px){
  :root{ --vx-max: 1360px; }
  .vx-grid{ grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:30px; }
}
@media (max-width:1180px){
  .vx-grid{
    grid-template-columns:1fr;
    grid-template-areas:"article" "left";
  }
}

.vx-card{background:var(--vx-white);border:1px solid var(--vx-border);border-radius:var(--vx-radius);box-shadow:var(--vx-shadow)}

/* 左列（sticky）不变 */
.vx-left{grid-area:left;}
.vx-sticky{position:sticky; top:86px; display:flex; flex-direction:column; gap:14px}

/* 目录卡等左侧内容（保持） */
.vx-card-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--vx-border);}
.vx-card-head .vx-title-sm{font-weight:700;font-size:12px;letter-spacing:.04em;color:#374151}
.vx-card-head .vx-icon{width:16px;height:16px;color:#9ca3af}
.vx-toc-card{overflow:hidden}
.vx-toc-actions{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 6px}
.vx-toc-toggle{display:none;align-items:center;gap:6px;border:1px solid var(--vx-border);background:#fff;border-radius:10px;padding:6px 8px;font-size:12px}
@media (max-width:1180px){ .vx-toc-toggle{display:inline-flex} }
.vx-toc-body{padding:8px 10px 12px 10px; overflow:auto}
.vx-toc-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.vx-toc-list a{display:block;padding:6px 8px;border-radius:8px;color:#374151;line-height:1.4;font-size:13px}
.vx-toc-list a:hover{background:#f3f4f6}
.vx-toc-list a.vx-active{background:#111827;color:#fff}
.vx-toc-list .h3{margin-left:10px}
.vx-toc-card.is-collapsed .vx-toc-body{ display:none }
@media (min-width:1181px){ .vx-toc-card .vx-toc-body{ display:block !important } }

.vx-cta-card .vx-card-body{padding:12px}
.vx-btn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 12px;font-weight:600;cursor:pointer;text-decoration:none}
.vx-btn-primary{background:var(--vx-accent);border:1px solid var(--vx-accent);color:#fff}
.vx-btn-outline{background:#fff;border:1px solid var(--vx-border);color:#111827}
.vx-btn[aria-disabled="true"], .vx-btn.is-disabled{opacity:.5;cursor:not-allowed}
.vx-btn .vx-icon{width:16px;height:16px}
.vx-cta-stack{display:flex;flex-direction:column;gap:10px}

.vx-contact-card .vx-card-body{padding:10px 12px}
.vx-contact-list{display:flex;flex-direction:column;gap:8px}
.vx-contact-item{display:flex;align-items:center;gap:8px;color:#374151;text-decoration:none;border-radius:8px;padding:6px 8px}
.vx-contact-item:hover{background:#f8fafc}
.vx-contact-item .vx-icon{width:16px;height:16px;color:#6b7280}
.vx-contact-item small{color:#6b7280}

/* 右列正文：缩小实际内容宽度，标题与元信息居中且顺序为 标题 → 元信息 */
.vx-article{grid-area:article; padding:0}
.vx-article .vx-content{ padding:22px; max-width: 720px; margin: 0 auto; }
@media (max-width:900px){ .vx-article .vx-content{ max-width: 100%; } }

.vx-title{font-size:26px;line-height:1.25;margin:2px 0 8px; text-align:center}
.vx-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--vx-muted);font-size:12px; justify-content:center; text-align:center; margin-top:6px;}

/* 顶部主图 16:9，随内容宽度，保持 contain；不遮挡 */
.vx-hero{border-radius:14px;border:1px solid var(--vx-border);margin:12px 0;overflow:hidden;aspect-ratio:16/9;background:#f6f7f9;display:flex;align-items:center;justify-content:center}
.vx-hero img{width:100%;height:100%;object-fit:contain}
.vx-hero figcaption{display:none}

/* 正文排版更小一号，图片高度也缩小以适配窄内容 */
.vx-prose{line-height:1.78;font-size:15px}
.vx-prose h2{margin-top:20px;margin-bottom:10px;font-size:20px;border-left:3px solid var(--vx-text);padding-left:10px}
.vx-prose h3{margin:12px 0 6px;font-size:16px}
.vx-prose p{margin:7px 0}
.vx-prose a{color:var(--vx-brand);text-decoration:underline;word-break:break-all}
.vx-prose img{display:block;max-width:100%;height:auto;max-height:480px;margin:8px auto;border-radius:12px;border:1px solid var(--vx-border);background:#fff}
.vx-prose blockquote{border-left:3px solid #e5e7eb;margin:8px 0;padding:8px 12px;color:#6b7280;background:#fafafa;border-radius:8px}
.vx-prose table{border-collapse:collapse;width:100%;margin:10px 0}
.vx-prose th,.vx-prose td{border:1px solid var(--vx-border);padding:8px;text-align:left}
.vx-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#f3f4f6;border-radius:6px;padding:2px 6px}
.vx-prose h2,.vx-prose h3{scroll-margin-top:90px}
.vx-prose pre{max-width:100%;overflow:auto}

/* 标签与关联内容 */
.vx-tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0; justify-content:center}
.vx-tag{font-size:12px;border:1px solid var(--vx-border);padding:6px 10px;border-radius:999px;background:#fff}
.vx-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px; padding: 0 22px 22px}
@media (max-width:640px){.vx-grid2{grid-template-columns:1fr}}
.vx-item{display:block;padding:12px;border-radius:14px;border:1px solid var(--vx-border);background:#fff;transition:.2s box-shadow}
.vx-item:hover{box-shadow:var(--vx-shadow)}
.vx-item .thumb{width:140px;height:96px;border-radius:10px;object-fit:cover}

/* 取消相关产品（如有残留则隐藏） */
#vx-related-products{display:none!important}

/* Utilities */
.vx-hidden{display:none!important}
.vx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
