/**
 * 星链横幅·精选提示词 样式
 *
 * 100% 复刻 nova.aixzd.com 头部区（.nova-head-row）实测值：
 * - 左右分栏：镜像站点卡片网格（5 等分轨道），横幅跨 3 列、精选跨 2 列，间距 18px 与卡片网格一致，
 *   下方卡片为 5 列时横幅分界线与列线像素级对齐
 * - 左横幅：与精选并排时高度跟随精选内容（行高由精选决定，图片 cover 居中裁切，无底部富余）；
 *   窄屏堆叠/无精选时锁定宽高比（默认 3:1）。圆角 10px，底色 #191A1F（图片幻灯片 + 可选文字层）
 * - 右侧底色 #111419，内边距 25px 30px，正方形卡片，间距 20px
 * - 等级徽标：h22 圆角6px（basic #291A16/#DC7B71，advanced rgba(37,32,65,.8)/#D1CCFF，master rgba(53,46,17,.6)/#FEDF86）
 *
 * 响应式实现（双保险，真实设备/窗口缩放即时生效）：
 * - 容器查询：随组件自身实际占位宽度响应（主）
 * - 媒体查询：随 viewport 响应（兜底老浏览器）
 */

.nova-star-banner {
    /* 建立容器查询上下文：内部断点跟随组件真实宽度 */
    container-type: inline-size;
    margin-bottom: 14px;
}

.nova-star-banner.nsb-hide-mobile {
    display: none;
}

/* ======== 行布局：横幅跨 3 列 : 精选跨 2 列（镜像站点卡片网格，保证分界线与列线对齐） ======== */
.nsb-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px; /* 与站点卡片网格 .xa-list--card 的 20px 间距一致 */
    align-items: stretch;
}

/* 无精选卡片时横幅占满整行：恢复 auto 高度并锁定宽高比（block 布局下无精选高度可跟随） */
.nova-star-banner.nsb-no-digest .nsb-row {
    display: block;
}

.nsb-no-digest .nsb-banner {
    height: auto;
    min-height: 0;
}

/* ======== 左侧横幅（图片广告幻灯片） ======== */
.nsb-banner {
    position: relative;
    grid-column: span 3; /* 占前 3 列（含列间 2 个 gap），与下方 5 列网格第 1-3 列对齐 */
    min-width: 0;
    width: 100%; /* 宽度锁定网格轨道（防止 aspect-ratio 按高度反向收缩宽度、脱离列对齐） */
    max-width: 100%;
    height: 0; /* 行高完全由右侧精选内容决定：横幅不参与行高计算，避免 3 卡时面板底部出现空处 */
    min-height: 100%; /* 行高确定后填满整行，图片 object-fit: cover 居中裁切 */
    aspect-ratio: var(--nsb-banner-ratio, 3 / 1); /* 仅窄屏堆叠/无精选时作为宽高基准（那两种场景恢复 auto 高度） */
    border-radius: 10px;
    overflow: hidden;
    background-color: #191A1F;
    box-sizing: border-box;
}

.nsb-slides {
    position: absolute;
    inset: 0;
}

.nsb-slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.nsb-slide.is-active {
    opacity: 1;
}

.nsb-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 轮播指示点 */
.nsb-dots {
    position: absolute;
    right: 16px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nsb-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.3s ease;
}

.nsb-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.nsb-dot.is-active {
    width: 18px;
    background: #F7C571;
}

/* ======== 横幅文字层（复刻原站 .nova-header-intro 实测值：无数据统计行） ======== */
.nsb-intro {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 40px 40px; /* 原站实测 */
    pointer-events: none; /* 不遮挡幻灯片点击与指示点 */
}

.nsb-intro-icon {
    display: block;
    width: 16px;
    height: 16px;
    margin: 6px 0 8px;
    color: #F7CC95;
}

.nsb-intro-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.nsb-intro-title {
    display: flex;
    align-items: center;
    gap: 15px; /* 原站实测 */
    margin: 0 0 30px;
}

