/* =====================================================
   qing-prod-spec  —  主要参数（白卡 + 渐变圆图标行列表）
   前缀: qpsp-
   对应源码 .pd-section.pd-spec
   ===================================================== */

.qpsp-wrap {
  background: #f2f6fd;
  padding: 72px 0;
}

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

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

/* ---------- 左侧蓝色竖条标题 ---------- */
.qpsp-title {
  font-size: 30px;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
  text-align: left;
  padding-left: 18px;
  border-left: 5px solid #1f6feb;
  margin: 0 0 40px;
}

/* ---------- 白卡容器 ---------- */
.qpsp-list {
  background: #fff;
  border: 1px solid #e4ecf7;
  border-radius: 6px;
  overflow: hidden;
}

/* ---------- 参数行 ---------- */
.qpsp-row {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 22px 32px;
  border-bottom: 1px solid #e9eff8;
}

/* 末行不显示分隔线。
   注意：「行分隔线」控件的 selector 特意写成 .qpsp-row:not(:last-child)，
   而不是 .qpsp-row —— 否则控件输出的内联 CSS 会给末行也加上边框，
   把这条规则压掉。 */
.qpsp-row:last-child {
  border-bottom: none;
}

/* ---------- 行图标 ----------
   默认裸图标：没有底色、没有圆形、不占固定方框，尺寸完全由
   「图标大小」控件（font-size）驱动，想放多大放多大。
   需要圆形底衬的话开「图标圆形底衬」开关，见下面的 --shell。 */
.qpsp-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 图标本体尺寸由字号驱动，便于用控件统一缩放 */
  font-size: 24px;
  line-height: 1;
  color: #1f6feb;
}

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

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

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

/* ---------- 上传图片 ----------
   .qpsp-icon--img 由 PHP 在「上传图片」且已选图时输出。
   它可以和 --shell 同时存在（图片 + 圆形底衬）：
   - 无底衬时：span 是行内 flex 项（flex:0 0 auto），宽度自动贴合图片
   - 有底衬时：span 的宽高由「底衬直径」控件决定，图片在里面居中
   所以这里不给 span 写宽度，宽度只作用在 img 上（见「图片宽度」控件）。
   font-size:0 是为了消掉 inline 元素间的空白间隙。 */
.qpsp-icon--img {
  font-size: 0;
}

/* 42px 是无控件值时的兜底；实际由「图片宽度」控件驱动。 */
.qpsp-icon--img img {
  width: 42px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- 参数名 ----------
   flex 写成三个长属性而非 shorthand：「参数名宽度」控件只驱动
   flex-basis，窄屏媒体查询只改 grow/shrink，三者互不覆盖。
   若用 `flex: 0 0 148px` shorthand，控件输出的 flex-basis 会被
   shorthand 的加载顺序问题干扰。 */
.qpsp-label {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 148px;
  font-size: 17px;
  font-weight: 700;
  color: #111;
  line-height: 1.6;
  margin: 0;
}

/* ---------- 参数值 ---------- */
.qpsp-value {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin: 0;
  min-width: 0;
}

/* ---------- 底部备注 ---------- */
.qpsp-note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #999;
}

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

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

  /* 窄屏：参数值排到参数名正下方。

     原先这里是 flex-wrap: wrap + .qpsp-value{flex-basis:100%}。
     换行后参数值成了新的一整排，起点回到行的最左边 —— 也就是图标
     的正下方，而不是参数名下方。加上 .qpsp-row 的 align-items:center
     让图标相对「图标+两排文字」整体居中，于是图标左边、文字右边，
     两者中间空出一大块，视觉上就是「空间拉太大」。

     改成 grid：第一列放图标，第二列上下两行放参数名和参数值。
     图标只跟参数名那一行对齐，参数值紧贴参数名下方。 */
  .qpsp-row {
    display: grid;
    /* 无图标时只有一列，文字不会被 column-gap 往右推 */
    grid-template-columns: 1fr;
    /* flex 时代的 align-items:center 由「行内容纵向对齐」控件输出，
       在 grid 下会把每个单元格里的内容垂直居中，参数名/参数值本身
       高度就等于内容高度，所以无副作用，不必覆盖。 */
  }

  .qpsp-row--hasicon {
    grid-template-columns: auto 1fr;
  }

  /* 图标固定在第一列第一行，与参数名同排且垂直居中对齐它 */
  .qpsp-row--hasicon .qpsp-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  /* 只锁列、不锁行，交给自动排布决定行号：
     图标占了 (1,1)，参数名找第二列第一个空格 → (2,1)，
     参数值接着 → (2,2)。
     好处是参数名为空时参数值会自动升到第一行，与图标同排；
     若写死 grid-row:2，那种情况下第一行会空出来，白多一段行距。

     另：flex-basis 在 grid 下不生效，所以「参数名宽度」控件在这一档
     无影响 —— 该档参数名本就该占满第二列，不需要固定宽度。 */
  .qpsp-row--hasicon .qpsp-label,
  .qpsp-row--hasicon .qpsp-value {
    grid-column: 2;
  }
}

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

  .qpsp-label {
    font-size: 16px;
  }

  .qpsp-value {
    font-size: 14px;
  }

  .qpsp-note {
    font-size: 13px;
  }
}