/* =====================================================
   qing-prod-advantage  —  核心优势（渐变圆图标卡片网格）
   前缀: qpav-
   对应源码 .pd-section.pd-advantage
   ===================================================== */

.qpav-wrap {
  background: #fff;
  padding: 72px 0;
}

@keyframes qpav-enter-up { from { opacity: 0; transform: translate3d(0,54px,0); } to { opacity: 1; transform: none; } }
.qing-motion-js .qpav-wrap:not(.is-motion-visible) .qpav-title,
.qing-motion-js .qpav-wrap:not(.is-motion-visible) .qpav-card { opacity: 0; transform: translate3d(0,54px,0); }
.qpav-wrap.is-motion-visible .qpav-title,
.qpav-wrap.is-motion-visible .qpav-card { animation: qpav-enter-up 1.1s cubic-bezier(.16,1,.3,1) backwards; }
.qpav-wrap.is-motion-visible .qpav-title { animation-delay: 100ms; }
.qpav-wrap.is-motion-visible .qpav-card { animation-delay: calc(320ms + var(--motion-i,0) * 230ms); }
@media (prefers-reduced-motion: reduce) { .qing-motion-js .qpav-wrap .qpav-title, .qing-motion-js .qpav-wrap .qpav-card { opacity: 1; transform: none; animation: none; } }

.qpav-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
}

/* ---------- 版块标题 ----------
   两种形态，由「标题对齐」控件切换：
   --left  ：装饰条是标题左侧的竖条（原样式）
   --center：标题居中，装饰条变成标题下方的横线

   装饰条的颜色和粗细由控件以自定义属性传入（--qpav-bar-c /
   --qpav-bar-w），在这里被两种形态各自消费。之所以不让控件直接输出
   border-left-*：居中模式要把竖条整条去掉，而控件输出的内联 CSS
   权重和加载顺序都在本文件之后，压不掉。 */
.qpav-title {
  font-size: 30px;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
  margin: 0 0 40px;
}

/* 左对齐：竖条 */
.qpav-title--left {
  text-align: left;
  padding-left: 18px;
  border-left: var(--qpav-bar-w, 5px) solid var(--qpav-bar-c, #1f6feb);
}

/* 居中：横线在标题下方。
   用 ::after 而不是 border-bottom —— border 会拉满整个块宽度，
   而这里要的是一小段居中的短线。 */
.qpav-title--center {
  text-align: center;
  padding-bottom: 16px;
  position: relative;
}

.qpav-title--center::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--qpav-bar-len, 48px);
  height: var(--qpav-bar-w, 5px);
  background-color: var(--qpav-bar-c, #1f6feb);
  border-radius: 2px;
}

/* ---------- 卡片网格 ----------
   轨道下限写 0（minmax(0, 1fr)）而不是直接 1fr。
   1fr 展开是 minmax(auto, 1fr)，那个 auto 下限＝轨道内最小内容宽度；
   卡片里只要有不能断行的内容（英文型号名、固定宽度的图标底衬），
   下限就可能大于「容器宽 ÷ 列数」，grid 于是让整个网格溢出容器 ——
   手机端选 2 列右边跑出屏幕就是这么来的。
   「每行列数」控件输出的值同样用了 minmax(0, 1fr)。 */
.qpav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.qpav-card {
  background: #fff;
  border: 1px solid #d8e6fb;
  border-radius: 10px;
  padding: 42px 26px 38px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  /* grid 子项默认 min-width: auto，内容会把卡片顶宽，轨道下限即便
     放到 0 也没用。置 0 才让卡片真正服从轨道宽度。 */
  min-width: 0;
  transition: transform 0.28s ease, box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.qpav-card:hover {
  transform: translateY(-4px);
  border-color: #4a90ff;
  box-shadow: 0 14px 30px rgba(31, 111, 235, 0.14);
}

/* ---------- 卡片图标 ----------
   默认裸图标：没有底色、没有圆形、不占固定方框，尺寸完全由
   「图标大小」控件（font-size）驱动，想放多大放多大。
   需要圆形底衬的话开「图标圆形底衬」开关，见下面的 --shell。 */
.qpav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex: 0 0 auto;
  /* 图标本体尺寸由字号驱动，便于用控件统一缩放 */
  font-size: 40px;
  line-height: 1;
  color: #1f6feb;
  /* 配合「图标垂直偏移」：负偏移时图标会探出卡片顶部，这两行保证它
     画在卡片边框和相邻卡片之上，而不是被压在下面。
     卡片与版块都没有 overflow: hidden，所以探出去不会被裁掉。 */
  position: relative;
  z-index: 1;
}

