/* =====================================================
   qing-prod-hero  —  产品详情页首屏（分类 / 标题 / 宣传语 / 描述 / 手册按钮）
   前缀: qph2-
   对应源码 .pd-hero 与 .pd-hero--bg 两种模式
   （前缀避开已用于「页面首屏 Banner」的 qph-）
   ===================================================== */

.qph2-wrap {
  --qph2-btn-color: #1677e8;
  --qph2-btn-border-color: #1677e8;
  --qph2-btn-hover-color: #fff;
  --qph2-btn-hover-border-color: transparent;
  background-color: #ececec;
  padding: 72px 0;
}

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

.qph2-left {
  flex: 1 1 46%;
  min-width: 0;
}

.qph2-right {
  flex: 1 1 54%;
  min-width: 0;
}

/* ---------- 文案 ---------- */
.qph2-cat {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #888;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.qph2-title {
  font-size: 52px;
  font-weight: 800;
  color: #111;
  line-height: 1.18;
  margin: 0 0 24px;
}

.qph2-slogan {
  font-size: 24px;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
  margin: 0 0 18px;
}

.qph2-desc {
  font-size: 17px;
  line-height: 1.8;
  color: #666;
  margin: 0 0 36px;
  max-width: 520px;
}

/* ---------- 手册按钮 ----------
   常态透明描边，悬停才显示蓝色渐变；不使用阴影。
   按钮既可能是 <a> 也可能是打开咨询弹窗的 <button>。 */
.qph2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 34px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--qph2-btn-color);
  text-decoration: none;
  background: transparent;
  border: 1.5px solid var(--qph2-btn-border-color);
  cursor: pointer;
  box-shadow: none !important;
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease,
    transform 0.24s cubic-bezier(.22,1,.36,1);
}

.qph2-btn:hover,
.qph2-btn:focus-visible {
  color: var(--qph2-btn-hover-color);
  background: linear-gradient(135deg, #0a367f 0%, #1b62d1 55%, #3a82f5 100%);
  border-color: var(--qph2-btn-hover-border-color);
  box-shadow: none !important;
  transform: translate3d(0, -3px, 0);
}

.qph2-btn svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  display: block;
}

/* ---------- 右侧图片位 ---------- */
.qph2-media {
  min-height: 340px;
  border: 1px solid #ddd;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
}

.qph2-media img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: contain;
  display: block;
}

/* 无图占位 */
.qph2-media--empty {
  font-size: 14px;
  font-weight: 700;
  color: #555;
  border-style: dashed;
  border-color: #b8b8b8;
}

/* =====================================================
   整图背景模式（源码 .pd-hero--bg）
   图内已含设备，文案压在左侧留白区，隐藏右侧独立图片位
   ===================================================== */

.qph2-wrap--bg {
  --qph2-btn-color: #fff;
  --qph2-btn-border-color: rgba(255, 255, 255, 0.78);
  background-color: #05070d;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  display: flex;
  align-items: center;
  /* 图片 URL 由 PHP 以 --qph2-bg 传进来，不写成内联 background-image：
     内联样式压过媒体查询，那样手机端就换不了图。 */
  background-image: var(--qph2-bg, none);
}

.qph2-wrap--full {
  --qph2-btn-color: #fff;
  --qph2-btn-border-color: rgba(255, 255, 255, 0.78);
}

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

.qph2-wrap--bg .qph2-inner {
  width: 100%;
}

.qph2-wrap--bg .qph2-right {
  display: none;
}

.qph2-wrap--bg .qph2-cat {
  color: #7fc4ff;
}

.qph2-wrap--bg .qph2-title,
.qph2-wrap--bg .qph2-slogan {
  color: #fff;
}

.qph2-wrap--bg .qph2-desc {
  color: rgba(255, 255, 255, 0.78);
}

/* =====================================================
   完整显示模式（背景图显示方式 = 完整显示）
   背景图撑不起容器高度，所以这里把图换成文档流里的真实 img：
   版块高度 = 图片按容器宽度等比缩放后的高度，整图不裁切。
   文案与图片叠在同一个 grid 格子里，浮在图上。
   ===================================================== */

/* 用单格 grid 让图片和文案叠在同一个格子里。
   这样版块高度 = 两者中较高的那个：正常情况是图片撑高度，万一文案
   更高（窄屏图片缩矮、或文案很长）也不会被裁掉。
   比「绝对定位 + overflow:hidden」稳，那种写法文案一超出就被切。 */
