/* ============================================================================
   关于我们 / 协会服务 单页模板：1920 栅格 → 1200 内容区收敛
   ----------------------------------------------------------------------------
   【背景】
   xiehuijianjie/index.css 是按 1920px 设计稿生成的（左外边距固定 361px，
   内容宽度 1198/1184px）。在 1440 及以下屏幕上：
       361 + 1198 = 1559px > 1440px  → 正文被推出视口、右侧被裁切。
   客户反馈「协会简介页面布局不对」，根因就是这个溢出。

   【影响范围】使用模板 101（关于我们-单页）与 119（协会服务-单页）的全部栏目：
       关于我们 / 协会简介 / 协会章程 / 理事会 / 协会领导 / 组织机构 /
       会员必读 / 《化工管理》杂志社 / 申请入会 / 留言中心 /
       协会服务及团体标准、信用评价、专家智库、石化设备智能运维、
       书籍推荐、技术推介、会员服务

   【做法】不改原文件（避免影响其他引用），新增本覆盖文件并在模板里后置引入。
   按设计图比例换算（设计稿 1920 → 内容区 1200，×0.625）：
       左边距 361 → 居中（margin auto）
       内容宽 1198 → 1200
       左侧子导航 274 → 274（保持原尺寸，占比更接近设计观感）
       正文区 873 → 自适应剩余
   ========================================================================== */

/* ---------- 统一外壳：1200px 居中 ---------- */
.single-page-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* 灰色分隔条 */
.group_4 {
  width: 100%;
  max-width: 1200px;
  margin: 24px auto 0;
  height: 14px;
  background-color: #ededed;
}

/* 标题行：左侧栏目名（红底）+ 右侧发布时间/来源/分享 */
/*
   标题行（设计图实测，1280 画布像素扫描）：
     左段「关于我们」红块  x 96~259  → 宽 164px，**与下方粉色子导航同宽对齐**
     右段「协会简介」红块  x 281~348  → 宽 68px（窄标题）
     两段间距 21px
   换算到 1200 内容区（×1.51）：
     左段 ≈ 248px（= 子导航宽度），右段 ≈ 103px
   旧实现只有一个红块，两侧宽度都与设计图不符。
*/
.group_5 {
  width: 100%;
  max-width: 1200px;
  margin: 18px auto 0;
  display: flex;
  align-items: stretch;
  gap: 24px;
  box-sizing: border-box;
}

/* 左段：父栏目名，宽度与子导航一致 */
.group_5 > .text-wrapper_3 {
  flex: 0 0 274px;
  width: 274px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d5100d;
}

.group_5 > .text-wrapper_3 .text_19 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* 右段：当前栏目名 + 元信息 */
.group_5 > .box_3 {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid #d5100d;
  height: auto;
  margin-top: 0;
}

/* 右段红块：当前栏目名（窄） */
.group_5 > .box_3 .text-wrapper_5 {
  flex: 0 0 auto;
  position: static;
  left: auto;
  top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 103px;
  height: 40px;
  padding: 0 18px;
  background-color: #d5100d;
}

.group_5 > .box_3 .text_35 {
  width: auto;
  height: auto;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* 元信息（发布时间 / 来源 / 分享到） */
.group_5 > .box_3 .box_3__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.group_5 > .box_3 .text_20 {
  width: auto;
  height: auto;
  color: #666;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
  margin-left: 0;
}

.group_5 > .box_3 .image_5 {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  object-fit: contain;
  display: block;
}

/* ---------- 内容行：左子导航 + 右正文 ---------- */
.group_6 {
  width: 100%;
  max-width: 1200px;
  margin: 6px auto 60px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  box-sizing: border-box;
  justify-content: flex-start;
}

/* 左侧子导航容器 */
.group_6 .box_4 {
  flex: 0 0 274px;
  width: 274px;
  height: auto;
  background-color: #fff3f3;
  box-sizing: border-box;
  padding-bottom: 12px;
}

/* 正文区 */
.group_6 .text-wrapper_4 {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin-top: 0;
  padding-top: 6px;
}

/* 正文排版：设计图行高较松、首行缩进两字 */
.text-wrapper_4.cms-article-body {
  font-size: 14px;
  line-height: 2;
  color: #333;
}

.text-wrapper_4.cms-article-body p {
  margin: 0 0 12px;
  text-indent: 2em;
}

/* 正文内的标题类元素不缩进 */
.text-wrapper_4.cms-article-body h1,
.text-wrapper_4.cms-article-body h2,
.text-wrapper_4.cms-article-body h3,
.text-wrapper_4.cms-article-body li {
  text-indent: 0;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .group_6 {
    flex-direction: column;
    gap: 16px;
  }
  .group_6 .box_4 {
    flex: 1 1 auto;
    width: 100%;
  }
  .group_5 {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .box_3 {
    justify-content: flex-start;
    border-bottom: none;
    padding-bottom: 0;
  }
  .text_20 { white-space: normal; text-align: left; }
}