/**
 * 页面背景（通用）
 *
 * 用法：
 * <main class="aifo-page-bg aifo-page-bg--top-glow">...</main>
 *
 * aifo-page-bg 只负责导航间距与定位；背景光晕三选一（勿混用）：
 *   aifo-page-bg--top-glow      顶部全宽光晕（默认 academy 图）
 *   aifo-page-bg--top-left-glow 左上角光晕
 *   aifo-page-bg--grid          网格底纹（无光晕图）
 *
 * 按页覆盖 — 顶部全宽：
 * #my-page { --aifo-page-bg-height: 920px; }
 * #my-page { --aifo-page-bg-image: url(../images/...); }
 *
 * 按页覆盖 — 左上角：
 * #my-page { --aifo-page-bg-top-left-top: 97px; }
 * #my-page { --aifo-page-bg-top-left-image: url(../images/...); }
 *
 * 按页增加导航下方内容间距（不含 header 高度）：
 * #my-page { --aifo-page-content-offset: 1.5rem; }
 */
:root {
  /* 与 #academy-main margin-top、固定导航高度保持一致 */
  --aifo-nav-height: 5.9375rem;

  /* 左上角光晕（默认 top:0，配合 .aifo-page-bg 的 margin-top 对齐导航下方） */
  --aifo-page-bg-top-left-top: 0;
  --aifo-page-bg-top-left-left: -2vw;
  --aifo-page-bg-top-left-size: min(60vw, 555px);
  --aifo-page-bg-top-left-max-height: min(52vh, 485px);
  --aifo-page-bg-top-left-image: url("../images/backgrounds/new-user-promo-corner-glow.png");
}

@media (max-width: 768px) {
  :root {
    /* 与 index.css #nav height、.main margin-top 保持一致 */
    --aifo-nav-height: 72px;
  }
}

.aifo-page-bg {
  position: relative;
  width: 100%;
  height: auto;
  background-color: transparent;
  margin-top: var(--aifo-nav-height);
  padding-top: var(--aifo-page-content-offset, 0);
}

/* 顶部全宽光晕 */
.aifo-page-bg--top-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: var(--aifo-page-bg-height, 805px);
  pointer-events: none;
  z-index: 1;
  background-image: var(
    --aifo-page-bg-image,
    url("../images/backgrounds/academy/academy_bg_1.webp")
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 左上角光晕 — 源自 special-offer-50；contain 完整显示 PNG，避免 cover 裁切硬边 */
.aifo-page-bg--top-left-glow::before {
  content: "";
  position: absolute;
  top: var(--aifo-page-bg-top-left-top);
  left: var(--aifo-page-bg-top-left-left);
  width: var(--aifo-page-bg-top-left-size);
  height: var(--aifo-page-bg-top-left-size);
  max-height: var(--aifo-page-bg-top-left-max-height);
  pointer-events: none;
  z-index: 3;
  background: var(--aifo-page-bg-top-left-image) no-repeat left top;
  background-size: contain;
}

/* 网格底纹（无光晕图） */
.aifo-page-bg--grid {
  background-image: image-set(
    url("../images/backgrounds/academy/bg_grid.webp") type("image/webp"),
    url("../images/backgrounds/academy/bg_grid.png") type("image/png")
  );
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}