/* 关于我们页面 - 新闻布局样式 */

/* 页面主容器 */
.page-content {
    background: #1a1a1a url('../../切图new/关于我们/关于我们/背景.webp') center center/cover no-repeat;
    min-height: 100vh;
    position: relative;
}

/* 涂鸦装饰 */
.graffiti-decoration {
    position: absolute;
    top: 15vh;
    left: -2vw; /* 稍微超出左边界 */
    width: 15vw; /* 调整大小 */
    height: auto;
    z-index: 5; /* 在背景之上，内容之下 */
    opacity: 0.8; /* 稍微透明 */
}

.graffiti-decoration img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 健康游戏忠告 */
.health-warning {
    position: fixed;
    bottom: -100vh; /* 初始状态隐藏在屏幕下方 */
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999; /* 提高z-index确保在最顶层 */
    transition: bottom 0.5s ease-in-out;
    background: transparent; /* 移除背景遮罩 */
    display: flex;
    align-items: flex-end; /* 改为底部对齐 */
    justify-content: center;
    cursor: pointer; /* 添加点击指针 */
    pointer-events: none; /* 默认不阻止底层交互 */
}

.health-warning.show {
    bottom: 0; /* 显示时移动到屏幕内 */
    pointer-events: auto; /* 显示时允许交互 */
}

.health-warning img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

/* 新闻区域主容器 - 改为相对定位容器 */
.news-section {
    position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    /* 去掉 flex 布局 */
}

/* 左侧轮播图容器 */
.left-carousel-container {
    position: absolute;
    top: 50%;
    left: 8vw;
    transform: translateY(-50%);
    width: 42vw;
    height: 50vh;
    z-index: 15;
}

/* 右侧新闻内容容器 */
.right-news-container {
    position: absolute;
    top: calc(50% - 25vh); /* 与轮播图顶部对齐 */
    left: 53vw;
    width: 34vw;
    height: 50vh;
    z-index: 20;
}

/* 新闻头部 - 相对定位 */
.news-header {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 2vh; /* 添加与新闻列表的间距 */
    z-index: 20;
}

.news-header-left {
    display: flex;
    align-items: center;
}

.news-combined {
    width: auto;
    height: 4vh; /* 调整NEWS组合图的大小 */
    object-fit: contain;
}

/* 左侧轮播图 - 相对定位 */
.news-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 15;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0.6vw;
    overflow: hidden;
    box-shadow: 0 0.4vh 1.5vh rgba(0, 0, 0, 0.4);
}

.carousel-slides-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 更平滑的缓动函数 */
}

.carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.carousel-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6vw;
}

.carousel-dots {
    position: absolute;
    bottom: -4vh; /* 调整距离 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5vw; /* 增加间隙 */
}

.dot {
    width: 0.8vw; /* 稍微大一点 */
    height: 0.8vw; /* 稍微大一点 */
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: #00d4ff;
    transform: scale(1.2);
}

/* 新闻列表容器 - 相对定位 */
.news-list-container {
    position: relative;
    width: 100%;
    height: calc(100% - 6vh); /* 减去NEWS头部的高度和间距 */
    z-index: 15;
}

/* 新闻列表 */
.news-list {
    width: 100%;
    height: calc(100% - 6vh); /* 为查看更多按钮留出足够空间 */
    display: flex;
    flex-direction: column;
    gap: 0.4vh; /* 增加间隙 */
    overflow: visible;
}

/* 新闻项 - 统一高度 */
.news-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.8vh 1.2vw; /* 增加垂直padding */
    border-radius: 0.3vw;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: rgba(40, 40, 40, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 5.5vh; /* 固定高度，确保所有新闻项一致 */
    flex: none; /* 不要使用flex:1，使用固定高度 */
}

.news-item:hover {
    background-color: rgba(55, 55, 55, 0.9);
    transform: translateX(0.2vw);
}

.news-item.active {
    background-image: url('../../切图/关于我们/关于我们/选中矩形.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(0, 212, 255, 0.8);
    box-shadow: 0 0.2vh 0.8vh rgba(0, 212, 255, 0.3);
}

.news-badge {
    flex-shrink: 0;
    margin-right: 0.6vw;
}

.news-badge-img {
    width: auto;
    height: 2vh; /* 从1.2vh增加到2vh，放大徽章图标 */
    object-fit: contain;
}

.news-content-text {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-title-text {
    color: #ffffff;
    font-size: 0.85vw;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 0.8vw;
}

.news-date {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7vw;
    font-weight: 400;
    flex-shrink: 0;
}

/* 修复箭头逻辑 - 选中时隐藏日期，显示箭头 */
.news-item.active .news-date {
    display: none;
}

.news-arrow {
    flex-shrink: 0;
    margin-left: 0.8vw;
    opacity: 0;
    transition: all 0.3s ease;
    display: none;
    cursor: pointer;
    padding: 0.3vh 0.5vw;
    border-radius: 0.2vw;
    position: relative;
}

.news-arrow:hover {
    background: rgba(0, 212, 255, 0.2);
    transform: translateX(0.2vw);
}

.news-item.active .news-arrow {
    opacity: 1;
    display: block;
}

.news-arrow img {
    width: auto;
    height: 0.6vh; /* 更小的箭头 */
    object-fit: contain;
    transition: transform 0.3s ease;
}

.news-arrow:hover img {
    transform: translateX(0.1vw);
}

/* 查看更多资讯按钮 - 绝对定位在新闻列表下方 */
.more-news-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4vh; /* 增加高度 */
    cursor: pointer;
    transition: transform 0.3s ease;
    display: block !important; /* 强制显示按钮 */
    z-index: 10;
    /* 为子元素提供定位上下文 */
}

.more-news-btn:hover {
    transform: scale(1.02);
}

.more-news-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 改为cover确保图片填满整个按钮区域 */
    display: block;
    position: absolute; /* 确保背景图片正确定位 */
    top: 0;
    left: 0;
    z-index: 1; /* 背景图片在最底层 */
}

