/* ================================================================
 * 金色港湾资讯网 — rongshi 等文章列表页底部「本栏最新 / 相关栏目」美化补丁
 * 部署路径：/template/default/pc/skin/css/cross-tui.css
 * 引用方式：在 lists_article.htm <head> 中 pages.css 之后加载
 * 回滚方式：删除该 <link> 引用即可，本文件可保留或删除
 * ----------------------------------------------------------------
 * 设计：把两块做成独立圆角卡片组件，与站内「金港关注」红点语言统一，
 *       悬停浅红底，相关栏目为圆角 chip，整体像精修过的推荐区而非裸文字。
 * ================================================================ */

/* 整块：独立圆角卡片容器，从上方文章列表里「框」出来 */
.content .cross-tui {
    margin-top: 24px;
    padding: 18px 20px 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

/* 标题：红色左侧强调线（替代通用灰色下划线） */
.content .cross-tui .section-title {
    border-bottom: none;
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid #D90000;
}
.content .cross-tui .section-title h3 {
    font-size: 1.05em;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    margin: 0;
}

/* —— 本栏最新（第一个 ul）：红点项目符号 + 悬停浅红底 —— */
.content .cross-tui > ul:nth-of-type(1) {
    margin: 0;
    padding: 0;
}
.content .cross-tui > ul:nth-of-type(1) li {
    list-style: none;
    border-bottom: 1px dashed #eee;
    position: relative;
    padding-left: 14px;
    transition: background .15s ease;
}
.content .cross-tui > ul:nth-of-type(1) li:last-child {
    border-bottom: none;
}
/* 红色圆点（与 .top h4::before 同一套语言） */
.content .cross-tui > ul:nth-of-type(1) li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    background: #D90000;
    border-radius: 50%;
    opacity: .7;
}
.content .cross-tui > ul:nth-of-type(1) li a {
    display: block;
    padding: 9px 0;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease;
}
.content .cross-tui > ul:nth-of-type(1) li:hover {
    background: #fff5f5;
}
.content .cross-tui > ul:nth-of-type(1) li:hover a {
    color: #D90000;
    padding-left: 8px;
}

/* —— 相关栏目（第二个 ul）：圆角 chip 标签，hover 填充红 —— */
.content .cross-tui > ul:nth-of-type(2) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.content .cross-tui > ul:nth-of-type(2) li {
    list-style: none;
}
.content .cross-tui > ul:nth-of-type(2) li a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #e2e2e2;
    border-radius: 18px;
    color: #555;
    font-size: 13px;
    background: #fafafa;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.content .cross-tui > ul:nth-of-type(2) li a:hover {
    background: #D90000;
    border-color: #D90000;
    color: #fff;
}

/* 移动端：卡片内边距收紧；本栏最新行距略缩 */
@media (max-width: 768px) {
    .content .cross-tui {
        padding: 14px 14px 16px;
    }
    .content .cross-tui > ul:nth-of-type(1) li a {
        font-size: 13px;
    }
}