/*
 * =========================================
 * 拓保官网 - 新闻模块样式
 * =========================================
 *
 * 本文件包含新闻资讯所有相关页面的样式，
 * 包括：列表页 (news.html), 
 * 详情页 (newsDetail...html), 
 * 侧边栏 (sideNews.html)。
 *
 * 本文件必须在 'homePage.css' 之后加载。
 *
 * 它通过 CSS 层叠覆盖 'homePage.css' 中的旧规则，
 * 以支持从“CSS背景图+固定高度”到“<img>+动态高度”的现代布局迁移，
 * 同时保证旧的历史文章页面不受影响。
 */

/* * ----------------------------------------
 * 1. 新闻列表页 (news.html) 
 * ----------------------------------------
 */

/**
 * 覆盖: .news_cont 固定高度
 *
 * homePage.css 中定义了 .news_cont { height: 200px; }。
 * 此处重置为 'auto'，以允许容器动态撑开高度。
 * 移除 border-bottom，改用悬停时的 box-shadow，以实现卡片式“浮起”效果。
 */
.news_cont {
    height: auto; 
    overflow: hidden; 
    zoom: 1; 
    border-bottom: 1px solid #e8f1f5; /* 保留底线作为分隔 */
    padding: 25px 10px; /* 增加左右内边距 */
    border-radius: 8px; /* 增加轻微圆角 */
    transition: all 0.3s ease-in-out;
}

.news_left_cont > .news_cont:first-child {
    padding-top: 10px;
}

/* 鼠标悬停时，添加“浮起”的阴影效果，并隐藏底线 */
.news_cont:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-color: transparent; 
}


/**
 * 左侧缩略图容器 (<img> 标签的容器)
 * * 尺寸 (230x130) 匹配 UI 设计规范。
 * 取代旧的 .newsDetail..._head CSS background-image 规则。
 */
.news_img {
    float: left;
    width: 230px;  
    height: 130px; 
    margin-right: 25px; 
    background-color: #f0f0f0; 
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

/* 缩略图 <img> 标签样式 */
.news_img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片不变形，填满容器 */
    transition: transform 0.3s ease;
}

.news_img a:hover img {
    transform: scale(1.05); /* 鼠标悬停放大效果 */
}

/**
 * 覆盖: 右侧文本容器
 *
 * homePage.css 中定义了 .news_text { float: left; width: 575px; }。
 * 移除 float 和 width，使用 BFC (overflow: hidden) 
 * 使其自动填充剩余的水平空间。
 */
.news_text {
    float: none; 
    width: auto; 
    padding-left: 0; 
    overflow: hidden;
    zoom: 1;
}

/* 新闻标题 (限制2行) */
.news_title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    display: block;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

/* 悬停时应用品牌色 */
.news_title:hover {
    color: #FF7F3F; 
}

/**
 * 覆盖: 新闻摘要
 *
 * homePage.css 中定义了 .news_detail { height: 84px; }。
 * 重置为 'auto'，并用 max-height 配合 -webkit-line-clamp
 * 实现动态高度和“最多3行”的文本截断。
 */
.news_detail {
    height: auto; 
    font-size: 14px;
    color: #666;
    line-height: 1.8; 
    margin-bottom: 15px;
    margin-top: 0; 
    max-height: 75.6px; /* (1.8 * 14px * 3) */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/**
 * 覆盖: 新闻日期
 *
 * homePage.css 中定义了 .news_time { text-align: right; }。
 * 此处重置为右对齐，以匹配UI布局要求。
 */
.news_time {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #999;
    text-align: right; 
    margin-top: 15px; 
}

.news_time > li {
    padding-right: 0;
}


/* --- 分页控件样式 --- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; 
}

/* 应用品牌色到分页按钮 */
.pagination button {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #FF7F3F; /* 品牌色 */
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.pagination button:hover {
    background-color: #FF7F3F; /* 品牌色 */
    color: #fff;
    border-color: #FF7F3F;
}
.pagination button:disabled {
    color: #ccc;
    cursor: not-allowed;
    background-color: #f9f9f9;
}
.pagination #page-info {
    padding: 8px;
    font-size: 14px;
    color: #555;
    white-space: nowrap; 
}


/* * ----------------------------------------
 * 2. 侧边栏 (sideNews.html)
 * ----------------------------------------
 */

/* 侧边栏容器卡片化 */
.news_right {
    width: 330px;
    background-color: #f9fafb; /* 浅色背景 */
    float: right;
    margin-top: 20px;
    padding: 5px 20px 15px 20px; /* 调整内边距 */
    border-radius: 8px; /* 添加圆角 */
    border: 1px solid #f0f0f0; /* 添加浅边框 */
}
.newsrt {
    padding: 9px 0;
    border-bottom: 1px solid #eee; /* 边框改浅 */
}

/* 覆盖: 侧边栏标题 */
.newsrt_text {
    background: none; 
    width: auto; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.8em; 
    line-height: 1.4em;
    font-size: 16px;
    color: #061f28;
    margin-top: 0; 
    padding-left: 0; 
    margin-bottom: 5px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.newsrt_text:hover {
    color: #FF7F3F; /* 应用品牌色 */
}

.newsrt_item {
    padding: 15px 0 10px 0; 
}
.newsrt_item + .newsrt_item {
    border-top: 1px solid #eee; /* 边框改浅 */
}

/**
 * 覆盖: 侧边栏日期
 *
 * homePage.css 中定义了 .newsrtPD { padding: ...; }。
 * 此处重置 padding 并右对齐，与左侧列表保持一致。
 */
.newsrtPD {
    padding: 5px 0 0 0; 
    text-align: right; 
}


/* * ----------------------------------------
 * 3. 新闻详情页 (_template_...)
 * ----------------------------------------
 */

/**
 * 新增: 详情页正文图片 (<img>)
 */
.newsDetail_content_image {
    display: block; 
    max-width: 700px; 
    width: 100%; 
    height: auto; 
    margin: 25px auto; /* 上下留白，并水平居中 */
    border-radius: 5px; 
}