@charset "utf-8";
/* ==========================================================================
   包头律师网 · 列表页（栏目页）  list.css   —— 依赖 theme.css
   --------------------------------------------------------------------------
   01 当前位置（样式在 theme.css，列表页与内容页共用）
   02 两栏布局    03 侧栏（栏目 / 公告 / 联系方式）
   04 列表条目    05 分页
   ========================================================================== */

/* 01 当前位置：样式已提到 theme.css 的 .crumbs，列表页与内容页共用 */

/* 02 两栏布局 ============================================================== */
.list-layout {
    display: grid;
    gap: var(--gap);
    grid-template-columns: minmax(0, 1fr);
}

.list-side {
    display: grid;
    gap: var(--gap);
    align-content: start;
}

@media (min-width: 900px) {
    .list-layout {
        grid-template-columns: 262px minmax(0, 1fr);
        align-items: start;
    }
}

/* 窄屏：侧栏不再单独占一列，而是拆开参与整体排布 ——
   子栏目贴到列表上方当筛选条，公告/联系方式排到列表之后。
   旧模板是直接把整个侧栏 display:none 隐藏掉，内容白丢 */
@media (max-width: 899px) {
    .list-side { display: contents; }

    .side-block--cats { order: 1; }

    .list-main { order: 2; }

    .side-block--notice { order: 3; }

    .side-block--contact { order: 4; }
}

/* 03 侧栏区块 ============================================================== */
.side-block { padding: 14px 16px 16px; }

/* 子栏目：桌面端纵向列表 */
.cat-list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.cat-list a {
    display: block;
    padding: 9px 8px;
    font-size: 15px;
    color: var(--ink-2);
    border-bottom: 1px dashed var(--line);
    border-radius: 6px;
}

.cat-list li:last-child a { border-bottom: 0; }

.cat-list a:hover {
    color: var(--brand);
    background: var(--brand-50);
}

/* 子栏目：窄屏横向筛选条（同一份内容换形态，不隐藏） */
@media (max-width: 899px) {
    .cat-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    .cat-list a {
        padding: 6px 14px;
        font-size: 14px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 999px;
    }

    .cat-list li:last-child a { border-bottom: 1px solid var(--line); }

    .cat-list a:hover { border-color: var(--brand); }
}

/* 本站公告 */
.notice {
    padding-top: 10px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink-2);
}

.notice > p { margin-bottom: 8px; }

.notice .info-list { font-size: 14px; }

.notice .info-list li { padding: 9px 0; }

/* 04 列表条目 ============================================================== */
/* 条目 HTML 来自后台「列表内容模板(list.var1)」，
   推荐结构见工作区 list-var1.html；未替换时下面的兜底规则也能保证不散架 */
.entry-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 推荐结构：li.entry（缩略图 + 标题 + 摘要 + 日期），后台粘贴 list-var1.html 后生效 */
.entry-list > li.entry {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--line);
}

.entry-list > li.entry:first-child { padding-top: 4px; }

.entry-list > li.entry:last-child { border-bottom: 0; }

/* 兜底：仍用旧列表内容模板时（装饰小图 + 标题链接 + 阅读次数 + 日期），
   按文字行排版，绝不能套用上面的横向 flex，否则会挤成一行 */
.entry-list > li:not(.entry) {
    padding: 11px 0;
    font-size: 15px;
    line-height: 1.8;
    border-bottom: 1px dashed var(--line);
}

.entry-list > li:not(.entry):last-child { border-bottom: 0; }

.entry-list > li:not(.entry) > img {
    margin-right: 8px;
    vertical-align: middle;
}

.entry-list > li:not(.entry) > a { color: var(--ink); }

.entry-list > li:not(.entry) > a:hover { color: var(--brand); }

.entry-list > li:not(.entry) > span {
    margin-left: 12px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--muted);
}

.entry-list > li:not(.entry) > span b {
    font-weight: 600;
    color: var(--ink-2);
}

/* 缩略图（条目里带 .entry__pic 时生效） */
.entry-list .entry__pic {
    flex: 0 0 auto;
    width: 176px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eceef1;
    border-radius: var(--radius-sm);
}

.entry-list .entry__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.entry-list > li:hover .entry__pic img { transform: scale(1.05); }

.entry-list .entry__main {
    flex: 1 1 auto;
    min-width: 0;
}

.entry-list .entry__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

.entry-list .entry__title a { color: var(--ink); }

.entry-list .entry__title a:hover { color: var(--brand); }

.entry-list .entry__desc {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.75;
    color: var(--ink-2);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.entry-list .entry__meta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* 标题图为空时（信息未上传标题图）不要留一个空灰框 */
.entry-list .entry__pic img[src=""] { visibility: hidden; }

.entry-list .entry__pic:has(img[src=""]) { display: none; }

@media (max-width: 560px) {
    .entry-list > li.entry { gap: 12px; }

    .entry-list .entry__pic {
        width: 104px;
        aspect-ratio: 1 / 1;
    }

    .entry-list .entry__title { font-size: 16px; }
}

/* 05 分页 ================================================================== */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 18px;
    font-size: 14px;
    color: var(--ink-2);
    border-top: 1px solid var(--line);
}

.pager a,
.pager b,
.pager strong {
    display: inline-block;
    min-width: 34px;
    padding: 6px 10px;
    text-align: center;
    font-weight: 400;
    color: var(--ink-2);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.pager a:hover {
    color: var(--brand);
    border-color: var(--brand);
}

/* 当前页 */
.pager b,
.pager strong {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.pager form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pager input,
.pager select {
    height: 32px;
    padding: 0 8px;
    font: inherit;
    font-size: 14px;
    color: var(--ink-2);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.pager input[type="submit"],
.pager input[type="button"] {
    padding: 0 14px;
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
    cursor: pointer;
}