/* ============================================================
 * 关于我们页专属样式 (css/about.css) —— 简洁版
 * 版式：左侧"关于我们"标题 + 几段正文，右侧分子网络装饰图。
 * 只依赖 style.css 的 .container，其余全部在本文件定义。
 * ============================================================ */

/* ---------- 1. 页面主体：白底、上下留白 ---------- */
.ab-simple { background: #fff; padding: 70px 0 90px; }

/* 双栏：左文字 / 右图，垂直居中 */
.ab-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}

/* ---------- 2. 左栏：标题 + 正文段落 ---------- */
.ab-text h1, .ab-text h2 {
  font-size: 34px;
  font-weight: 700;
  color: #222;
  letter-spacing: 2px;
  margin-top: 0.83em;
  margin-bottom: 34px;
}

.ab-text p {
  font-size: 14px;
  color: #8f8f8f;          /* 参考图的浅灰正文色 */
  line-height: 2.1;        /* 宽松行距，阅读舒适 */
  text-align: justify;     /* 两端对齐，段落边缘整齐 */
  margin-bottom: 26px;
}
.ab-text p:last-child { margin-bottom: 0; }

/* ---------- 3. 右栏：分子网络装饰图（内联 SVG） ---------- */
.ab-art .mol-svg { width: 100%; height: auto; display: block; }

/* ---------- 4. 响应式 ---------- */
/* 平板：收窄间距、标题略小 */
@media (max-width: 991px) {
  .ab-simple { padding: 56px 0 64px; }
  .ab-grid { gap: 36px; }
  .ab-text h1, .ab-text h2 { font-size: 28px; margin-bottom: 24px; }
}

/* 手机：上下堆叠，装饰图限宽居中放在文字下方 */
@media (max-width: 767px) {
  .ab-simple { padding: 44px 0 52px; }
  .ab-grid { grid-template-columns: 1fr; gap: 36px; }
  .ab-text h1, .ab-text h2 { font-size: 24px; margin-bottom: 20px; }
  .ab-text p { font-size: 13px; margin-bottom: 18px; }
  .ab-art { max-width: 340px; margin: 0 auto; }
}