/* Features */
.article-product-features-page {
  --article-section-pad-bottom: clamp(28px, calc(var(--article-section-target-height) * 0.05), 56px);
  --article-features-bottom-safe-space: 80px;
  --article-features-body-height: max(
    440px,
    calc(var(--article-section-target-height) - var(--article-section-pad-top) - var(--article-section-pad-bottom) - var(--article-features-bottom-safe-space))
  );
  --article-features-layout-gap: clamp(28px, 3.2vw, 46px);
  --article-features-media-gap: clamp(18px, 2vw, 24px);
  --article-features-grid-gap: clamp(18px, 2vw, 24px);
  --article-features-metrics-gap: clamp(12px, 1.25vw, 16px);
  --article-features-media-height: clamp(320px, calc(var(--article-features-body-height) * 0.72), 820px);
  --article-features-metric-height: clamp(96px, calc(var(--article-features-body-height) * 0.16), 128px);
  --article-features-metric-visual-width: clamp(44px, 3.2vw, 68px);
  --article-features-metric-visual-height: clamp(34px, 2.8vw, 56px);
  --article-features-card-padding: clamp(12px, calc(var(--article-section-target-height) * 0.018), 18px);
  --article-features-card-min-height: clamp(88px, calc(var(--article-features-body-height) * 0.145), 116px);
  --article-features-feature-size: var(--font-body-lg);
  --article-features-feature-line-height: 1.38;
  --article-features-benefit-size: var(--font-body-md);
  --article-features-benefit-line-height: 1.56;
}

.article-product-features-page .page-content {
  padding-top: var(--article-section-pad-top);
  padding-bottom: calc(var(--article-section-pad-bottom) + var(--article-features-bottom-safe-space));
}

@media (min-width: 1200px) {
  .article-product-features-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--features-left-fr, 0.75fr)) minmax(0, 1fr);
    gap: var(--article-features-layout-gap);
    align-items: stretch;
  }
}

.article-product-features-media {
  /* 主图与圆圈背景只允许按同一标量等比缩放 */
  --article-features-product-size: min(88%, clamp(480px, 22vw, 640px));
  /* 圆圈相对主图中心的偏移按尺寸同比例缩放 */
  --article-features-orbit-offset-x: calc(var(--article-features-product-size) * -0.18);
  --article-features-orbit-offset-y: calc(var(--article-features-product-size) * 0.06);
  --article-features-product-shift-y: clamp(56px, calc(var(--article-features-product-size) * 0.04), 82px);
  position: relative;
  display: grid;
  grid-template-areas:
    "visual"
    "metrics";
  grid-template-rows: minmax(var(--article-features-media-height), 1fr) auto;
  gap: var(--article-features-media-gap);
  align-content: stretch;
  height: 100%;
  min-width: 0;
}

.article-product-features-media__orbits {
  grid-area: visual;
  position: relative;
  z-index: 0;
  width: var(--article-features-product-size);
  aspect-ratio: 1 / 1;
  justify-self: center;
  align-self: center;
  overflow: visible;
  pointer-events: none;
  transform: translate(0, var(--article-features-orbit-offset-y));
}

.article-product-features-media__orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  border-radius: 50%;
  overflow: visible;
  transform: translate(-50%, -50%);
}

/* 扩散波纹 */
.article-product-features-media__orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--article-orbit-border-md);
  border-radius: inherit;
  background: var(--article-orbit-surface-md);
  opacity: var(--article-orbit-wave-opacity);
  transform: scale(var(--article-orbit-wave-scale-from));
  clip-path: circle(50% at 50% 50%);
  will-change: transform, opacity;
}

/* 常驻底圈不参与扩散 */
.article-product-features-media__orbit--static {
  width: var(--article-orbit-wave-base-size);
  height: var(--article-orbit-wave-base-size);
  z-index: 5;
}

.article-product-features-media__orbit--static::before {
  border-color: var(--article-orbit-border-solid);
  background: var(--article-orbit-surface-solid);
  opacity: 1;
}

