/* 容器布局样式 */
.news-container {
    display: flex;
    flex-direction: row !important; /* 桌面端横向排列 */
    padding: 15px;
    box-sizing: border-box;
    gap: 15px;
    width: 100%;
    max-width: 1200px; /* 添加最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
}

/* 内容区域样式 */
.content {
    width: 100% !important;
    height: 90vh !important;
    margin: 0 auto !important;
    overflow-y: auto;
    padding: 0 20px; /* 添加左右内边距创建空白 */
}

/* 1. 删除冗余的嵌套规则 */
/* .news-container .news-container { ... } */

/* 2. 修改基础容器样式 - 移除强制横向排列 */
.news-container {
    display: flex;
    /* flex-direction: row !important; */ /* 删除此行强制横向的代码 */
    flex-direction: row;
    padding: 15px;
    box-sizing: border-box;
    gap: 15px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 3. 增强移动端媒体查询的优先级 - 移至文件末尾 */
@media (max-width: 768px) {
    /* 使用ID选择器提高优先级 */
    #news-container.news-container {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 15px 10px !important;
    }
    
    #news-container.news-container .news-day {
        width: 100% !important;
        min-height: 200px !important;
        margin: 0 5px !important;
    }
}

.news-day {
    width: 33% !important; /* 设置固定宽度为30% */
    flex-shrink: 0; /* 防止收缩 */
    background-color: #f0f8ff;
    min-height: 300px;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box; /* 确保内边距不影响宽度计算 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.news-day[data-loading="true"] {
    background: url(loading.gif) center no-repeat;
    min-height: 200px;
}
.news-error a {
    color: #2196F3;
    text-decoration: underline;
    cursor: pointer;
}
.news-trigger {
    display: none !important; /* 完全隐藏按钮 */
    visibility: hidden !important; /* 确保不可见 */
    opacity: 0 !important; /* 设置透明度为0 */
    position: absolute; /* 移除文档流中的位置 */
    width: 0; /* 零宽度 */
    height: 0; /* 零高度 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
    border: none; /* 移除边框 */
}

.news-error {
    color: #ff4444 !important; /* 红色错误文本 */
    padding: 20px;
    text-align: center;
    background-color: #fff0f0;
    border-radius: 4px;
}

/* 确保加载状态可见 */
.loading {
    color: #666;
    padding: 20px;
    text-align: center;
    font-style: italic;
}

/* 强制覆盖所有可能的冲突样式 */
/* 桌面版三列布局 - 精确计算宽度避免溢出 */
#news-container.news-container {
    display: flex !important;
    flex-direction: row !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.news-day {
    /* 使用calc精确计算宽度，减去间隙空间 */
    width: calc(33.333% - 10px) !important; /* 3个卡片 × 10px = 30px，正好抵消2个15px间隙 */
    flex-shrink: 0 !important;
    background-color: #f0f8ff;
    min-height: 300px;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box !important; /* 确保padding不增加总宽度 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 确保body无横向滚动 */
body {
    overflow-x: hidden !important;
}
/* 增强移动端媒体查询特异性 */
/* 调整移动端容器和卡片样式 */
/* 移动端彻底清除左侧间距 */
@media only screen and (max-width: 768px) {
    /* 清除内容区域所有内边距和外边距 */
    .content {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* 确保容器完全贴边 */
    #news-container.news-container {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* 卡片占满宽度且无外边距 */
    #news-container.news-container > .news-day {
        width: 100% !important;
        min-height: 200px !important;
        margin: 0 0 15px 0 !important; /* 仅保留底部间距 */
        padding: 15px !important;
        box-sizing: border-box !important; /* 确保padding不增加宽度 */
    }
    
    /* 检查并清除body和容器的默认边距 */
    body, .container {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 将冲突的样式移至媒体查询内部 */
    #news-container.news-container > .news-day {
        width: calc(100% - 20px) !important;
        min-height: 200px !important;
        margin: 0 10px !important;
        flex-shrink: 0 !important;
    }
}

/* 切换按钮样式 */
.news-view-toggle .toggle-btn {
    padding: 8px 16px;
    margin: 0 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #f0f8ff;
    transition: all 0.3s;
}

.news-view-toggle .toggle-btn.active {
    background-color: #2196F3 !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    font-weight: bold !important;
}

.news-view-toggle .toggle-btn:hover:not(.active) {
    background-color: #e0efff;
}