/*
 * 文章 / 详情页正文排版
 *
 * 背景：/solutions/detail、/weapp/detail 两个模板使用了 .article-main / .article-content /
 * .features-grid / .feature-chip / .cta-wrap 这些类，但全站 CSS 中没有 .article-content 的任何定义，
 * 正文完全按浏览器默认样式渲染（无段落间距、图片可能溢出、列表缩进错乱）。
 *
 * 注意：unify.css 第 891 行有一条 `p { font-size / line-height / color !important }` 的强制统一，
 * 所以这里的正文字号必须用「更高特异性的 !important」才能生效，
 * 而 margin 不受影响，可以正常写。
 */

/* ---- 正文卡片容器 ---- */
.article-main {
  background: #fff;
  border-radius: 16px;
  padding: 48px 56px;
  box-shadow: 0 4px 24px rgba(10, 55, 111, .08);
}

/* ---- 正文基础排版 ---- */
.article-main .article-content {
  font-size: 1.05rem !important;
  line-height: 2 !important;
  color: #1c3452 !important;
}

.article-main .article-content > *:first-child { margin-top: 0; }
.article-main .article-content > *:last-child { margin-bottom: 0; }

.article-main .article-content p {
  font-size: 1.05rem !important;
  line-height: 2 !important;
  color: #1c3452 !important;
  margin: 0 0 20px !important;
}

.article-main .article-content h2 {
  font-size: 1.4rem !important;
  line-height: 1.45 !important;
  color: #0a376f !important;
  margin: 40px 0 18px !important;
  padding-left: 14px;
  border-left: 4px solid #e8107a;
}

.article-main .article-content h3 {
  font-size: 1.18rem !important;
  line-height: 1.5 !important;
  color: #1c3452 !important;
  margin: 30px 0 14px !important;
}

.article-main .article-content h4 {
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  color: #1c3452 !important;
  margin: 24px 0 12px !important;
}

.article-main .article-content ul,
.article-main .article-content ol {
  margin: 0 0 20px;
  padding-left: 26px;
}

.article-main .article-content li {
  margin-bottom: 10px;
  line-height: 1.9;
}

.article-main .article-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 26px auto;
  border-radius: 12px;
}

.article-main .article-content blockquote {
  margin: 26px 0;
  padding: 20px 24px;
  background: #f6f9fe;
  border-left: 4px solid #0a2d5e;
  border-radius: 0 10px 10px 0;
  color: #3c4a60;
}

.article-main .article-content blockquote p { margin: 0 !important; }

.article-main .article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: .95rem;
  display: block;
  overflow-x: auto;
}

.article-main .article-content th,
.article-main .article-content td {
  border: 1px solid #e4eaf5;
  padding: 10px 14px;
  text-align: left;
}

.article-main .article-content th {
  background: #f4f8ff;
  font-weight: 600;
  color: #0a376f;
}

.article-main .article-content a {
  color: #e8107a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-main .article-content code {
  background: #f4f6fa;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .92em;
}

.article-main .article-content pre {
  background: #0f1d33;
  color: #e6edf7;
  padding: 20px 22px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 24px 0;
  line-height: 1.7;
}

.article-main .article-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* ---- 顶部大图 ---- */
.article-thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  margin-bottom: 32px;
}

/* ---- 功能特点区块 ---- */
.features-section { margin-top: 40px; }

.features-section > h3 {
  margin: 0 0 18px !important;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f6f9fe;
  border: 1px solid #e4eaf5;
  border-radius: 10px;
  font-size: .95rem;
  color: #1c3452;
  line-height: 1.6;
}

/* ---- 底部 CTA ---- */
.cta-wrap {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid #eef2f8;
  text-align: center;
}

/* ---- 移动端 ---- */
@media (max-width: 768px) {
  .article-main {
    padding: 28px 20px;
    border-radius: 14px;
  }

  .article-main .article-content { font-size: 1rem !important; }

  .article-main .article-content p { font-size: 1rem !important; }

  .article-main .article-content h2 {
    font-size: 1.2rem !important;
    margin: 32px 0 14px !important;
  }

  .article-main .article-content h3 { font-size: 1.08rem !important; }

  .features-grid { grid-template-columns: 1fr; }
}