.article-product-features-media__orbit--lg {
  width: var(--article-orbit-wave-base-size);
  height: var(--article-orbit-wave-base-size);
  --article-orbit-wave-delay: -1000ms;
}

.article-product-features-media__orbit--md {
  width: var(--article-orbit-wave-base-size);
  height: var(--article-orbit-wave-base-size);
  --article-orbit-wave-delay: -2000ms;
}

.article-product-features-media__orbit--sm {
  width: var(--article-orbit-wave-base-size);
  height: var(--article-orbit-wave-base-size);
  --article-orbit-wave-delay: -3000ms;
}

.article-product-features-media__window {
  grid-area: visual;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--article-features-product-size);
  justify-self: center;
  align-self: center;
  min-height: 0;
  height: auto;
  background: transparent;
}

.article-product-features-media__window img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translateY(var(--article-features-product-shift-y));
}

.article-product-features-media--metrics-empty .article-product-features-media__window img {
  width: 70%;
}

.article-product-features-badge {
  position: absolute;
  top: var(--article-features-product-shift-y);
  left: 0;
  transform: translateY(-100%);
  z-index: 3;
  pointer-events: none;
  max-width: calc(var(--article-features-product-size) * 0.4);
}

.article-product-features-badge img {
  display: block;
  width: 100%;
  height: auto;
}

.article-product-features-metrics {
  grid-area: metrics;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--article-features-metrics-gap);
}

.article-product-features-metric {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: var(--article-features-metric-height);
  border: 1px solid var(--article-card-border);
  border-radius: var(--article-metric-radius);
  overflow: hidden;
  background: var(--article-metric-surface-top);
  box-shadow: var(--article-metric-shadow);
  display: grid;
  grid-template-rows: 62% 38%;
}

.article-product-features-metric__visual {
  display: block;
  width: var(--article-features-metric-visual-width);
  height: var(--article-features-metric-visual-height);
  aspect-ratio: 1 / 1;
  justify-self: center;
  align-self: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* 模板图片等比缩放 */
img.article-product-features-metric__visual {
  object-fit: contain;
}

.article-product-features-metric__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: var(--article-metric-surface-bottom);
  color: var(--article-text-inverse);
  font-size: var(--font-body-md);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.article-product-features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--article-features-grid-gap);
}

/* 标准版只有图标和标题时改成单列 */
.article-product-page.article-product-page--feature-title-only:not(.article-product-page--v2) .article-product-features-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.article-product-feature-card {
  display: grid;
  align-content: center;
  justify-items: center;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--article-features-card-min-height);
  padding: var(--article-features-card-padding);
  text-align: center;
}

.article-product-feature-card__icon {
  display: block;
  width: clamp(26px, 2.2vw, 42px);
  height: clamp(26px, 2.2vw, 42px);
  object-fit: contain;
}

.article-product-feature-card__feature,
.article-product-feature-card__benefit {
  margin: 0;
  width: 100%;
}

.article-product-feature-card__feature {
  color: var(--article-text-primary);
  font-size: var(--article-features-feature-size);
  font-weight: 700;
  line-height: var(--article-features-feature-line-height);
}

.article-product-feature-card__benefit {
  position: relative;
  padding-top: 0.45rem;
  color: var(--article-text-secondary);
  font-size: var(--article-features-benefit-size);
  line-height: var(--article-features-benefit-line-height);
}

/* 标题和正文同时存在时才保留分隔线 */
.article-product-feature-card--with-divider .article-product-feature-card__benefit::before {
  content: "";
  display: block;
  width: min(90%, 300px);
  margin: 0 auto 0.45rem;
  border-top: 1px dashed var(--article-accent-line);
}

/* v2 */
.article-product-page--v2 .article-product-features-page {
  --article-features-feature-size: var(--font-title-md);
  --article-features-benefit-size: var(--font-body-lg);
}

@media (min-width: 1200px) {
  .article-product-page--v2 .article-product-features-layout {
    grid-template-columns: minmax(0, var(--features-left-fr, 1.2fr)) minmax(0, 1fr);
  }
}