/* ---------- 圆形底衬（可选） ----------
   .qpav-icon--shell 由 PHP 在开启「图标圆形底衬」时输出。
   直径 / 圆角 / 底色 / 投影都有对应控件，这里只是无控件值时的兜底。 */
.qpav-icon--shell {
  width: 72px;
  height: 72px;
  box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    #4a90ff 0%,
    #1f6feb 55%,
    #0b3d91 100%
  );
  box-shadow: 0 8px 18px rgba(31, 111, 235, 0.26);
  color: #fff;
}

.qpav-icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

.qpav-icon i {
  font-size: inherit;
  line-height: 1;
}

/* ---------- 上传图片 ----------
   .qpav-icon--img 由 PHP 在「上传图片」且已选图时输出。
   它可以和 --shell 同时存在（图片 + 圆形底衬）：
   - 无底衬时：span 收缩到图片宽度（width:fit-content）
   - 有底衬时：span 的宽高由「底衬直径」控件决定，图片在里面居中
   所以这里不给 span 写固定宽度，宽度只作用在 img 上（见「图片宽度」控件）。
   font-size:0 是为了消掉 inline 元素间的空白间隙。 */
.qpav-icon--img {
  font-size: 0;
  max-width: 100%;
}

/* 无底衬的图片卡：span 收缩到图片宽度即可。
   写成 :not(--shell) 而不是直接给 --img 写 width —— 后者会覆盖上面
   --shell 的 72px（同权重、且 --img 在后面），把底衬压扁。 */
.qpav-icon--img:not(.qpav-icon--shell) {
  width: fit-content;
}

/* 88px 是无控件值时的兜底；实际由「图片宽度」控件驱动。
   object-fit: contain 是配合「图片最大高度」用的：一旦限了高，
   盒子比原始比例矮，contain 让图片在盒内等比缩放居中而不是被压扁。 */
.qpav-icon--img img {
  width: 88px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* 图标 / 内置 SVG 模式下的图片兜底（理论上不会走到） */
.qpav-icon:not(.qpav-icon--img) img {
  width: auto;
  height: 1em;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- 文案 ----------
   overflow-wrap: anywhere 让「Weber-I3000」这类不含空格的长串在必要时
   断开。中文本来就能逐字换行，这条只对连续的西文字母/数字串起作用。

   用 anywhere 而非 break-word：两者都能断词，但 anywhere 会把断词
   的可能性计入最小内容宽度的计算，break-word 不会 —— 也就是说
   break-word 虽然视觉上断了行，卡片的 min-content 宽度仍按整串算，
   轨道下限的问题依旧存在。这里要的正是让下限跟着变小。 */
.qpav-name {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
  /* 整块文案不超出卡片内容盒 */
  max-width: 100%;
}

.qpav-desc {
  font-size: 15px;
  line-height: 1.8;
  color: #666;
  margin: 0;
  overflow-wrap: anywhere;
  max-width: 100%;
}

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

@media (max-width: 860px) {
  .qpav-title {
    font-size: 24px;
  }

  .qpav-card:hover {
    box-shadow: 0 10px 22px rgba(31, 111, 235, 0.14);
  }
}

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

  .qpav-name {
    font-size: 18px;
  }

  .qpav-desc {
    font-size: 14px;
  }
}