/* ==========================================================================
   paper-layout.css · 暖纸刊物主题「版式层」
   --------------------------------------------------------------------------
   与 paper-theme.css 的分工（两者互补，不重复）：
     · paper-theme.css  = 颜色 / 质感 / 字体族
     · paper-layout.css = 栅格 / 间距 / 字阶 / 响应式断点 / 版式原语
   只服务五个前台页面：首页、归档、文章详情、留言、搜索。
   加载位置：header 最末（在 airjournal.css、blog-responsive.css、
   paper-theme.css 之后），因此这里基本不需要 !important；
   只有覆盖既有 !important 声明时才使用，并在该处注明原因。

   统一断点（沿用仓库中已占多数的取值，避免再造一套）：
     ≥1025px  桌面：主栏 + 336px 侧栏
     ≤1024px  平板：导航切汉堡菜单，侧栏落到主栏下方
     ≤768px   手机
     ≤480px   小屏手机
   ========================================================================== */

:root {
    /* ---- 栅格：对齐原型 1200 / 336 / 48 ---- */
    --air-max: 1200px;
    --air-sidebar: 336px;
    --air-gap: 48px;

    /* ---- 字阶（原型取值，px 以对齐 semantic-subset 的 html{font-size:14px}）---- */
    --paper-fs-display: 44px;   /* 首页 hero h1 */
    --paper-fs-title: 38px;     /* 归档 / 留言 页面主标题 */
    --paper-fs-h2: 25px;        /* 区块标题 */
    --paper-fs-card: 16.5px;    /* 侧栏卡片标题 */
    --paper-fs-body: 15.5px;    /* 正文 */
    --paper-fs-xs: 12px;

    /* ---- 间距节奏 ---- */
    --paper-sp-page: 54px;      /* 页头上留白 */
    --paper-sp-block: 26px;     /* 区块间距 */
}

/* ==========================================================================
   1. 版式原语
   ========================================================================== */

/* 1.1 侧栏卡片标题的焦糖橙竖条（原型贯穿五页的签名元素） */
.airjournal-page .air-side-card > h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--paper-fs-card);
    font-weight: 700;
}

.airjournal-page .air-side-card > h3::before {
    content: "";
    flex: none;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--air-primary);
}

/* 1.2 区块标题（主栏）：更重的竖条 + 英文副标 + 右侧入口 */
.airjournal-page .paper-section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: var(--paper-sp-block);
}

.airjournal-page .paper-section-head > h2 {
    position: relative;
    padding-left: 16px;
    font-size: var(--paper-fs-h2);
    font-weight: 700;
    letter-spacing: .5px;
}

.airjournal-page .paper-section-head > h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 20px;
    border-radius: 3px;
    background: var(--air-primary);
}

.airjournal-page .paper-section-head .paper-section-en {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .26em;
    color: var(--air-soft);
}

.airjournal-page .paper-section-head .paper-section-more {
    margin-left: auto;
    font-size: 13px;
    color: var(--air-muted);
    /* 不要过渡 color：它的值取自 --air-muted，Chrome 会在切主题后把计算值
       冻在旧主题的颜色上。实测加了 transition 后切到暗色仍停在
       rgb(107,98,88)，去掉即刻正常。同一问题见 blog-music-player.css。 */
}

.airjournal-page .paper-section-head .paper-section-more:hover,
.airjournal-page .paper-section-head .paper-section-more:focus-visible {
    color: var(--air-primary);
}

/* 1.3 表格数字：日期、计数、阅读量统一使用，多行之间纵向对齐。
   这里只声明 font-variant-numeric，不改 font-family——blog-fonts.css 已经
   用 `html body time{font-family:var(--blog-font-title)!important}` 把 <time>
   钉成站点标题字体（Inter）。若只给 span 换等宽，同一行里日期是 Inter、
   阅读量是 JetBrains Mono，反而更不统一；Inter 的表格数字已能对齐。 */
.airjournal-page .paper-num {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   2. 修复：桌面宽度下移动端菜单的 <ul> 外泄到页头
   --------------------------------------------------------------------------
   成因（三处叠加）：
     a) .navbar-mobile-menu 在 >1024px 没有隐藏规则，仍是 display:block；
     b) header.html 的 JS 用 clip:rect(...) 收起列表，但该 <ul> 是
        position:static，clip 对非绝对定位元素无效；
     c) blog-responsive.css 的 `.navbar-mobile-menu ul{overflow-y:auto!important}`
        优先级高于 JS 写的行内 overflow:hidden，于是唯一生效的只剩
        transform:translate(120px,0) —— 只是把列表右移，并没有藏起来。
   处理：桌面宽度直接隐藏整个汉堡菜单（≤1024px 的既有规则不受影响）；
   同时把收起态的列表改为真正不可见且不可聚焦，键盘用户不会 Tab 进隐藏菜单。
   ========================================================================== */

