/* ============================================================
   文章列表页样式（/WEB-INF/jsp/publicarticle/list.jsp）—— 浅色高级版
   与首页 home.css 同一设计语言：暖白纸面 + 墨色 + 单一青色实色（无渐变）
   ============================================================ */
:root {
    --bg: #FAF9F6;              /* 暖白纸面底色 */
    --bg-soft: #F3F1EC;         /* 次级底色 */
    --ink: #16181D;             /* 墨色主文字 */
    --ink-soft: #3D4149;        /* 次级文字 */
    --muted: #8A8F98;           /* 弱化文字 */
    --line: #E4E1DA;            /* 细线 */
    --accent: #0E7490;          /* 单一强调色：深青（实色） */
    --serif: "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
    --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }

/* 顶部导航/页脚样式已由全站公共 site-common.css 提供（site-nav.jsp / site-footer.jsp） */

/* ============ 页头：编辑部式大标题 ============ */
.art-page-head {
    max-width: 1240px; margin: 0 auto;
    padding: 90px 32px 40px;
    border-bottom: 1px solid var(--ink);
}
.art-page-head .no {
    font-family: var(--serif);
    font-size: 14px; color: var(--accent);
    letter-spacing: 3px;
    display: block; margin-bottom: 14px;
}
/* 大标题：逐行遮罩入场 */
.art-page-head h1 {
    font-family: var(--serif);
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 900; letter-spacing: 3px;
    line-height: 1.3;
    overflow: hidden;
}
.art-page-head h1 > span {
    display: inline-block;
    transform: translateY(110%);
    animation: lineUp 1s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes lineUp { to { transform: translateY(0); } }
.art-page-head p {
    color: var(--muted); margin-top: 14px;
    font-size: 14px; letter-spacing: 2px;
    opacity: 0;
    animation: fadeUp .8s ease .4s forwards;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============ 分类筛选：细线文字（非胶囊） ============ */
.art-filter {
    max-width: 1240px; margin: 0 auto;
    padding: 26px 32px 6px;
    display: flex; gap: 30px; flex-wrap: wrap;
}
.art-filter a {
    color: var(--ink-soft); text-decoration: none;
    font-size: 14.5px; letter-spacing: 2px;
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
    transition: all .25s;
}
.art-filter a:hover { color: var(--ink); }
.art-filter a.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ============ 文章列表：编辑部行式列表（去卡片） ============ */
.art-list {
    max-width: 1240px; margin: 0 auto;
    padding: 0 32px 90px;
}
.art-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 30px;
    align-items: baseline;
    padding: 34px 12px;
    border-bottom: 1px solid var(--line);
    text-decoration: none; color: var(--ink);
    transition: background .3s, padding-left .3s cubic-bezier(.22,1,.36,1);
}
/* 悬浮整行右移 + 换底色 */
.art-row:hover { background: var(--bg-soft); padding-left: 30px; color: var(--ink); }
/* 日期：衬线大数字 */
.art-row .ar-date {
    font-family: var(--serif);
    font-size: 13.5px; color: var(--muted);
    letter-spacing: 1px; line-height: 1.5;
}
.art-row .ar-date b {
    display: block;
    font-size: 28px; font-weight: 700; color: var(--ink);
}
.art-row .ar-body { display: flex; align-items: flex-start; gap: 16px; }
.art-row .ar-cat {
    font-size: 11.5px; color: var(--accent);
    border: 1px solid currentColor;
    padding: 2px 10px; letter-spacing: 2px;
    white-space: nowrap; margin-top: 6px;
}
.art-row h2 {
    font-family: var(--serif);
    font-size: 20px; font-weight: 700; line-height: 1.55;
    transition: color .25s;
}
.art-row:hover h2 { color: var(--accent); }
.art-row .ar-summary {
    margin-top: 8px;
    font-size: 13.5px; color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.art-row .ar-meta {
    font-size: 12.5px; color: var(--muted);
    white-space: nowrap; letter-spacing: 1px;
}
.art-row .ar-meta i { color: var(--accent); margin-right: 5px; }

/* 空态 */
.art-empty {
    text-align: center; padding: 90px 0;
    color: var(--muted); font-size: 14px; letter-spacing: 2px;
}
.art-empty i { display: block; font-size: 32px; margin-bottom: 18px; color: var(--line); }

/* ============ 滚动渐显 ============ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }

/* ============ 响应式 ============ */
@media (max-width: 960px) {
    .art-page-head { padding: 60px 24px 30px; }
    .art-filter { padding: 20px 24px 6px; gap: 20px; }
    .art-list { padding: 0 24px 60px; }
    .art-row { grid-template-columns: 1fr; gap: 12px; }
}
/* 手机端细化（<600px）：字号/间距收紧 */
@media (max-width: 600px) {
    .art-page-head { padding: 44px 18px 22px; }
    .art-page-head h1 { font-size: 30px; }
    .art-page-head p { font-size: 14px; }
    .art-filter { padding: 14px 18px 4px; gap: 12px; flex-wrap: wrap; }
    .art-filter a { font-size: 12.5px; padding: 4px 12px; }
    .art-list { padding: 0 18px 48px; }
    /* 文章行：日期与信息堆叠更紧凑 */
    .art-row { padding: 18px 4px; }
    .art-row h3 { font-size: 16.5px; }
    .art-row .ar-summary { font-size: 13.5px; }
    .art-row .ar-meta { font-size: 12px; gap: 12px; flex-wrap: wrap; }
    .art-date b { font-size: 20px; }
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
    .art-page-head h1 > span { transform: none; }
    .art-page-head p { opacity: 1; }
}