/*
 * 文章详情页（single.php / 未套模板的页面）：文章头、浅色正文区块、正文排版 .a-prose（标题、段落、列表、引用、
 * 代码、图片、表格、WordPress 区块）、右侧目录、文末标签 / 复制链接、上一篇 / 下一篇。
 * 依赖 css/articles.css（公共部分）与 css/tokens-articles.css。数值取自视觉稿 design/mockups/assets/articles.css。
 */

/* ---------- 文章头 ---------- */
.a-article-head {
    display: grid;
    gap: var(--space-6);
    max-width: var(--a-head-max);
}

.a-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--fg-muted);
}

.a-page .a-crumbs a:hover { color: var(--fg); }
.a-crumbs__sep { color: var(--line-strong); }
.a-crumbs a:last-child { color: var(--fg-secondary); }

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

.a-article-head__lead {
    max-width: var(--a-prose-max);
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    color: var(--fg-secondary);
}

.a-byline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-sm);
}

.a-byline__name {
    font-weight: var(--fw-medium);
    color: var(--fg);
}

.a-avatar {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--a-avatar-size);
    height: var(--a-avatar-size);
    border: var(--line-width) solid var(--line-strong);
    border-radius: var(--radius-full);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-secondary);
}

.a-article-cover { margin-top: var(--space-12); }

.a-article-cover .a-cover {
    border-color: var(--line-strong);
    border-radius: var(--radius-lg);
}

/* ---------- 浅色正文区块：就地重映射语义 token，组件不用写两套 ---------- */
.a-page .a-body[data-nav-theme="light"] {
    --bg: var(--bg-inverse);
    --bg-elevated: var(--a-surface-inverse);
    --surface: var(--a-surface-inverse);
    --a-surface-hover: var(--a-surface-hover-inverse);
    --fg: var(--fg-inverse);
    --fg-secondary: var(--a-fg-inverse-secondary);
    --fg-muted: var(--fg-inverse-muted);
    --line: var(--line-inverse);
    --line-strong: var(--a-line-inverse-strong);
    padding-block: var(--space-16) var(--a-section-y);
    background-color: var(--bg);
    color: var(--fg);
}

.a-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--a-prose-max)) var(--a-toc-w);
    justify-content: space-between;
    align-items: start;
    gap: var(--space-16);
}

.a-layout--solo { grid-template-columns: minmax(0, var(--a-prose-max)); }

/* ---------- 目录：桌面端粘性常开，窄屏折叠到文首（js/article.js 按宽度切换 open） ---------- */
.a-toc {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-8));
    font-size: var(--fs-sm);
}

.a-toc__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--a-tracking-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
    cursor: default;
}

.a-toc__summary::-webkit-details-marker { display: none; }

.a-toc__list {
    display: grid;
    margin-top: var(--space-4);
    border-left: var(--line-width) solid var(--line);
}

.a-toc__link {
    display: block;
    margin-left: calc(var(--line-width) * -1);
    padding: var(--space-1) 0 var(--space-1) var(--space-4);
    border-left: var(--line-width) solid transparent;
    line-height: var(--lh-normal);
    color: var(--fg-muted);
    transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

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

.a-toc__link--sub {
    padding-left: var(--space-8);
    font-size: var(--fs-xs);
}

.a-page .a-toc__link.is-active {
    border-left-color: var(--brand-blue);
    color: var(--brand-blue);
}

/* ---------- 正文排版 .a-prose（the_content 输出，含古腾堡区块） ---------- */
.a-prose {
    font-family: var(--font-sans);
    font-size: var(--a-fs-prose);
    line-height: var(--a-lh-prose);
    color: var(--fg-secondary);
    overflow-wrap: break-word;
}

.a-prose > * + * { margin-top: var(--space-6); }

.a-prose h2,
.a-prose h3,
.a-prose h4 {
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--fg);
    scroll-margin-top: calc(var(--nav-h) + var(--space-6));
}

.a-prose h2 {
    margin-top: var(--space-16);
    padding-top: var(--space-8);
    border-top: var(--line-width) solid var(--line);
    font-size: var(--fs-xl);
    letter-spacing: var(--a-tracking-title);
}

.a-prose > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.a-prose h3 { margin-top: var(--space-10); font-size: var(--fs-lg); }
.a-prose h4 { margin-top: var(--space-8); font-size: var(--fs-md); }

.a-prose h2 + *,
.a-prose h3 + *,
.a-prose h4 + * { margin-top: var(--space-4); }

.a-prose strong,
.a-prose b { font-weight: var(--fw-bold); color: var(--fg); }

/* 只给行文里的链接加下划线；按钮类区块不受影响 */
.a-page .a-prose :is(p, li, td, figcaption, blockquote) a {
    color: var(--brand-blue);
    text-decoration: underline;
    text-decoration-thickness: var(--line-width);
    text-underline-offset: var(--a-link-offset);
}

