/*
 * 首页 hero 底部：新闻窗口卡片行（配合 js/home-news.js）
 * - 不自动滚动：原生横向滚动容器 + 右上一对方向键按一屏翻页，触屏直接滑动。
 * - 全宽：轨道贯穿视口两端，左右内边距 = 统一页面边距 --page-px。
 * - 卡宽按列数算：一屏恰好 --news-cols 列（含行首留空），最后一张可见卡右缘 = 视口宽 − --page-px，
 *   与方向键右缘、下载面板右缘、导航右缘同一条线。宽度用 cqw（.news 作为容器），不受滚动条宽度影响。
 * - 桌面端行首 .news__lead 占 --news-lead-slots 个卡位，露出 hero 背景；翻页后卡片滑过这块空白。
 * - 右侧页边距内轻微渐隐提示还有内容；滑到底（.is-end）去掉渐隐。
 */

.news {
    --news-card-w: calc((100cqw - 2 * var(--page-px) - (var(--news-cols) - 1) * var(--news-gap)) / var(--news-cols));
    --news-lead: calc(var(--news-lead-slots) * (var(--news-card-w) + var(--news-gap)));
    container-type: inline-size;
    position: relative;
    z-index: var(--hero-z-content);
    display: grid;
    gap: var(--space-4);
    width: 100%;
    margin-top: auto;
    padding-top: var(--space-6);
}

/* ---------- 标题（左对齐第一张可见卡）+ 方向键（右缘 = 最后一张可见卡右缘），同一行 ---------- */
.news__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-inline: calc(var(--page-px) + var(--news-lead)) var(--page-px);
}

.news__title {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-wide);
    color: var(--fg);
}

.news__nav {
    display: flex;
    gap: var(--space-2);
}

.news__arrow {
    display: inline-grid;
    place-items: center;
    width: var(--news-arrow-size);
    height: var(--news-arrow-size);
    padding: 0;
    border: var(--line-width) solid var(--news-card-line);
    border-radius: var(--radius-full);
    background: var(--hero-dl-bg);
    -webkit-backdrop-filter: blur(var(--news-card-blur));
    backdrop-filter: blur(var(--news-card-blur));
    color: var(--fg);
    cursor: pointer;
    transition:
        border-color var(--dur-base) var(--ease-out),
        background-color var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out);
}

.news__arrow svg {
    width: var(--news-arrow-icon);
    height: var(--news-arrow-icon);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.news__arrow--next svg {
    transform: scaleX(-1);
}

.news__arrow:hover {
    border-color: var(--news-card-line-hover);
    background: var(--news-card-bg-hover);
}

.news__arrow:focus-visible,
.news__track:focus-visible {
    outline: var(--line-width) solid var(--brand-blue);
    outline-offset: var(--space-1);
}

.news__arrow[aria-disabled="true"] {
    opacity: var(--news-arrow-disabled);
    cursor: default;
}

.news__arrow[aria-disabled="true"]:hover {
    border-color: var(--news-card-line);
    background: var(--hero-dl-bg);
}

/* ---------- 轨道 ---------- */
.news__track {
    position: relative; /* 让卡片 offsetLeft 以轨道为基准 */
    display: flex;
    align-items: stretch;
    gap: var(--news-gap);
    margin: 0;
    padding: var(--space-2) var(--page-px);
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--page-px);
    scrollbar-width: none;
}

.news__track::-webkit-scrollbar {
    display: none;
}

/*
 * 右端轻微渐隐：用叠在轨道上的渐变层，而不是给轨道加 mask——
 * mask 会让轨道成为 backdrop root，卡片的 backdrop-filter 就模糊不到 hero 背景了。
 */
.news::after {
    content: "";
    position: absolute;
    inset: auto 0 0 auto;
    width: var(--page-px);
    /* 减去 .news 的上内边距、标题行（方向键高）和行间距，只盖住轨道 */
    height: calc(100% - var(--space-6) - var(--news-arrow-size) - var(--space-4));
    background: linear-gradient(90deg, var(--hero-veil-clear), var(--news-fade-color));
    pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease-out);
}

.news.is-end::after {
    opacity: 0;
}

/* 行首留空：两个卡位（含间距），也是一个吸附点 */
.news__lead {
    flex: none;
    width: calc(var(--news-lead) - var(--news-gap));
    scroll-snap-align: start;
}

