/* ============================================================
   public/assets/css/guide/article.css · 攻略文章页通用样式（guide/ 下各文章目录共用）
   iOS 清爽风（App Store 观感）：白底大圆角「纸张」式正文卡片 /
   实心蓝胶囊主按钮 / 「获取」式浅灰胶囊副按钮 / 顶部淡蓝氛围渐变

   · guide/ 下所有文章目录共用本文件（$page['styles'] = ['guide/article']）
   · 复用 site.css 的设计变量与 .prose 排版（h2/h3/p/ul 沿用站点级），
     本文件只补：纸张卡片、H1 与日期行、正文小节节奏、CTA、返回链接
   · 覆盖项（均为页面级覆盖，site.css 一字未改）：
     - body 背景：纯色 → 顶部淡蓝渐变
     - .prose 的 max-width：820px → 760px（中文长文行长更舒适）
     - .prose h2 的上间距：site.css 无上间距 → 小节标题前留呼吸感
   · .btn / .btn-primary / .btn-tint 取值与首页及两个安装页完全一致，
     保证全站按钮观感统一（页面级 CSS 只随各自页面加载，故本页自带一份）；
     .btn-tint 即全站用来替代旧 Bootstrap .btn-outline-primary 的浅灰胶囊
   · 响应式：≤575 手机（CTA 两枚按钮通栏）→ ≥768 平板/桌面
     → 正文 760px 封顶居中，内边距字号全程 clamp() 流式缩放
   ============================================================ */

/* ------------------------------------------------------------
   ① 按钮体系（自实现，取值与 home.css / install-*.css 完全一致）
   文章 CTA：主按钮「免费通道安装」实心蓝胶囊；
   副按钮「付费通道安装」App Store「获取」式浅灰胶囊 + 蓝字
   ------------------------------------------------------------ */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;                  /* iOS 推荐最小可点区域 */
    padding:.6rem 1.5rem;
    border:0;
    border-radius:var(--radius-pill); /* 胶囊 */
    font:inherit;
    font-size:1rem;
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
    transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.97)}     /* iOS 按压回缩 */
.btn:focus-visible{outline:2px solid var(--primary-ink);outline-offset:2px}

/* 主按钮：实心蓝胶囊（App Store 蓝色 CTA） */
.btn-primary{
    background:var(--primary);
    color:#fff;
}
.btn-primary:hover{background:var(--primary-ink);color:#fff}

/* 副按钮：App Store「获取」式浅灰胶囊 + 蓝字 */
.btn-tint{
    background:var(--chip);
    color:var(--primary-ink);
}
.btn-tint:hover{background:var(--chip-hover);color:var(--primary-ink)}

/* ------------------------------------------------------------
   ② 页面顶部氛围：淡蓝 → 页面底色 的纵向渐变（与首页/安装页同款）
   覆盖项：body 的 background（site.css 为 var(--bg) 纯色；
   极老的浏览器不识别渐变会整条失效，自动退回 site.css 的纯色）
   ------------------------------------------------------------ */
body{background:linear-gradient(180deg,#eaf1ff 0%,var(--bg) 420px)}

/* ------------------------------------------------------------
   ③ 页面骨架与面包屑
   --article-maxw 统一控制面包屑 / 纸张 / 返回链接三者的栏宽，
   .prose 的 820px 在此被覆盖为 760px（中文长文行长更舒适）
   ------------------------------------------------------------ */
.article-page{--article-maxw:760px;padding-block:clamp(20px,5vw,48px)}
.article-page .prose{max-width:var(--article-maxw)}

/* 面包屑与正文同宽左对齐；文章名过长时单行省略（iOS 导航栏式截断） */
.article-page .breadcrumb-nav{
    max-width:var(--article-maxw);
    margin:0 auto 1rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ------------------------------------------------------------
   ④ 「纸张」卡片：白底大圆角 + 柔和阴影，正文铺在卡片上
   （max-width 由 .prose 提供，这里负责居中、内边距与卡片质感）
   ------------------------------------------------------------ */
.article-sheet{
    margin-inline:auto;
    padding:clamp(20px,4.5vw,44px) clamp(18px,4.5vw,48px);
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
}
.article-sheet>:last-child{margin-bottom:0}

/* ------------------------------------------------------------
   ⑤ 文章标题与日期行：大标题紧排 + 灰色日期 + iOS 发丝分隔线
   ------------------------------------------------------------ */
.article-h1{
    margin:0 0 .45rem;
    font-size:clamp(1.45rem,4vw,2rem);
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.35;
}
.article-meta{
    margin:0 0 1.5rem;
    padding-bottom:1.1rem;
    border-bottom:1px solid var(--line);
    color:var(--ink-faint);
    font-size:.88rem;
}

/* ------------------------------------------------------------
   ⑥ 正文节奏：小节标题前留出呼吸感
   覆盖项：.prose h2 的 margin-top（site.css 为 margin:0 0 1rem）
   ------------------------------------------------------------ */
.article-sheet h2{margin-top:clamp(1.7rem,4vw,2.3rem)}

/* ------------------------------------------------------------
   ⑦ 底部 CTA：两枚胶囊按钮横排，与正文之间留出段落距
   ------------------------------------------------------------ */
.article-cta{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
    margin:1.6rem 0 0;
}

/* ------------------------------------------------------------
   ⑧ 返回攻略列表：纸张卡片下方的低调灰色入口
   ------------------------------------------------------------ */
.article-back{max-width:var(--article-maxw);margin:1.2rem auto 0;font-size:.95rem}
.article-back a{color:var(--ink-soft);font-weight:600}
.article-back a:hover{color:var(--primary-ink);text-decoration:none}

/* ------------------------------------------------------------
   ⑨ 响应式微调（站点级断点 site.css 已处理，这里只补页面细节）
   ≤575：CTA 两枚按钮通栏，主次靠颜色区分（与 Hero / 安装页一致）
   ------------------------------------------------------------ */
@media (max-width:575px){
    .article-cta .btn{width:100%}
}

/* ------------------------------------------------------------
   ⑩ 降级：不支持 backdrop-filter 的老浏览器，吸顶导航退回近实色
   （这条兜底各页面级 CSS 都自带一份，本页同款）
   ------------------------------------------------------------ */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .site-header{background:rgba(255,255,255,.96)}
}