/* ============================
   News 页面布局 (横向列表卡片版)
   ============================ */

/* 1. 网页背景：浅灰色 */
.page-news {
    margin-top: var(--nav-height);
    min-height: 100vh;
    background-color: #f3f3f3; /* 🔴 浅灰色背景 */
    padding-bottom: 60px;      /* 底部留出空间 */
}

/* 2. 容器：居中 */
.news-container {
    max-width: 1100px; 
    margin: 0 auto;
    padding: 60px 20px;
}

/* 列表容器 */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 40px; /* 卡片之间的垂直间距 */
    animation: fadeIn 0.5s ease-out;
}

/* 3. 单条新闻卡片 (核心修改) */
.news-item {
    background-color: #ffffff; /* 🔴 白底 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); /* 极淡的阴影，增加层次感 */
    
    /* 去掉之前的边框和内边距 */
    border-bottom: none;
    padding: 0;
    margin: 0;
    
    overflow: hidden; /* 保证图片放大时不溢出方框 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 悬停浮起 - 取消浮动和阴影变化，保持静止 */
.news-item:hover {
    transform: none; 
    /* 保持原有的淡阴影，不加深 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); 
}

/* 4. 链接布局：支持 <a>(跳转) 和 .static-content(不跳转) */
.news-item a,
.news-item .static-content {
    display: flex;         
    align-items: stretch;  
    text-decoration: none;
    color: inherit;
    width: 100%;
}

/* 5. 图片区域：左侧贴边 */
.news-img {
    width: 320px;  /* 🔴 固定左侧图片宽度 */
    min-height: 240px; /* 给一个最小高度 */
    flex-shrink: 0; /* 防止被挤压 */
    background: #ffffff;
    overflow: hidden;   
}

.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* 消除缝隙 */
    transition: transform 0.6s ease;
}

/* 只有鼠标停在图片区域(.news-img)上时，图片才放大 */
.news-img:hover img {
    transform: scale(1.05);
}

/* 6. 文字区域：右侧白底 */
.news-text {
    flex-grow: 1; /* 占满剩余空间 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    
    /* 🔴 核心：给文字加内边距，形成白底上的留白 */
    padding: 0px 20px; 
    margin-left: 10px;
}

/* 日期 */
.news-date {
    font-size: 13px;
    margin-top: 15px;
    margin-bottom: 10px;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 300;
    color: #999; 
}

/* 标题 */
.news-text h3 {
    font-size: 24px;
    margin-bottom: 15px;
    line-height: 1.4;
    font-family: 'Noto Sans SC', 'Raleway', sans-serif;
    font-weight: 400; 
    color: #000;
    transition: color 0.3s ease;
}

/* 只有当它是链接(a标签内部)时，鼠标悬停文字区域标题才变蓝 */
.news-text:hover h3 {
    color: #0056b3; 
}

/* 正文 */
.news-text p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 10px;
    font-family: 'Noto Sans SC', 'Raleway', sans-serif;
    font-weight: 300;
    color: #444; /* 稍微深一点的灰，提升可读性 */
    
    /* 限制行数 
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    */
}

/* ============================
   修改：链接图标样式
   ============================ */

.read-more {
    /* 1. 位置控制：推到右下角 */
    margin-top: auto;      /* 顶开上面的文字，沉到底部 */
     margin-bottom: 15px;
    align-self: flex-end;  /* 靠右对齐 (前提是父容器是 flex column) */
    
    /* 2. 图标容器设置 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;          /* 增加一点点击范围 */
    
    /* 3. 颜色控制 */
    color: #ccc;           /* 默认浅灰色 (类似截图) */
    transition: all 0.3s ease;
}

/* 图标大小控制 */
.read-more svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* --- 交互效果 --- */
/* 情况 A: 鼠标只移到图标上时，图标变蓝 */
a .read-more:hover {
    color: #0056b3; /* 蓝色 */
    transform: scale(1.1); /* 微微放大 */
}
/* 情况 B: 鼠标悬停整个白色大卡片时，图标也自动变蓝 (可选，增强交互感) */
/* 只有当它是链接(a标签内部)时，鼠标悬停文字区域图标才变蓝 */
a .news-text:hover .read-more {
    color: #0056b3; 
}

/* 动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================
   移动端适配 
   ============================ */
@media screen and (max-width: 768px) {
    
    /* 1. 页面外围容器 */
    .news-container {
        /* 控制整个列表距离屏幕边缘的距离 */
        padding: 0px 0px; 
    }

    /* 2. 单个新闻卡片 (核心容器) */
    .news-item {
        /* =========== 🔴 控制新闻之间的间距 =========== */
        margin-bottom: 20px; 

        /* =========== 🔴 控制卡片内部总留白 (决定对齐) =========== */
        /* 顺序：上 右 下 左 */
        /* 如果希望图片和文字左右完全对齐，这里的左右数值决定了它们离边缘有多远 */
        padding: 20px 20px 20px 20px; 
        
        box-sizing: border-box; /* 确保 padding 不会撑破宽度 */
    }
    
    /* 链接容器：垂直排列 */
    .news-item a,
    .news-item .static-content {
        flex-direction: column; 
        gap: 0px; 
    }

    /* 3. 图片区域 */
    .news-img {
        width: 100%;    
        height: 200px;  /* 图片高度 */
        border-radius: 2px; 

        /* ===========  图片的独立留白 (上-右-下-左) =========== */
        /* 通常左右设为0，它就会跟随卡片的 padding 对齐 */
        /* margin-bottom 控制图片距离下方文字的距离 */
        margin-top:    0px;
        margin-right:  0px;
        margin-bottom: 20px; 
        margin-left:   0px;
    }
    
    /* 4. 文字区域 */
    .news-text {
        width: auto;
        padding: 0; /* 清除默认内边距 */

        /* =========== 🔴 文字框的独立留白 (上-右-下-左) =========== */
        /* 如果想让文字比图片更往里缩，可以增加左右 margin */
        margin-top:    0px;
        margin-right:  0px;
        margin-bottom: 0px;
        margin-left:   0px;
    }
    
    /* --- 文字内部元素的间距 (之前调整过的) --- */
    
    /* 日期 */
    .news-date {
        margin-top: 0px;    /* 此时由 .news-img 的 margin-bottom 控制间距，这里可设0 */
        margin-bottom: 10px;  
    }
    
    /* 标题 */
    .news-text h3 {
        font-size: 17px; 
        margin-bottom: 10px; 
        margin-top: 0;       
    }
    
    /* 正文 */
     .news-text p {
        font-size: 14px;
        line-height: 1.6;    
        margin-bottom: 15px; 
        display: block;
        overflow: visible;
     }
    
    /* 图标 */
    .read-more {
        /* =========== 🔴 控制水平对齐 =========== */
        /* flex-end   = 靠右 (默认) */
        /* flex-start = 靠左 */
        /* center     = 居中 */
        align-self: flex-end; 

        /* =========== 🔴 控制图标的留白 (上-右-下-左) =========== */
        margin-top:    0px;   /* 距离上方正文的距离 */
        margin-right:  0px;   /* 距离右边缘的距离 (想往里缩就增加这个值) */
        margin-bottom: 0px;   /* 距离底部的距离 */
        margin-left:   0px;   
        
        border-top: none; 
    }
}