/* ============================================
   Products Section - 精确还原 Figma 设计
   蓝底 + 左侧标题 + 右侧斜切大图 + 8 卡片轮播 + 六边形箭头
   卡片有 pd-initial / pd-hover 两态 (hover 淡入替换)
   ============================================ */

.products {
  position: relative;
  width: 100%;
  background: var(--color-primary);
  overflow: hidden;
}

.products__inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  height: 1080px;
}

/* --- 左侧内容 --- */
.products__content {
  position: absolute;
  top: 111px;
  left: 200px;
  width: 622px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.products__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 3.9583vw, 4.75rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0;
}

.products__subtitle {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 1.6667vw, 2rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0;
  max-width: 924px;
  white-space: nowrap;    /* PC 一行显示不换行（移动端 ≤1200 恢复自动换行） */
}

/* --- Learn More 按钮 (六边形药丸, 白底蓝字) --- */
.products__learn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 58px;
  padding: 0 28px;
  align-self: flex-start;
  text-decoration: none;
  transition: transform var(--duration-micro) var(--ease-emphasized);
}

.products__learn-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.products__learn-shape path {
  fill: var(--color-white);
  transition: fill var(--duration-base) var(--ease-standard), stroke var(--duration-base) var(--ease-standard);
}

.products__learn-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-primary);
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-standard);
}

.products__learn:hover .products__learn-shape path {
  fill: var(--color-primary);
  stroke: var(--color-white);
  stroke-width: 1.5px;
}

.products__learn:hover .products__learn-text {
  color: var(--color-white);
}

.products__learn:active {
  transform: scale(0.96);
}

/* --- 右侧斜切大图 --- */
.products__right-image {
  position: absolute;
  top: 0;
  left: 814px;
  width: 1106px;
  height: 1080px;
  z-index: 1;
  clip-path: polygon(52.97% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.products__right-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 卡片轮播 --- */
.products__carousel {
  position: absolute;
  top: 617px;
  left: 200px;
  right: 0;
  height: 300px;
  overflow: hidden;
  z-index: 2;
  cursor: grab;
}

.products__track {
  display: flex;
  gap: 24px;
  height: 100%;
  width: max-content;
  transition: transform var(--duration-base) var(--ease-standard);
  will-change: transform;
}

.products__card {
  position: relative;
  flex-shrink: 0;
  width: 490px;
  height: 300px;
  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/is-active 时仅图片淡出） */
.products__card-initial {
  position: absolute;
  inset: 0;
  background-color: var(--color-surface);
}

/* 线稿图：图片按设计稿节点约束：85x168 @ 卡片(344,102) → size 17.47%x55.38%、pos 85.64%/75.38% */
.products__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);
}

.products__card:nth-child(1) .products__card-initial::before { background-image: url(../images/pd-001.png); }
.products__card:nth-child(2) .products__card-initial::before { background-image: url(../images/pd-002.png); }
.products__card:nth-child(3) .products__card-initial::before { background-image: url(../images/pd-003.png); }
.products__card:nth-child(4) .products__card-initial::before { background-image: url(../images/pd-004.png); }
.products__card:nth-child(5) .products__card-initial::before { background-image: url(../images/pd-005.png); }
.products__card:nth-child(6) .products__card-initial::before { background-image: url(../images/pd-006.png); }
.products__card:nth-child(7) .products__card-initial::before { background-image: url(../images/pd-007.png); }
.products__card:nth-child(8) .products__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)) */
.products__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);
}

.products__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%;
}

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

.products__card:hover .products__card-hover,
.products__card.is-active .products__card-hover {
  opacity: 1;
}

.products__card:hover .products__card-initial::before,
.products__card.is-active .products__card-initial::before {
  opacity: 0;
}

/* 圆形图标 (hover 态右下角, 绿色圆 + 白点) */
.products__circle-icon {
  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);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* 卡片文字 (始终可见) */
.products__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);
}

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

.products__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;
}

.products__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;
}

/* --- 左右箭头 (六边形描边 + 雪佛龙) --- */
.products__arrows {
  position: absolute;
  top: 962px;
  left: 200px;
  display: flex;
  gap: 20px;
  z-index: 3;
}

