/*
 * cta.css — 收口 CTA 组件唯一真源，类契约 qf-cta。
 * 结构：.qf-cta > h2 + p + .qf-cta-actions + .qf-cta-note（可选），缺段不要用这个组件。
 * 只用共享令牌，不写颜色常量；渐变不能当色标，光晕用 color-mix 从纯色 --brand 调（见下）。
 * 历史别名 .hv-cta / .cta-band / .pf-cta-band / .dl-cta-band 是过渡护栏，HTML 收敛后与别名段一起删。
 */

/* ---------- 主体 ---------- */
.qf-cta {
  position: relative;
  overflow: hidden;
  padding: 56px 40px;
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--line);
  /*
   * 不能写 radial-gradient(..., var(--brand-grad-soft), ...)：--brand-grad-soft 本身是
   * linear-gradient，CSS 不允许把渐变当色标，一条 background 里只要有一处非法，整条声明作废
   * （不是只丢那一层）。实测浅色主题下计算值是 background-image: none、
   * background-color: transparent —— 径向光晕没有，连底下的 var(--card) 也一起没了。
   * 正确做法：用 color-mix 从纯色 --brand 现场调出半透明色。
   */
  background:
    radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--brand) 13%, transparent) 0%, transparent 56%),
    var(--card);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
/*
 * 用后代选择器而非 > h2：releases / status 两站的收口区把标题与副文案包在中间 <div> 里，
 * 直接子选择器够不着它们，于是落回浏览器默认的 h2 字号 / 粗细 —— 实测 23.25px/700，
 * 基准是 33px/800。组件契约只要求「标题在收口区内」，不要求它是直接子元素。
 */
.qf-cta h2 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.25;
  color: var(--ink);
}
.qf-cta p {
  margin: 0 auto 26px;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 按钮行 ---------- */
.qf-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 22px;
}
/* 按钮行是最后一个元素时（无脚注）不该留 22px 死白 */
.qf-cta-actions:last-child { margin-bottom: 0; }

/* ---------- 脚注 ---------- */
.qf-cta-note {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.qf-cta-note a { color: var(--brand); border-bottom: 1px solid var(--line-strong); }
.qf-cta-note a:hover { border-bottom-color: var(--brand); }

/* ---------- 暗色 ---------- */
/*
 * 暗色下 --brand 本身已由令牌切到浅蓝，直接复用即可，无需写死 rgba。
 * 浓度略降（10%）：深底上同样的透明度视觉上会明显更亮。
 */
[data-theme="dark"] .qf-cta {
  background:
    radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 56%),
    var(--card);
}

/* ---------- 窄屏 ---------- */
@media (max-width: 767px) {
  .qf-cta { padding: 40px 22px; }
  .qf-cta-actions .btn { flex: 1 1 auto; justify-content: center; }
  .qf-cta-note { padding-top: 14px; }
}
@media (max-width: 479px) {
  .qf-cta-actions { flex-direction: column; align-items: stretch; }
}

/*
 * ── 兼容层：把历史四套实现收敛到本组件 ──────────────────────────────────
 * 这些别名不是「懒得改 HTML」的临时补丁，而是过渡护栏：
 * 老页面里的 .cta-band / .pf-cta-band 只要还在 DOM 里，就继续按本组件渲染，
 * 这样「统一视觉」不必等所有 HTML 改完就能生效，改造可以分批推进。
 * 待全网 HTML 收敛到 .qf-cta 后，连同本段一起删。
 */
.hv-cta, .cta-band, .pf-cta-band, .dl-cta-band {
  padding: 56px 40px;
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--line);
  /* 同上：不能用 var(--brand-grad-soft) 当径向渐变色标 */
  background:
    radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--brand) 13%, transparent) 0%, transparent 56%),
    var(--card);
  color: var(--ink);
  text-align: center;
}
.hv-cta h2, .cta-band h2, .pf-cta-band h2, .dl-cta-band h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ink);
}
.hv-cta > p, .cta-band p, .pf-cta-band p, .dl-cta-band p {
  color: var(--muted);
  opacity: 1;
}
.hv-cta-actions, .cta-band .btn, .pf-cta { margin-bottom: 0; }
.hv-cta-note { font-size: 13px; color: var(--muted); }
[data-theme="dark"] .hv-cta,
[data-theme="dark"] .cta-band,
[data-theme="dark"] .pf-cta-band,
[data-theme="dark"] .dl-cta-band {
  background:
    radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 56%),
    var(--card);
}
@media (max-width: 767px) {
  .hv-cta, .cta-band, .pf-cta-band, .dl-cta-band { padding: 40px 22px; }
}