/* ============================================================
   public/assets/css/guide/index.css · 攻略列表页（/guide/）专用样式
   iOS 清爽风（App Store 观感）：「Today」式左对齐大标题 / 白底
   大圆角文章卡片栅格（hover 浮起）/ 胶囊页码分页 / 顶部淡蓝氛围渐变

   · 复用 site.css 的设计变量（--surface / --radius / --chip / --shadow-* 等）
   · 由 head.php 的 $page['styles'] 机制引入（'guide/index'），排在
     site.css 之后，因此本文件内对 body 的规则属于「攻略列表页
     页面级覆盖」，site.css 一字未改
   · 文章卡片整卡可点（<a>），圆角 / 阴影 / hover 浮起的取值对齐
     首页 .channel-card，全站卡片观感统一
   · 分页条（.pager-*）取值对齐顶部胶囊导航 .pill，当前页 = 实心蓝
   · 响应式：≤575 手机（单列卡片）→ ≥768 平板/桌面双列
     → ≥1100 由 .container 封顶居中，间距字号全程 clamp() 流式缩放
   ============================================================ */

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

/* ------------------------------------------------------------
   ② 页面骨架与页头：App Store「Today」式左对齐大标题 + 灰副文案
   ------------------------------------------------------------ */
.guide-page{padding-block:clamp(28px,6vw,60px)}
.guide-head{margin-bottom:clamp(20px,4vw,34px)}
.guide-h1{
    margin:0 0 .35rem;
    font-size:clamp(1.6rem,4.6vw,2.3rem);
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.25;
}
.guide-sub{margin:0;max-width:46ch;color:var(--ink-soft)}

/* ------------------------------------------------------------
   ③ 文章卡片栅格：手机单列 → ≥768px 双列；grid 拉伸让卡片天然等高
   ------------------------------------------------------------ */
.guide-list{
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(14px,2.5vw,22px);
    align-items:stretch;
}
@media (min-width:768px){
    .guide-list{grid-template-columns:repeat(2,1fr)}
}

/* 整卡是一个 <a>：白底大圆角 + 柔和阴影 + hover 浮起（同 .channel-card 手感） */
.guide-card{
    display:flex;
    flex-direction:column;
    gap:.5rem;
    height:100%;
    padding:clamp(18px,3vw,26px);
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
    color:var(--ink);                 /* 覆盖 a 的链接蓝，整卡按正文色排版 */
    transition:box-shadow .22s ease,transform .22s ease;
}
.guide-card:hover{text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.guide-card:active{transform:translateY(-1px)}
.guide-card:focus-visible{outline:2px solid var(--primary-ink);outline-offset:2px}

.guide-card-title{
    margin:0;
    font-size:clamp(1.08rem,2.4vw,1.2rem);
    font-weight:800;
    letter-spacing:-.01em;
    line-height:1.45;
}

/* 置顶徽章：标题行内的小号淡蓝胶囊；meta.php 的 pinned > 0 时由 PHP 渲染。
   随标题文字自然换行排版，长标题折行时不破坏布局 */
.guide-card-pin{
    display:inline-block;
    margin-right:.5rem;
    padding:.12rem .6rem;
    border-radius:var(--radius-pill);
    background:rgba(47,107,255,.12);
    color:var(--primary-ink);
    font-size:.78rem;
    font-weight:700;
    line-height:1.5;
    white-space:nowrap;
    vertical-align:.12em;             /* 在加粗大标题旁略微上提，视觉居中 */
}

/* 摘要最多 2 行、超出省略，双列时各卡高度整齐不参差 */
.guide-card-desc{
    margin:0;
    color:var(--ink-soft);
    font-size:.95rem;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* 底部信息行：日期 + 「阅读全文」；margin-top:auto 吸到卡片底部，
   行上加 iOS 发丝分隔线 */
.guide-card-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.8rem;
    margin:auto 0 0;
    padding-top:.7rem;
    border-top:1px solid var(--line);
    font-size:.85rem;
    color:var(--ink-faint);
}
.guide-card-more{flex:0 0 auto;color:var(--primary-ink);font-weight:700}

/* ------------------------------------------------------------
   ④ 分页：胶囊页码（同 .pill 观感），当前页 = 实心蓝胶囊；
   省略号用纯文本占位；只有一页时 PHP 不渲染本区块
   ------------------------------------------------------------ */
.pager{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:clamp(28px,5vw,44px);
}
.pager-link,
.pager-current{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    min-height:38px;
    padding:0 .75rem;
    border-radius:var(--radius-pill);
    font-size:.92rem;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
}
.pager-link{
    background:var(--chip);
    color:var(--ink-soft);
    transition:background .18s ease,color .18s ease,transform .12s ease;
}
.pager-link:hover{background:var(--chip-hover);color:var(--ink);text-decoration:none}
.pager-link:active{transform:scale(.96)}
.pager-link:focus-visible{outline:2px solid var(--primary-ink);outline-offset:2px}
.pager-current{background:var(--primary);color:#fff}
.pager-gap{padding:0 .1rem;color:var(--ink-faint);user-select:none;-webkit-user-select:none}

/* ------------------------------------------------------------
   ⑤ 空状态：guide 下还没有任何 meta.php 时的兜底卡片
   ------------------------------------------------------------ */
.guide-empty{
    margin:0;
    padding:clamp(28px,6vw,44px);
    text-align:center;
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    color:var(--ink-soft);
}

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