.more-news-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0.6vw; /* 增加间隙 */
    z-index: 2; /* 确保内容显示在背景图片之上 */
}

.more-news-plus {
    width: auto;
    height: 1.2vh; /* 稍微大一点 */
    object-fit: contain;
}

.more-news-text {
    color: #ffffff;
    font-size: 0.9vw; /* 稍微大一点 */
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 右侧最新区域 - 绝对定位 */
.latest-section {
    position: absolute;
    top: calc(50% - 25vh); /* 与NEWS标题对齐 */
    right: 3vw;
    width: 3.5vw; /* 进一步缩小宽度，让图标更贴近文字 */
    height: 25vh; /* 调整高度 */
    z-index: 15;
}

/* 最新在图标左边，图标小小的放到最新的右下角（贴近） */
.latest-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* 恢复居中对齐 */
    margin-bottom: 2vh;
}

.latest-title {
    color: #00d4ff;
    font-size: 1.3vw; /* 更大的最新文字 */
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.latest-icon {
    position: absolute;
    right: -0.2vw; /* 更贴近文字 */
    bottom: -0.2vh; /* 更贴近 */
    width: auto;
    height: 1.2vh; /* 稍微大一点的图标 */
    object-fit: contain;
}

/* 新闻、公告和活动用文本，不用背景 */
.latest-nav {
    display: flex;
    flex-direction: column;
    gap: 0.8vh;
    align-items: center; /* 恢复居中对齐 */
}

.latest-nav-item {
    padding: 0.3vh 0.6vw;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8vw;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0;
    backdrop-filter: none;
}

.latest-nav-item:hover {
    color: #ffffff;
    background: none;
    transform: none;
}

.latest-nav-item.active {
    background: none;
    color: #00d4ff;
    border: none;
    box-shadow: none;
    font-weight: 500;
}

/* 右上角扫码图标 - 绝对定位 */
.qr-icon {
    position: fixed;
    top: 140px;
    right: 2.8vw;
    z-index: 100;
    width: 2.5vw;
    height: 2.5vw;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.qr-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* 响应式设计 - 保持相对位置 */
@media (max-width: 1400px) {
    .news-combined {
        height: 3.5vh;
    }
    
    .news-title-text {
        font-size: 0.9vw;
    }
    
    .latest-title {
        font-size: 1.4vw;
    }
    
    .graffiti-decoration {
        width: 12vw;
        top: 18vh;
    }

    .health-warning img {
        max-width: 85vw;
        max-height: 85vh;
    }
}

@media (max-width: 1200px) {
    .news-combined {
        height: 3vh;
    }
    
    .news-title-text {
        font-size: 1vw;
    }
    
    .latest-title {
        font-size: 1.5vw;
    }
    
    .graffiti-decoration {
        width: 10vw;
        top: 20vh;
    }
}

@media (max-width: 1024px) {
    .news-section {
        top: 100px;
    }
    
    .left-carousel-container {
        top: 15vh;
        left: 50%;
        transform: translateX(-50%);
        width: 80vw;
        height: 35vh;
    }
    
    .right-news-container {
        top: 53vh;
        left: 50%;
        transform: translateX(-50%);
        width: 80vw;
        height: 35vh;
    }
    
    .news-combined {
        height: 3vh;
    }

    .news-item {
        height: 6vh; /* 移动端稍微增加高度，提升可读性 */
    }
    
    .graffiti-decoration {
        width: 8vw;
        top: 8vh; /* 调整到顶部避免遮挡内容 */
        left: -1vw;
        opacity: 0.6; /* 在小屏幕上更透明 */
    }
    
    .latest-section {
        top: 95vh; /* 调整位置 */
        left: 50%;
        transform: translateX(-50%);
        width: 80vw;
        height: auto;
    }
    
    .latest-nav {
        flex-direction: row;
        justify-content: center;
        gap: 3vw;
    }

    .health-warning img {
        max-width: 95vw;
        max-height: 90vh;
    }
}

@media (max-width: 768px) {
    .news-section {
        top: 80px;
    }
    
    .news-combined {
        height: 2.5vh;
    }
    
    .news-title-text {
        font-size: 2vw;
    }
    
    .latest-title {
        font-size: 3vw;
    }
    
    .latest-nav-item {
        font-size: 2vw;
    }

    .news-item {
        height: 7vh; /* 小屏幕进一步增加高度 */
        padding: 1vh 2vw; /* 增加内边距 */
    }
    
    .graffiti-decoration {
        width: 8vw;
        top: 25vh;
        left: -1vw;
    }

    .health-warning {
        padding: 2vh 2vw;
    }

    .health-warning img {
        max-width: 96vw;
        max-height: 92vh;
    }
}

@media (max-width: 480px) {
    .news-combined {
        height: 2vh;
    }
    
    .news-title-text {
        font-size: 2.5vw;
    }
    
    .latest-title {
        font-size: 4vw;
    }
    
    .latest-nav-item {
        font-size: 2.5vw;
    }

    .news-item {
        height: 8vh; /* 最小屏幕最大高度，确保可读性 */
        padding: 1.2vh 2.5vw; /* 最大内边距 */
    }
    
    .graffiti-decoration {
        width: 6vw;
        top: 30vh;
        left: 0;
    }

    .health-warning {
        padding: 1vh 1vw;
    }

    .health-warning img {
        max-width: 98vw;
        max-height: 94vh;
    }
}