/*
 * 首页 hero（只在首页加载）：保留 WebGL 双摆背景、毛玻璃网格、打字机标题的原样视觉，
 * 在 hero 内叠加右侧下载面板（css/home-download.css）和底部新闻卡片行（css/home-news.css）。
 * 布局全宽：左右只留统一页面边距 --page-px（与导航同值），不用居中容器：
 * 标题左缘 = 卡片行左缘 = --page-px；面板右缘 = 卡片行 / 方向键 / 导航右缘 = 视口宽 − --page-px。
 * hero 之后直接是页脚，整页原生滚动（hero 不再带 .panel，不触发整屏翻页）。
 */

/* style.css 的遗留 body 规则锁死了 100vh + overflow:hidden，首页交回原生滚动 */
body.home {
    height: auto;
    overflow: visible;
}

body.home .hero--home {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: max(100vh, var(--hero-min-h));
    min-height: max(100svh, var(--hero-min-h));
    padding: calc(var(--nav-h) + var(--hero-title-gap)) 0 var(--space-8);
    overflow: hidden;
}

/* 底边渐变把卡片行收进页脚底色；在网格（z 2）之下、内容之上 */
body.home .hero--home::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: var(--space-24);
    z-index: var(--z-base);
    background: linear-gradient(0deg, var(--bg) 0%, var(--hero-veil-bottom) 30%, var(--hero-veil-clear) 100%);
    pointer-events: none;
}

/*
 * 标题在左、下载面板在右，顶端对齐；卡片行与面板之间至少留 .news 的上内边距。
 * .hero__top 不建层叠上下文：标题仍在毛玻璃网格（z 2）之下，保持原有视觉；
 * 只有下载面板和卡片行抬到网格之上。
 */
.hero__top {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8) var(--space-10);
    padding-inline: var(--page-px);
}

/* 旧规则给 .hero-left 写了 z-index，成为 flex 子项后会生效并把标题抬到网格之上，这里还原 */
body.home .hero--home .hero-left {
    z-index: auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* 右侧下载面板的样式见 css/home-download.css */

/* =========================================================
 * 手机：标题、下载面板上下排列，面板占满一行
 * ========================================================= */
@media (max-width: 768px) {
    body.home .hero--home {
        min-height: 100vh;
        min-height: 100svh;
        padding-top: calc(var(--nav-h-mobile) + var(--space-10));
        padding-bottom: var(--space-10);
    }

    .hero__top {
        flex-direction: column;
        gap: var(--space-8);
        padding-inline: var(--page-px-mobile);
    }

    body.home .hero--home h1 {
        font-size: var(--fs-hero-mobile);
    }
}