/**
 * 页面顶部光晕背景（通用）
 * 源自 academy .academy-block-1::before，各页通过 CSS 变量调整高度与图片。
 *
 * 用法：
 * <main class="aifo-page-bg">
 *   <div class="页面内容容器">...</div>
 * </main>
 *
 * 注意：aifo-page-bg 应为全宽外层，勿与 max-width 内容容器写在同一元素上。
 *
 * 按页覆盖光晕高度：
 * #my-page { --aifo-page-bg-height: 920px; }
 *
 * 按页覆盖背景图：
 * #my-page { --aifo-page-bg-image: url(../images/...); }
 *
 * 按页增加导航下方内容间距（不含 header 高度）：
 * #my-page { --aifo-page-content-offset: 1.5rem; }
 *
 * 叠加网格底纹（可选）：
 * <main class="aifo-page-bg aifo-page-bg--grid">...</main>
 */
 :root {
  /* 与 #academy-main margin-top、固定导航高度保持一致 */
  --aifo-nav-height: 5.9375rem;
}

@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::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;
}

.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;
}