.qph2-wrap--full {
  display: grid;
  grid-template-areas: 'hero';
  /* 「首屏最小高度」控件在此模式下已隐藏，但老实例可能存过值，
     这里显式清掉，避免图片矮于该值时下方多出一块底色。
     选择器权重 0,2,1 > 控件的 0,2,0。 */
  min-height: 0;
}

.qph2-wrap--full .qph2-bgimg {
  grid-area: hero;
  display: block;
  line-height: 0;
  /* 文案更高时不跟着拉伸，图片保持原始比例贴在顶部 */
  align-self: start;
}

/* 这是撑起整个版块高度的元素：宽度铺满，高度按原始比例自动。
   picture 是 inline 元素，也要一起转成 block，否则它自身的行高会
   在图片下方留出几像素缝隙。 */
.qph2-wrap--full .qph2-bgimg picture {
  display: block;
}

.qph2-wrap--full .qph2-bgimg img {
  display: block;
  width: 100%;
  height: auto;
}

/* 文案与图片同格，垂直居中浮在图上。

   ---------------------------------------------------------------
   为什么要显式写 position + z-index

   原先这里和 .qph2-bgimg 都是 position: static，两者同处一个 grid 格子，
   靠「文案写在图片后面」这个源码顺序压在图片上。这个前提很脆：只要图片
   那一侧因为任何原因获得了层叠上下文（stacking context），它就会被提到
   「定位元素 z-index:0」那一层绘制，也就是翻到普通流内容之上，把整段
   文案盖住。

   能造成这一点的属性不止一个：opacity 小于 1、transform、filter、
   will-change、animation 配 fill-mode 保持态……全站样式、插件、或本主题
   自己的懒加载占位都可能不经意间引入。实际上就踩过一次：懒加载给图片加了
   opacity 淡入动画，动画结束后 fill-mode: both 让层叠上下文一直留着，
   于是「刷新后先看得见文字，图片一加载完文字就消失」。

   与其每次去掉肇事属性，不如把层级关系钉死：文案显式定位并给 z-index，
   图片显式压到 0。这样无论图片侧发生什么，文案都在上面。 */
.qph2-wrap--full .qph2-inner {
  grid-area: hero;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* 图片显式留在下层。写 0 而不是省略：省略时它是 auto，
   一旦获得层叠上下文就会跳到 0 那一层，与文案打平后靠源码顺序决胜。 */
.qph2-wrap--full .qph2-bgimg {
  position: relative;
  z-index: 0;
}

/* =====================================================
   完整显示 + 手机端文案下移（--stack）
   窄屏下图片按比例缩得很矮，文案压在上面会挤爆或遮住产品。
   这里把单格叠放拆成两行，图在上、文案在下正常堆叠。
   放在 860px 断点里，与整体堆叠断点保持一致。
   ===================================================== */

@media (max-width: 860px) {
  /* 取消单格叠放：改成两行，图片一行、文案一行，自然堆叠。
     grid-area 也要一并解除，否则两者仍会被塞进同一个命名格。 */
  .qph2-wrap--stack {
    grid-template-areas:
      'img'
      'txt';
  }

  .qph2-wrap--stack .qph2-bgimg {
    grid-area: img;
  }

  .qph2-wrap--stack .qph2-inner {
    grid-area: txt;
  }

  /* ---------------------------------------------------
     完整显示 + 文案压图上 + 手机端填满（--mfill）

     为什么会「下方都黑了」：
     完整显示模式下图片 width:100%; height:auto，高度按原始比例走。
     1920×800 的横版图在 375px 宽的屏上只有 156px 高，而文案高度
     几乎不变（标题+宣传语+描述+按钮轻松 400px 往上）。图片和文案
     同在一个 grid 格里，行高取两者较高者 —— 于是行高由文案决定，
     图片又有 align-self: start 贴在顶部，下方 240px 就露出了
     .qph2-wrap--bg 的底色 #05070d。

     解法：让图片撑满整格（align-self 从 start 改回 stretch），
     再用 object-fit: cover 等比放大裁切，避免拉变形。

     此时图片不再贡献高度（height 是 100% 而非 auto），版块高度
     完全由文案决定 —— 这正是想要的：文案多高，图就铺多高。
     但也因此必须给一个 min-height 兜底，否则文案很短时版块会
     塌得只剩文案高度，图片被压成一条。
     --------------------------------------------------- */
  /* 双类选择器（0,2,0）而非单类：上面 .qph2-wrap--full 有一条
     min-height: 0，两者特异性相同时只靠源码顺序决胜，太脆。
     PHP 只在已有 --full 时才加 --mfill，所以并写不会漏。 */
  .qph2-wrap--full.qph2-wrap--mfill {
    min-height: 420px;
  }

  .qph2-wrap--mfill .qph2-bgimg {
    /* 覆盖基础规则的 align-self: start */
    align-self: stretch;
    /* grid 子项默认 min-height:auto，内容（图片）会把它顶高。
       置 0 才能真正被格子约束。 */
    min-height: 0;
  }

  .qph2-wrap--mfill .qph2-bgimg picture,
  .qph2-wrap--mfill .qph2-bgimg img {
    height: 100%;
  }

  .qph2-wrap--mfill .qph2-bgimg img {
    object-fit: cover;
    /* 横版图裁切后优先保留中间偏上：设备主体通常在图的中上部，
       用 center 会把底座之类的次要部分也留在画面里。 */
    object-position: center 40%;
  }
}

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

   注：源码没有为 .pd-hero 写任何媒体查询（52px 标题在手机端
   会溢出），这里补上，属于对源码缺陷的修正。
   ===================================================== */

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

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

  .qph2-left,
  .qph2-right {
    width: 100%;
  }

  .qph2-cat {
    font-size: 16px;
  }

  .qph2-title {
    font-size: 32px;
  }

  .qph2-slogan {
    font-size: 20px;
  }

  .qph2-desc {
    font-size: 16px;
    max-width: none;
  }
}

