/* =====================================================
   qing-content-split  —  左文右图 / 左图右文 两列图文块
   前缀: qcs-
   对应源码 .pd-section.content-split（含 .about-layout 变体）
   ===================================================== */

.qcs-wrap {
  background: #fff;
  padding: 72px 0;
}

.qcs-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

/* 垂直居中变体（源码 .about-layout） */
.qcs-inner--middle {
  align-items: center;
}

/* 图文反转：图片在左、文字在右 */
.qcs-wrap--reverse .qcs-inner {
  flex-direction: row-reverse;
}

.qcs-left {
  flex: 1 1 50%;
  min-width: 0;
}

.qcs-right {
  flex: 1 1 50%;
  min-width: 0;
}

/* ---------- 标题 ---------- */
.qcs-title {
  font-size: 30px;
  font-weight: 800;
  color: #111;
  line-height: 1.35;
  text-align: left;
  margin: 0 0 24px;
}

/* ---------- 导语（加粗大字） ---------- */
.qcs-lead {
  font-size: 20px;
  line-height: 1.7;
  color: #111;
  font-weight: 700;
  margin: 0 0 20px;
}

/* ---------- 正文段落 ---------- */
.qcs-para {
  font-size: 16px;
  line-height: 1.9;
  color: #555;
  margin: 0 0 16px;
}

.qcs-para:last-child {
  margin-bottom: 0;
}

/* 段落内加粗（源码 .about-layout .content-para strong） */
.qcs-para strong,
.qcs-para b {
  color: #111;
  font-weight: 700;
}

/* ---------- 图片区 ---------- */
.qcs-media {
  width: 100%;
  overflow: hidden;
}

.qcs-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 完整显示图片（源码 .about-layout-media） */
.qcs-media--contain {
  min-height: 0;
  background: transparent;
  border: none;
  padding: 0;
}

.qcs-media--contain img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 无图占位 */
.qcs-media--empty {
  min-height: 320px;
  border: 1px dashed #b8b8b8;
  background: repeating-linear-gradient(
    -45deg,
    #dcdcdc,
    #dcdcdc 10px,
    #e4e4e4 10px,
    #e4e4e4 20px
  );
}

/* ---------- 左右分栏进入视口动画 ---------- */
@keyframes qcs-enter-left {
  from { opacity: 0; transform: translate3d(-42px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes qcs-enter-right {
  from { opacity: 0; transform: translate3d(42px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.qing-motion-js .qcs-wrap:not(.is-motion-visible) .qcs-left {
  opacity: 0;
  transform: translate3d(-42px, 0, 0);
}

.qing-motion-js .qcs-wrap:not(.is-motion-visible) .qcs-right {
  opacity: 0;
  transform: translate3d(42px, 0, 0);
}

.qcs-wrap.is-motion-visible .qcs-left {
  animation: qcs-enter-left 1.35s cubic-bezier(.22,1,.36,1) 120ms backwards;
}

.qcs-wrap.is-motion-visible .qcs-right {
  animation: qcs-enter-right 1.35s cubic-bezier(.22,1,.36,1) 480ms backwards;
}

@media (prefers-reduced-motion: reduce) {
  .qing-motion-js .qcs-wrap .qcs-left,
  .qing-motion-js .qcs-wrap .qcs-right {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* =====================================================
   响应式
   说明：外层内边距、内容区左右内边距、两列间距等，均由
   Elementor 响应式控件按断点输出内联 CSS；同一属性不在此
   重复声明，否则桌面默认值会压掉媒体查询。
   此处仅保留没有控件默认值的属性（堆叠方向 / 字号 / 占位高度）。
   ===================================================== */

/* ---------- 响应式 ≤860px：单列堆叠 ---------- */
@media (max-width: 860px) {
  .qcs-inner,
  .qcs-wrap--reverse .qcs-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 堆叠后按宽度铺满；column 方向下 flex-basis 不参与横向计算，
     故无需覆盖控件输出的 flex，避免与「文字栏宽度占比」冲突。 */
  .qcs-left,
  .qcs-right {
    width: 100%;
  }

  .qcs-title {
    font-size: 25px;
  }

  .qcs-media--empty {
    min-height: 220px;
  }
}