/* =====================================================
   qing-cta-banner  —  CTA 号召版块（背景图 + 标题 + 描述 + 按钮）
   前缀: qcb-
   对应源码 .manual-cta（含 .manual-cta--about 竖排变体）
   ===================================================== */

.qcb-wrap {
  position: relative;
  background-color: #061a3a;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 190px 0;
  /* 版块高度：min-height 而非 height —— 内容超过设定值时能自然长高，不会溢出。
     默认 0 表示不生效，高度仍由上下内边距撑出（保持原有表现）；
     在「版块高度」控件里设了值，就以该值为下限。 */
  min-height: var(--qcb-min-h, 0px);
  box-sizing: border-box;
  /* 设了高度后内容要在多出来的空间里纵向居中 */
  display: flex;
  align-items: var(--qcb-v-align, center);
  overflow: hidden;
}

/* 左侧加深遮罩（横排样式默认开启） */
.qcb-wrap--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #10294f 0%,
    #10294f 32%,
    rgba(16, 41, 79, 0.85) 52%,
    rgba(16, 41, 79, 0.5) 72%,
    rgba(16, 41, 79, 0.2) 100%
  );
  pointer-events: none;
}

.qcb-inner {
  position: relative;
  z-index: 2;
  /* 父级 .qcb-wrap 现在是 flex 容器（为了纵向居中）。
     flex 子项默认按内容收缩，这里显式占满，
     max-width + margin:0 auto 的横向居中才照旧生效。 */
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* ---------- 竖排变体（关于页「加入我们」） ----------
   --qcb-h-align 由「内容横向对齐」控件写在 .qcb-wrap 上，
   取值 start / center / end。这三个词 align-items 与 text-align
   都认，所以同一个变量既定位块、又对齐块内文字。
   缺省 start＝保持原有左对齐表现。 */
.qcb-inner--stack {
  flex-direction: column;
  align-items: var(--qcb-h-align, start);
  justify-content: center;
  gap: 26px;
  text-align: var(--qcb-h-align, start);
}

.qcb-inner--stack .qcb-text {
  flex: 0 0 auto;
}

/* ---------- 文字区 ---------- */
.qcb-text {
  flex: 1 1 auto;
  min-width: 0;
}

.qcb-title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1.4;
  margin: 0 0 14px;
}

.qcb-desc {
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ---------- 按钮 ---------- */
.qcb-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #0b3d91 0%, #1f6feb 55%, #4a90ff 100%);
  box-shadow: 0 6px 18px rgba(31, 111, 235, 0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}

.qcb-btn:hover {
  background: linear-gradient(135deg, #0a367f 0%, #1b62d1 55%, #3a82f5 100%);
  box-shadow: 0 8px 22px rgba(31, 111, 235, 0.38);
  transform: translateY(-2px);
}

/* ---------- 进入视口动画 ---------- */
@keyframes qcb-enter-up {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.qing-motion-js .qcb-wrap:not(.is-motion-visible) .qcb-title,
.qing-motion-js .qcb-wrap:not(.is-motion-visible) .qcb-desc,
.qing-motion-js .qcb-wrap:not(.is-motion-visible) .qcb-btn {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}

.qcb-wrap.is-motion-visible .qcb-title,
.qcb-wrap.is-motion-visible .qcb-desc,
.qcb-wrap.is-motion-visible .qcb-btn {
  animation: qcb-enter-up 1.15s cubic-bezier(.22,1,.36,1) backwards;
}

.qcb-wrap.is-motion-visible .qcb-title { animation-delay: 100ms; }
.qcb-wrap.is-motion-visible .qcb-desc { animation-delay: 300ms; }
.qcb-wrap.is-motion-visible .qcb-btn { animation-delay: 520ms; }

@media (prefers-reduced-motion: reduce) {
  .qing-motion-js .qcb-wrap .qcb-title,
  .qing-motion-js .qcb-wrap .qcb-desc,
  .qing-motion-js .qcb-wrap .qcb-btn {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

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

/* ---------- 响应式 ≤860px ----------
   横排布局在这一档也转为竖排，所以这里同样读 --qcb-h-align，
   横排 / 竖排两种布局在手机端表现一致。 */
@media (max-width: 860px) {
  .qcb-inner {
    flex-direction: column;
    align-items: var(--qcb-h-align, start);
    text-align: var(--qcb-h-align, start);
  }

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

@media (max-width: 480px) {
  /* 按钮满宽，此档 align-items 对它已无影响。
     按钮标签保持基础规则里的居中 —— 满宽按钮的文字靠左看起来像是
     出了 bug，所以不跟随「内容横向对齐」。 */
  .qcb-btn {
    width: 100%;
  }
}