/* ---------- 进入动效 ---------- */
@keyframes qph2-enter-up {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes qph2-enter-media {
  from {
    opacity: 0;
    transform: translate3d(34px, 0, 0) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.qing-motion-js .qph2-wrap .qph2-cat,
.qing-motion-js .qph2-wrap .qph2-title,
.qing-motion-js .qph2-wrap .qph2-slogan,
.qing-motion-js .qph2-wrap .qph2-desc,
.qing-motion-js .qph2-wrap .qph2-btn,
.qing-motion-js .qph2-wrap .qph2-right {
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.qing-motion-js .qph2-wrap:not(.is-motion-visible) .qph2-cat,
.qing-motion-js .qph2-wrap:not(.is-motion-visible) .qph2-title,
.qing-motion-js .qph2-wrap:not(.is-motion-visible) .qph2-slogan,
.qing-motion-js .qph2-wrap:not(.is-motion-visible) .qph2-desc,
.qing-motion-js .qph2-wrap:not(.is-motion-visible) .qph2-btn,
.qing-motion-js .qph2-wrap:not(.is-motion-visible) .qph2-right {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.qing-motion-js .qph2-wrap:not(.is-motion-visible) .qph2-right {
  transform: translate3d(28px, 0, 0) scale(0.98);
}

.qing-motion-js .qph2-wrap.is-motion-visible .qph2-cat,
.qing-motion-js .qph2-wrap.is-motion-visible .qph2-title,
.qing-motion-js .qph2-wrap.is-motion-visible .qph2-slogan,
.qing-motion-js .qph2-wrap.is-motion-visible .qph2-desc,
.qing-motion-js .qph2-wrap.is-motion-visible .qph2-btn,
.qing-motion-js .qph2-wrap.is-motion-visible .qph2-right {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.qing-motion-js .qph2-wrap.is-motion-visible .qph2-btn:hover {
  transform: translate3d(0, -3px, 0);
}

.qing-motion-js .qph2-wrap .qph2-cat { transition-delay: 0.08s; }
.qing-motion-js .qph2-wrap .qph2-title { transition-delay: 0.18s; }
.qing-motion-js .qph2-wrap .qph2-slogan { transition-delay: 0.28s; }
.qing-motion-js .qph2-wrap .qph2-desc { transition-delay: 0.38s; }
.qing-motion-js .qph2-wrap .qph2-btn { transition-delay: 0s; }
.qing-motion-js .qph2-wrap.is-motion-visible .qph2-btn {
  animation: qph2-enter-up .82s cubic-bezier(.22,1,.36,1) .50s backwards;
}
.qing-motion-js .qph2-wrap .qph2-right { transition-delay: 0.24s; }

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

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

  .qph2-slogan {
    font-size: 18px;
  }

  .qph2-btn {
    width: 100%;
  }
}