/*
 * 文章类页面（列表 / 归档 / 搜索 / 404，详情页的公共部分）：基础层、页头、分类筛选、元信息、封面、
 * 置顶大卡、卡片网格、分页、空态、搜索框。详情页正文排版在 css/article.css。
 * token 见 css/tokens-articles.css；类名统一带 a- 前缀，不与 style.css 的旧类冲突。
 * 数值取自视觉稿 design/mockups/assets/articles.css。
 */

/* ---------- 基础：接管 style.css 的遗留规则，一律原生长滚动 ---------- */
/* style.css 的遗留 body 规则锁死了 100vh + overflow:hidden */
body.stbledge-articles-page {
    height: auto;
    overflow: visible;
}

.a-page {
    font-family: var(--font-sans);
    color: var(--fg);
}

/* style.css 给 section 加了 100vw 宽和 48px 内边距，这里收回 */
.a-page section {
    width: 100%;
    padding: 0;
}

.a-page [data-nav-theme="dark"] {
    background-color: var(--bg);
    color: var(--fg);
}

.a-page img {
    display: block;
    max-width: 100%;
}

.a-page a {
    color: inherit;
    text-decoration: none;
}

.a-page a:focus-visible,
.a-page button:focus-visible,
.a-page summary:focus-visible,
.a-page input:focus-visible {
    outline: var(--line-width) solid var(--brand-blue);
    outline-offset: var(--space-1);
}

.a-wrap {
    width: 100%;
    max-width: var(--a-wrap-max);
    margin-inline: auto;
    padding-inline: var(--page-px);
}

.a-page .a-sec {
    position: relative;
    padding-bottom: var(--a-section-y);
}

.a-page .a-sec--tight {
    padding-block: var(--space-16);
    border-top: var(--line-width) solid var(--line);
}

/* 读屏文字（分页、搜索框的标题由 WordPress 输出） */
.a-page .screen-reader-text {
    position: absolute;
    width: var(--line-width);
    height: var(--line-width);
    margin: calc(var(--line-width) * -1);
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 极淡网格背景 */
.a-grid-bg {
    background-image:
        linear-gradient(var(--a-grid-line) var(--line-width), transparent var(--line-width)),
        linear-gradient(90deg, var(--a-grid-line) var(--line-width), transparent var(--line-width));
    background-size: var(--a-grid-cell) var(--a-grid-cell);
    background-position: center top;
}

/* ---------- 页头（列表、详情、404 共用起始留白） ---------- */
.a-page .a-head {
    padding-top: var(--a-head-pad-top);
    padding-bottom: var(--space-12);
}

.a-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--a-tracking-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
}

.a-eyebrow::before {
    content: "";
    width: var(--space-2);
    height: var(--space-2);
    border: var(--line-width) solid var(--brand-blue);
}

.a-head__title {
    margin-top: var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--a-fs-h1);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tighter);
    text-wrap: balance;
}

.a-head__lead {
    max-width: var(--a-lead-max);
    margin-top: var(--space-5);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--fg-secondary);
}

.a-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-10);
}

.a-head__search {
    max-width: var(--a-lead-max);
    margin-top: var(--space-8);
}

.a-page .a-head--404 {
    padding-bottom: var(--a-section-y);
}

/* ---------- 按钮 / 标签 / 箭头 ---------- */
.a-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--space-10);
    padding: 0 var(--space-5);
    border: var(--line-width) solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    color: var(--fg);
    cursor: pointer;
    transition:
        background-color var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.a-page .a-btn--primary {
    background: var(--brand-blue);
    color: var(--fg-on-brand);
}

.a-page .a-btn--primary:hover { background: var(--brand-blue-hover); }

.a-btn--ghost { border-color: var(--line-strong); }

.a-btn--ghost:hover {
    border-color: var(--fg-muted);
    background: var(--a-surface-hover);
}

.a-btn--text {
    padding-inline: 0;
    color: var(--fg-secondary);
}

.a-page .a-btn--text:hover { color: var(--fg); }

.a-btn--sm {
    min-height: var(--space-8);
    padding-inline: var(--space-4);
}

.a-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: var(--line-width) solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    letter-spacing: var(--a-tracking-wide);
    color: var(--fg-secondary);
    transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.a-page a.a-tag:hover {
    border-color: var(--fg-muted);
    color: var(--fg);
}

.a-tag--brand {
    border-color: var(--brand-blue);
    background: var(--brand-blue-soft);
    color: var(--brand-blue);
}

.a-arrow {
    display: inline-block;
    transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.a-btn:hover .a-arrow { transform: translateX(var(--space-1)); }

/* ---------- 元信息行：分类 / 日期 / 阅读时长 ---------- */
.a-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--a-tracking-wide);
    color: var(--fg-muted);
}

.a-meta__cat { color: var(--brand-blue); }
.a-meta__sep { color: var(--line-strong); }

/* ---------- 封面：有特色图就铺满；没有时显示网格占位 + 分类名 ---------- */
.a-cover {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: var(--a-cover-ratio);
    overflow: hidden;
    border: var(--line-width) solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--bg-elevated);
}

.a-page .a-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.a-cover__label {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: var(--a-tracking-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* 整卡可点：标题链接的伪元素铺满卡片 */
.a-stretched::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
}

/* ---------- 分类筛选：细线胶囊，每个都是分类归档链接 ---------- */
.a-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-10);
}

