/* VIGOU Blog — 复用主站变量,杂志式阅读排版 */
.blog-nav {
    position: sticky; top: 0; z-index: 100;
    background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 14px 0;
}
.blog-nav .container { display: flex; justify-content: space-between; align-items: center; }
.blog-nav .links a {
    text-decoration: none; color: var(--text); font-weight: 500;
    margin-left: 22px; font-size: 1rem; white-space: nowrap;
}
.blog-nav .links a:hover { color: var(--accent); }
.blog-nav .links a.cta {
    background: var(--accent); color: #fff; padding: 9px 18px;
    border-radius: 8px; font-weight: 600;
}

.blog-hero { background: var(--bg-dark); color: #fff; padding: 64px 0 48px; text-align: center; }
.blog-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 12px; }
.blog-hero p { color: rgba(255,255,255,0.75); max-width: 640px; margin: 0 auto; }

.blog-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px; padding: 48px 0 64px;
}
.post-card {
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex; flex-direction: column;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.14); }
.post-card img { width: 100%; height: 190px; object-fit: cover; }
.post-card .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card .tag { color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.post-card h2 { font-size: 1.15rem; line-height: 1.4; }
.post-card h2 a { text-decoration: none; color: var(--primary); }
.post-card h2 a:hover { color: var(--accent); }
.post-card p { color: var(--text-light); font-size: .92rem; line-height: 1.55; flex: 1; }
.post-card .meta { color: #9aa0a6; font-size: .8rem; }

/* ===== 文章页 ===== */
.article-wrap { max-width: 780px; margin: 0 auto; padding: 40px 20px 72px; }
.breadcrumbs { font-size: .85rem; color: #9aa0a6; margin-bottom: 18px; }
.breadcrumbs a { color: var(--text-light); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.article-wrap h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.25; color: var(--primary); margin-bottom: 14px; }
.article-meta { color: #9aa0a6; font-size: .88rem; margin-bottom: 28px; }
.article-wrap img.hero { width: 100%; border-radius: 14px; margin-bottom: 30px; }
.article-wrap h2 { font-size: 1.45rem; color: var(--primary); margin: 38px 0 14px; }
.article-wrap h3 { font-size: 1.15rem; color: var(--primary); margin: 26px 0 10px; }
.article-wrap p, .article-wrap li { font-size: 1.02rem; line-height: 1.75; color: #3c4043; margin-bottom: 14px; }
.article-wrap ul, .article-wrap ol { padding-left: 24px; margin-bottom: 16px; }
.article-wrap li { margin-bottom: 8px; }
.article-wrap table { width: 100%; border-collapse: collapse; margin: 20px 0 26px; font-size: .95rem; }
.article-wrap th, .article-wrap td { padding: 11px 14px; border: 1px solid #e8eaed; text-align: left; }
.article-wrap th { background: var(--bg-section); font-weight: 600; color: var(--primary); }
.article-wrap tr:nth-child(even) td { background: #fafbfc; }
.article-wrap img.inline { width: 100%; border-radius: 12px; margin: 8px 0 24px; }

.cta-box {
    background: linear-gradient(135deg, var(--primary), #16213e);
    color: #fff; border-radius: 16px; padding: 32px 30px; margin: 44px 0;
    text-align: center;
}
.cta-box h3 { color: #fff; font-size: 1.3rem; margin: 0 0 10px; }
.cta-box p { color: rgba(255,255,255,0.8); margin-bottom: 20px; }
.cta-box a.btn-cta {
    display: inline-block; background: var(--accent); color: #fff;
    padding: 13px 32px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.cta-box a.btn-cta:hover { background: var(--accent-light); }

.faq-item { border-bottom: 1px solid #e8eaed; padding: 16px 0; }
.faq-item h3 { margin: 0 0 8px; font-size: 1.05rem; }
.faq-item p { margin: 0; }

.related { background: var(--bg-section); border-radius: 14px; padding: 24px 26px; margin-top: 40px; }
.related h3 { margin: 0 0 12px; color: var(--primary); }
.related a { display: block; color: var(--accent); text-decoration: none; margin-bottom: 8px; font-weight: 500; }

.blog-footer { background: var(--bg-dark); color: rgba(255,255,255,0.65); text-align: center; padding: 28px 16px; font-size: .88rem; }
.blog-footer a { color: #fff; text-decoration: none; }

@media (max-width: 640px) {
    .blog-nav .links a { margin-left: 12px; font-size: .85rem; }
    .blog-nav .links a.cta { padding: 7px 12px; }
}