/* =====================================================
   qing-prod-position  —  产品定位（左竖条标题+段落，右图）
   前缀: qpp-
   对应源码 .pd-section.pd-position
   ===================================================== */

.qpp-wrap {
  background: #f2f6fd;
  padding: 72px 0;
}

@keyframes qpp-enter-left { from { opacity: 0; transform: translate3d(-58px,0,0); } to { opacity: 1; transform: none; } }
@keyframes qpp-enter-right { from { opacity: 0; transform: translate3d(58px,0,0); } to { opacity: 1; transform: none; } }
.qing-motion-js .qpp-wrap:not(.is-motion-visible) .qpp-left,
.qing-motion-js .qpp-wrap:not(.is-motion-visible) .qpp-right { opacity: 0; }
.qing-motion-js .qpp-wrap:not(.is-motion-visible) .qpp-left { transform: translate3d(-58px,0,0); }
.qing-motion-js .qpp-wrap:not(.is-motion-visible) .qpp-right { transform: translate3d(58px,0,0); }
.qpp-wrap.is-motion-visible .qpp-left { animation: qpp-enter-left 1.35s cubic-bezier(.16,1,.3,1) 120ms backwards; }
.qpp-wrap.is-motion-visible .qpp-right { animation: qpp-enter-right 1.35s cubic-bezier(.16,1,.3,1) 480ms backwards; }
@media (prefers-reduced-motion: reduce) { .qing-motion-js .qpp-wrap .qpp-left, .qing-motion-js .qpp-wrap .qpp-right { opacity: 1; transform: none; animation: none; } }

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

.qpp-left {
  flex: 1 1 44%;
  min-width: 0;
}

.qpp-right {
  flex: 1 1 56%;
  min-width: 0;
}

/* ---------- 左侧蓝色竖条标题 ---------- */
.qpp-title {
  font-size: 30px;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
  text-align: left;
  padding-left: 18px;
  border-left: 5px solid #1f6feb;
  margin: 0 0 40px;
}

/* ---------- 段落列表 ---------- */
.qpp-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qpp-item {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  margin: 0;
  position: relative;
}

/* 项目符号模式（源码无，作为可选增强） */
.qpp-list--bullet .qpp-item {
  padding-left: 18px;
}

.qpp-list--bullet .qpp-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1f6feb;
}

/* ---------- 右侧图片 ---------- */
.qpp-media {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  display: block;
}

.qpp-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* 无图占位（源码 .pd-position-media 未接图时的斜纹样式） */
.qpp-media--empty {
  min-height: 300px;
  border: 1px dashed #b8b8b8;
  border-radius: 0;
  background: repeating-linear-gradient(
    -45deg,
    #dcdcdc,
    #dcdcdc 10px,
    #e4e4e4 10px,
    #e4e4e4 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 700;
  color: #555;
}

/* =====================================================
   版块背景图模式（配图方式 = 版块背景图）
   不输出右栏，图片铺作整个版块背景，文案仍占左侧一块。
   图片 URL 由 PHP 以 --qpp-bg 传入，不写成内联 background-image：
   内联样式压过媒体查询，那样手机端就换不了图。
   ===================================================== */

.qpp-wrap--bg {
  position: relative;
  background-image: var(--qpp-bg, none);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  /* 高度兜底值。背景图不参与布局撑不起高度，实际高度由
     「背景图样式 → 版块最小高度」控件给（默认 480px）。 */
  min-height: 480px;
  display: flex;
  align-items: center;
}

/* 手机端专用图：设了 --qpp-bg-m 就换，没设则回落到主图 */
@media (max-width: 860px) {
  .qpp-wrap--bg {
    background-image: var(--qpp-bg-m, var(--qpp-bg, none));
  }
}

/* 整版遮罩层：盖在背景图之上、文案之下 */
.qpp-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 文案要浮在遮罩之上 */
.qpp-wrap--bg .qpp-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* 关键一条：右栏没了之后，左栏的 flex-grow:1 会让它铺满整行，
   「文字栏宽度占比」就失效了。这里禁止它拉伸，让 flex-basis
   （由占比控件输出）真正说话。
   权重 0,2,0，与控件的 flex-basis 不冲突（改的是不同属性）。 */
.qpp-wrap--bg .qpp-left {
  flex-grow: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

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

@media (max-width: 860px) {
  .qpp-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 堆叠后铺满。父级 align-items 变化时 flex-basis 不参与横向计算，
     故只需给 width，不与「文字栏宽度占比」控件冲突。 */
  .qpp-left,
  .qpp-right {
    width: 100%;
  }

  .qpp-title {
    font-size: 24px;
  }

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

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

  .qpp-item {
    font-size: 15px;
  }
}