/* ============================================================
   文件: activities.css
   功能: 活动页(activities.html)作用域样式 — 五区块: 新人礼 Hero /
         邀请海报裂变 / 当期活动 / FAQ / 页脚收口
   所属模块: 前端样式(assets/css)
   依赖: common.css 的 token 与主站头尾样式(须先于本文件加载);
         页面须声明 data-theme="dark"(科技黑), 本文件全部颜色走 token,
         任何写死浅色值都会与全站割裂(2026-11-12 修正点)
   设计基准: 科技黑视觉方案/首页视觉配色与美学规范-V1.1 —
         ① 纯色扁平: 渐变只允许 CTA 主按钮, 背景/文字/遮罩禁渐变禁光晕
         ② 规格表语言: 细线分层 + 留白, 不做营销卡墙
         ③ 单一强调色: 品牌蓝(--brand 系)只用于行动与数据值, 深底文字用亮档 --brand-ink
         ④ 段落背景严格交替: soft → 底 → soft → 底 → soft
   间距纪律: padding/margin/gap 只用 --sp-N 刻度(4px 基线), 避免离格值告警
   作用域: 全部类名以 act- 前缀(FAQ 段复用 .faq-list 既有类), 不影响其它页面
   版本: 1.1  修改日期: 2026-11-12(科技黑统一改造: 删渐变/玻璃拟态/绿系强调,
         背景改碳黑交替, 强调色收敛到品牌蓝亮档)
   关联方案: doc/活动页转化改造方案-2026-11-12.md 批1
   ============================================================ */

/* ---------- 区块 1 · 新人礼 Hero ----------
   恒深区块(对齐首页 .intro / 下载页 .dl-hero): 纯色 --bg-soft 底 + 底部 1px 细线,
   禁渐变禁光晕(规范红线); 文字用 on-dark 字面值 —— 恒深幕区块不用可翻转 token(P1 教训) */
.act-hero {
  position: relative;
  background: var(--bg-soft);
  color: #fff;
  padding: 96px 0 64px;
}
.act-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.act-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--sp-12);
  align-items: center;
}
.act-hero h1 {
  /* 对齐 v16 首页 h1 流体字级(clamp 29-42), 不自造字号档 */
  font-size: clamp(29px, 3vw, 40px);
  line-height: 1.25;
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
/* 数字锚定: 利益点数字放大 + 亮档品牌蓝(品牌蓝用于数据值, 符合单一强调色原则) */
.act-hero h1 em {
  font-style: normal;
  color: var(--brand-ink);
  font-size: 1.32em;
}
.act-hero__sub {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(236, 239, 241, 0.66);   /* on-dark-2 下限 66%(规范用法约束) */
  max-width: 58ch;
  margin: 0;
  text-wrap: pretty;
}
.act-hero__cta {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  flex-wrap: wrap;
}
/* 次按钮: 深底幽灵按钮(对齐首页 .btn--ghost-dark 语言) */
.act-hero__cta .btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: #eceff1;
}
.act-hero__cta .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.act-hero__code-link {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--fs-body);
  color: rgba(236, 239, 241, 0.66);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.act-hero__code-link:hover { color: #fff; }

/* 权益实体卡: 对齐首页终端卡语言(半透明白面层 + 1px 白描边, 不做玻璃模糊) */
.act-hero__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.act-gift-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
}
.act-gift-card__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-fill);      /* 深色主题强调淡底(宝马蓝 .12) */
  color: var(--brand-ink);            /* 亮档蓝文字, 深底可读 */
  border: 1px solid var(--brand-line);
}
.act-gift-card strong {
  display: block;
  margin-top: var(--sp-3);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}
.act-gift-card strong i {
  font-style: normal;
  font-size: var(--fs-body);
  font-weight: 600;
  color: rgba(236, 239, 241, 0.66);
}
.act-gift-card p {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-body-sm);
  line-height: 1.7;
  color: rgba(236, 239, 241, 0.44);   /* on-dark-3 仅辅助说明 */
}