/* ---------- 单张窗口卡：玻璃质感 ---------- */
.news-card {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    width: var(--news-card-w);
    min-height: var(--news-card-min-h);
    border: var(--line-width) solid var(--news-card-line);
    border-radius: var(--news-card-radius);
    background: var(--news-card-bg);
    -webkit-backdrop-filter: blur(var(--news-card-blur)) saturate(1.2);
    backdrop-filter: blur(var(--news-card-blur)) saturate(1.2);
    font-family: var(--font-sans);
    font-size: var(--fs-card);
    line-height: var(--lh-normal);
    color: var(--fg-secondary);
    scroll-snap-align: start;
    transition:
        transform var(--dur-slow) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        background-color var(--dur-base) var(--ease-out);
}

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

.news-card:hover,
.news-card:focus-within {
    transform: translateY(var(--news-card-lift));
    border-color: var(--news-card-line-hover);
    background: var(--news-card-bg-hover);
}

/* 窗口顶栏：小人头像 + 名称 + 标签 + 最小化 / 最大化 / 关闭 */
.news-card__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--line-width) solid var(--news-bar-line);
}

.news-card__avatar {
    flex: none;
    width: var(--news-avatar);
    height: var(--news-avatar);
}

.news-card__app {
    font-weight: var(--fw-medium);
    color: var(--fg);
    white-space: nowrap;
}

.news-card__tag {
    padding: 0 var(--space-1);
    border: var(--line-width) solid var(--news-card-line);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--fg-muted);
    white-space: nowrap;
}

.news-card__ctrl {
    flex: none;
    width: var(--news-ctrl-w);
    height: var(--news-ctrl-h);
    margin-left: auto;
    background: var(--fg-muted);
    -webkit-mask: url("../img/win-controls.svg") center / contain no-repeat;
    mask: url("../img/win-controls.svg") center / contain no-repeat;
}

.news-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
}

/* 指令气泡：靠右、略浅底 */
.news-card__ask {
    align-self: flex-end;
    max-width: 88%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--news-bubble-bg);
    color: var(--fg);
}

.news-card__ctx {
    align-self: flex-end;
    margin-top: calc(var(--space-1) * -1);
    font-size: var(--fs-2xs);
    color: var(--fg-muted);
}

.news-card__status {
    font-size: var(--fs-2xs);
    color: var(--fg-muted);
}

.news-card__result {
    color: var(--fg);
}

.news-card__group {
    margin-top: var(--space-1);
    margin-bottom: calc(var(--space-1) * -1);
    font-size: var(--fs-2xs);
    color: var(--fg-muted);
}

/* 带编号的小列表：细边框分组 */
.news-card__list {
    display: grid;
    margin: 0;
    padding: var(--space-1) 0;
    list-style: none;
    border: var(--line-width) solid var(--line);
    border-radius: var(--radius-md);
}

.news-card__list li {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-3);
}

.news-card__no {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    line-height: var(--lh-body);
    color: var(--fg-muted);
}

.news-card__foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--fg-muted);
}

.news-card__link {
    margin-left: auto;
    font-family: var(--font-sans);
    color: var(--fg-secondary);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-out);
}

/* 可点击卡整张可点：链接的伪元素铺满卡片 */
.news-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.news-card--link {
    cursor: pointer;
}

.news-card--link:hover .news-card__link {
    color: var(--brand-blue);
}

.news-card__link:focus-visible {
    outline: none;
}

.news-card--link:has(.news-card__link:focus-visible) {
    border-color: var(--brand-blue);
}

@media (prefers-reduced-motion: reduce) {
    .news__track {
        scroll-behavior: auto;
    }

    .news-card,
    .news__arrow {
        transition: none;
    }

    .news-card:hover,
    .news-card:focus-within {
        transform: none;
    }
}

/*
 * 一屏列数（含行首留空）按视口切换，卡宽大致保持在 19–25rem：
 * ≥ 1760：5 列（2 空 + 3 卡）；1380–1759：4 列（2 空 + 2 卡）；
 * 1024–1379：3 列（1 空 + 2 卡）；769–1023：2 列（不留空）。
 */
@media (min-width: 1760px) {
    .news {
        --news-cols: 5;
    }
}

@media (min-width: 1024px) and (max-width: 1379px) {
    .news {
        --news-cols: 3;
        --news-lead-slots: 1;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .news {
        --news-cols: 2;
        --news-lead-slots: 0;
    }

    .news__lead {
        display: none;
    }
}

/* =========================================================
 * 手机：不留空位，单卡吸附滑动；方向键保留（缩小）作为提示
 * ========================================================= */
@media (max-width: 768px) {
    .news__head {
        padding-inline: var(--page-px-mobile);
    }

    .news__track {
        padding-inline: var(--page-px-mobile);
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--page-px-mobile);
    }

    .news__lead {
        display: none;
    }

    .news::after {
        width: var(--page-px-mobile);
    }

    .news-card {
        width: var(--news-card-w-mobile);
        min-height: 0;
    }
}