/* =====================================================
   qing-page-hero  —  产品页首屏 Hero
   前缀: qph-
   无悬停动效
   桌面 / 平板（≥ 768px）：分类条 Grid 排列，不初始化 Swiper
   手机（≤ 767px）：分类条为真实 Swiper 轮播

   ---------------------------------------------------------------
   断点为什么是 767 / 768

   必须和 Elementor 的移动断点对齐。Elementor 默认 mobile ≤ 767px、
   tablet 768–1024px，控件生成的 CSS 就按这套断点分段。
   本文件之前用 900px，于是 768–900px 这段里 JS 已经把分类条变成
   Swiper，而 Elementor 还在套平板档的 `padding: 0 50px 48px`，
   容器宽度被内边距挤掉一截，Swiper 的位移参照随之失准。
   若你在 Elementor 后台改过移动断点，这里和
   assets/js/elementor-page-hero.js 的 BREAKPOINT 要一起改。

   ---------------------------------------------------------------
   本文件与控件的分工

   高度、内边距、列数、间距这些都由控件写真实属性，并且在控件里
   配了 mobile_default —— Elementor 会为移动档单独生成一条带媒体
   查询的规则，桌面值不会泄漏到手机。所以本文件不再重复声明这些
   属性，只留：
     1. 控件缺省时的兜底值（基础规则，特异性 0,1,0，控件一设即被压过）
     2. Swiper 运转必需、控件不涉及的结构样式
   ===================================================== */