/* ---------- 区块公共: 标题头(左对齐规格表语言, 对齐 dl-section__head) ---------- */
.act-section-head {
  max-width: 720px;
  margin: 0 0 var(--sp-8);
}
.act-section-head h2 {
  /* 内页段头 clamp 24-32 档(对齐 dl-hero h1), 不用居中营销大字 */
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.32;
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.015em;
  color: var(--ink-1);
}
.act-section-head p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.8;
}
/* 数据值用亮档品牌蓝(dark 下 --brand 是 CTA 实底色, 文字用 --brand-ink) */
.act-section-head b { color: var(--brand-ink); }

/* ---------- 区块 2 · 邀请海报裂变(底色交替序: soft→底) ---------- */
.act-invite { padding: var(--sp-20) 0; }
.act-invite__panel {
  max-width: 880px;
  margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
}
/* 落地识别横幅: 品牌蓝淡底 + 细线(弃绿系, 收敛单一强调色) */
.act-invite__banner {
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-control);
  background: var(--brand-fill);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  font-size: var(--fs-body);
}
.act-invite__label {
  display: block;
  font-size: var(--fs-body-sm);
  color: var(--ink-3);
  margin-bottom: var(--sp-2);
}
/* 邀请码状态提示: 弱化说明档 */
.act-invite__code-hint {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-body-sm);
  color: var(--ink-4);
}
.act-invite__link {
  width: 100%;
  padding: 12px var(--sp-4);
  font-size: var(--fs-body);
  color: var(--ink-1);
  background: var(--bg-surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-family: inherit;
}
.act-invite__link:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-fill);
}
.act-invite__actions {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}
/* 次入口文字链: 与主按钮并列但零视觉重量(参考图同款) */
.act-invite__poster-link {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-body);
  color: var(--brand-ink);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.act-invite__poster-link:hover { color: #62b0ff; }

/* 三档奖励: 规格行语言 —— 三列细线分隔, 不做卡墙(v16「卡片仅两处」原则) */
.act-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--sp-8);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.act-tier {
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  border-right: 1px solid var(--line);
}
.act-tier:last-child { border-right: 0; padding-right: 0; }
.act-tier:not(:first-child) { padding-left: var(--sp-5); }
.act-tier__no {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--brand-ink);
  letter-spacing: 0.04em;
}
.act-tier h3 {
  margin: var(--sp-2) 0;
  font-size: 16px;
  color: var(--ink-1);
}
.act-tier p {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-body-sm);
  color: var(--ink-3);
  line-height: 1.7;
  min-height: 44px;
}
.act-tier strong {
  font-size: var(--fs-body);
  color: var(--ink-2);
  font-weight: 600;
}
/* 三档数字统一锚定: 亮档品牌蓝 + tabular-nums 对齐(规范数字体系) */
.act-tier strong em {
  font-style: normal;
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}

