/* =====================================================
   qing-contact-hero  —  联系我们首屏（整幅背景图 + 渐变标题）
   前缀: qch-
   对应源码 .page-hero.page-hero--banner
   ===================================================== */

.qch-wrap {
  position: relative;
  background-color: #ececec;
  overflow: hidden;
}

.qch-scene {
  position: absolute;
  inset: 0;
  background-color: #ececec;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-image: var(--qch-bg, none);
  z-index: 1;
}

/* 可调白色遮罩：窄屏用来压亮背景保证文字可读（源码 ≤860px 用了 0.72） */
.qch-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  opacity: 0;
  pointer-events: none;
}

.qch-picture,
.qch-background-image { display: block; width: 100%; }
.qch-background-image { height: auto; }
.qch-wrap.qch-full { display: grid; }
.qch-full .qch-scene,
.qch-full .qch-inner { grid-area: 1 / 1; }
.qch-full .qch-scene { position: relative; inset: auto; }
.qch-full .qch-inner { align-self: center; min-height: 0 !important; }

.qch-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 60px 50px;
  box-sizing: border-box;
  min-height: 460px;
  display: flex;
  align-items: center;
  gap: 60px;
}

.qch-left {
  flex: 0 1 620px;
  min-width: 0;
}

/* ---------- 眉标 ---------- */
.qch-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #111;
  line-height: 1.5;
  margin: 0 0 22px;
}

/* ---------- 标题 ---------- */
.qch-title {
  font-size: 60px;
  font-weight: 800;
  color: #0b3d91;
  line-height: 1.15;
  margin: 0 0 26px;
}

/* ---------- 渐变标题 ----------
   实现要点：
   1. 用 background-clip: text + text-fill-color: transparent 让文字
      显示为背景渐变。必须同时写 -webkit- 前缀，Safari / 旧 Chrome 只认前缀版。
   2. 整段包在 @supports 里：不支持该属性的浏览器会跳过整块，
      文字保持上面 .qch-title 的纯色 #0b3d91，不会变成透明看不见。
   3. 默认 display:inline-block + width:fit-content —— 渐变的绘制范围是
      元素盒子，若元素撑满整行，文字只会用到渐变最左边一小段，看不出渐变。
      收窄到文字实际宽度后，整条渐变才完整落在文字上。 */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  /* 选择器写三层（0,3,0），特异性高于「文字颜色」控件输出的
     `.elementor-element-xxx .qch-title`（0,2,0）。否则控件的 color
     会压掉这里的 transparent，导致纯色文字盖住渐变。
     放在 @supports 内是刻意的：不支持的浏览器整块跳过，
     color 回落到控件值或基础样式，文字仍然可见。 */
  .qch-wrap .qch-title.qch-title--gradient {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* 渐变由 5 个独立控件各设一个自定义属性拼成（角度 / 两个色 / 两个位置）。
     用变量而不是让某个控件输出整条 background-image，是为了避免在
     selectors 里跨控件取值——那种写法在不同控件类型间不可靠。 */
  .qch-title--linear {
    background-image: linear-gradient(
      var(--qch-g-angle, 90deg),
      var(--qch-g-from, #0b3d91) var(--qch-g-from-stop, 0%),
      var(--qch-g-to, #1f6feb) var(--qch-g-to-stop, 100%)
    );
  }

  .qch-title--radial {
    background-image: radial-gradient(
      circle at var(--qch-g-pos, center),
      var(--qch-g-from, #0b3d91) var(--qch-g-from-stop, 0%),
      var(--qch-g-to, #1f6feb) var(--qch-g-to-stop, 100%)
    );
  }

  /* 渐变范围 = 文字宽度（默认，与设计稿一致） */
  .qch-title--fit {
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
  }

  /* 渐变范围 = 整行宽度 */
  .qch-title--full {
    display: block;
    width: auto;
  }
}

/* 强制反色模式下把文字还原为系统色，避免透明文字消失。
   选择器同样写三层，否则压不过上面 @supports 里的 (0,3,0) 规则。 */
@media (forced-colors: active) {
  .qch-wrap .qch-title.qch-title--gradient {
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
    background-image: none;
  }
}

/* 打印时渐变文字多数打印机不渲染，还原纯色 */
@media print {
  .qch-wrap .qch-title.qch-title--gradient {
    -webkit-text-fill-color: currentColor;
    color: #0b3d91;
    background-image: none;
  }
}

/* ---------- 描述 ---------- */
.qch-desc {
  font-size: 16px;
  line-height: 1.9;
  color: #555;
  max-width: 440px;
  margin: 0;
}

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

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

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

.qch-wrap.is-motion-visible .qch-eyebrow { animation-delay: 100ms; }
.qch-wrap.is-motion-visible .qch-title { animation-delay: 280ms; }
.qch-wrap.is-motion-visible .qch-desc { animation-delay: 480ms; }

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

/* =====================================================
   响应式
   说明：内边距、最小高度、文案栏宽度、两列间距、遮罩不透明度、
   各文案下方间距等，均由 Elementor 响应式控件按断点输出内联
   CSS；同一属性不在此重复声明，否则桌面默认值会压掉媒体查询。
   此处仅保留没有控件默认值的属性（字号 / 描述最大宽度解除）。

   源码字号阶梯：>1080 = 60px，900–1080 = 44px，480–900 = 38px，
   ≤480 = 30px（源码里由两个媒体查询块叠加而成，这里直接写清）。
   ===================================================== */

@media (max-width: 1080px) {
  .qch-title {
    font-size: 44px;
  }
}

@media (max-width: 900px) {
  .qch-cover .qch-scene { background-image: var(--qch-bg-mobile, var(--qch-bg, none)); }
  .qch-full-mobile-fill .qch-scene { position: absolute; inset: 0; }
  .qch-full-mobile-fill .qch-picture,
  .qch-full-mobile-fill .qch-background-image { width: 100%; height: 100%; }
  .qch-full-mobile-fill .qch-background-image { object-fit: cover; }
  .qch-full-mobile-fill .qch-inner { grid-area: auto; min-height: 460px !important; }

  .qch-title {
    font-size: 38px;
  }

  .qch-desc {
    max-width: none;
  }
}

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

  .qch-eyebrow {
    font-size: 13px;
    letter-spacing: 2px;
  }
}