/* =====================================================
   qing-section-intro  —  版块导语（居中标题 + 横线 + 富文本简介）
   前缀: qsi-
   ===================================================== */

.qsi-wrap {
  background: #f2f6fd;
  padding: 64px 0;
}

.qsi-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
}

/* ---------- 版块标题 ----------
   两种形态由「标题对齐」控件切换：
   --center（默认）：标题居中，装饰条是下方一小段横线
   --left          ：装饰条是标题左侧的竖条

   装饰条颜色 / 粗细由控件以自定义属性传入（--qsi-bar-c、--qsi-bar-w），
   两种形态各自消费。不让控件直接输出 border-left-*：居中模式要把竖条
   整条去掉，而控件内联 CSS 的权重和加载顺序都在本文件之后，压不掉。 */
.qsi-title {
  font-size: 30px;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
  margin: 0 0 40px;
}

/* 居中：横线在标题下方。
   用 ::after 而不是 border-bottom —— border 会拉满整个块宽度，
   这里要的是一小段居中短线。 */
.qsi-title--center {
  text-align: center;
  padding-bottom: 14px;
  position: relative;
}

.qsi-title--center::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--qsi-bar-len, 56px);
  height: var(--qsi-bar-w, 3px);
  background-color: var(--qsi-bar-c, #1f6feb);
  border-radius: 2px;
}

/* 左对齐：竖条 */
.qsi-title--left {
  text-align: left;
  padding-left: 18px;
  border-left: var(--qsi-bar-w, 3px) solid var(--qsi-bar-c, #1f6feb);
}

/* ---------- 富文本内容 ----------
   margin: 0 auto 让内容块在收窄（「内容最大宽度」）后仍然居中。 */
.qsi-text {
  max-width: 900px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.9;
  color: #444;
  text-align: center;
}

/* 富文本编辑器产出的标签需要一层复位，否则会带上主题或浏览器的
   默认外边距，导致内容块上下多出空白、段间距不受控件管。
   段落间距由「段落间距」控件驱动（作用在 p:not(:last-child) 上）。 */
.qsi-text > *:first-child {
  margin-top: 0;
}

.qsi-text > *:last-child {
  margin-bottom: 0;
}

.qsi-text p {
  margin: 0 0 14px;
}

.qsi-text p:last-child {
  margin-bottom: 0;
}

/* 富文本里可能出现的其它块级标签，统一继承对齐与行高 */
.qsi-text h1,
.qsi-text h2,
.qsi-text h3,
.qsi-text h4,
.qsi-text h5,
.qsi-text h6 {
  color: inherit;
  line-height: 1.4;
  margin: 0 0 12px;
}

.qsi-text ul,
.qsi-text ol {
  /* 居中对齐时列表符号在块外会显得游离，改用 inside 让它跟着文字 */
  list-style-position: inside;
  padding-left: 0;
  margin: 0 0 14px;
}

.qsi-text li {
  margin-bottom: 6px;
}

.qsi-text a {
  color: #1f6feb;
  text-decoration: none;
  transition: color 0.2s ease;
}

.qsi-text a:hover {
  text-decoration: underline;
}

.qsi-text img {
  max-width: 100%;
  height: auto;
}

.qsi-text strong,
.qsi-text b {
  font-weight: 700;
}

/* =====================================================
   响应式
   说明：版块内边距、内容区左右内边距、标题下方间距、内容最大宽度、
   段落间距等，均由 Elementor 响应式控件按断点输出内联 CSS；同一属性
   不在此重复声明，否则桌面默认值会压掉媒体查询。
   此处仅保留没有控件默认值的属性（字号）。
   ===================================================== */

@media (max-width: 860px) {
  .qsi-title {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .qsi-title {
    font-size: 21px;
  }

  .qsi-text {
    font-size: 14px;
  }
}