/* ============================================================================
   栏目列表页版面
   ----------------------------------------------------------------------------
   一个模板服务所有 CategoryType = 2 的栏目（航校新闻 / 人物风采 / 菁菁校园 / 经典回顾）。
   路由与栏目解析见 docs/06-架构设计.md §3.3。

   颜色一律引用 variables.css 的变量，不写字面色值。
   ========================================================================= */

/* ── 页面头 ────────────────────────────────────────────────────────────── */

/* 不用深色底：首页首屏已经是深色，列表页再压一层黑会显得整站发闷。
   浅底 + 细边框，靠排版立住层级。 */
.page-head {
    padding-block: 48px 40px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-light);
}

.page-head__title {
    margin-top: 16px;
    font-size: 34px;
    letter-spacing: 0.02em;
}

/* ── 面包屑 ────────────────────────────────────────────────────────────── */

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--text-faint);
    font-size: 13px;
}

/* 分隔符用伪元素，比在每个 li 后面手写字符好维护 */
.breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    margin-right: 8px;
    color: var(--border);
}

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

.breadcrumb__item--current {
    color: var(--text-muted);
}

/* ── 两栏布局 ──────────────────────────────────────────────────────────── */

/* 用 flex 而不是 grid：侧栏不渲染时（配置为空 / 栏目被删），主区自动占满，
   不用写「有没有侧栏」两套列定义。 */
.list-layout {
    display: flex;
    align-items: flex-start;
    gap: 56px;
    padding-block: 56px 80px;
}

.list-main {
    flex: 1 1 auto;
    /* ⚠️ 必须为 0：flex 子项默认 min-width: auto，长标题会把主区撑破、连带整页横向溢出 */
    min-width: 0;
}

.list-side {
    flex: 0 0 300px;
}

/* ── 条目列表 ──────────────────────────────────────────────────────────── */

.list-item {
    display: flex;
    gap: 24px;
    padding-block: 24px;
    border-bottom: 1px solid var(--border-light);
}

/* 最后一条不画线：否则与页面底部的留白连成双层分隔 */
.item-list > li:last-child .list-item {
    border-bottom: 0;
}

.list-item__media {
    flex: 0 0 220px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--bg-subtle);
    border-radius: var(--radius);
}

.list-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.list-item:hover .list-item__media img {
    transform: scale(1.05);
}

.list-item__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    /* 同上：长标题 / 长英文串要能断开，不能撑破父容器 */
    min-width: 0;
}

.list-item__date {
    color: var(--text-faint);
    font-size: 13px;
    letter-spacing: 0.02em;
}

.list-item__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.55;
    transition: color var(--transition);
}

.list-item:hover .list-item__title {
    color: var(--brand);
}

.list-item__desc {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.75;
}

/* ── 空态 ──────────────────────────────────────────────────────────────── */

.empty {
    padding-block: 64px;
    color: var(--text-faint);
    font-size: 15px;
    text-align: center;
}

/* ── 分页器 ────────────────────────────────────────────────────────────── */

.pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}

.pager__item {
    display: inline-block;
    min-width: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    transition: border-color var(--transition), background-color var(--transition),
                color var(--transition);
}

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

.pager__item--current {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--text-inverse);
}

/* 当前页不可再点：hover 不改样式，免得误以为还能跳 */
.pager__item--current:hover {
    color: var(--text-inverse);
}

.pager__item--disabled {
    border-color: var(--border-light);
    color: var(--text-faint);
}

.pager__item--disabled:hover {
    border-color: var(--border-light);
    color: var(--text-faint);
}

.pager__gap {
    align-self: center;
    padding-inline: 4px;
    color: var(--text-faint);
}

.pager-info {
    margin-top: 16px;
    color: var(--text-faint);
    font-size: 13px;
    text-align: center;
}

/* ── 侧栏 ──────────────────────────────────────────────────────────────── */

.list-side__title {
    padding-bottom: 14px;
    border-bottom: 2px solid var(--brand);
    font-size: 18px;
}

.side-list {
    margin-top: 4px;
}

.side-item {
    display: block;
    padding-block: 16px;
    border-bottom: 1px solid var(--border-light);
}

.side-item__title {
    font-size: 14px;
    line-height: 1.6;
    transition: color var(--transition);
}

.side-item:hover .side-item__title {
    color: var(--brand);
}

.side-item__date {
    display: block;
    margin-top: 6px;
    color: var(--text-faint);
    font-size: 12px;
}

/* ── 响应式 ────────────────────────────────────────────────────────────── */

/* 与 layout.css 的导航断点（1199px）错开一档：侧栏 300px 在 1024~1199 之间
   会把正文挤到 600px 以下，读起来很难受，干脆这一档就收起来。 */
@media (max-width: 1023px) {
    .list-layout {
        flex-direction: column;
        gap: 48px;
        padding-block: 40px 64px;
    }

    /* 纵向排列后 flex-basis 要放开，否则侧栏还是被压在 300px */
    .list-side {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .page-head {
        padding-block: 32px 28px;
    }

    .page-head__title {
        font-size: 26px;
    }

    /* 图上文下：手机上「图左文右」只剩 100 来像素给正文，读不了 */
    .list-item {
        flex-direction: column;
        gap: 16px;
    }

    .list-item__media {
        flex-basis: auto;
        width: 100%;
    }

    .list-item__title {
        font-size: 16px;
    }

    /* 页码按钮在窄屏收窄，避免 32 页时换行太多 */
    .pager__item {
        min-width: 36px;
        padding: 6px 10px;
    }
}