.products__arrow {
  width: 55px;
  height: 55px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
}

.products__arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.products__arrow-hex,
.products__arrow-chev {
  transition: all var(--duration-base) var(--ease-standard);
}

.products__arrow:hover .products__arrow-hex {
  fill: var(--color-white);
}

.products__arrow:hover .products__arrow-chev {
  stroke: var(--color-primary);
}

.products__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.products__arrow:disabled:hover .products__arrow-hex {
  fill: none;
}

.products__arrow:disabled:hover .products__arrow-chev {
  stroke: var(--color-white);
}

@media (min-width: 1921px) {
  /* 大屏: 内容区撑满视口, 斜切图贴右边缘, 卡片可见区随屏幕宽度扩展, 不被 1920 内容区切割 */
  .products__inner {
    max-width: none;
  }

  .products__right-image {
    left: auto;
    right: 0;
  }
}

/* ============================================
   Responsive Products
   ============================================ */

@media (max-width: 1200px) {
  .products__inner { height: 900px; }

  .products__content {
    top: 80px;
    left: 80px;
    width: 60%;
  }

  .products__subtitle {
    white-space: normal;   /* 移动端恢复自动换行（PC nowrap 仅桌面生效） */
  }

  .products__right-image {
    left: 55%;
    width: 45%;
  }

  .products__carousel {
    top: 500px;
    left: 80px;
    height: 245px;
  }

  .products__card {
    width: 400px;
    height: 245px;
  }

  .products__arrows {
    top: 780px;
    left: 80px;
  }
}

@media (max-width: 768px) {
  .products__inner { height: auto; }

  .products__learn {
    width: auto;
    height: 50px;
    padding: 0 24px;
    align-self: center;
  }

  .products__learn-text {
    font-size: 1rem;
  }

  .products__content {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    padding: 56px 20px 32px;
    gap: 24px;
    align-items: center;
    text-align: center;
  }

  .products__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
    margin-bottom: 8px;  /* 标题与描述拉开 10px */
  }

  .products__learn {
    align-self: center;
  }

  .products__right-image {
    display: none;
  }

  .products__carousel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: 171px;
    margin-top: 8px;
    padding-left: 20px;
  }

  .products__track {
    gap: 16px;
    padding-right: 20px;
  }

  .products__card {
    width: 260px;
    height: 171px;
  }

  .products__card-initial::before {
    background-size: 17.31% 52.63%;
  }

  /* 移动端默认显示 hover 态 */
  .products__card-hover {
    display: block;
    opacity: 1;
  }

  .products__circle-icon {
    display: flex;
    left: calc(76.5% + 15px);
  }

  .products__card-initial::before {
    opacity: 0;
  }

  .products__card:hover .products__card-initial::before,
  .products__card.is-active .products__card-initial::before {
    opacity: 0;
  }

  /* 移动端: 隐藏卡片描述文字, 标题下移至距卡片底部 18px */
  .products__card-desc {
    display: none;
  }

  .products__card-text {
    top: auto;
    bottom: 18px;
  }

  .products__arrows {
    position: relative;
    top: auto;
    left: auto;
    justify-content: center;
    margin: 28px 0 56px;
  }
}

@media (max-width: 576px) {
  .products__learn {
    width: auto;
    height: 44px;
    padding: 0 20px;
  }

  .products__learn-text {
    font-size: clamp(0.8125rem, 0.04vw + 0.8rem, 0.875rem);
  }

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

  .products__content {
    padding: 48px 16px 28px;
    gap: 20px;
  }

  .products__carousel {
    padding-left: 16px;
  }

  .products__card {
    width: 240px;
    height: 158px;
  }

  .products__card-initial::before {
    background-size: 17.31% 52.63%;
  }

  .products__arrows {
    justify-content: center;
    margin: 24px 0 48px;
  }
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .products__track,
  .products__card-hover,
  .products__card-initial,
  .products__learn,
  .products__learn-shape,
  .products__arrow-hex,
  .products__arrow-chev {
    transition: none;
  }
}