/* ==========================================================================
   home-hero.css · 首页 hero 版式层
   --------------------------------------------------------------------------
   范围：只作用于首页（body.airjournal-home），不碰归档/文章/留言/搜索。
   配色：全部走 airjournal.css 的 --air-* 变量，因此自动跟随浅色/深色主题，
   不引入任何独立配色；少数按钮色因两套主题语义相反，用本文件自己的
   --hero-* 局部变量在 html[data-blog-theme="dark"] 下翻转（见第 6 节）。
   加载位置：header 末尾 + footer 末尾（与既有样式表同一套做法），
   保证它在层叠最末——airjournal.css 里用 !important 藏 hero 的那几条
   必须同样用 !important 才能覆盖，其余规则都不需要。

   断点（沿用仓库既有取值）：
     ≥1025px  hero 双栏（个人介绍 | 引语、入口和数据），中间一条竖分隔线
     ≤1024px  hero 单栏，分隔线转成横向
     ≤768px   移动端：整个 hero 不显示，直接进文章列表
   ========================================================================== */

/* ---------- 1. 恢复被隐藏的 hero，并把它收成一张卡片 ----------
   airjournal.css 末尾「Follow-up polish: compact home」用
   `display:none !important` 把整块 hero 藏掉了，连同站点自述、两个 CTA、
   数据条和首屏内容一起不可见；模板里 h1/lead 也早被删空，已补回。
   同一处还留了 `min-height: 520px`，会把内容撑得四周全是空白，这里归零，
   改由卡片自身的 padding 控制高度。 */
.airjournal-home .air-hero {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 0;                       /* 栏间距改由各栏 padding + 分隔线表达 */
    align-items: stretch;
    min-height: 0;
    margin-bottom: 46px;
    padding: 0;
    border: 1px solid var(--air-line);
    border-radius: 24px;
    /* 左上角一团淡淡的主色光晕，右下收干净，避免和正文区的卡片抢视线 */
    background:
        radial-gradient(116% 148% at 0% 0%, var(--air-primary-soft), transparent 58%),
        var(--air-surface);
    box-shadow: var(--air-shadow-soft);
    overflow: hidden;
}

.airjournal-home .air-hero .air-eyebrow,
.airjournal-home .air-hero h1,
.airjournal-home .air-hero .lead {
    display: block !important;
}

/* compact home 给了 44px，hero 藏起来时是对的；现在 hero 是一张卡片，
   44px 偏大而 0 会让卡片直接贴住 header（实测 header 底边与卡片顶边都在 y=78），
   取 32px。 */
.airjournal-home .air-shell {
    padding-top: 32px !important;
}

/* ---------- 2. 两栏容器 ----------
   两栏各自垂直居中时，因为内容高度不等（左 180px、右 212px），
   起始线会差 16px、收尾线也差 16px，看上去就是左右各飘各的。
   改成顶端对齐 + 上下内边距一致，让 eyebrow 和引语落在同一条起始线上。 */
.airjournal-home .air-hero-copy {
    align-self: start;
    min-width: 0;
    padding: 52px 44px 52px 48px;
}

.airjournal-home .air-hero-details {
    position: relative;
    align-self: start;
    min-width: 0;
    padding: 52px 48px 52px 44px;
}

/* 两栏之间的竖向发丝线，两端渐隐，不做成生硬的通栏边框 */
.airjournal-home .air-hero-details::before {
    content: "";
    position: absolute;
    left: 0;
    top: 38px;
    bottom: 38px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--air-line), transparent);
}

/* ---------- 3. hero 文案 ---------- */
.airjournal-home .air-hero .air-eyebrow {
    /* 既有样式是整行胶囊底色，宽度会被拉满成一条横贯色块；收成 inline-flex */
    display: inline-flex !important;
    align-items: center;
    width: auto;
    padding: 0;
    background: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--air-primary);
}

.airjournal-home .air-hero .home-upd-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 3px 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 h1 {
    font-size: 46px;
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: .2px;
    margin: 22px 0 20px;
}

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

.airjournal-home .air-hero .lead {
    max-width: 30em;
    margin-bottom: 0;             /* 卡片 padding 已经给了底部留白 */
    font-size: 15.5px;
    line-height: 1.95;
    color: var(--air-muted);
}

