/* ==========================================================================
   探寻者详情页（对应 page_2_tanxunzhe.png）
   数值全部为设计稿实测 ÷ 2 后的 CSS px，写成 rem（1rem = 10px @1920）。
   纵向锚点（CSS px，自页面顶端）：
     面包屑 116–210（底线 2）｜标题 260–320｜细线 357｜引导句 386–446
     照片 476–1016｜正文首行 1039｜权益标题 1252｜权益网格 1406–2548
     云连锁标题 2634｜左栏首行小标题 2782｜数据区 3054–3202｜榜单图 3560–3717
     页脚上边线 3904
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 区块间距
   -------------------------------------------------------------------------- */
.section--lead {
  padding-top: 4.8rem;
}

.section--benefits {
  padding-top: 4.2rem;
}

.section--cloud {
  padding-top: 8.6rem;
  padding-bottom: 18.8rem;
}

/* --------------------------------------------------------------------------
   2. 首屏引导：引导句 + 通栏照片 + 两段正文
   引导句蓝色，重点词用 <strong> 加粗（设计稿以字重区分，不换色）
   -------------------------------------------------------------------------- */
/* 首屏标题下的细线比其余区块高 6（设计稿 h1 略大于 h2），单独收一点 */
.section--lead .page-title::after {
  margin-top: 3rem;
}

.lead {
  margin-top: 3.2rem;
  font-size: var(--fs-h2-sm);
  line-height: var(--lh-tight);
  font-weight: 400;
  color: var(--c-primary);
}

.lead strong {
  font-weight: 700;
}

.lead__photo {
  width: 100%;
  height: auto;
  margin-top: 3rem;
}

.section--lead .prose {
  margin-top: 2.1rem;
}

/* --------------------------------------------------------------------------
   3. 权益网格：3 列 × 400×202，列距 60、行距 33，第 13 张落在中列
   -------------------------------------------------------------------------- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.3rem 6rem;
  margin-top: 5.4rem;
}

/* min-height 而非 height：描述若在窄断点折行，卡片长高而不是溢出 */
.benefit {
  position: relative;
  min-height: 20.2rem;
  padding: 3.7rem 3.6rem 3.1rem;
  background: var(--c-surface-alt);
}

.benefit--last {
  grid-column: 2;
}

/* 图标画布宽高比各异，锁高度让墨迹高度统一（实测墨迹高 58） */
.benefit__icon {
  width: auto;
  height: 5.8rem;
}

.benefit__num {
  position: absolute;
  top: 3.4rem;
  right: 3.6rem;
  font-size: var(--fs-num-ghost);
  line-height: 1;
  color: var(--c-num-ghost);
}

.benefit__title {
  margin-top: 0.8rem;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--c-title);
}

.benefit__desc {
  margin-top: 1rem;
  font-size: var(--fs-note);
  line-height: var(--lh-tight);
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   4. 云连锁：左文右图，右图与左列底部对齐
   左列 816、间距 56、右图 448×848
   -------------------------------------------------------------------------- */
.cloud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44.8rem;
  gap: 5.6rem;
  margin-top: 4.8rem;
}

.cloud__poster {
  align-self: end;
  width: 44.8rem;
  height: 84.8rem;
  object-fit: cover;
}

.cloud__lead {
  font-size: var(--fs-h2-sm);
  line-height: var(--lh-tight);
  font-weight: 400;
  color: var(--c-primary);
}

.cloud__lead strong {
  font-weight: 700;
}

.cloud__lead--second {
  margin-top: 7.8rem;
}

.cloud__lead + .prose {
  margin-top: 2.9rem;
}

.cloud__rank {
  width: 76.8rem;
  height: auto;
  margin-top: 6.2rem;
}

/* 数据区：竖线落点贴近设计稿 604 / 924；第三列略加宽——
   系统字体下「20万+」比设计稿压缩数字宽约 10，原 auto 列会把上标裁掉 */
.stats2 {
  display: grid;
  grid-template-columns: 24.6rem 30.8rem minmax(0, 1fr);
  margin-top: 5.4rem;
}

.stat + .stat {
  border-left: 1px solid var(--c-line-mid);
  padding-left: 9.2rem;
}

/* nowrap：第三组「20 万+」的上标窄于列宽时会折行，把整段版式往下顶 110 */
.stat__num {
  font-size: var(--fs-stat-lg);
  line-height: 1;
  white-space: nowrap;
  font-weight: 700;
  color: var(--c-title);
  letter-spacing: -0.2rem;
}

.stat__num sup {
  font-size: var(--fs-stat-sup);
  line-height: 1.6;
  font-weight: 400;
  color: var(--c-subtle);
  vertical-align: top;
}

.stat__cap {
  margin-top: 1.1rem;
  font-size: var(--fs-stat-cap);
  line-height: var(--lh-tight);
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   5. 断点
   ≤1279：主列变窄，权益网格与数据区跟着收；
   ≤1023：云连锁改为单列（图移到文字下方）、权益网格两列；
   ≤767 ：权益网格单列、数据区改三行。
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .stats2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stat + .stat {
    padding-left: 4.8rem;
  }

  .cloud__rank {
    width: 100%;
    max-width: 76.8rem;
  }
}

@media (max-width: 1023px) {
  .section--lead {
    padding-top: 3.2rem;
  }

  .section--benefits {
    padding-top: 5.6rem;
  }

  .section--cloud {
    padding-top: 5.6rem;
    padding-bottom: 8rem;
  }

  .benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.3rem 3.6rem;
    margin-top: 4rem;
  }

  .benefit--last {
    grid-column: auto;
  }

  .cloud {
    grid-template-columns: minmax(0, 1fr);
    gap: 4.8rem;
    margin-top: 4rem;
  }

  .cloud__poster {
    width: 100%;
    max-width: 44.8rem;
    height: auto;
    margin-inline: auto;
  }

  .cloud__lead--second {
    margin-top: 5.6rem;
  }
}

@media (max-width: 767px) {
  .lead,
  .cloud__lead {
    font-size: 3.2rem;
  }

  .benefit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .benefit {
    min-height: 0;
  }

  .stats2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.2rem;
  }

  .stat + .stat {
    border-left: 0;
    border-top: 1px solid var(--c-line-mid);
    padding-left: 0;
    padding-top: 3.2rem;
  }

  .stat__num {
    font-size: 7.2rem;
  }
}