.a-prose :not(pre) > code {
    padding: var(--a-code-inline-pad);
    border: var(--line-width) solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--a-code-inline-size);
    color: var(--fg);
}

/* 列表：无序用蓝色短横，有序用 mono 序号 */
.a-prose ul,
.a-prose ol {
    display: grid;
    gap: var(--space-2);
    padding-left: var(--space-6);
}

.a-prose ul { list-style: none; }
.a-prose ol { list-style: decimal; }
.a-prose li > ul,
.a-prose li > ol { margin-top: var(--space-2); }

.a-prose ol > li::marker {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--fg-muted);
}

.a-prose ul > li { position: relative; }

.a-prose ul > li::before {
    content: "";
    position: absolute;
    top: var(--a-dash-top);
    left: calc(var(--space-6) * -1 + var(--space-1));
    width: var(--space-2);
    height: var(--line-width);
    background: var(--brand-blue);
}

/* 引用：左侧一条蓝线 */
.a-prose blockquote {
    margin-inline: 0;
    padding: var(--space-1) 0 var(--space-1) var(--space-6);
    border-left: var(--line-width) solid var(--brand-blue);
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    color: var(--fg);
}

.a-prose blockquote > * + * { margin-top: var(--space-3); }

.a-prose blockquote cite {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    font-style: normal;
    color: var(--fg-muted);
}

/* 代码块：浅色正文里仍保持深底细框（颜色在 :root 解析，不受浅色区块重映射） */
.a-prose pre {
    overflow-x: auto;
    padding: var(--space-5) var(--space-4);
    border: var(--line-width) solid var(--a-code-line);
    border-radius: var(--radius-md);
    background: var(--a-code-bg);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--a-code-fg);
}

.a-prose pre code {
    padding: 0;
    border: 0;
    font-size: inherit;
    color: inherit;
}

/* 图片 + 图注（含 wp-block-image / wp-caption） */
.a-prose figure,
.a-prose .wp-caption { margin-block: var(--space-10); }

.a-prose img {
    max-width: 100%;
    height: auto;
    border: var(--line-width) solid var(--line-strong);
    border-radius: var(--radius-md);
}

.a-prose figure img { width: 100%; }

.a-prose figcaption,
.a-prose .wp-caption-text {
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--fg-muted);
}

.a-prose .aligncenter { margin-inline: auto; }

/* 表格：细线；窄屏横向滚动 */
.a-prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border: var(--line-width) solid var(--line);
    border-radius: var(--radius-md);
    border-collapse: collapse;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.a-prose figure.wp-block-table table { display: table; }
.a-prose figure.wp-block-table { overflow-x: auto; }

.a-prose th,
.a-prose td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: top;
}

.a-prose th {
    border-bottom: var(--line-width) solid var(--line-strong);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    color: var(--fg);
}

.a-prose td { border-top: var(--line-width) solid var(--line); }
.a-prose tr:first-child td { border-top: 0; }

.a-prose hr {
    height: var(--line-width);
    margin-block: var(--space-12);
    border: 0;
    background: var(--line);
}

/* ---------- 正文分页（wp_link_pages） ---------- */
.a-page-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-10);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--fg-muted);
}

/* ---------- 文末：标签、复制链接、上一篇 / 下一篇 ---------- */
.a-article-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-16);
    padding-top: var(--space-6);
    border-top: var(--line-width) solid var(--line-strong);
}

.a-article-tags,
.a-share {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.a-share .a-btn.is-done {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.a-adjacent {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-10);
}

.a-adjacent__item {
    position: relative;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
    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-adjacent__item:hover {
    border-color: var(--line-strong);
    background: var(--a-surface-hover);
}

/* 只有下一篇时也放在右栏 */
.a-adjacent__item--next {
    grid-column: 2;
    text-align: right;
}

.a-adjacent__dir {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--a-tracking-wide);
    color: var(--fg-muted);
}

.a-adjacent__title {
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--fg);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1023.98px) {
    .a-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }

    .a-toc {
        position: static;
        order: -1;
        padding: var(--space-4) var(--space-5);
        border: var(--line-width) solid var(--line);
        border-radius: var(--radius-md);
    }

    .a-toc__summary { cursor: pointer; }
    .a-toc__summary::after { content: "+"; font-size: var(--fs-sm); }
    .a-toc[open] .a-toc__summary::after { content: "−"; }
    .a-article { max-width: var(--a-prose-max); }
}

@media (max-width: 768px) {
    .a-adjacent { grid-template-columns: 1fr; }

    .a-adjacent__item--next {
        grid-column: auto;
        text-align: left;
    }

    .a-share { width: 100%; }
    .a-share .a-btn { flex: 1; }
}