/* Blog 列表页与文章页样式。与 style.css 共存，仅 blog 相关页面加载。 */

/* ---------- 列表页 ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
.post-card{background:#fff;border:1px solid #e2dccf;border-radius:4px;padding:26px 24px;display:flex;flex-direction:column;gap:12px}
/* flex 子项在交叉轴默认 stretch，会把 inline-block 的 tag chip 拉成满宽长条 */
.post-card .article-tag{align-self:flex-start}
.post-card h2{font-size:19px;line-height:1.35;margin:0}
.post-card h2 a{color:var(--ink,#111)}
.post-card h2 a:hover{color:var(--green)}
.post-card p{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}
.post-card .card-link{margin-top:auto;font-size:12px;font-weight:700;color:var(--green)}
.post-empty{margin-top:28px;padding:34px 26px;background:#f7f6f2;border:1px dashed #d5cfc0;border-radius:4px;color:var(--muted);font-size:14px}

/* ---------- 文章页 ---------- */
.article-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green);background:#eef2e8;border-radius:999px;padding:5px 11px}
.breadcrumb{border-bottom:1px solid #eeebe2;padding:14px 0;font-size:12px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;color:#81877f}
.breadcrumb li+li:before{content:"/";margin-right:8px;color:#c3c7bd}
.post{max-width:800px;padding-top:40px;padding-bottom:64px}
.post-header{margin-bottom:26px}
.post-header h1{font-size:40px;line-height:1.2;margin:14px 0 10px}
.post-meta{font-size:12px;color:#81877f;margin:0}

/* Short answer 直答块 —— AI 检索最容易摘走这一段，视觉上要独立 */
.callout{background:#f2f7ee;border-left:3px solid var(--green);border-radius:0 4px 4px 0;padding:16px 18px;font-size:15px;line-height:1.7;color:#2f3a2c;margin:0 0 30px}
.callout b{color:var(--green)}

.post-body{font-size:15px;line-height:1.8;color:#333b32}
.post-body h2{font-size:25px;line-height:1.3;margin:38px 0 14px}
.post-body h3{font-size:18px;margin:26px 0 10px}
.post-body p{margin:0 0 16px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:22px}
.post-body li{margin-bottom:7px}
.post-body .highlight{background:#fdf8e8;border-left:3px solid #d9b64e;padding:12px 15px;border-radius:0 4px 4px 0;font-weight:600;color:#4a3f1e}
/* 桌面保持 table 布局才会撑满容器；display:block 会让表格收缩到内容宽度。
   窄屏才切成 block + 横向滚动，避免撑破视口。 */
.post-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:13px}
.post-body thead th{background:#f7f6f2;text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5d665c}
.post-body th,.post-body td{border:1px solid #e2dccf;padding:10px 12px;vertical-align:top}

/* CTA 转化块 —— 统一注入，避免出现「改版丢了转化层」的问题 */
.post-cta{margin:44px 0 0;background:var(--green);color:#fff;border-radius:6px;padding:32px 30px}
.post-cta h2{margin:0 0 10px;font-size:24px;color:#fff}
.post-cta p{margin:0 0 20px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.86)}
.post-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.post-cta .btn-primary{background:#fff;color:var(--green)}
.post-cta .btn-ghost{border:1px solid rgba(255,255,255,.55);color:#fff}
.post-cta .btn-ghost:hover{background:rgba(255,255,255,.12)}

.post-faq{margin-top:44px}
.post-faq h2{font-size:25px;margin:0 0 18px}
.faq-item{border-top:1px solid #eeebe2;padding:18px 0}
.faq-q{font-size:16px;margin:0 0 8px}
.faq-a{font-size:14px;line-height:1.75;color:#4a5248}
.faq-a p{margin:0 0 10px}

@media (max-width:900px){.post-grid{grid-template-columns:1fr}}
@media (max-width:620px){.post-header h1{font-size:30px}.post-cta{padding:26px 22px}.post-cta-actions .btn{width:100%}
.post-body table{display:block;overflow-x:auto;white-space:nowrap}}