.article-product-page--v2 .article-product-features-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 3vw, 40px) var(--article-features-metrics-gap);
}

.article-product-page--v2 .article-product-feature-card__benefit {
  white-space: pre-line;
}

/* v2 左侧参数卡改成白底矩形并把图标抬到上沿 */
.article-product-page--v2 .article-product-features-metric--v2 {
  position: relative;
  aspect-ratio: auto;
  min-height: max(var(--article-features-metric-height), 118px);
  padding: clamp(34px, 3vw, 42px) clamp(10px, 1vw, 16px) clamp(16px, 1.8vw, 22px);
  border: 1px solid var(--article-card-border);
  border-radius: var(--article-metric-radius);
  background: var(--article-card-gradient-soft);
  box-shadow: var(--article-metric-shadow);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
}

.article-product-page--v2 .article-product-features-metric__badge {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(33.333%, 72px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--ui-color-white);
  display: grid;
  place-items: center;
  transform: translate(-50%, -42%);
}

.article-product-page--v2 .article-product-features-metric__badge .article-product-features-metric__visual {
  width: 100%;
  height: 100%;
  max-width: calc(var(--article-features-metric-visual-width) * 1.6);
  max-height: calc(var(--article-features-metric-visual-height) * 1.6);
}

.article-product-page--v2 .article-product-features-metric__label {
  align-items: flex-start;
  width: 100%;
  justify-content: center;
  background: transparent;
  padding: 6px 0 0;
  color: var(--ui-color-brand-blue);
  text-align: center;
}

/* v2 右列卡片上下分层 */
.article-product-page--v2 .article-product-features-grid--v2 {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

/* 无 tags 时右侧文字卡区内容高度随内容，并在列内纵向居中（3张卡除外，3张卡有独立首行布局） */
.article-product-page--v2 .article-product-features-media--metrics-empty ~ .article-product-features-grid--v2:not(:has(> :nth-child(3):last-child)) {
  align-content: center;
  align-items: start;
}

/* v2 3张卡时第一张独占首行（仅桌面端） */
@media (min-width: 1200px) {
  .article-product-page--v2 .article-product-features-grid--v2:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-product-page--v2 .article-product-features-grid--v2:has(> :nth-child(3):last-child) > :first-child {
    grid-column: 1 / -1;
  }
}

.article-product-page--v2 .article-product-feature-card--stacked {
  --article-feature-title-icon-size: clamp(28px, 2.2vw, 36px);
  --article-feature-title-icon-gap: clamp(12px, 1.2vw, 16px);
  --article-feature-card-side-padding: clamp(18px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ui-color-white);
  align-items: stretch;
  justify-content: flex-start;
}

.article-product-page--v2 .article-product-feature-card__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--article-feature-title-icon-gap);
  padding:
    clamp(16px, 2vw, 22px)
    var(--article-feature-card-side-padding)
    clamp(16px, 2vw, 22px)
    var(--article-feature-card-side-padding);
  background: #E9F4FF;
  color: var(--ui-color-brand-blue);
  font-size: var(--article-features-feature-size);
  font-weight: 700;
  line-height: var(--article-features-feature-line-height);
  text-align: left;
}

/* 文字卡标题图标为模板输出 */
.article-product-page--v2 .article-product-feature-card__title-icon {
  width: var(--article-feature-title-icon-size);
  height: var(--article-feature-title-icon-size);
  flex: 0 0 var(--article-feature-title-icon-size);
  object-fit: contain;
}

.article-product-page--v2 .article-product-feature-card__body {
  flex: 1 1 auto;
  /* 正文左缘对齐标题文字 并空出图标下方 */
  padding:
    clamp(18px, 2.1vw, 26px)
    clamp(18px, 2.1vw, 26px)
    clamp(18px, 2.1vw, 26px)
    calc(var(--article-feature-card-side-padding) + var(--article-feature-title-icon-size) + var(--article-feature-title-icon-gap));
  background: var(--article-card-gradient-soft);
}

