/* ══════════════════════════════════════════════════════
   用户好评模块  #reviews(用户在说什么)
   子组件:__head(标签/渐变标题,本区块无副标题)
          __stats(4 组数据 + 渐隐竖分隔线,分隔线手写不用切图)
          __gallery(3 张好评卡 + 两端渐隐压边图 deco,压边在卡片上层)
   设计稿 1920:数据行宽 1297,卡 494×236 间距 48 行宽 1578
   图在 assets/images/reviews/(头像 52 圆形、压边 407/410×292)
   ══════════════════════════════════════════════════════ */

.reviews {
  position: relative;
  padding: 104px 0 201px;
}

/* ── 头部文案 ── */
.reviews__head { text-align: center; }
.reviews__heading {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 3.4px;
  line-height: 40px;
  color: #C5B8ED;
}
.reviews__slogan {
  margin: 32px auto 0;
  width: fit-content;
  font-weight: 400;
  font-size: 78px;
  line-height: 120px;
  color: #FCEEFF; /* 渐变兜底色 */
  background-image: linear-gradient(90deg, #EEEEEE 0%, #D1A1FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 数据行:数字竖向渐变,组间渐隐竖线 ── */
.reviews__stats {
  margin: 193px auto 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 72px;
}
.reviews__stat {
  margin-top: 7px;
  text-align: center;
}
.reviews__num {
  font-size: 64px;
  font-weight: 400;
  line-height: 100px;
  color: #FCEEFF; /* 渐变兜底色 */
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F4D5FF 41%, #A574FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.reviews__label {
  font-size: 20px;
  font-weight: 300;
  line-height: 40px;
  color: #C5B8ED;
}
.reviews__divider {
  width: 1px;
  height: 162px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.24) 50%,
    rgba(255, 255, 255, 0) 100%);
}

/* ── 好评卡行 + 两端压边 ── */
.reviews__gallery {
  position: relative;
  margin-top: 102px;
}
.reviews__deco {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  /* 切图底色与全站固定背景存在色差,上下羽化消除矩形硬边(水平方向切图自带渐隐) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.reviews__deco--left { left: 0; }
.reviews__deco--right { right: 0; }
.reviews__cards {
  display: flex;
  justify-content: center;
  gap: 48px;
  padding: 0 24px;
}
.reviews__card {
  width: 494px;
  padding: 20px 24px 22px;
  background: rgba(76, 46, 145, 0.4);
  border: 0.5px solid rgba(197, 184, 237, 0.35); /* 稿内边框无色值,取站内通用薰衣草描边 */
  border-radius: 18px;
}
.reviews__stars {
  font-size: 16px;
  line-height: 30px;
  color: #FFC63B;
}
.reviews__user {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.reviews__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: block;
}
.reviews__name {
  font-size: 16px;
  line-height: 22px;
  color: #C5B8ED;
}
.reviews__meta {
  margin-top: 6px;
  font-size: 14px;
  line-height: 19px;
  color: #C5B8ED;
}
.reviews__quote {
  margin: 30px 22px 0 0;
  font-size: 14px;
  line-height: 30px;
  color: #C5B8ED;
}

/* ── 响应式 ── */
@media (max-width: 1700px) {
  .reviews__cards { flex-wrap: wrap; } /* 三卡放不下后转 2+1 / 单列 */
  .reviews__deco { display: none; }    /* 压边为 1920 构图设计,窄屏隐藏 */
}
@media (max-width: 1450px) {
  .reviews__stats { flex-wrap: wrap; gap: 40px 72px; }
  .reviews__divider { display: none; }
}
@media (max-width: 960px) {
  .reviews { padding: 100px 24px 120px; }
  .reviews__slogan { font-size: clamp(2rem, 8vw, 78px); line-height: 1.5; }
  .reviews__stats { margin-top: 60px; gap: 32px 48px; }
  .reviews__num { font-size: 48px; line-height: 64px; }
  .reviews__label { font-size: 16px; line-height: 1.9; }
  .reviews__gallery { margin-top: 60px; }
  .reviews__cards { gap: 24px; padding: 0; }
  .reviews__card { max-width: 100%; }
}