/* =====================================================
   qing-prod-grid  —  产品线网格（SMT 风格：蓝色渐变底 + 圆角白卡）
   前缀: qpg-
   对应源码 .prod-list.prod-list-smt / .prod-grid / .prod-card
   ===================================================== */

/* ---------- 外层容器 ---------- */
.qpg-wrap {
  background: linear-gradient(180deg, #eaf1fb 0%, #dce9fa 100%);
  padding: 72px 0 84px;

  /* 标题竖条：与「产品系列列表」小部件同一套渐变，默认深蓝→亮蓝。
     三个变量分开，控件可单独改两端颜色或角度。 */
  --qpg-bar-c1: #01285f;
  --qpg-bar-c2: #006cff;
  --qpg-bar-angle: 180deg;
  --qpg-bar-bg: linear-gradient(
    var(--qpg-bar-angle),
    var(--qpg-bar-c1) 0%,
    var(--qpg-bar-c2) 100%
  );

  /* 卡片边框：原为偏蓝的 #e2e8f2，改为中性灰 */
  --qpg-card-border: #d8d8d8;
}

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

/* ---------- 版块标题（左对齐 + 蓝色竖条） ---------- */
.qpg-title {
  font-size: 36px;
  font-weight: 800;
  color: #111;
  line-height: 1.25;
  margin: 0 0 40px;
  position: relative;
  padding-left: 18px;
  text-align: left;
}

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

.qpg-subtitle {
  font-size: 16px;
  line-height: 1.8;
  color: #5a6b80;
  margin: -26px 0 40px;
  padding-left: 18px;
}

/* ---------- 产品网格：4 列 ---------- */
.qpg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ---------- 产品卡片 ---------- */
.qpg-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--qpg-card-border);
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  transition: transform 0.28s ease, border-color 0.28s ease;
}

.qpg-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-accent, #1f6feb);
}

/* ---------- 图片区（正方形、contain 完整显示） ---------- */
.qpg-media {
  aspect-ratio: 1 / 1;
  background: #fff;
  padding: 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.qpg-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.5s ease;
}

.qpg-card:hover .qpg-media img {
  transform: scale(1.06);
}

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

/* ---------- 卡片文字区 ---------- */
.qpg-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 20px 26px;
}

.qpg-name-slot {
  min-height: 54px;
  margin-bottom: 10px;
}

.qpg-slogan-slot {
  min-height: 48px;
  margin-bottom: 18px;
}

.qpg-link-slot {
  margin-top: auto;
}

/* 分类小字（源码 SMT 版块隐藏，此处保留可控开关） */
.qpg-cat {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent, #1f6feb);
  text-transform: uppercase;
  margin: 0 0 10px;
}

.qpg-name {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  line-height: 1.5;
  margin: 0;
  transition: color 0.25s ease;
}

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

.qpg-slogan {
  font-size: 14px;
  line-height: 1.7;
  color: #999;
  margin: 0;
}

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

.qpg-card:hover .qpg-link {
  opacity: 0.78;
}

/* ---------- 空状态提示（编辑器内） ---------- */
.qpg-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 15px;
  color: #7a8899;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed #b9c6d8;
  border-radius: 10px;
}

/* ---------- 响应式 ≤1200px：3 列 ---------- */
/* ---------- 进入视口动效 ---------- */
.qpg-wrap.is-motion-ready .qpg-title,
.qpg-wrap.is-motion-ready .qpg-card,
.qpg-wrap.is-motion-ready .qpg-media img,
.qpg-wrap.is-motion-ready .qpg-name,
.qpg-wrap.is-motion-ready .qpg-slogan,
.qpg-wrap.is-motion-ready .qpg-link {
  opacity: 0; transform: translate3d(0,28px,0);
  transition: opacity .72s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1);
}
.qpg-wrap.is-motion-ready .qpg-media img { transform: scale(1.06); }
.qpg-wrap.is-motion-visible .qpg-title,
.qpg-wrap.is-motion-visible .qpg-card,
.qpg-wrap.is-motion-visible .qpg-name,
.qpg-wrap.is-motion-visible .qpg-slogan,
.qpg-wrap.is-motion-visible .qpg-link { opacity: 1; transform: translate3d(0,0,0); }
.qpg-wrap.is-motion-visible .qpg-media img { opacity: 1; transform: scale(1); }
.qpg-wrap.is-motion-visible .qpg-card:hover { transform: translateY(-6px); }
.qpg-wrap.is-motion-visible .qpg-card:hover .qpg-media img { transform: scale(1.06); }
.qpg-wrap.is-motion-ready .qpg-title { transition-delay: .08s; }
.qpg-wrap.is-motion-ready .qpg-card { transition-delay: calc(.28s + var(--motion-i,0) * .25s); }
.qpg-wrap.is-motion-ready .qpg-media img { transition-delay: calc(.38s + var(--motion-i,0) * .25s); }
.qpg-wrap.is-motion-ready .qpg-name { transition-delay: calc(.50s + var(--motion-i,0) * .25s); }
.qpg-wrap.is-motion-ready .qpg-slogan { transition-delay: calc(.62s + var(--motion-i,0) * .25s); }
.qpg-wrap.is-motion-ready .qpg-link { transition-delay: calc(.74s + var(--motion-i,0) * .25s); }
@media (prefers-reduced-motion: reduce) {
  .qpg-wrap.is-motion-ready .qpg-title,
  .qpg-wrap.is-motion-ready .qpg-card,
  .qpg-wrap.is-motion-ready .qpg-media img,
  .qpg-wrap.is-motion-ready .qpg-name,
  .qpg-wrap.is-motion-ready .qpg-slogan,
  .qpg-wrap.is-motion-ready .qpg-link { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1200px) {
  .qpg-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 响应式 ≤900px：2 列 ---------- */
@media (max-width: 900px) {
  .qpg-wrap {
    padding: 56px 0 64px;
  }

  .qpg-inner {
    padding: 0 24px;
  }

  .qpg-title {
    font-size: 26px;
    margin-bottom: 28px;
  }

  .qpg-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

/* ---------- 响应式 ≤560px：单列 ---------- */
@media (max-width: 560px) {
  .qpg-grid {
    grid-template-columns: 1fr;
  }
}