/* 捐赠页 — 日落海上的一张白卡片
 *
 * 这一页只做一件事: 把随包的捐赠二维码放到网页上。底色与下载页同一片海
 * (download.css 的 body), 内容压在海面 (不是天光带) 上, 二维码装在白卡里。
 * 颜色/间距/圆角/字号全部走 token。 */

.donate-sea {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  padding-block: 20vh var(--space-12);
  padding-inline: var(--space-4);
}

.donate {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-inline-size: 52rem;
  text-align: center;
}


.donate__title {
  color: var(--color-text-on-ocean);
  font-size: var(--text-4xl);
  letter-spacing: -0.01em;
}

.donate__lead {
  color: var(--color-text-on-ocean);
  max-inline-size: 46ch;
  text-wrap: balance;
}

.donate__grid {
  display: grid;
  gap: var(--space-5);
  inline-size: 100%;
  margin-block-start: var(--space-4);
}

.donate__card {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

/* 两张码的长宽比不一样 (微信 420x572 / 支付宝 420x630): 统一高度, 宽度各自按比例,
   卡片高度才会齐 */
.donate__qr {
  block-size: 14rem;
  inline-size: auto;
  max-inline-size: 100%;
  border-radius: var(--radius-card);
}

.donate__cap {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.donate__note {
  color: var(--color-text-on-ocean);
}

.donate__back {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-on-ocean-muted);
  font-size: var(--text-sm);
}

/* 海面上的链接必须显式写色与 hover (全局 a:hover 会把颜色抢成品牌 700) */
.donate__back a { color: var(--color-text-on-ocean); }
.donate__back a:hover { color: var(--color-text-on-ocean); }

@media (min-width: 48rem) {
  .donate__grid {
    grid-template-columns: repeat(2, minmax(0, 16rem));
    justify-content: center;
  }
  .donate__title { font-size: var(--text-5xl); }
}