/* =====================================================
   qing-prod-series  —  产品系列列表（SEMI / SMT 等）
   前缀: qps-
   布局：左侧大图+系列名，右侧型号列表（左/右分列 grid）
   ===================================================== */

/* ---------- 外层容器 ---------- */
.qps-wrap {
  background: #fff;
  padding: 72px 0 84px;

  /* 标题竖条：默认深蓝→亮蓝渐变。三个变量分开，
     控件可以单独改两端颜色或角度，不必整条重写 gradient。 */
  --qps-bar-c1: #01285f;
  --qps-bar-c2: #006cff;
  --qps-bar-angle: 180deg;
  --qps-bar-bg: linear-gradient(
    var(--qps-bar-angle),
    var(--qps-bar-c1) 0%,
    var(--qps-bar-c2) 100%
  );

  /* 型号列表上下外边距（同时决定 border-left 比整组矮多少） */
  --qps-models-my: 20px;
}

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

/* ---------- 版块页头 ----------
   源码里 40px 的下间距是挂在标题上的（.prod-list-title）。这里页头容器
   也有 40px，两者叠加会变 80px，所以容器归零、间距统一交给 .qps-title。
   页头内还有描述时，描述自己带上间距。 */
.qps-header {
  margin-bottom: 0;
}

.qps-section-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent, #1f6feb);
  background: rgba(31, 111, 235, 0.08);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* 标题：对应源码 .section-title.prod-list-title.prod-list-title--bar
   —— 40px / 800 / 左对齐 + 蓝色竖条，且不要 .section-title 那条居中下划线。
   原先写的是 36px + margin-bottom:12px，与源码不符，已对齐。 */
.qps-title {
  font-size: 40px;
  font-weight: 800;
  color: #111;
  line-height: 1.2;
  text-align: left;
  margin: 0 0 40px;
  position: relative;
  padding-left: 18px;
}

/* 源码里 .prod-list-title--bar::after { display:none } 用来压掉
   .section-title::after 的居中下划线。这里没有继承那条规则，
   但显式写上，避免主题全局样式表里的 .section-title 影响进来。 */
.qps-title::after {
  display: none;
}

.qps-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 30px;
  border-radius: 3px;
  background: var(--qps-bar-bg);
}

.qps-desc {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  margin: 0;
}

/* 有描述时，标题与描述贴近，40px 间距由描述接管 */
.qps-title:not(:last-child) {
  margin-bottom: 12px;
}

/* ---------- 系列大网格：2 列 ---------- */
.qps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 72px;
  margin-top: 48px;
}

/* ---------- 单个系列组：左图 + 右列表 ---------- */
.qps-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
}

/* ---------- 左侧：系列大图 + 系列名 + 描述 ---------- */
.qps-main {
  text-align: center;
}

.qps-media {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.qps-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.15);
}

/* 无图时占位 */
.qps-media--empty {
  background: repeating-linear-gradient(
    -45deg,
    #dcdcdc,
    #dcdcdc 10px,
    #e4e4e4 10px,
    #e4e4e4 20px
  );
  border: 1px dashed #bbb;
}

.qps-series-name {
  font-size: 22px;
  font-weight: 800;
  color: #111;
  margin-top: 10px;
  margin-bottom: 8px;
}

.qps-series-cat {
  font-size: 15px;
  color: #888;
}

/* ---------- 右侧：型号列表 ---------- */
.qps-models {
  display: flex;
  flex-direction: column;
  /* 型号少时也让内容纵向居中，避免顶在上边、下方留一大片空白 */
  justify-content: center;
  /* 与左栏等高。.qps-group 用的是 align-items: center（左栏靠它保持
     垂直居中），所以不改 group，只让这一列单独 stretch —— 这样
     左栏原有表现不变，而右列会撑满整组高度。 */
  align-self: stretch;
  /* 用 margin 而不是 padding：padding 在边框内侧，border-left 会跟着
     一起延伸、长度不变。要让分割线上下各缩进，必须用外边距。 */
  margin: var(--qps-models-my) 0;
  border-left: 1px solid #e0e0e0;
}

.qps-model {
  display: block;
  padding: 22px 0 22px 30px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.qps-model + .qps-model {
  border-top: 1px solid #e6e6e6;
}

.qps-model-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}

.qps-model-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent, #1f6feb);
  transition: opacity 0.2s ease;
}

