/* ==========================================================================
   图书馆首页「信息发布」四模块 · 外观重设计
   --------------------------------------------------------------------------
   适用范围：首页 通知公告 / 新闻动态 / 阅读推广 / 学术情报 四个模块
             （.container_xw > .book-container_xw > .page_xw）

   使用方法：将本文件全部内容【追加】到
             /_upload/tpl/02/89/649/template649/xwcss.css 的末尾即可。
             相同选择器“后者优先”，自动覆盖文件中原有样式，
             无需修改任何 HTML 结构。

   设计要点：
             1. 四个模块统一为白色圆角卡片 + 顶部品牌红渐变细条，增强整体感；
             2. 去掉米黄“纸纹”背景与逐条小卡片堆叠，改为行式列表 + 虚线分隔；
             3. 标题区左对齐：品牌图标 + 深色标题 + 底部细分隔线；
                “更多”由深红胶囊弱化为浅底胶囊，悬停反色；
             4. 列表行：圆点标记 + 标题（超长省略）+ 右对齐日期，
                悬停整行淡红渐显、圆点与日期同步变红。
   ========================================================================== */

/* ---------- 区块整体 ---------- */
.container_xw {
    height: auto;                 /* 覆盖原固定 620px，随内容自适应 */
    padding: 34px 0 10px;
}

.book-container_xw {
    flex: none;                   /* 覆盖原 flex:1，避免拉伸 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

/* ---------- 模块卡片 ---------- */
.page_xw {
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #F0E7E7;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(90, 30, 32, 0.05);
    padding: 20px 22px 10px;
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

/* 四个模块统一的顶部品牌红渐变条 */
.page_xw::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #A6282E 0%, #CE5A50 100%);
}

.page_xw:hover {
    transform: translateY(-3px);
    border-color: rgba(166, 40, 46, 0.35);
    box-shadow: 0 10px 24px rgba(90, 30, 32, 0.10);
}

/* 取消原“左页/右页”差异，统一外观 */
.page-left_xw,
.page-right_xw {
    border-right: none;
    border-bottom: none;
    background-image: none;
    background-size: auto;
    background-color: #fff;
}

/* ---------- 标题区 ---------- */
.page-title_xw {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    text-align: left;
    margin-bottom: 6px;
    padding-bottom: 12px;
    padding-right: 96px;          /* 避免与右侧“更多”按钮重叠 */
    border-bottom: 1px solid #F3EAEA;
    color: #3A3234;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.page-title_xw img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 覆盖原居中渐变下划线：改为标题下的短红色段 */
.page-title_xw::after {
    left: 0;
    right: auto;
    bottom: -1px;
    width: 42px;
    height: 2px;
    border-radius: 2px;
    background: #A6282E;
}

/* ---------- “更多”按钮：浅底胶囊，悬停反色 ---------- */
.more-btn_xw {
    position: absolute;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    right: 18px;
    top: 18px;
    padding: 5px 15px;
    background: #FBF3F3;
    color: #A6282E;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    box-shadow: none;
}

.more-btn_xw img {
    width: 12px;
    filter: brightness(0);
    opacity: .5;
    transition: filter .25s ease, opacity .25s ease;
}

.more-btn_xw:hover {
    background: #A6282E;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(166, 40, 46, 0.28);
}

.more-btn_xw:hover img {
    filter: brightness(0) invert(1);
    opacity: 1;
}

/* ---------- 列表：由“逐条小卡片”改为行式列表 ---------- */
.content-list_xw {
    flex: 1;
    overflow: visible;
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-list_xw li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    margin-bottom: 0;
    background: none;
    border-radius: 8px;
    box-shadow: none;
    border-bottom: 1px dashed #EFE2E2;
    overflow: visible;
    cursor: pointer;
    transition: background .25s ease;
}

.content-list_xw li:last-child {
    border-bottom: none;
}

.content-list_xw li > a:first-child:not(:only-of-type) {
    display: none;
}

/* 原左侧红条 → 行首圆点标记 */
.content-list_xw li::before {
    position: static;
    top: auto;
    left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E4CFCF;
    flex-shrink: 0;
    transition: background .25s ease, transform .25s ease;
}

.content-list_xw li:hover {
    transform: none;
    box-shadow: none;
    background: linear-gradient(90deg, rgba(166, 40, 46, 0.055), rgba(166, 40, 46, 0) 75%);
}

.content-list_xw li:hover::before {
    background: #A6282E;
    transform: scale(1.3);
}

/* 标题链接：单行省略 */
.content-list_xw a {
    display: block;
    flex: 1;
    min-width: 0;
    color: #4A4245;
    text-decoration: none;
    font-weight: 400;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .25s ease;
}

.content-list_xw a:hover {
    color: #A6282E;
}

/* 日期：右对齐、等宽数字，悬停随行变红 */
.content-list_xw .date {
    float: none;
    flex-shrink: 0;
    min-width: 0;
    color: #B3A8A8;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
    transition: color .25s ease;
}

.content-list_xw li:hover .date {
    color: #A6282E;
}

/* 滚动条（小屏列表超高时出现） */
.content-list_xw::-webkit-scrollbar {
    width: 5px;
}

.content-list_xw::-webkit-scrollbar-track {
    background: transparent;
}

.content-list_xw::-webkit-scrollbar-thumb {
    background: #E7D8D8;
    border-radius: 99px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .container_xw {
        padding: 22px 0 4px;
    }

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

    .page_xw {
        height: auto;
        padding: 18px 16px 8px;
    }

    .page-title_xw {
        font-size: 18px;
        padding-right: 92px;
    }

    .more-btn_xw {
        top: 16px;
        right: 14px;
    }

    .content-list_xw a {
        font-size: 14px;
    }
}