@charset "gb2312";
/* 主容器：默认左右排列（大屏） */
.page-list {
    display: flex;
    width: 100%;
	padding: 0 5%;
    margin: 0 auto;
    overflow: hidden;
}

/* 左侧区域：新闻列表，自适应宽度（flex:1 占据剩余空间） */
.page-list-left {
    flex: 1;                /* 自动缩放宽度，填充分配右侧固定340px后的剩余空间 */
    background: #fff;    /* 白色背景，与右侧区分 */
    padding-right: 40px;
}

/* 新闻列表 - 竖排布局 */
.page-list-holder {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-list-holder li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid #edf2f7;
}

.page-list-holder li a {
	line-height: 1.6;
	font-size: 1.2rem;
    color: #000;
    font-weight: bold;
    transition: color 0.2s;
    flex: 1;
	margin-bottom: 10px;
}

.page-list-holder li a:hover {
    color: #00479d;
}

.page-list-holder li p {
	line-height: 1.6;
	font-size: 1rem;
    color: #333;
	margin-bottom: 10px;
}

.page-list-holder .date {
	line-height: 1.6;
	font-size: 1.2rem;
    color: #7f8c8d;
    margin-left: 16px;
    white-space: nowrap;
}

/* 右侧区域：固定宽度340px（大屏有效） */
.page-list-right {
    width: 340px;           /* 固定宽度 */
    flex-shrink: 0;         /* 禁止收缩，确保宽度始终340px */
    background: #fff;    /* 浅灰蓝背景，与左侧白色区分 */
	border-left: 1px solid #e2e8f0;     /* 与右边区域的区分线 */
    padding: 6px 20px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* 响应式：浏览器宽度 < 992px 时，右侧区域移至左侧下方 */
@media (max-width: 991px) {
    .page-list {
        flex-direction: column;   /* 改为垂直排列：左侧在上，右侧在下 */
    }

    .page-list-right {
        width: 100%;              /* 小屏时宽度占满，不再固定320px */
        flex-shrink: 1;          /* 允许宽度自适应 */
        border-top: 1px solid #e2e8f0;  /* 与上方区域的区分线 */
		border-left: 0px;			/* 删除与右边区域的区分线 */
    }
    
    /* 可选：左侧区域微调内边距，保持移动端舒适 */
    .page-list-left {
        padding: 20px;
    }
    
    /* 小屏时新闻日期可换行，避免挤压 */
    .page-list-holder li {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .page-list-holder .date {
        margin-left: 0;
        white-space: normal;
    }
}