/* 活动系「我的资产」横幅公共样式
   配套模板:templates/base/activityHero.html({{template "activityHero" ...}})
   配套脚本:js/pages/activity-common.js 的 ActivityAssets 按 data-asset 回填数值
   桌面优先，主断点 @media (max-width: 768px)
   引入顺序:放在各页自己的样式表之前，页面需要微调时可在页面样式表里覆盖 */

.activity-hero {
  position: relative;
  width: 100%;
  height: 224px;
  border-radius: 12px;
  overflow: hidden;
  /* 旧版 WebKit 对 blur 合成层只做矩形裁剪，isolate 兜底保证圆角裁剪生效 */
  isolation: isolate;
  background-color: #FDE574;
}

/* 装饰圆（CSS 重建，不烤图）：设计稿为 4 个线性渐变填充圆
   —— 右侧/左上为实边圆盘，顶部/左下带高斯模糊
   .activity-hero::before = 右侧大圆(E242，层级最底)；decor = 左上圆(E240)；
   decor::before = 左下模糊圆(E243)；decor::after = 顶部模糊圆(E241)，
   均位于 stats/gift/assets 之前，文字图片不受遮挡 */
.activity-hero::before,
.activity-hero__decor,
.activity-hero__decor::before,
.activity-hero__decor::after {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.activity-hero::before,
.activity-hero__decor::before,
.activity-hero__decor::after {
  content: "";
}

.activity-hero::before {
  top: 36px;
  right: -37px;
  width: 524px;
  height: 524px;
  background: linear-gradient(21deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.5) 92%);
}

.activity-hero__decor {
  top: -167px;
  left: -95px;
  width: 507px;
  height: 507px;
  background: linear-gradient(208deg, rgba(255, 255, 255, 0) 39%, #FFFFFF 85%);
}

.activity-hero__decor::before {
  top: 227px;
  left: 296px;
  width: 524px;
  height: 524px;
  background: linear-gradient(311deg, rgba(255, 255, 255, 0.3) 41%, rgba(255, 255, 255, 0) 87%);
  filter: blur(8px);
}

.activity-hero__decor::after {
  top: -227px;
  left: 557px;
  width: 524px;
  height: 524px;
  background: linear-gradient(288deg, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0.5) 94%);
  filter: blur(7.5px);
}

.activity-hero__stats {
  position: absolute;
  left: 0;
  top: 32px;
  width: 56%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 24px;
  column-gap: 20px;
}

.activity-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.activity-hero__num {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: #292929;
}

.activity-hero__label {
  font-size: 18px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.7);
}

.activity-hero__gift {
  position: absolute;
  top: 0;
  right: 6%;
  width: 210px;
  height: 210px;
  pointer-events: none;
}

.activity-hero__assets {
  position: absolute;
  right: 8.4%;
  bottom: 32px;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 8px 0 24px;
  border-radius: 999px;
  background: #FEF6D1;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary); /* 黄底近黑,全站铁律 */
  transition: filter .2s;
  white-space: nowrap;
}

.activity-hero__assets:hover {
  filter: brightness(0.96);
}

.activity-hero__assets-icon {
  width: 24px;
  height: 24px;
}

/* ---------- H5 ---------- */

@media (max-width: 768px) {
  .activity-hero {
    height: 121px;
  }

  .activity-hero::before {
    top: 49px;
    right: -117px;
    width: 202px;
    height: 202px;
  }

  .activity-hero__decor {
    top: -29px;
    left: -85px;
    width: 196px;
    height: 196px;
  }

  .activity-hero__decor::before {
    top: 88px;
    left: 114px;
    width: 202px;
    height: 202px;
    filter: blur(3px);
  }

  .activity-hero__decor::after {
    top: -88px;
    left: 215px;
    width: 202px;
    height: 202px;
    filter: blur(3px);
  }

  .activity-hero__stats {
    top: 13px;
    width: min(242px, 72%);
    row-gap: 12px;
    column-gap: 12px;
  }

  .activity-hero__stat {
    gap: 4px;
  }

  .activity-hero__num {
    font-size: 16px;
    line-height: 22px;
  }

  .activity-hero__label {
    font-size: 12px;
    line-height: 18px;
  }

  .activity-hero__gift {
    top: 3px;
    right: 0;
    width: 122px;
    height: 122px;
  }

  .activity-hero__assets {
    right: 11px;
    bottom: 11px;
    height: 24px;
    padding: 0 4px 0 12px;
    font-size: 12px;
    line-height: 18px;
  }

  .activity-hero__assets-icon {
    width: 18px;
    height: 18px;
  }
}