/* ================================== 全局基础样式 ================================== */
/* 1. 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    color: #333;
    background-color: #f7f9fc;
    line-height: 1.6;
}

/* 2. 全局移除链接下划线 + 颜色继承 */
a {
    text-decoration: none !important;
    color: inherit;
    transition: all 0.3s ease;
}

/* 3. 容器样式（控制整体宽度，居中显示） */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================== 新闻正文样式 ================================== */
/* 1. 新闻标题 */
.news-title {
    font-size: 26px;
    color: #2c3e50;
    text-align: center;
    margin: 30px 0 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0; /* 淡色分隔线，非下划线 */
}

/* 2. 新闻内容容器 */
.news-content {
    background: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

/* 3. 纯文本内容块（content1） */
.content-block {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 18px;
}

/* 4. HTML内容块（content2-content7，关键修复：让表格/卡片正常显示） */
.content-html-block {
    margin: 15px 0;
}

/* 适配原页面中的表格样式 */
.content-html-block table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 10px 0 !important;
}

.content-html-block table td,
.content-html-block table th {
    padding: 12px !important;
    border-bottom: 1px solid #eee !important;
}

.content-html-block table thead {
    background-color: #2a5c9e !important;
    color: #fff !important;
}

.content-html-block table tbody tr:nth-child(even) {
    background-color: #f4f6f9 !important;
}

/* 适配原页面中的卡片/容器样式 */
.content-html-block [style*="background"],
.content-html-block [style*="border-radius"] {
    margin: 15px 0 !important;
    padding: 20px !important;
    max-width: 100% !important;
}

/* 适配原页面中的网格布局 */
.content-html-block [style*="grid-template-columns"] {
    gap: 15px !important;
}

/* 适配原页面中的图标文本 */
.content-html-block [style*="font-size: 24px"] {
    margin-bottom: 8px !important;
}

/* ================================== 相关资讯区域样式 ================================== */
/* 1. 相关资讯整体容器 */
.related-news {
    margin-bottom: 40px;
}

/* 2. 资讯分组卡片（最新/热门独立卡片） */
.news-group {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 20px;
    margin-bottom: 20px;
}

/* 3. 分组标题（无下划线，底部小色块装饰） */
.group-title {
    font-size: 18px;
    color: #2c3e50;
    margin: 0 0 15px;
    padding-bottom: 8px;
    position: relative;
}

.group-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: #3498db; /* 小色块替代下划线 */
}

/* 4. 分组内容：左侧图文+右侧文字 布局 */
.group-content {
    display: grid;
    grid-template-columns: 35% 63%; /* 左侧35%（4张图），右侧63%（文字） */
    gap: 2%; /* 中间间距，避免拥挤 */
    align-items: start; /* 顶部对齐，保持布局整洁 */
}

/* ================================== 左侧缩略图区域样式 ================================== */
/* 1. 缩略图网格（2排2列） */
.left-thumb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 一排2张 */
    gap: 15px; /* 卡片间距，提升呼吸感 */
}

/* 2. 缩略图卡片 */
.thumb-card {
    display: block;
    transition: transform 0.3s ease;
}

.thumb-card:hover {
    transform: translateY(-3px); /*  hover轻微上浮，增强交互 */
}

/* 3. 缩略图容器（控制尺寸+圆角） */
.thumb-container {
    position: relative;
    width: 100%;
    height: 140px; /* 固定高度，确保4张卡片一致 */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 4. 缩略图（放大尺寸，保持比例） */
.small-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 避免图片拉伸变形 */
    transition: transform 0.4s ease;
}

.thumb-card:hover .small-thumb {
    transform: scale(1.05); /*  hover放大，增强视觉效果 */
}

/* 5. 图内标题（底部半透明渐变，清晰不遮挡） */
.thumb-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7)); /* 渐变背景更自然 */
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 最多3行，避免标题溢出 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================== 右侧文字列表样式 ================================== */
/* 1. 文字列表容器（2列布局） */
.right-text-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 分2列，与左侧高度匹配 */
    gap: 15px 20px; /* 行列间距，避免拥挤 */
}

/* 2. 文字列表项 */
.text-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    transition: background 0.3s ease, color 0.3s ease;
}

.text-item:hover {
    background: #f7f9fc; /*  hover淡色背景，替代下划线 */
    color: #3498db;
    border-radius: 6px;
    padding: 8px 12px; /*  hover内边距，增强点击感 */
}

/* 3. 文字项序号（小圆形，增强识别） */
.item-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #f0f2f5;
    color: #666;
    font-size: 11px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0; /* 防止序号被压缩 */
}

/* 4. 文字项标题 */
.item-title {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多2行，保持布局整洁 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================== 页脚样式（若需要） ================================== */
.page-footer {
    margin-top: 40px;
    padding: 20px 0;
    background: #2c3e50;
    color: #bdc3c7;
    font-size: 14px;
    text-align: center;
}

/* ================================== 响应式适配（移动端） ================================== */
@media (max-width: 768px) {
    /* 1. 整体布局调整 */
    .group-content {
        grid-template-columns: 1fr; /* 左右合并为单列 */
    }

    /* 2. 左侧缩略图调整 */
    .left-thumb-grid {
        width: 100%;
        margin-bottom: 20px; /* 与文字列表间距 */
    }

    .thumb-container {
        height: 120px; /* 移动端适当缩小高度 */
    }

    /* 3. 右侧文字列表调整 */
    .right-text-list {
        grid-template-columns: 1fr; /* 文字单列布局 */
    }

    /* 4. 标题尺寸调整 */
    .news-title {
        font-size: 22px;
    }

    .group-title {
        font-size: 16px;
    }

    /* 5. 正文内边距调整 */
    .news-content {
        padding: 20px 15px;
    }
}