/* 三步流程: 细线顶部分隔 + 编号, 流程条语言 */
.act-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-6);
}
.act-steps li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  color: var(--ink-2);
}
.act-steps li b {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);       /* 深色下宝马蓝实底 + 白字(数据/序号位) */
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 区块 3 · 当期活动(底色交替序: 底→soft) ---------- */
.act-campaigns {
  padding: var(--sp-20) 0;
  background: var(--bg-soft);
}
.act-campaign-list {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* 活动条目: 可点入口 → 允许面卡(规范「卡片仅两处: 可点选入口」), 纯色 + 细线 */
.act-campaign {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  text-decoration: none;
  transition:
    border-color var(--dur-soft) var(--ease-soft),
    transform var(--dur-soft) var(--ease-soft);
}
.act-campaign:hover {
  border-color: var(--brand-line-strong);
  transform: translateY(-2px);
}
/* 活动图标: 线性 SVG 容器(色随文字继承, hover 转亮档品牌蓝 —— 可点入口的行动色位) */
.act-campaign__icon {
  flex: 0 0 auto;
  display: flex;
  color: var(--ink-2);
  transition: color var(--dur-soft) var(--ease-soft);
}
.act-campaign__icon svg { width: 22px; height: 22px; }
.act-campaign:hover .act-campaign__icon { color: var(--brand-ink); }
.act-campaign__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.act-campaign__body strong { font-size: 15px; color: var(--ink-1); }
.act-campaign__body span { font-size: var(--fs-body-sm); color: var(--ink-3); }
.act-campaign__go {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: var(--fs-body);
  color: var(--brand-ink);
  font-weight: 600;
}

/* ---------- 区块 4 · FAQ(底色交替序: soft→底; 复用 .faq-list 既有类) ---------- */
.act-faq { padding: var(--sp-20) 0; }
.act-faq .faq-list {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* FAQ 行: 无卡壳 —— 细线分隔的问答行(规格表语言, 对齐 reward-rules 长文排版) */
.act-faq .faq-item {
  border-bottom: 1px solid var(--line);
  padding: var(--sp-5) 0;
}
.act-faq .faq-item:first-child { border-top: 1px solid var(--line); }
.act-faq .faq-item__q {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: var(--sp-2);
}
.act-faq .faq-item__a {
  font-size: var(--fs-body);
  color: var(--ink-2);
  line-height: 1.8;
}

/* ---------- 区块 5 · 页脚收口 CTA(底色交替序: 底→soft 收尾) ---------- */
.act-final {
  padding: var(--sp-16) 0;
  background: var(--bg-soft);
}
.act-final__inner { max-width: 720px; }
.act-final h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 var(--sp-3); color: var(--ink-1); letter-spacing: -0.015em; }
.act-final p { margin: 0; color: var(--ink-3); font-size: 15px; line-height: 1.8; }
.act-final__cta {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}

/* ---------- 海报弹窗(Modal) — 由 activity-poster.js 动态挂载 ---------- */
.act-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--scrim, rgba(0, 0, 0, 0.58));   /* 深色主题遮罩 token */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.act-modal {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  width: min(440px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: var(--sp-6);
  position: relative;
  box-shadow: var(--shadow-float);
}
.act-modal__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-surface-1);
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.act-modal__close:hover { color: var(--ink-1); border-color: var(--line-strong); }
.act-modal__title {
  margin: 0 0 var(--sp-5);
  font-size: 17px;
  color: var(--ink-1);
  text-align: center;
}
/* 海报预览: 5:7 竖版按容器宽度缩放, 细线描边(深底图片需亮边成像) */
.act-modal__poster {
  display: block;
  width: min(300px, 100%);
  aspect-ratio: 5 / 7;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-control);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-float);
  background: var(--bg-deep);
}
.act-modal__ops {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}
.act-modal__hint {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-body-sm);
  color: var(--ink-3);
  text-align: center;
  line-height: 1.7;
}
.act-modal__hint--wechat { color: var(--brand-ink); font-weight: 600; }
/* 合成用离屏画布不参与显示 */
.act-poster-canvas { position: absolute; left: -9999px; top: 0; }

/* ---------- 响应式: ≤900px 单列 / ≤640px 紧凑(断点沿用主站四档) ---------- */
@media (max-width: 900px) {
  .act-hero__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .act-tiers { grid-template-columns: 1fr; }
  .act-tier {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: var(--sp-5) 0;
  }
  .act-tier:not(:first-child) { padding-left: 0; }
  .act-tier:last-child { border-bottom: 0; }
  .act-steps { grid-template-columns: 1fr; gap: var(--sp-3); }
  .act-tier p { min-height: 0; }
}
@media (max-width: 640px) {
  .act-hero { padding: var(--sp-12) 0 var(--sp-10); }
  .act-hero__cards { grid-template-columns: 1fr; }
  .act-invite__panel { padding: var(--sp-5); }
  .act-campaign { flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-4); }
  .act-campaign__go { margin-left: 0; }
  .act-invite__actions .btn { width: 100%; }
}