/* ===== blog.css - 博客文章公共样式 ===== */

/* 文章容器 */
.blog-article { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; }
.blog-article h1 { font-size: 1.8rem; line-height: 1.5; margin-bottom: 12px; }

/* 元信息 */
.blog-meta { color: var(--gray); font-size: 14px; margin-bottom: 32px; display: flex; gap: 16px; flex-wrap: wrap; }
.blog-meta span { display: flex; align-items: center; gap: 4px; }

/* 正文排版 */
.blog-article h2 { font-size: 1.3rem; margin: 36px 0 16px; color: var(--dark); }
.blog-article p { line-height: 1.9; margin-bottom: 16px; color: #333; }
.blog-article strong { color: var(--primary); }
.blog-article ul, .blog-article ol { margin: 16px 0; padding-left: 24px; }
.blog-article li { line-height: 2; color: #333; margin-bottom: 8px; }

/* 标签 */
.blog-tag { display: inline-block; background: var(--primary); color: #fff; padding: 4px 12px; border-radius: 4px; font-size: 12px; margin-bottom: 20px; }

/* 统一CTA卡片 */
.article-cta-card {
  background: #f7f8fa;
  border-radius: 12px;
  padding: 32px 28px;
  margin-top: 48px;
  text-align: center;
}
.article-cta-card .cta-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.article-cta-card .cta-desc {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}
.article-cta-card .cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.article-cta-card .cta-btn-primary {
  display: inline-block;
  background: #0066CC;
  color: #fff;
  padding: 10px 28px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s, transform 0.15s;
}
.article-cta-card .cta-btn-primary:hover {
  background: #0052a3;
  transform: translateY(-1px);
}
.article-cta-card .cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0066CC;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 0;
  transition: color 0.15s;
}
.article-cta-card .cta-btn-secondary:hover {
  color: #004494;
}

/* 底部导航 */
.article-footer-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #eaeaea;
  flex-wrap: wrap;
  gap: 12px;
}
.article-footer-nav a {
  color: #0066CC;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.15s;
}
.article-footer-nav a:hover {
  color: #004494;
  text-decoration: underline;
}

/* 返回链接（顶部） */
.back-to-blog {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0066CC;
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 20px;
  transition: color 0.15s;
}
.back-to-blog:hover {
  color: #004494;
  text-decoration: underline;
}

/* 趋势对比网格 */
.trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.trend-grid > div { background: var(--light); padding: 20px; border-radius: 8px; }
.trend-grid h4 { margin-bottom: 8px; font-size: 1rem; color: var(--dark); }
.trend-grid p { margin: 0; color: #666; line-height: 1.6; font-size: 14px; }
@media (max-width: 600px) { .trend-grid { grid-template-columns: 1fr; } }

/* 品牌对比 */
.brand-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.brand-compare > div { background: var(--light); padding: 16px; border-radius: 8px; text-align: center; }
.brand-compare h5 { margin-bottom: 8px; font-size: 14px; }
.brand-compare p { font-size: 13px; color: #666; margin: 0; }

/* 技术框 */
.tech-box { background: #f8f9fa; border: 1px solid #e9ecef; padding: 20px; margin: 20px 0; border-radius: 8px; }
.tech-box h4 { color: var(--dark); margin-bottom: 12px; font-size: 1rem; }

/* 迷你对比 */
.compare-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.compare-mini > div { background: var(--light); padding: 16px; border-radius: 8px; }
.compare-mini h5 { margin-bottom: 8px; font-size: 14px; }

/* 步骤列表 */
.step-list { counter-reset: step; margin: 24px 0; }
.step-list > div { counter-increment: step; position: relative; padding-left: 48px; margin-bottom: 20px; }
.step-list > div::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.step-list h4 { margin: 0 0 8px; color: var(--dark); }
.step-list p { margin: 0; color: #666; line-height: 1.6; }

/* 提示框 */
.highlight-box { background: #e8f5e9; border-left: 4px solid #4caf50; padding: 16px 20px; margin: 20px 0; border-radius: 0 8px 8px 0; }
.warning-box { background: #fff3cd; border-left: 4px solid #ffc107; padding: 16px 20px; margin: 20px 0; border-radius: 0 8px 8px 0; }
.warning-box strong { color: #856404; }

/* 新文章样式 (article-body) */
.article-body { max-width: 720px; margin: 0 auto; padding: 40px 20px; }
.article-body h2 { color: #0066CC; margin: 1.8em 0 0.6em; font-size: 1.3em; }
.article-body p { line-height: 2; color: #333; margin: 1em 0; font-size: 16px; }
.article-body ul, .article-body ol { line-height: 2; color: #333; margin: 1em 0; padding-left: 24px; }
.article-body li { margin: 0.4em 0; }
.article-body .highlight { background: #f0f7ff; border-left: 4px solid #0066CC; padding: 16px 20px; margin: 20px 0; border-radius: 0 8px 8px 0; }
.article-body .tip { background: #fff8e6; border-left: 4px solid #f5a623; padding: 16px 20px; margin: 20px 0; border-radius: 0 8px 8px 0; }
.article-meta { color: #888; font-size: 14px; margin-bottom: 8px; }