/* ==========================================================================
   Widget 02 — How It Works (v2)
   v1 → v2：居中标题 → 左右分栏标题；两张对称卡片 → 大图 + 右侧堆叠卡片。
   对称的双卡片是最典型的模板结构，改成不对称后画面立刻"有人设计过"。
   卡片去掉了顶部金色渐变条和辉光（那两样是廉价信号）。
   控件：小标题 / 标题 / 导语 / 步骤(repeater) / 图片 / 信息卡(repeater) /
        图文左右翻转 / 底部按钮 / 背景色
   ========================================================================== */

.hpb-intro__head { margin-bottom: clamp(3rem, 6vw, 5rem); }

/* --------------------------------------------------------------------------
   三步骤
   -------------------------------------------------------------------------- */
.hpb-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.hpb-step { padding-top: 1.6rem; border-top: 1px solid var(--hpb-line); }

.hpb-step__num {
  font-family: var(--hpb-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--hpb-brass);
  line-height: 1;
}

.hpb-step__title {
  font-size: var(--hpb-fs-h3);
  margin-top: 1rem;
  letter-spacing: 0.01em;
}

.hpb-step__text {
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  color: var(--hpb-text-dim);
}

@media (max-width: 820px) {
  .hpb-steps { grid-template-columns: 1fr; gap: 2rem; }
}

/* --------------------------------------------------------------------------
   图 + 卡片（不对称）
   -------------------------------------------------------------------------- */
.hpb-intro__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: stretch;
}

.hpb-intro__figure {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--hpb-line);
}
.hpb-intro__figure img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.9);
  transition: transform 1.2s var(--hpb-ease);
}
.hpb-intro__figure:hover img { transform: scale(1.04); }

/* 图片上的角标 */
.hpb-intro__figcap {
  position: absolute;
  left: 0; bottom: 0;
  padding: 0.85rem 1.25rem;
  background: rgba(15, 13, 10, 0.88);
  border-top: 1px solid var(--hpb-line);
  border-right: 1px solid var(--hpb-line);
  font-size: var(--hpb-fs-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hpb-brass);
}

.hpb-intro__cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-content: stretch; }

/* --------------------------------------------------------------------------
   信息卡：纯平面，只有一条细边
   -------------------------------------------------------------------------- */
.hpb-infocard {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--hpb-surface);
  border: 1px solid var(--hpb-line);
  transition: border-color var(--hpb-dur) var(--hpb-ease),
              background-color var(--hpb-dur) var(--hpb-ease);
}
.hpb-infocard:hover { border-color: var(--hpb-line-strong); background: var(--hpb-surface-2); }

.hpb-infocard__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hpb-line-soft);
}
.hpb-infocard__head svg { width: 18px; height: 18px; flex: none; color: var(--hpb-brass); }

.hpb-infocard__title {
  font-size: var(--hpb-fs-2xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hpb-champagne);
}

.hpb-infocard__list { margin-top: 1.25rem; display: grid; gap: 0.7rem; }
.hpb-infocard__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.9375rem;
  color: var(--hpb-text-dim);
}
/* 价格数字用衬线，跟菜单调性一致 */
.hpb-infocard__list b {
  font-family: var(--hpb-font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--hpb-text);
  line-height: 1;
}
.hpb-infocard__list--plain li { display: block; color: var(--hpb-text); }
.hpb-infocard__list--plain span { color: var(--hpb-text-dim); }

.hpb-infocard__note {
  margin-top: auto;
  padding-top: 1.35rem;
  font-size: var(--hpb-fs-2xs);
  letter-spacing: 0.04em;
  color: var(--hpb-text-faint);
}

.hpb-intro__cta { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

@media (max-width: 900px) {
  .hpb-intro__body { grid-template-columns: 1fr; }
  .hpb-intro__figure { min-height: 300px; }
}