.nsb-intro-title-text {
    font-size: 50px;
    line-height: 1.1;
    font-weight: 700;
    background: linear-gradient(90deg, #F7C570 0%, #F7D591 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.nsb-intro-badge {
    display: inline-flex;
    align-items: center;
    height: 38px; /* 原站实测 */
    padding: 8px 12px;
    border-radius: 10px;
    background: #26201F;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    font-style: normal;
    color: #F7C571;
    text-transform: uppercase;
}

.nsb-intro-desc {
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    color: #A6A39E; /* 原站实测 */
}

/* ======== 右侧精选（本周精选提示词） ======== */
.nsb-digest {
    grid-column: span 2; /* 占后 2 列（含列间 1 个 gap），与下方 5 列网格第 4-5 列对齐 */
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* 内容顶对齐（与 nova 一致）：横幅撑高的富余留在面板底部，而不是挤在标题与卡片之间 */
    box-sizing: border-box;
    padding: 25px 30px;
    border-radius: 10px;
    background: var(--bg-card,#fff);
}

.nsb-digest-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 22px;
}

.nsb-digest-icon {
    display: block;
    width: 20px;
    height: 20px;
    color: #F7CC95;
}

.nsb-digest-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.nsb-digest-title-text {
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    background: linear-gradient(to right, #F7C56D 0%, #FFEEC0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.nsb-digest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* 卡片：正方形（原站 .thumb padding-top:100%） */
.nsb-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #0B0E13;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.nsb-card:hover {
    transform: translateY(-2px);
}

.nsb-card-cover {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
}

.nsb-card-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
}

.nsb-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.nsb-card:hover .nsb-card-img {
    transform: scale(1.06);
}

/* 底部渐变信息层（原站 .item-content） */
.nsb-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    padding: 26px 10px 7px;
    background: linear-gradient(180.56deg, rgba(6, 9, 20, 0) 0.52%, rgba(6, 9, 20, 0.82) 96%);
    pointer-events: none;
}

.nsb-card-model {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: #F7CC95;
}

.nsb-card-title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    color: #FFFFFF;
}

/* 等级徽标（原站 .item-level） */
.nsb-level {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-block;
    height: 22px;
    line-height: 22px;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.nsb-level--basic {
    background: rgb(41, 26, 22);
    color: rgb(220, 123, 113);
}

.nsb-level--advanced {
    background: rgba(37, 32, 65, 0.8);
    color: rgb(209, 204, 255);
}

.nsb-level--master {
    background: rgba(53, 46, 17, 0.6);
    color: rgb(254, 223, 134);
}

/* ======== 容器查询（主）：随组件真实占位宽度改变显示的卡片数量（最多3个） ======== */

/* 容器 ≤1149px：显示 2 个，第 3 个及以后隐藏 */
@container (max-width: 1149px) {
    .nsb-digest-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nsb-digest-grid .nsb-card:nth-child(n + 3) {
        display: none;
    }
}

/* 容器 ≤729px：上下堆叠，横幅保持宽高比不变，精选显示 2 个 */
@container (max-width: 729px) {
    .nsb-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .nsb-banner {
        grid-column: 1 / -1;
        width: 100%;
        height: auto; /* 堆叠时横幅独占一行，恢复宽高比锁定 */
        min-height: 0;
    }

    .nsb-digest {
        grid-column: 1 / -1;
        padding: 16px 16px 18px;
    }

    .nsb-digest-title {
        margin: 0 0 14px;
    }

    .nsb-digest-icon {
        width: 16px;
        height: 16px;
    }

    .nsb-digest-title-text {
        font-size: 16px;
        line-height: 16px;
    }

    .nsb-digest-grid {
        gap: 12px;
    }

    .nsb-intro {
        padding: 14px 20px 18px;
    }

    .nsb-intro-title-text {
        font-size: 28px;
    }

    .nsb-intro-badge {
        height: 28px;
        padding: 4px 8px;
        font-size: 12px;
    }

    .nsb-intro-title {
        margin: 0 0 10px;
    }

    .nsb-intro-desc {
        font-size: 12px;
    }


}

/* 容器 ≤440px：保持 2 个卡片 */
@container (max-width: 440px) {
    .nsb-digest-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ======== 媒体查询（兜底）：与容器查询等价断点 ======== */

/* 中屏 viewport：显示 2 个，第 3 个及以后隐藏 */
@media (max-width: 1199px) {
    .nsb-digest-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nsb-digest-grid .nsb-card:nth-child(n + 3) {
        display: none;
    }
}

/* 移动端 viewport：上下堆叠，横幅保持宽高比不变，精选显示 2 个 */
@media (max-width: 768px) {
    .nova-star-banner.nsb-hide-mobile {
        display: none;
    }

    .nsb-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .nsb-banner {
        grid-column: 1 / -1;
        width: 100%;
        height: auto; /* 堆叠时横幅独占一行，恢复宽高比锁定 */
        min-height: 0;
    }

    .nsb-digest {
        grid-column: 1 / -1;
        padding: 16px 16px 18px;
    }

    .nsb-digest-title {
        margin: 0 0 14px;
    }

    .nsb-digest-icon {
        width: 16px;
        height: 16px;
    }

    .nsb-digest-title-text {
        font-size: 16px;
        line-height: 16px;
    }

    .nsb-digest-grid {
        gap: 12px;
    }

    .nsb-intro {
        padding: 14px 20px 18px;
    }

    .nsb-intro-title-text {
        font-size: 28px;
    }

    .nsb-intro-badge {
        height: 28px;
        padding: 4px 8px;
        font-size: 12px;
    }

    .nsb-intro-title {
        margin: 0 0 10px;
    }

    .nsb-intro-desc {
        font-size: 12px;
    }


}

/* 小屏：保持 2 个卡片（如需只显示 1 个可自行调整） */
@media (max-width: 480px) {
    .nsb-digest-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
