/* ==========================================================================
   手机端专用样式层  mobile.css
   --------------------------------------------------------------------------
   加载方式：<link rel="stylesheet" href="/assets/css/mobile.css"
                    media="(max-width: 760px)">
   · 桌面端（>760px）**根本不会下载也不会应用**这个文件 —— 桌面视觉定稿不改。
   · style.css 保持原样不动，本文件只做"手机端覆盖"。
   · 设计目标（针对手机重做的两点核心）：
       1) 导航不再藏进右上角汉堡菜单 → 改为常驻「底部标签栏」
       2) 竖向长列表/超长堆叠 → 改为紧凑卡片，压缩页面长度
   ========================================================================== */

@media (max-width: 760px) {

  /* ======================================================================
     1. 底部标签栏：常驻可见的操作入口
     ====================================================================== */
  body .mtabbar {
    display: flex !important;      /* 标签栏带内联 display:none，须用 !important 覆盖 */
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 86;                   /* 高于抽屉(85)，抽屉打开时仍可点"更多"收起 */
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(251, 248, 243, .97);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(23, 21, 15, .07);
  }
  body .mtabbar > a,
  body .mtabbar > button {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px; padding: 0;
    border: 0; background: none;
    font-size: .63rem; font-weight: 600; letter-spacing: .02em;
    color: var(--ink-3); text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s var(--ease);
  }
  body .mtabbar svg { width: 20px; height: 20px; display: block; }
  body .mtabbar > a.active,
  body .mtabbar > button.active { color: var(--rust); }
  body .mtabbar > a:active,
  body .mtabbar > button:active { color: var(--rust); }

  /* 给底栏让出高度，避免最后一段内容被盖住 */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  /* 抽屉底部让出底栏，别把"更多"压住 */
  .drawer { inset: var(--nav-h) 0 calc(56px + env(safe-area-inset-bottom, 0px)) 0; }

  /* ======================================================================
     2. 顶栏：补一个紧凑的主 CTA；汉堡与浮动 CTA 让位给底栏
     ====================================================================== */
  .burger { display: none !important; }
  .float-cta { display: none !important; }
  .topbar-inner { gap: 12px; }
  .topbar .btn-sm {
    display: inline-flex;
    height: 36px; padding: 0 15px; font-size: .8rem;
    margin-left: auto; white-space: nowrap;
  }

  /* ======================================================================
     3. 05 / 工作方式：8 步竖排长列表（1400px+）→ 双列步骤卡（约 450px）
     ====================================================================== */
  #how .flow {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    border-top: 0 !important;      /* 原为行内样式，必须 !important */
    border-bottom: 0 !important;
  }
  #how .flow-step {
    padding: 13px 12px 14px !important;
    border: 1px solid rgba(251, 248, 243, .16);
    border-radius: 12px;
    background: rgba(251, 248, 243, .045);
    text-align: left !important;
  }
  #how .flow-step::before,
  #how .flow-step::after { display: none !important; }
  #how .flow-no { display: block; margin-bottom: 5px; font-size: .6rem; letter-spacing: .12em; }
  #how .flow-step b { display: block; font-size: .92rem; line-height: 1.4; }
  #how .flow-step span.d { display: block; margin-top: 4px; font-size: .68rem; line-height: 1.55; }

  /* ======================================================================
     4. 执行资源分类卡：单列超长堆叠（2500px+）→ 双列紧凑卡
     ====================================================================== */
  #resource-preview .card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  #resource-preview .cat { padding: 16px 14px 14px; }
  #resource-preview .cat-ico { width: 32px; height: 32px; border-radius: 7px; margin-bottom: 10px; }
  #resource-preview .cat-ico svg { width: 17px; height: 17px; }
  #resource-preview .cat h4 { font-size: .92rem; margin-bottom: 8px; }
  #resource-preview .cat li { font-size: .74rem; line-height: 1.75; }
  #resource-preview .cat .go { margin-top: 10px; font-size: .72rem; opacity: 1; }

  /* ======================================================================
     5. 观点卡：压掉封面高度，减少空占位
     ====================================================================== */
  .post-cover { aspect-ratio: 21 / 9; }
  .post-body { padding: 18px 18px 20px; }
  .post h4 { font-size: .98rem; margin-bottom: 9px; }
  .post-meta { margin-top: 12px; }
}