/* ---------- 4. 引语：改成真正的引用块 ---------- */
.airjournal-home .air-hero .home-motto {
    position: relative;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 2px 0 2px 46px;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 15px;
    line-height: 1.85;
    color: var(--air-ink);
}

/* 左侧一个大号装饰引号，替掉原来那条渐变色块 */
.airjournal-home .air-hero .home-motto::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: -14px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 54px;
    line-height: 1;
    color: var(--air-primary);
    opacity: .34;
}

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

/* ---------- 5. 数据条：分隔线 + 表格数字 ---------- */
.airjournal-home .air-meta-row.home-meta {
    display: flex;
    gap: 0;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--air-line);
    flex-wrap: wrap;
}

/* 既有规则让每个数据项撑满一行；让它们按内容宽度排一行，项与项之间发丝线 */
.airjournal-home .air-meta-row.home-meta > div {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 0 26px;
    border-left: 1px solid var(--air-line-soft);
}

.airjournal-home .air-meta-row.home-meta > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.airjournal-home .air-meta-row.home-meta b {
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
    color: var(--air-ink);
}

/* 标签色见第 6 节的 --hero-meta-label：卡片底色比页面底色更实，
   浅色下沿用 --air-soft (#98a2b3) 只有 2.55:1，达不到 AA，故两套主题分开给。 */
.airjournal-home .air-meta-row.home-meta span {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    letter-spacing: .02em;
    color: var(--hero-meta-label);
}

/* ==========================================================================
   6. 按钮配色：两套主题语义相反，单靠 --air-* 变量翻不过来
   --------------------------------------------------------------------------
   airjournal.css 的 .air-btn / .air-btn-primary 整条都是 !important，
   且主按钮写死 `background: var(--air-ink)` + `color: #fff`。深色主题下
   --air-ink 翻成近白色 (#f3f4f6)，于是白底白字，「阅读最新文章」整个消失
   （实测对比度 1.05:1）。次按钮同理留着一块浅色底，浮在深色卡片上很突兀。
   这里用局部变量各给一套，深色下主按钮改成「白底深字」的反相胶囊。
   ========================================================================== */
.airjournal-home .air-hero {
    --hero-cta-bg: var(--air-ink);
    --hero-cta-fg: #ffffff;
    --hero-cta-shadow: 0 14px 30px rgba(21, 30, 47, .18);
    --hero-btn-bg: rgba(255, 255, 255, .72);
    --hero-btn-fg: #344054;
    --hero-meta-label: var(--air-muted);
}

html[data-blog-theme="dark"] .airjournal-home .air-hero {
    --hero-cta-bg: #eef2f8;
    --hero-cta-fg: #16203a;
    --hero-cta-shadow: 0 14px 30px rgba(0, 0, 0, .34);
    --hero-btn-bg: rgba(255, 255, 255, .06);
    --hero-btn-fg: var(--air-ink);
    --hero-meta-label: var(--air-soft);
}

.airjournal-home .air-hero .air-actions .air-btn {
    background: var(--hero-btn-bg) !important;
    color: var(--hero-btn-fg) !important;
    border-color: var(--air-line) !important;
}

.airjournal-home .air-hero .air-actions .air-btn-primary {
    background: var(--hero-cta-bg) !important;
    color: var(--hero-cta-fg) !important;
    border-color: var(--hero-cta-bg) !important;
    box-shadow: var(--hero-cta-shadow) !important;
}

/* ==========================================================================
   7. 响应式
   ========================================================================== */

@media (max-width: 1024px) {
    .airjournal-home .air-hero {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 20px;
    }

    .airjournal-home .air-hero-copy {
        padding: 40px 36px 28px;
    }

    .airjournal-home .air-hero-details {
        width: auto;
        padding: 28px 36px 40px;
    }

    /* 单栏时竖线转成横线 */
    .airjournal-home .air-hero-details::before {
        left: 36px;
        right: 36px;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--air-line), transparent);
    }

    .airjournal-home .air-hero h1 {
        font-size: 34px;
    }
}

/* 移动端隐藏整个 hero，直接进入文章列表，避免首屏看不到文章。 */
@media (max-width: 768px) {
    .airjournal-home .air-hero {
        display: none !important;
    }

    .airjournal-home .air-shell {
        padding-top: 18px !important;
    }
}