/* css/articles.css —— 文章列表页（articles/index.php）
   规格依据 doc/文章列表页设计文档.md
   设计要点：属于「文章域」，沿用文章页色令牌（深海军蓝 #1e3a8a + 灰白底 #f8fafc），
   与主站的 Bootstrap 亮蓝区分；不引入 Bootstrap / jQuery。 */

:root {
    --navy: #1e3a8a;
    --amber: #f59e0b;
    --bg: #f8fafc;
    --text: #1f2937;
    --muted: #6b7280;
    --faint: #9ca3af;
    --line: #e5e7eb;
    --ink: #111827;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Arial, sans-serif;
    line-height: 1.7;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- ① 顶部返回条 ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.topbar .back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
    text-decoration: none;
}

.topbar .back i { font-size: 14px; }

.topbar .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.topbar .title.show { opacity: 1; }

.topbar .spacer { flex: 1 1 auto; }

/* ---------- 容器 ---------- */
.wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- ② 页首 Hero（纯文字，不用渐变） ---------- */
.hero { padding: 48px 0 32px; }

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.kicker::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--amber);
}

.hero h1 {
    margin: 12px 0 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}

.hero .sub {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.hero .stat {
    margin-top: 20px;
    font-size: 12px;
    color: var(--faint);
}

/* ---------- ③ 筛选条 ---------- */
.filters {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px 20px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip {
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.chip[aria-pressed="true"] {
    background: var(--navy);
    border-color: var(--navy);
    color: #ffffff;
}

/* ---------- ④ 文章卡片 ---------- */
.cards {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px;
}

.card {
    display: block;
    margin-bottom: 16px;
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(8px);
    animation: cardIn .34s ease forwards;
    animation-delay: var(--d, 0ms);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

@keyframes cardIn {
    to { opacity: 1; transform: translateY(0); }
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
}

/* 卡片顶部左侧的标签组：置顶 + 分类（成组靠左，日期仍靠右） */
.card-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

/* 【置顶】标记：比分类标签更醒目，颜色沿用侧栏「新」角标的红 */
.card-tags .pin {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: 4px;
    background: rgba(192, 57, 43, .10);
    color: #c0392b;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.card-tags .pin i { font-size: 11px; }

.cat {
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* 分类色 = 文章正文主色，便于「标签色 ↔ 点进去看到的页面配色」对上：
   个校分析 → 蓝色系；数据挖掘 → 深绿色系（#0d6e6e，与文章页 --brand 一致） */
.cat-data   { color: #0d6e6e; background: rgba(13, 110, 110, .10); }
.cat-school { color: #1e3a8a; background: rgba(30, 58, 138, .08); }
.cat-score  { color: #b45309; background: rgba(245, 158, 11, .14); }
.cat-policy { color: #15803d; background: rgba(22, 163, 74, .10); }
.cat-other  { color: #6b7280; background: rgba(107, 114, 128, .10); }

/* 家长伴读 → 青色；填报技巧 → 浅橙色（按指定配色，独立于文章正文主色） */
.cat-parent { color: #0e7490; background: rgba(6, 182, 212, .14); }
.cat-tips   { color: #c2410c; background: rgba(251, 146, 60, .18); }

.date {
    font-size: 12px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.card h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card .sum {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-bot {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-bot .read { font-size: 12px; color: var(--faint); }

.card-bot .go {
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card-bot .go i { transition: transform .2s ease; }

.card:active { background: #f9fafb; }

@media (hover: hover) {
    .card:hover {
        border-color: #c7d2fe;
        box-shadow: 0 4px 16px -4px rgba(30, 58, 138, .12);
        transform: translateY(-2px);
    }
    .card:hover .go i { transform: translateX(3px); }
}

/* ---------- 空态 ---------- */
.empty {
    max-width: 780px;
    margin: 0 auto;
    padding: 56px 24px;
    text-align: center;
    color: var(--faint);
}

.empty i { font-size: 48px; color: #d1d5db; }

.empty p { margin: 12px 0 16px; font-size: 14px; }

.empty .btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 8px;
    background: var(--navy);
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
}

/* ---------- ⑤ 页脚 ----------
   已统一到 css/topbar.css 的 .page-foot（文章列表页与文章正文页共用同一份，
   由 include/topbar.php 的 page_foot_render() 输出），此处不再重复定义。 */

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
    .topbar { height: 48px; }
    .hero { padding: 32px 0 24px; }
    .hero h1 { font-size: 22px; }
    .wrap, .filters, .cards { padding-left: 16px; padding-right: 16px; }
    .card { padding: 18px; }
    .card h2 { font-size: 16px; }
    .card .sum { font-size: 13px; }
    /* 筛选条横向滚动，不换行 */
    .filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .filters::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .card { animation: none; opacity: 1; transform: none; }
    .topbar .title { transition: none; }
}