/* 全局外层盒子 */
.news-box {
    background-color: #f5f5f5;
    padding: 10px 0 140px;
}

/* 顶部标签栏 */
.tab-bar {
    display: flex;
    gap: 5px;
    padding: 30px 0;
}

.tab-item {
    padding: 15px 45px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    color: #315fba;
    transition: 0.25s;
}

    .tab-item.active {
        background-color: #315fba;
        color: #fff;
    }

/* 新闻列表：单列一行一个卡片 */
.news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

/* 卡片美化 圆角+柔和hover动效 */
.news-card {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #eeeeee;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .news-card:hover {
        box-shadow: 0 8px 26px rgba(49, 95, 186, 0.14);
        transform: translateY(-4px);
        border-color: #315fba;
    }

.news-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 卡片内边距 */
.news-content {
    padding: 32px 36px;
}

/* 整行点击容器：左右布局 */
.news-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    width: 100%;
    transition: all 0.2s;
}

/* 左侧：标题+下方日期 */
.news-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 标题 */
.news-title {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    color: #222;
    line-height: 1.6;
    transition: color 0.2s;
}

/* 日期（标题下方） */
.news-date {
    font-size: 16px;
    color: #999999;
    line-height: 1;
}

/* 右侧箭头 */
.news-more {
    font-size: 22px;
    color: #315fba;
    font-weight: bold;
    white-space: nowrap;
    transition: transform 0.25s;
}

/* 悬浮联动效果 */
.news-head-row:hover .news-title {
    color: #315fba;
}

.news-head-row:hover .news-more {
    transform: translateX(8px);
}

/* ========== 多屏幕响应式适配 ========== */
/* 大屏1540px */
@media only screen and (max-width: 1540px) {
    .news-box {
        padding: 10px 0 120px;
    }

    .tab-bar {
        padding: 20px 0;
    }

    .tab-item {
        padding: 12px 40px;
        font-size: 16px;
    }

    .news-grid {
        gap: 26px;
    }

    .news-content {
        padding: 28px 32px;
    }

    .news-title {
        font-size: 22px;
    }

    .news-more {
        font-size: 20px;
    }
}

/* 中屏1340px */
@media only screen and (max-width: 1340px) {
    .news-box {
        padding: 8px 0 100px;
    }

    .tab-bar {
        padding: 20px 0;
    }

    .tab-item {
        padding: 10px 35px;
        font-size: 14px;
    }

    .news-grid {
        gap: 22px;
    }

    .news-content {
        padding: 24px 28px;
    }

    .news-date {
        font-size: 14px;
    }

    .news-title {
        font-size: 20px;
    }

    .news-more {
        font-size: 18px;
    }
}

/* 手机端768px */
@media only screen and (max-width: 768px) {
    .news-box {
        padding: 8px 0.1rem 1rem;
    }

    .news-content {
        padding: 20px 22px;
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .news-title {
        font-size: 18px;
    }

    .news-date {
        font-size: 13px;
    }

    .news-more {
        font-size: 16px;
    }
}