/* Assurance */
.article-product-assurance-page {
  --article-section-pad-bottom: clamp(24px, calc(var(--article-section-target-height) * 0.05), 52px);
  --article-assurance-bottom-safe-space: 80px;
  --article-assurance-body-height: max(
    420px,
    calc(var(--article-section-target-height) - var(--article-section-pad-top) - var(--article-section-pad-bottom) - var(--article-assurance-bottom-safe-space))
  );
  --article-assurance-media-width: 40%;
  --article-assurance-grid-gap: clamp(18px, calc(var(--article-assurance-body-height) * 0.032), 28px);
  --article-assurance-card-padding: clamp(18px, calc(var(--article-assurance-body-height) * 0.05), 30px);
  --article-assurance-card-gap: clamp(16px, calc(var(--article-assurance-body-height) * 0.04), 24px);
  --article-assurance-content-gap: clamp(0.55rem, calc(var(--article-assurance-body-height) * 0.0015), 0.75rem);
  --article-assurance-media-min-height: clamp(150px, calc(var(--article-assurance-body-height) * 0.26), 220px);
  --article-assurance-title-size: var(--font-title-md);
  --article-assurance-title-line-height: 1.32;
  --article-assurance-text-size: var(--font-body-md);
  --article-assurance-text-line-height: 1.58;
}

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

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

.article-product-assurance-card {
  display: grid;
  grid-template-columns: minmax(0, var(--article-assurance-media-width)) minmax(0, calc(100% - var(--article-assurance-media-width)));
  gap: var(--article-assurance-card-gap);
  align-items: start;
  padding: var(--article-assurance-card-padding);
}

.article-product-assurance-card__media {
  display: flex;
  align-items: start;
  justify-content: center;
  width: 100%;
  min-height: var(--article-assurance-media-min-height);
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.article-product-assurance-card__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  padding: 0;
  object-fit: contain;
}

.article-product-assurance-card__content {
  display: grid;
  gap: var(--article-assurance-content-gap);
}

.article-product-assurance-card__title,
.article-product-assurance-card__text {
  margin: 0;
}

.article-product-assurance-card__title {
  color: var(--article-text-primary);
  font-size: var(--article-assurance-title-size);
  font-weight: 700;
  line-height: var(--article-assurance-title-line-height);
}

.article-product-assurance-card__text {
  color: var(--article-text-secondary);
  font-size: var(--article-assurance-text-size);
  line-height: var(--article-assurance-text-line-height);
}

/* v2 */
.article-product-page--v2 .article-product-assurance-page {
  --article-assurance-text-size: var(--font-body-lg);
}

.article-product-page--v2 .article-product-assurance-card__text {
  white-space: pre-line;
}

/* v2 保障卡片三列标题条结构 */
.article-product-page--v2 .article-product-assurance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.article-product-page--v2 .article-product-assurance-card--stacked {
  display: flex;
  flex-direction: column;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.article-product-page--v2 .article-product-assurance-card__title {
  --article-assurance-title-icon-size: clamp(32px, 2.4vw, 42px);
  --article-assurance-title-icon-gap: clamp(12px, 1vw, 16px);
  display: flex;
  align-items: center;
  gap: var(--article-assurance-title-icon-gap);
  width: 100%;
  flex: 0 0 auto;
  padding:
    clamp(16px, 2vw, 22px)
    clamp(18px, 2.1vw, 24px)
    clamp(16px, 2vw, 22px)
    clamp(18px, 2.1vw, 24px);
  background: linear-gradient(var(--ui-color-brand-blue) 00%, #6cb6f3 100%);
  color: var(--ui-color-white);
  text-align: left;
}

/* 文字卡保障标题图标 */
.article-product-page--v2 .article-product-assurance-card__title-icon {
  width: var(--article-assurance-title-icon-size);
  height: var(--article-assurance-title-icon-size);
  flex: 0 0 var(--article-assurance-title-icon-size);
  object-fit: contain;
}

.article-product-page--v2 .article-product-assurance-card__body {
  flex: 1 1 auto;
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  padding: clamp(18px, 2.1vw, 26px) clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 30px);
  background: var(--article-card-gradient);
}

.article-product-page--v2 .article-product-assurance-card__body .article-product-assurance-card__text {
  color: var(--ui-color-text-body);
  text-align: left;
}

@media (max-width: 1199.98px) {
  .article-product-assurance-grid {
    grid-template-columns: 1fr;
  }

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

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

  .article-product-assurance-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* 默认模板保障图尺寸 */
  .article-product-page:not(.article-product-page--v2) .article-product-assurance-card__media {
    min-height: clamp(96px, 30vw, 136px);
  }

  .article-product-page:not(.article-product-page--v2) .article-product-assurance-card__media img {
    width: auto;
    max-width: min(72%, 220px);
    max-height: clamp(96px, 30vw, 136px);
  }

  .article-product-assurance-card__content {
    justify-items: center;
  }
}