/*
 * 首页 hero 右侧：下载面板（template-parts/home-download.php，复制 SHA256 见 js/home-download.js）
 * 中间的推荐版本 + 「其他版本」是共用区块，样式见 css/download-picker.css。
 * 质感与新闻卡一致：半透明深底 + backdrop-filter + 1px 低透明边框 + 顶部高光线。
 * 右缘落在统一页面边距上（.hero__top 的 padding-inline: var(--page-px)），与卡片行、方向键、导航右缘同一条线。
 * 每屏只有一个蓝色实心按钮：面板主按钮。
 */

.hero-dl {
    position: relative;
    z-index: var(--hero-z-content);
    display: flex;
    flex: none;
    flex-direction: column;
    /* 自然高度：底部链接行紧跟内容，「其他版本」展开时面板随内容增高，不留空白 */
    align-self: flex-start;
    gap: var(--hero-dl-gap);
    width: var(--hero-dl-w);
    max-width: 100%;
    padding: var(--hero-dl-pad);
    border: var(--line-width) solid var(--news-card-line);
    border-radius: var(--news-card-radius);
    background: var(--hero-dl-panel-bg);
    -webkit-backdrop-filter: blur(var(--hero-dl-blur)) saturate(1.2);
    backdrop-filter: blur(var(--hero-dl-blur)) saturate(1.2);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

/* 顶部极淡高光线（同 .news-card::before） */
.hero-dl::before {
    content: "";
    position: absolute;
    inset: 0 var(--space-8) auto;
    height: var(--line-width);
    background: linear-gradient(90deg, transparent, var(--news-card-highlight), transparent);
    pointer-events: none;
}

/* ---------- 顶部：头像 + 产品名 + 版本标签 + 日期 / 副标题 ---------- */
.hero-dl__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.hero-dl__icon {
    flex: none;
    width: var(--hero-dl-icon);
    height: var(--hero-dl-icon);
}

.hero-dl__id {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.hero-dl__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
}

.hero-dl__ver {
    padding: 0 var(--space-2);
    border: var(--line-width) solid var(--news-card-line-hover);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--fg);
}

.hero-dl__date {
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    color: var(--fg-muted);
}

.hero-dl__sub {
    font-size: var(--fs-sm);
    color: var(--fg-secondary);
}

/* ---------- 本版亮点 ---------- */
.hero-dl__notes {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
}

.hero-dl__label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
}

.hero-dl__list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--fg);
}

.hero-dl__list li {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

/* 小圆点用品牌蓝，是面板里除主按钮外唯一的强调色 */
.hero-dl__list li::before {
    content: "";
    flex: none;
    width: var(--hero-dl-bullet);
    height: var(--hero-dl-bullet);
    border-radius: var(--radius-full);
    background: var(--brand-blue);
    transform: translateY(calc(var(--hero-dl-bullet) * -1));
}

/* ---------- 底部链接行 ---------- */
.hero-dl__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    padding-top: var(--hero-dl-gap);
    border-top: var(--line-width) solid var(--news-bar-line);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
}

.hero-dl__link {
    color: var(--hero-dl-meta);
    font-size: var(--fs-xs);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-out);
}

.hero-dl__link:hover,
.hero-dl__link:focus-visible {
    color: var(--brand-blue);
}

.hero-dl a:focus-visible,
.hero-dl button:focus-visible {
    outline: var(--line-width) solid var(--brand-blue);
    outline-offset: var(--space-1);
}

/*
 * 矮屏展开「其他版本」（默认展开）时收起「本版亮点」。面板在文档流内，不会与卡片行重叠，
 * 但会把卡片行推出首屏；阈值覆盖 1920×984 这类可用高度（估算：卡片行顶约 570px，面板底带亮点约 690px、不带约 565px）。
 * 高屏亮点保持可见、被列表推到下面。媒体查询里不能用 var()，阈值只能写在这里。
 */
@media (max-height: 64rem) {
    .hero-dl:has(.dl-picker.is-open) .hero-dl__notes {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-dl__link {
        transition: none;
    }
}

/* =========================================================
 * 手机：面板在标题下全宽
 * ========================================================= */
@media (max-width: 768px) {
    .hero-dl {
        width: 100%;
        padding: var(--space-5);
    }
}