.a-filter__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--space-8);
    padding: 0 var(--space-4);
    border: var(--line-width) solid var(--line-strong);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    color: var(--fg-secondary);
    transition:
        color var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        background-color var(--dur-base) var(--ease-out);
}

.a-page .a-filter__item:hover {
    border-color: var(--fg-muted);
    color: var(--fg);
}

.a-page .a-filter__item[aria-current="page"] {
    border-color: var(--brand-blue);
    background: var(--brand-blue-soft);
    color: var(--brand-blue);
}

.a-filter__count {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
}

.a-filter__item[aria-current="page"] .a-filter__count { color: inherit; }

/* ---------- 置顶文章：横向大卡 ---------- */
.a-featured {
    position: relative;
    display: grid;
    grid-template-columns: var(--a-featured-cols);
    gap: clamp(var(--space-8), 4vw, var(--space-16));
    align-items: center;
    padding: var(--space-6);
    border: var(--line-width) solid var(--line-strong);
    border-radius: var(--radius-lg);
    transition: background-color var(--dur-base) var(--ease-out);
}

.a-featured:hover { background: var(--a-surface-hover); }

.a-featured:hover .a-cover img,
.a-card:hover .a-cover img {
    transform: scale(var(--a-hover-scale));
}

.a-featured__body {
    display: grid;
    gap: var(--space-5);
    padding-right: var(--space-4);
}

.a-featured__badge { justify-self: start; }

.a-featured__title {
    font-family: var(--font-sans);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--a-tracking-title);
    text-wrap: balance;
}

.a-featured__excerpt {
    line-height: var(--lh-body);
    color: var(--fg-secondary);
}

.a-read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--brand-blue);
}

.a-featured:hover .a-read-more .a-arrow {
    transform: translateX(var(--space-1));
}

/* ---------- 文章卡片网格（3 / 2 / 1 列） ---------- */
.a-posts-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin: var(--space-16) 0 var(--space-6);
}

.a-posts-head--flush { margin-top: 0; }

.a-posts-head__title {
    font-family: var(--font-sans);
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--a-tracking-title);
}

.a-posts-head__page {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--fg-muted);
}

.a-posts {
    display: grid;
    grid-template-columns: repeat(var(--a-posts-cols), minmax(0, 1fr));
    gap: var(--space-6);
}

.a-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-4) var(--space-5);
    border: var(--line-width) solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.a-card:hover {
    border-color: var(--line-strong);
    background: var(--a-surface-hover);
}

.a-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-4);
}

.a-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

.a-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--fg-secondary);
}

.a-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: var(--line-width) solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
}

.a-card:hover .a-card__foot .a-arrow {
    color: var(--brand-blue);
    transform: translateX(var(--space-1));
}

/* ---------- 空态 ---------- */
.a-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-6);
    border: var(--line-width) dashed var(--line-strong);
    border-radius: var(--radius-lg);
    text-align: center;
}

.a-empty__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--fg);
}

.a-empty__text { color: var(--fg-muted); }

/* ---------- 分页（the_posts_pagination 的标记：.a-pager > .nav-links > .page-numbers） ---------- */
.a-pager {
    margin-top: var(--space-16);
    padding-top: var(--space-6);
    border-top: var(--line-width) solid var(--line);
}

.a-pager .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
}

.a-pager .page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: var(--space-10);
    height: var(--space-10);
    border: var(--line-width) solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--fg-secondary);
    transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.a-page .a-pager a.page-numbers:hover {
    border-color: var(--line-strong);
    color: var(--fg);
}

.a-pager .page-numbers.current {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.a-pager .page-numbers.dots { color: var(--fg-muted); }

/* 上一页 / 下一页：线框按钮，分别推到两端 */
.a-pager .prev,
.a-pager .next {
    display: inline-flex;
    gap: var(--space-2);
    padding-inline: var(--space-4);
    border-color: var(--line-strong);
    font-family: var(--font-sans);
}

.a-pager .prev { margin-right: auto; }
.a-pager .next { margin-left: auto; }

/* ---------- 搜索框（get_search_form 的 html5 标记） ---------- */
.a-page .search-form {
    display: flex;
    gap: var(--space-2);
    width: 100%;
    max-width: var(--a-lead-max);
}

.a-page .search-form label {
    flex: 1;
    min-width: 0;
}

.a-page .search-field,
.a-page .search-submit {
    height: var(--space-12);
    border: var(--line-width) solid var(--line-strong);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--fs-sm);
}

.a-page .search-field {
    width: 100%;
    padding: 0 var(--space-4);
    background: transparent;
    color: var(--fg);
}

.a-page .search-field::placeholder { color: var(--fg-muted); }

.a-page .search-field:focus {
    outline: none;
    border-color: var(--brand-blue);
}

.a-page .search-submit {
    padding: 0 var(--space-5);
    border-color: var(--brand-blue);
    background: var(--brand-blue);
    color: var(--fg-on-brand);
    cursor: pointer;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1023.98px) {
    .a-posts {
        grid-template-columns: repeat(var(--a-posts-cols-md), minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .a-wrap {
        padding-inline: var(--page-px-mobile);
    }

    .a-featured {
        grid-template-columns: 1fr;
        padding: var(--space-4) var(--space-4) var(--space-6);
    }

    .a-featured__body {
        padding-right: 0;
    }

    .a-posts {
        grid-template-columns: 1fr;
    }

    .a-pager__label {
        display: none;
    }

    .a-page .search-form {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .a-page *,
    .a-page *::before,
    .a-page *::after {
        transition: none;
    }
}