@media (min-width: 1025px) {
    .navbar-mobile-menu {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    /* 收起态：JS 只写行内 transform/clip，这里补上真正的隐藏与不可聚焦 */
    .navbar-mobile-menu:not(.is-open) ul {
        visibility: hidden;
        pointer-events: none;
    }

    .navbar-mobile-menu.is-open ul {
        visibility: visible;
        pointer-events: auto;
    }
}

/* ==========================================================================
   3. 首页
   --------------------------------------------------------------------------
   airjournal.css 末尾的「Follow-up polish: compact home」用
   `display:none !important` 整块隐藏了 .airjournal-home .air-hero，
   连同站点自述、两个 CTA、数据条和「正在做」卡片一起没了。
   原型的首页是 hero 主导的，这里把它恢复出来并按原型排版。
   （覆盖既有 !important，必须同样用 !important。）
   ========================================================================== */

.airjournal-home .air-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 56px;
    align-items: center;
    min-height: 0;
    padding: 60px 0 56px;
}

/* 同上：被 !important 逐条隐藏的 hero 文案 */
.airjournal-home .air-hero .air-eyebrow,
.airjournal-home .air-hero h1,
.airjournal-home .air-hero .lead {
    display: block !important;
}

.airjournal-home .air-hero h1 {
    font-size: var(--paper-fs-display);
    font-weight: 900;
    line-height: 1.24;
    letter-spacing: .2px;
    margin: 18px 0 16px;
}

.airjournal-home .air-hero .air-eyebrow {
    /* 原型的 kicker 是纯文字；既有样式是整行胶囊底色，宽度会被拉满，
       这里收成 inline-flex 并去掉底色，避免出现一条横贯的色块。 */
    display: inline-flex !important;
    align-items: center;
    width: auto;
    padding: 0;
    background: none;
    font-size: var(--paper-fs-xs);
    font-weight: 600;
    letter-spacing: .24em;
    color: var(--air-primary);
}

.airjournal-home .air-hero .lead {
    font-size: var(--paper-fs-body);
    line-height: 1.9;
    color: var(--air-muted);
    max-width: 520px;
}

.airjournal-home .air-hero .air-actions {
    display: flex;
    gap: 14px;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* 数据条：虚线分隔 + 等宽数字（原型） */
.airjournal-home .air-meta-row.home-meta {
    display: flex;
    gap: 34px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px dashed var(--air-line);
    flex-wrap: wrap;
}

/* 既有规则让每个数据项撑满一行，窄屏会被拉成三行；这里让它们按内容宽度排一行 */
.airjournal-home .air-meta-row.home-meta > div {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

.airjournal-home .air-shell {
    padding-top: 0 !important;  /* 覆盖 compact home 留下的 44px 顶部补偿 */
}

/* hero 文案：kicker 徽标、标题句点、格言（原型元素，模板中已补回） */
.airjournal-home .air-hero .home-upd-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 99px;
    background: var(--air-primary-soft);
    color: var(--air-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    vertical-align: middle;
}

.airjournal-home .air-hero .air-dot {
    color: var(--air-primary);
}

.airjournal-home .air-hero .home-motto {
    width: fit-content;
    max-width: 100%;
    margin-top: 20px;
    padding: 10px 16px;
    border-left: 3px solid var(--air-primary);
    border-radius: 0 10px 10px 0;
    background: linear-gradient(90deg, var(--air-primary-soft), transparent);
    font-family: var(--paper-serif);
    font-size: 15px;
    color: var(--air-ink);
}

/* 数据条的数字用等宽，避免计数跳动时宽度抖 */
.airjournal-home .air-meta-row.home-meta b {
    font-family: var(--paper-serif);
    font-size: 25px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--air-ink);
}

.airjournal-home .air-meta-row.home-meta span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--air-soft);
}

/* ==========================================================================
   4. 统一栅格：主栏 + 336px 侧栏
   ========================================================================== */

.airjournal-page .air-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--air-sidebar);
    gap: var(--air-gap);
    align-items: start;
}

@media (max-width: 1024px) {
    .airjournal-page .air-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .airjournal-home .air-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 40px 0 36px;
    }
}

