/* =====================================================================
   资讯列表页（news_list）专用样式
   分类切换：滑动白底指示器 + 切换淡入动效
   （由 cn/news_list.asp 底部 JS + 页面内 GSAP 驱动）
   ===================================================================== */

/* 分类导航容器作为指示器的定位参考 */
.nltab-container {
    position: relative;
}

.nl_con .topx .nltab {
    position: relative;
}

/* 可滑动的白色指示器（默认选中项下方的白底）
   left/top/width/height 由 JS 动态计算，GSAP 负责缓动与拉伸动画 */
.nltab-marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: #fff;
    border-radius: 0.22rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    z-index: 0;
    pointer-events: none;
    opacity: 0; /* 定位完成后由 JS 点亮，避免首屏闪现 */
    transform-origin: center;
    will-change: transform, left, top, width, height;
}

/* 分类按钮叠在指示器之上，保证文字层级 */
.nltab li {
    position: relative;
    z-index: 1;
}
.nltab li a {
    position: relative;
    z-index: 1;
}

/* 旧的白底选中样式改由 marker 表现，原 li.on 内的白底置为透明 */
.nl_con .topx ul li.on a {
    background-color: transparent;
}
.nl_con .topx ul li a {
    transition: color 0.5s;
}

/* 分类 / 分页切换时的卡片淡入动效（JS 在重渲染后重触发） */
.nl_con .top-featured-news.news-anim a.top,
.nl_con .list.news-anim .item {
    animation: newsItemIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nl_con .list.news-anim .item:nth-child(1) { animation-delay: 0.03s; }
.nl_con .list.news-anim .item:nth-child(2) { animation-delay: 0.08s; }
.nl_con .list.news-anim .item:nth-child(3) { animation-delay: 0.13s; }
.nl_con .list.news-anim .item:nth-child(4) { animation-delay: 0.18s; }
.nl_con .list.news-anim .item:nth-child(5) { animation-delay: 0.23s; }
.nl_con .list.news-anim .item:nth-child(6) { animation-delay: 0.28s; }

@keyframes newsItemIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* 移动端：tab 换行多行时指示器跟随激活项（尺寸/位置由 JS 实时计算） */
@media screen and (max-width: 750px) {
    .nltab-marker {
        border-radius: 0.18rem;
    }
}