/* ============================================================
   Products Series / 产品系列（products.html Section 3）
   ============================================================ */

.pd-series {
  position: relative;
  background: var(--color-white);
  padding: 110px 0 0;           /* 底部 0：水印绝对定位贴底（贴 CTA 上边） */
  overflow: hidden;
}

.pd-series__inner {
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 var(--container-padding) 265px;   /* 底部留白给水印：卡片与水印间距 120px（265-145水印高） */
}

/* --- 标题 --- */
.pd-series__title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.9583vw, 4.75rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--color-primary);
  margin: 0 0 88px;
}

/* --- 卡片网格 --- */
.pd-series__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 40px;
}

/* 卡片：双态实现（与 index.html products__card 一致）
   initial 默认态（白底+图），hover 态透明淡入（#F2F6F5 底+图+绿圆图标） */
.pd-series__card {
  position: relative;
  display: block;                    /* a 标签需 block 才能应用高度 */
  text-decoration: none;
  height: 303px;
  border-radius: var(--radius-md);
  overflow: hidden;
  container-type: inline-size;
  cursor: pointer;
}

/* 默认态：var(--color-surface) 底 + 各产品独立线稿图（Figma product#section pd-001~pd-008）
   背景色块保留，线稿图在 ::before 上（hover 时仅图片淡出） */
.pd-series__card-initial {
  position: absolute;
  inset: 0;
  background-color: var(--color-surface);
}

/* 线稿图：图片按设计稿节点约束：85x168 @ 卡片(344,102) → size 17.47%x55.38%、pos 85.64%/75.38% */
.pd-series__card-initial::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 17.47% 55.38%;
  background-position: 85.64% 75.38%;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.pd-series__card:nth-child(1) .pd-series__card-initial::before { background-image: url(../images/pd-001.png); }
.pd-series__card:nth-child(2) .pd-series__card-initial::before { background-image: url(../images/pd-002.png); }
.pd-series__card:nth-child(3) .pd-series__card-initial::before { background-image: url(../images/pd-003.png); }
.pd-series__card:nth-child(4) .pd-series__card-initial::before { background-image: url(../images/pd-004.png); }
.pd-series__card:nth-child(5) .pd-series__card-initial::before { background-image: url(../images/pd-005.png); }
.pd-series__card:nth-child(6) .pd-series__card-initial::before { background-image: url(../images/pd-006.png); }
.pd-series__card:nth-child(7) .pd-series__card-initial::before { background-image: url(../images/pd-007.png); }
.pd-series__card:nth-child(8) .pd-series__card-initial::before { background-image: url(../images/pd-008.png); }

/* hover 态：渐变底 + 各产品独立图 + 圆形图标，默认透明，hover 淡入
   渐变按设计稿 pd-001-hover：linear-gradient(-45deg, rgba(217,231,240,1), rgba(242,246,245,0)) */
.pd-series__card-hover {
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, rgba(217, 231, 240, 1) 0%, rgba(242, 246, 245, 0) 100%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.pd-series__card-hover-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  /* hover 图按设计稿节点约束：100x200 @ 卡片(336,60) → size 20.55%x65.93%、pos 86.90%/58.06% */
  background-size: 20.55% 65.93%;
  background-position: 86.9% 58.06%;
}

.pd-series__card:nth-child(1) .pd-series__card-hover-bg { background-image: url(../images/pd-001-hover.png); }
.pd-series__card:nth-child(2) .pd-series__card-hover-bg { background-image: url(../images/pd-002-hover.png); }
.pd-series__card:nth-child(3) .pd-series__card-hover-bg { background-image: url(../images/pd-003-hover.png); }
.pd-series__card:nth-child(4) .pd-series__card-hover-bg { background-image: url(../images/pd-004-hover.png); }
.pd-series__card:nth-child(5) .pd-series__card-hover-bg { background-image: url(../images/pd-005-hover.png); }
.pd-series__card:nth-child(6) .pd-series__card-hover-bg { background-image: url(../images/pd-006-hover.png); }
.pd-series__card:nth-child(7) .pd-series__card-hover-bg { background-image: url(../images/pd-007-hover.png); }
.pd-series__card:nth-child(8) .pd-series__card-hover-bg { background-image: url(../images/pd-008-hover.png); }

.pd-series__card:hover .pd-series__card-hover {
  opacity: 1;
}

.pd-series__card:hover .pd-series__card-initial::before {
  opacity: 0;
}

/* 圆形图标（hover 态右下角，绿色圆 + 白点，随 hover 容器淡入） */
.pd-series__circle-icon {
  display: flex;
  position: absolute;
  top: 71.3%;
  left: calc(76.5% + 30px);
  width: clamp(26px, 8.78cqw, 43px);
  height: clamp(26px, 8.78cqw, 43px);
  border-radius: 50%;
  background: var(--color-secondary);
  align-items: center;
  justify-content: center;
}

.pd-series__circle-dot {
  width: clamp(5px, 1.63cqw, 8px);
  height: clamp(5px, 1.63cqw, 8px);
  border-radius: 50%;
  background: var(--color-white);
}

/* 卡片文字（始终可见） */
.pd-series__card-num {
  position: absolute;
  top: 9.33%;
  left: 5.51%;
  z-index: 2;
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 6.53cqw, 2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-number);
  margin: 0;
}

.pd-series__card-text {
  position: absolute;
  top: 55%;
  left: 5.51%;
  width: 50.2%;
  z-index: 2;
}

.pd-series__card-title {
  font-family: var(--font-primary);
  font-size: clamp(0.9375rem, 4.49cqw, 1.375rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
}

.pd-series__card-desc {
  font-family: var(--font-primary);
  font-size: clamp(0.6875rem, 2.86cqw, 0.875rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin: 8px 0 0;
}

/* --- 底部 WELL-T 水印装饰（贴浏览器左边、贴 CTA 上边） --- */
.pd-series__deco {
  position: absolute;
  left: 0;                       /* 绝对贴浏览器左边 */
  bottom: 0;                     /* 贴区块底 = 贴下方浅蓝色块上边 */
  margin: 0;
  pointer-events: none;
}

.pd-series__deco img {
  display: block;
  width: 940px;
  max-width: 100%;
  height: auto;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1200px) {
  .pd-series {
    padding: 80px 0 100px;
  }

  .pd-series__title {
    font-size: clamp(1.5rem, 0.65vw + 1.35rem, 2.5rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 64px;
  }

  .pd-series__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pd-series {
    padding: 60px 0 72px;
  }

  .pd-series__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
  }

  .pd-series__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: center;
  }

  .pd-series__card {
    width: 355px;
    height: 220px;
  }

  /* 移动端调整图片尺寸，保持原图比例（170x336 = 0.506） */
  .pd-series__card-initial::before {
    background-size: 16% 50%;
    background-position: 85.64% 75.38%;
  }

  /* hover图比例（200x400 = 0.5） */
  .pd-series__card-hover-bg {
    background-size: 19% 60%;
    background-position: 86.9% 58.06%;
  }

  .pd-series__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }

  /* 移动端默认显示 hover 态 */
  .pd-series__card-hover {
    opacity: 1;
  }

  .pd-series__card-initial::before {
    opacity: 0;
  }

  .pd-series__inner {
    padding-bottom: 140px;
  }
}

/* ==================== 无障碍降级 ==================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}