/* ---------- 外层容器 ---------- */
.qph-wrap {
  position: relative;
  height: 90vh;
  min-height: min(680px, 100vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #ececec;
}

/* 「移动端高度自适应」开关打开时由 PHP 挂上这个类。
   用 !important 是有意为之：这是一个需要手动打开的开关，
   想在手机上自己控制高度就把开关关掉，不存在
   「控件调了没反应」的歧义。 */
@media (max-width: 767px) {
  .qph-wrap--mauto {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ---------- 背景图层 ---------- */
.qph-scene {
  position: absolute;
  inset: 0;
  background-color: #05070d;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* ---------- 文案内层 ---------- */
.qph-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 120px 50px 0;
  box-sizing: border-box;
  flex: 1 1 auto;
}

.qph-left {
  max-width: 560px;
}

/* ---------- 眉标 ---------- */
.qph-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 22px;
}

/* ---------- 标题 ---------- */
.qph-title {
  font-size: 54px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 26px;
}

/* ---------- 描述 ---------- */
.qph-desc {
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
  max-width: 440px;
}

/* =====================================================
   分类条 — 公共容器
   ===================================================== */
.qph-cats {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 50px 48px;
  box-sizing: border-box;
}

/* ---------- 单个分类卡片 ---------- */
.qph-cat {
  display: block;
  text-decoration: none;
}

.qph-cat-media {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
}

.qph-cat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}

.qph-cat:hover .qph-cat-media img {
  transform: scale(1.06);
}

.qph-cat-name {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

/* =====================================================
   桌面 / 平板（≥ 768px）：swiper-wrapper 当 Grid 用

   这两条 !important 只能待在这个媒体查询里。
   它们原先写在无条件的基础规则上：
     transform: none !important  → 作废 Swiper 写在元素上的内联
       translate3d，拖动时 Swiper 内部状态照常更新（pagination 会
       跟着走）、画面却一动不动，就是「拖不动」的直接原因；
     width: 100% !important      → 覆盖 Swiper 算出的容器宽度，
       slidesPerView:'auto' 的位移参照失准。
   grid-template-columns / gap 由控件写在 .swiper-wrapper 上。
   ===================================================== */
/* ---------- 进入视口动效 ---------- */
@keyframes qph-enter-up {
  from { opacity: 0; transform: translate3d(0,32px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

.qph-wrap.is-motion-visible .qph-eyebrow,
.qph-wrap.is-motion-visible .qph-title,
.qph-wrap.is-motion-visible .qph-desc,
.qph-wrap.is-motion-visible .qph-cats .qph-cat {
  animation: qph-enter-up .82s cubic-bezier(.22,1,.36,1) backwards;
}
.qph-wrap.is-motion-visible .qph-eyebrow { animation-delay: 80ms; }
.qph-wrap.is-motion-visible .qph-title { animation-delay: 180ms; }
.qph-wrap.is-motion-visible .qph-desc { animation-delay: 300ms; }
.qph-wrap.is-motion-visible .qph-cats .qph-cat { animation-delay: var(--motion-delay, 420ms); }

/* JS 已加载但尚未激活视口时保持起始态；作用在 cat 而非 swiper-slide，
   避免与 Swiper 的 transform 管理冲突。 */
.qing-motion-js .qph-wrap:not(.is-motion-visible) .qph-eyebrow,
.qing-motion-js .qph-wrap:not(.is-motion-visible) .qph-title,
.qing-motion-js .qph-wrap:not(.is-motion-visible) .qph-desc,
.qing-motion-js .qph-wrap:not(.is-motion-visible) .qph-cats .qph-cat {
  opacity: 0;
  transform: translate3d(0,32px,0);
}
@media (prefers-reduced-motion: reduce) {
  .qing-motion-js .qph-wrap .qph-eyebrow,
  .qing-motion-js .qph-wrap .qph-title,
  .qing-motion-js .qph-wrap .qph-desc,
  .qing-motion-js .qph-wrap .qph-cats .qph-cat {
    opacity: 1; transform: none; animation: none;
  }
}

@media (min-width: 768px) {
  .qph-cats .swiper-wrapper {
    display: grid;
    /* --qph-cols 由「每屏显示数量」控件写在 .qph-cats 上。
       这一档必须是整数：repeat(1.8, 1fr) 是无效值，整条声明会被
       丢弃并回退到 5。 */
    grid-template-columns: repeat(var(--qph-cols, 5), 1fr);
    gap: 26px;
    transform: none !important;
    width: 100% !important;
  }

  .qph-cats .swiper-slide {
    width: auto !important;
  }

  .qph-cats .swiper-pagination {
    display: none;
  }
}

/* =====================================================
   手机（≤ 767px）：真实轮播

   轮播必需的 flex / 定位 / 圆点样式这里自带一份，
   不依赖 Elementor 是否按需加载了 Swiper 的样式表。
   ===================================================== */
@media (max-width: 767px) {
  .qph-title {
    font-size: 34px;
  }

  .qph-cats {
    overflow: hidden;
    /* 纵向滚动交给页面，横向手势留给 Swiper */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  /* 不要在这里写 width / transform：Swiper 用内联样式操作这两个
     属性做滑动定位，任何 !important 都会让位移失去参照。 */
  .qph-cats .swiper-wrapper {
    display: flex;
    box-sizing: content-box;
  }

  /* 卡片宽度 = 容器宽度 ÷ 每屏显示数量。
     这里的 100% 相对 .swiper-wrapper 的父级 .qph-cats 内容盒解析，
     而手机档 .qph-cats 左右内边距为 0，所以就等于视口宽度。

     原先写死 56vw（≈1.8 张），控件里的「每行列数」输出的是
     grid-template-columns —— 在 flex 容器上无效，于是手机档
     设 2 也还是 1.8 张的样子。现在两者读同一个变量。

     box-sizing: border-box 让下面的左右 padding 计入这个宽度，
     卡片间的视觉间距由 padding 提供（手机端不能用 gap：Swiper
     计算位移时不知道 gap，滑几张后会和圆点错位）。 */
  .qph-cats .swiper-slide {
    flex-shrink: 0;
    width: calc(100% / var(--qph-cols, 1.8));
    padding: 0 10px;
    box-sizing: border-box;
  }

  /* 鼠标拖动时浏览器会对 <img> / <a> 启动原生 HTML5 拖放，
     手势被系统接走，Swiper 收不到 mousemove。 */
  .qph-cats img,
  .qph-cats a {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
  }

  /* pagination 圆点 */
  .qph-cats .swiper-pagination {
    display: block;
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    text-align: center;
    line-height: 0;
    z-index: 4;
  }

  .qph-cats .swiper-pagination-bullet {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    cursor: pointer;
  }

  .qph-cats .swiper-pagination-bullet-active {
    background: #fff;
  }
}