.article-product-page--v2 .article-product-feature-card__body-text {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--article-text-secondary);
  font-size: var(--article-features-benefit-size);
  line-height: 1.85;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.article-product-page--v2 .article-product-feature-card__body-text li {
  position: relative;
}

.article-product-page--v2 .article-product-feature-card__body-text li::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--article-feature-title-icon-gap) + var(--article-feature-title-icon-size) * 0.5 + 3px));
  top: calc(var(--article-features-benefit-size) * 1.85 / 2);
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-color-brand-blue);
}

@media (min-width: 1200px) {
  /* PC 小标签网格 */
  .article-product-page .article-product-features-metrics {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .article-product-page .article-product-features-metrics > .article-product-features-metric {
    min-width: 0;
  }

  .article-product-page:not(.article-product-page--v2) .article-product-features-metrics {
    grid-auto-rows: minmax(var(--article-features-metric-height), auto);
  }

  .article-product-page:not(.article-product-page--v2) .article-product-features-metric {
    min-height: var(--article-features-metric-height);
    aspect-ratio: auto;
  }

  /* 四等分 span 3 - 4/7/8 张卡 */
  .article-product-page .article-product-features-metrics > .article-product-features-metric:first-child:is(:nth-last-child(4), :nth-last-child(7), :nth-last-child(8)),
  .article-product-page .article-product-features-metrics > .article-product-features-metric:first-child:is(:nth-last-child(4), :nth-last-child(7), :nth-last-child(8)) ~ .article-product-features-metric {
    grid-column: span 3;
  }

  /* 三等分 span 4 - 3/5/6/9 张卡 */
  .article-product-page .article-product-features-metrics > .article-product-features-metric:first-child:is(:nth-last-child(3), :nth-last-child(5), :nth-last-child(6), :nth-last-child(9)),
  .article-product-page .article-product-features-metrics > .article-product-features-metric:first-child:is(:nth-last-child(3), :nth-last-child(5), :nth-last-child(6), :nth-last-child(9)) ~ .article-product-features-metric {
    grid-column: span 4;
  }

  /* 二等分 span 5 - 仅 2 张卡 */
  .article-product-page .article-product-features-metrics > .article-product-features-metric:first-child:nth-last-child(2),
  .article-product-page .article-product-features-metrics > .article-product-features-metric:first-child:nth-last-child(2) ~ .article-product-features-metric {
    grid-column: span 5;
  }

  /* 独占整行 - 1 张卡 */
  .article-product-page .article-product-features-metrics > .article-product-features-metric:first-child:nth-last-child(1) {
    grid-column: 1 / -1;
  }

  /* 小标签网格行居中：不满行的最后一行水平居中 */
  /* 2 张卡（span 5 x 2 = 10/12）：首卡从 col 2 起，两侧各留 1 列 */
  .article-product-page:not(.article-product-page--v2) .article-product-features-metrics > .article-product-features-metric:first-child:nth-last-child(2) {
    grid-column: 2 / span 5;
  }

  /* 5 张卡（三等分，第二行 2 张 = 8/12）：第 4 张从 col 3 起，两侧各留 2 列 */
  .article-product-page:not(.article-product-page--v2) .article-product-features-metrics > .article-product-features-metric:nth-child(4):nth-last-child(2) {
    grid-column: 3 / span 4;
  }

  /* 7 张卡（四等分，第二行 3 张 = 9/12）：第 5 张从 col 2 起，近似居中 */
  .article-product-page:not(.article-product-page--v2) .article-product-features-metrics > .article-product-features-metric:nth-child(5):nth-last-child(3) {
    grid-column: 2 / span 3;
  }
}

@media (max-width: 1199.98px) {
  /* 所有内容区在移动端统一回落为单列，v2 仅保留差异补丁。 */
  .article-product-features-layout,
  .article-product-features-grid {
    grid-template-columns: 1fr;
  }

  /* 默认模板小标签网格：通过卡片数量切换 span，尽量保持最后一行居中 */
  .article-product-page:not(.article-product-page--v2) .article-product-features-metrics {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(108px, auto);
    gap: clamp(10px, 3vw, 14px);
    overflow: visible;
    padding: 18px 2px 12px;
  }

  .article-product-page:not(.article-product-page--v2) .article-product-features-metric {
    min-width: 0;
    min-height: 108px;
    aspect-ratio: auto;
  }

  /* 四等分 span 3 - 4/7/8 张卡 */
  .article-product-page:not(.article-product-page--v2) .article-product-features-metric:first-child:is(:nth-last-child(4), :nth-last-child(7), :nth-last-child(8)),
  .article-product-page:not(.article-product-page--v2) .article-product-features-metric:first-child:is(:nth-last-child(4), :nth-last-child(7), :nth-last-child(8)) ~ .article-product-features-metric {
    grid-column: span 3;
  }

  /* 三等分 span 4 - 3/5/6/9 张卡 */
  .article-product-page:not(.article-product-page--v2) .article-product-features-metric:first-child:is(:nth-last-child(3), :nth-last-child(5), :nth-last-child(6), :nth-last-child(9)),
  .article-product-page:not(.article-product-page--v2) .article-product-features-metric:first-child:is(:nth-last-child(3), :nth-last-child(5), :nth-last-child(6), :nth-last-child(9)) ~ .article-product-features-metric {
    grid-column: span 4;
  }

  /* 二等分 span 6 - 仅 2 张卡 */
  .article-product-page:not(.article-product-page--v2) .article-product-features-metric:first-child:nth-last-child(2),
  .article-product-page:not(.article-product-page--v2) .article-product-features-metric:first-child:nth-last-child(2) ~ .article-product-features-metric {
    grid-column: span 6;
  }

  /* 独占整行 - 1 张卡 */
  .article-product-page:not(.article-product-page--v2) .article-product-features-metric:first-child:nth-last-child(1) {
    grid-column: 1 / -1;
  }

  /* v2 小标签网格：2 列为基线，奇数尾卡独占一整行 */
  .article-product-page--v2 .article-product-features-metrics {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 32px) clamp(10px, 3vw, 14px);
    overflow: visible;
    padding: 18px 2px 12px;
  }

  .article-product-page--v2 .article-product-features-metric--v2:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
  }

  .article-product-page--v2 .article-product-features-metric__label {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .article-product-page--v2 .article-product-features-metric--v2 {
    min-height: 108px;
    padding: clamp(30px, 5vw, 36px) clamp(12px, 3.6vw, 18px) clamp(16px, 4vw, 20px);
  }

  .article-product-page--v2 .article-product-features-metric__badge {
    width: min(34%, 64px);
  }

  .article-product-features-layout {
    gap: 20px;
  }

  .article-product-features-media {
    grid-template-rows: auto auto;
    height: auto;
  }

  .article-product-features-badge {
    top: 0;
  }

  /* 移动端圆圈绝对定位，脱离文档流，不参与高度计算，可被内容遮挡 */
  .article-product-features-media__orbits {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
  }

  .article-product-features-media--metrics-empty .article-product-features-media__orbits {
    transform: translate(-50%, -40%);
  }

  .article-product-features-media__window {
    min-height: 0;
    height: auto;
    position: relative;
  }

  .article-product-features-media__window {
    padding-bottom: var(--article-features-product-shift-y);
  }

  .article-product-features-media__window img {
    height: auto;
  }

  /* 文字卡版标题和正文内边距 */
  .article-product-page--v2 .article-product-feature-card__title {
    padding: clamp(14px, 3.8vw, 18px) clamp(16px, 4vw, 20px);
  }

  .article-product-page--v2 .article-product-feature-card--stacked {
    --article-feature-card-side-padding: clamp(16px, 4vw, 20px);
  }

  .article-product-page--v2 .article-product-feature-card__body {
    padding: clamp(16px, 4vw, 20px);
  }

  .article-product-page--v2 .article-product-feature-card__body {
    /* 正文左侧对齐标题文字 */
    padding-left: calc(var(--article-feature-card-side-padding) + var(--article-feature-title-icon-size) + var(--article-feature-title-icon-gap));
  }
}