.qps-model:hover .qps-model-name {
  color: var(--color-accent, #1f6feb);
}

.qps-model:hover .qps-model-link {
  opacity: 0.75;
}

/* ---------- 响应式 ≤1100px ---------- */
/* ---------- 进入视口动效 ---------- */
.qps-wrap.is-motion-ready .qps-header,
.qps-wrap.is-motion-ready .qps-group,
.qps-wrap.is-motion-ready .qps-main,
.qps-wrap.is-motion-ready .qps-series-name,
.qps-wrap.is-motion-ready .qps-series-cat,
.qps-wrap.is-motion-ready .qps-model {
  opacity: 0; transform: translate3d(0,28px,0);
  transition: opacity .72s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1);
}
.qps-wrap.is-motion-visible .qps-header,
.qps-wrap.is-motion-visible .qps-group,
.qps-wrap.is-motion-visible .qps-main,
.qps-wrap.is-motion-visible .qps-series-name,
.qps-wrap.is-motion-visible .qps-series-cat,
.qps-wrap.is-motion-visible .qps-model { opacity: 1; transform: translate3d(0,0,0); }
.qps-wrap.is-motion-ready .qps-header { transition-delay: .08s; }
.qps-wrap.is-motion-ready .qps-group { transition-delay: calc(.28s + var(--motion-i,0) * .26s); }
.qps-wrap.is-motion-ready .qps-main { transition-delay: calc(.40s + var(--motion-i,0) * .26s); }
.qps-wrap.is-motion-ready .qps-series-name { transition-delay: calc(.38s + var(--motion-i,0) * .18s); }
.qps-wrap.is-motion-ready .qps-series-cat { transition-delay: calc(.46s + var(--motion-i,0) * .18s); }
.qps-wrap.is-motion-ready .qps-model { transition-delay: calc(.48s + var(--motion-i,0) * .26s + var(--motion-j,0) * .20s); }
@media (prefers-reduced-motion: reduce) {
  .qps-wrap.is-motion-ready .qps-header,
  .qps-wrap.is-motion-ready .qps-group,
  .qps-wrap.is-motion-ready .qps-main,
  .qps-wrap.is-motion-ready .qps-series-name,
  .qps-wrap.is-motion-ready .qps-series-cat,
  .qps-wrap.is-motion-ready .qps-model { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1100px) {
  .qps-grid {
    gap: 40px 40px;
  }
}

/* ---------- 响应式 ≤860px ---------- */
@media (max-width: 860px) {
  .qps-inner {
    padding: 0 24px;
  }

  .qps-grid {
    /* 这一条会被「每行列数」控件压过：控件只配了桌面默认值 2，
       Elementor 生成的 .elementor-element-x .qps-grid 特异性 0,2,0
       且不带媒体查询，而这里是 0,1,0（媒体查询不提升特异性）。
       控件已补 mobile_default => 1，新插入的实例走正常层叠；
       已有实例需要在编辑器里把手机档列数设成 1。 */
    grid-template-columns: 1fr;
    gap: 40px;

    /* 即使上面那条被压住、手机端仍是两列，这条也能挡住错位。

       默认的 align-items: stretch 会把同一行里较矮的系列组拉到
       和最高那组等高。系列组内部是 grid、各行高度都是 auto，
       align-content 按 stretch 处理时会把多出来的高度平摊到各行 ——
       图片行跟着变高，图片在变高的行里居中，整组内容就往下沉。
       型号数量不等（一组 2 个、另一组 1 个）正是高度不等的来源。

       改成 start：每组按自身内容高度排布，不再被拉伸，
       多余高度留在行末，两组顶部对齐。 */
    align-items: start;
  }

  .qps-title {
    font-size: 26px;
  }

  .qps-group {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .qps-models {
    border-left: none;
    /* 单列堆叠后分割线在顶部，上下外边距会与 .qps-group 的 gap
       叠加成双倍间距，这里归零。 */
    margin: 0;
    border-top: 1px solid #e0e0e0;
    /* 单列堆叠后左栏 .qps-main 是居中的（text-align: center），
       型号列表跟着居中才对齐。
       .qps-model-name 是 block、.qps-model-link 是 inline-block，
       两者都靠继承来的 text-align 居中，不必各自声明。 */
    text-align: center;
  }

  /* 左内边距只在有竖分割线时才需要（让文字避开 border-left）。
     这一档 border-left 已经去掉，横向内边距失去意义，且会把
     text-align: center 的居中基准整体推向右侧。

     这里必须用 !important：型号条目内边距控件生成的是
       .elementor-element-x .qps-model { padding: 22px 0 22px 30px }
     —— 特异性 0,2,0、不带媒体查询、加载顺序在主题之后，
     普通声明（0,1,0，媒体查询不提升特异性）压不过它，
     手机端会残留 30px 左内边距，看起来就是「没居中」。

     代价：≤860px 的横向内边距由样式表锁定为 0，控件改不动。
     纵向内边距不受影响，仍可按断点调整。 */
  .qps-model {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}