@media (max-width: 768px) {
    :root {
        --paper-fs-display: 30px;
        --paper-fs-title: 27px;
        --paper-fs-h2: 21px;
        --paper-fs-body: 15px;
        --paper-sp-page: 32px;
        --paper-sp-block: 20px;
    }

    .airjournal-home .air-hero {
        padding: 28px 0 24px;
    }

    .airjournal-home .air-meta-row.home-meta {
        gap: 22px;
        margin-top: 24px;
        padding-top: 18px;
    }

    /* 触控目标：CTA 与分页按钮不小于 44px */
    .airjournal-page .air-btn,
    .airjournal-page .air-page-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    :root {
        --paper-fs-display: 26px;
        --paper-fs-title: 24px;
    }

    .airjournal-home .air-hero .air-actions > .air-btn {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   5. 归档页
   --------------------------------------------------------------------------
   保留既有的 details/summary 年份手风琴 + 时间轴结构，只按原型强化层级：
   年份更重、日期与浏览量用等宽数字对齐、条目之间补虚线分隔。
   ========================================================================== */

/* 5.1 年份：原型用 2px 实线把「年」与下面的月份分开 */
.airjournal-archives .archive-index-year-summary {
    border-bottom: 2px solid var(--air-ink);
}

.airjournal-archives .archive-index-year-title strong {
    font-size: 27px;
    font-weight: 900;
    letter-spacing: 1px;
}

.airjournal-archives .archive-index-year-count {
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: var(--air-soft);
}

/* 5.2 条目：标题是主内容，应当用正文墨色而不是次级灰 */
.airjournal-archives .archive-index-entry-title {
    color: var(--air-ink);
}

.airjournal-archives .archive-index-entry:hover .archive-index-entry-title,
.airjournal-archives .archive-index-entry:focus-visible .archive-index-entry-title {
    color: var(--air-primary);
}

/* 5.3 日期与浏览量：表格数字，多行之间纵向对齐（字体族沿用站点字体系统） */
.airjournal-archives .archive-index-entry time,
.airjournal-archives .archive-index-entry-views {
    font-variant-numeric: tabular-nums;
}

/* 5.4 条目之间的虚线分隔，长列表更好扫读；最后一条不画线 */
.airjournal-archives .archive-index-entry {
    border-bottom: 1px dashed var(--air-line);
}

.airjournal-archives .archive-index-entry:last-child {
    border-bottom: 0;
}

@media (max-width: 768px) {
    .airjournal-archives .archive-index-year-title strong {
        font-size: 22px;
    }

    /* 窄屏：条目本身是 grid（archives.css 里是 `48px 220px`），
       标题被关在 220px 的列里只能显示几个字并省略号截断。
       这里改成两行网格：第一行日期 + 浏览量，第二行标题整行铺满并允许换行。 */
    .airjournal-archives .archive-index-entry {
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        row-gap: 4px;
        padding-top: 11px;
        padding-bottom: 11px;
        min-height: 44px;
    }

    .airjournal-archives .archive-index-entry time {
        grid-column: 1;
        grid-row: 1;
    }

    .airjournal-archives .archive-index-entry-views {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .airjournal-archives .archive-index-entry-title {
        grid-column: 1 / -1;
        grid-row: 2;
        /* 放开 archives.css 的单行省略，窄屏允许折行读完整标题 */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.6;
    }
}

/* ==========================================================================
   6. 搜索 / 分类 / 标签页（三者共用 page-category 模板）
   --------------------------------------------------------------------------
   原型的搜索页是「kicker + 大标题 + 说明 + 结果数」的居中页头。
   结果数原先没有展示，模板里已补上，这里负责排版。
   ========================================================================== */

.airjournal-category .cat-hero-kicker {
    display: inline-block;
    font-size: var(--paper-fs-xs);
    font-weight: 600;
    letter-spacing: .24em;
    color: var(--air-primary);
    margin-bottom: 10px;
}

.airjournal-category .cat-hero-title {
    font-size: var(--paper-fs-title);
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1.3;
    /* 超长关键词不撑破页头 */
    overflow-wrap: anywhere;
}

.airjournal-category .cat-hero-sub {
    font-size: 14px;
    color: var(--air-muted);
}

.airjournal-category .cat-hero-count {
    margin-top: 10px;
    font-size: 13px;
    color: var(--air-soft);
}

.airjournal-category .cat-hero-count b {
    color: var(--air-primary);
    font-weight: 700;
}

/* 关键词高亮：与正文区分但不刺眼 */
.airjournal-category .cat-card-title em,
.airjournal-category .cat-card-desc em,
.airjournal-category mark {
    background: var(--air-primary-soft);
    color: var(--air-primary);
    font-style: normal;
    font-weight: 600;
    border-radius: 3px;
    padding: 0 2px;
}

@media (max-width: 768px) {
    .airjournal-category .cat-hero-title {
        font-size: var(--paper-fs-title);
    }

    /* 触控：分页按钮够大 */
    .airjournal-category .cat-page-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ==========================================================================
   7. 文章详情页
   --------------------------------------------------------------------------
   正文的容器、目录、上下篇、评论等组件结构不动，只调阅读节奏：
   行距、标题层级、引用与行内代码的可辨识度。
   表格已由 .responsive-table 负责横向滚动，pre 已有 overflow-x:auto，
   图片已有 max-width:100%，这里不再重复处理。
   ========================================================================== */

/* 7.1 行距：中文长文 1.72 偏挤，原型用 2.0；取 1.9 兼顾信息密度。
   line-height:1.72 在 airjournal / blog-responsive / pinghsu-post-head /
   pinghsu-post-body 四个文件里都写了 !important，这里只能同样用 !important。 */
body.airjournal-article .post-content {
    line-height: 1.9 !important;
}

/* 注：原型的正文标题是 Noto Serif SC 衬线体。本站没有自托管该字体，
   且 blog-fonts.css 的 `html body h1..h6{font-family:var(--blog-font-title)!important}`
   已把标题钉死为 Inter。若改成 serif，Mac 落到 Songti、Windows 落回正文黑体，
   同一页在不同系统观感不一致，反而更糟，因此标题保持 Inter，不采用原型这一项。 */

.airjournal-article .post-content h2 {
    padding-left: 14px;
    border-left: 4px solid var(--air-primary);
    line-height: 1.5;
}

/* 7.3 引用：既有样式有圆角和底色却没有左边线，补上原型的强调边 */
.airjournal-article .post-content blockquote {
    border-left: 4px solid var(--air-primary);
}

/* 7.4 行内代码：原先只换了字体，与正文几乎分不开，补一层浅底与描边 */
.airjournal-article .post-content :not(pre) > code {
    padding: .12em .4em;
    border: 1px solid var(--air-line);
    border-radius: 4px;
    background: var(--air-surface-soft);
    font-size: .92em;
}

@media (max-width: 768px) {
    body.airjournal-article .post-content {
        line-height: 1.85 !important;
    }

    .airjournal-article .post-content h2 {
        padding-left: 10px;
        border-left-width: 3px;
    }
}

/* ==========================================================================
   8. 留言页（/links、/about）
   --------------------------------------------------------------------------
   与首页 hero 同样的问题：airjournal.css 用 `display:none !important`
   把整个页头（About & Guestbook 标题 + 留言数统计）藏了起来，
   页面一上来就是正文，没有标题也没有层级。这里按原型的 gb-head 恢复。
   表单、表情面板、评论列表、分页等组件结构与逻辑均不改动。
   ========================================================================== */

.airjournal-about .air-about-shell {
    display: block !important;
    padding-top: var(--paper-sp-page);
}

.airjournal-about .air-page-head.air-about-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    width: min(var(--air-max), calc(100% - 56px));
    margin: 0 auto;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--air-line);
}

.airjournal-about .air-about-head .air-eyebrow {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 0;
    background: none;
    font-size: var(--paper-fs-xs);
    font-weight: 600;
    letter-spacing: .24em;
    color: var(--air-primary);
}

.airjournal-about .air-about-head h1 {
    margin: 12px 0 10px;
    font-size: var(--paper-fs-title);
    font-weight: 900;
    letter-spacing: 1px;
}

.airjournal-about .air-about-head > div:first-child > p {
    max-width: 560px;
    font-size: 14px;
    line-height: 1.85;
    color: var(--air-muted);
}

/* 统计块：等宽数字，和归档/搜索页的数字风格一致 */
.airjournal-about .air-about-head .air-stat-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.airjournal-about .air-about-head .air-stat b {
    display: block;
    font-size: 25px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--air-ink);
}

.airjournal-about .air-about-head .air-stat span {
    font-size: 12.5px;
    color: var(--air-soft);
}

@media (max-width: 768px) {
    .airjournal-about .air-page-head.air-about-head {
        width: calc(100% - 32px);
        align-items: flex-start;
        gap: 18px;
    }

    .airjournal-about .air-about-head .air-stat-grid {
        gap: 22px;
    }

    .airjournal-about .air-about-head .air-stat b {
        font-size: 21px;
    }
}