/* ============================================================================
   移动端字体规范 v11 (2026-07-09)
   适用范围: 所有详情页 (body[data-mobile-ns="detail"])
   修复:
   - 数字大字再缩 (27→22)
   - mobile grid 强制横排 (节省垂直空间)
   - 图标尺寸缩小 (mobile 不需要 32px 图标)
   - 卡片内边距缩小
   ============================================================================ */

@media (max-width: 768px) {
    /* === L1: H1 主标题 (48→32, 缩 0.67) === */
    [data-mobile-ns="detail"] h1.text-4xl,
    [data-mobile-ns="detail"] h1.text-5xl,
    [data-mobile-ns="detail"] h1.text-6xl {
        font-size: 32px !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
    }

    /* === L2: 顶部 nav 标题 (24→20, 缩 0.83) === */
    [data-mobile-ns="detail"] nav.fixed .text-lg,
    [data-mobile-ns="detail"] nav.fixed span.text-lg {
        font-size: 20px !important;
    }
    [data-mobile-ns="detail"] nav.fixed a span {
        font-size: 20px !important;
    }

    /* === L3: 章节标题 H3 (30→16, 缩 0.53) - 再缩一档 === */
    [data-mobile-ns="detail"] h3.text-3xl,
    [data-mobile-ns="detail"] h3.text-2xl,
    [data-mobile-ns="detail"] h3 {
        font-size: 16px !important;
        line-height: 1.35 !important;
        margin-bottom: 0.5rem !important;
    }

    /* === L3b: H2 (24→16, 缩 0.67) - 再缩一档 === */
    [data-mobile-ns="detail"] h2.text-3xl,
    [data-mobile-ns="detail"] h2.text-2xl,
    [data-mobile-ns="detail"] h2 {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }

    /* === L4b: H4 通用 (16→13, bold) - 再缩一档 === */
    [data-mobile-ns="detail"] h4.font-bold,
    [data-mobile-ns="detail"] h4.font-semibold,
    [data-mobile-ns="detail"] h4 {
        font-size: 13px !important;
        font-weight: 700 !important;
        margin-bottom: 0.3rem !important;
    }

    /* === L5: 正文 (16→13, 缩 0.81) - 再缩一档 === */
    [data-mobile-ns="detail"] p {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }
    [data-mobile-ns="detail"] #navMobile a,
    [data-mobile-ns="detail"] #navMobile .nav-link-mobile {
        font-size: 13px !important;
    }
    [data-mobile-ns="detail"] .number-card p {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    [data-mobile-ns="detail"] .people-card h4,
    [data-mobile-ns="detail"] h4.font-bold {
        font-size: 13px !important;
    }
    [data-mobile-ns="detail"] .audio-trigger-btn {
        font-size: 12px !important;
        padding: 7px 14px !important;
    }

    /* === L4: Hero 副 / 引导段 / Hero 主标语 (20→12, 缩 0.60) - 再缩一档 === */
    [data-mobile-ns="detail"] p.text-xl,
    [data-mobile-ns="detail"] p.text-2xl,
    [data-mobile-ns="detail"] .bg-gradient-to-r.text-white,
    [data-mobile-ns="detail"] .bg-gradient-to-r.text-white span {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    /* hero 区域内所有 p 兜底 12 */
    [data-mobile-ns="detail"] section.bg-gradient-to-br p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* === L5: 强调短句 / tip-box / 目录一级 (18→13, 缩 0.72) - 再缩一档 === */
    [data-mobile-ns="detail"] .highlight-text.text-lg,
    [data-mobile-ns="detail"] .highlight-text.text-xl,
    [data-mobile-ns="detail"] .highlight-text.text-2xl,
    [data-mobile-ns="detail"] .tip-box {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    [data-mobile-ns="detail"] .toc-link {
        font-size: 13px !important;
        padding: 0.5rem 0.7rem !important;
    }
    [data-mobile-ns="detail"] .tip-box[style*="font-size"] {
        font-size: revert !important;
    }

    /* === L7: 目录二级 (15→12, 缩 0.80) === */
    [data-mobile-ns="detail"] .toc-sub-link {
        font-size: 12px !important;
        padding: 0.4rem 0.7rem !important;
    }

    /* === L8: Hero 小徽章 / 小字 / 章号 / nav 链接 (14→11, 缩 0.79) - 再缩一档 === */
    [data-mobile-ns="detail"] .text-sm {
        font-size: 11px !important;
    }
    [data-mobile-ns="detail"] .gold-gradient span,
    [data-mobile-ns="detail"] .gold-gradient span.text-sm {
        font-size: 11px !important;
        font-weight: 700 !important;
    }
    [data-mobile-ns="detail"] nav.fixed .nav-link,
    [data-mobile-ns="detail"] nav.fixed a.text-sm {
        font-size: 11px !important;
    }
    [data-mobile-ns="detail"] section.bg-gradient-to-br .rounded-full {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    /* === L9: 超小 / 表格 (12→10, 缩 0.83) - 再缩一档 === */
    [data-mobile-ns="detail"] .text-xs {
        font-size: 10px !important;
    }

    /* === 特殊: 数字大字 (32→22, 缩 0.69) - 显著缩小, 用户看着还大 === */
    [data-mobile-ns="detail"] .number-card .num,
    [data-mobile-ns="detail"] p.text-3xl {
        font-size: 22px !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }
    /* === 特殊: p.text-2xl 大字 (24→15, 缩 0.63) - 缩小 === */
    [data-mobile-ns="detail"] p.text-2xl {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
    /* === 特殊: p.text-lg 强调 (18→13, 缩 0.72) - 缩小 === */
    [data-mobile-ns="detail"] p.text-lg {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* === 特殊: 表格 === */
    [data-mobile-ns="detail"] table {
        font-size: 11px !important;
    }
    [data-mobile-ns="detail"] td,
    [data-mobile-ns="detail"] th {
        padding: 4px 5px !important;
    }

    /* === warn-box (12→11, 略缩) === */
    [data-mobile-ns="detail"] .warn-box,
    [data-mobile-ns="detail"] .warn-box p {
        font-size: 11px !important;
        line-height: 1.55 !important;
    }

    /* ============================================================================
       布局优化: 让 mobile 也能横排, 节省垂直空间
       ============================================================================ */

    /* md:grid-cols-3 强制 3 列横排 (节省垂直空间) */
    [data-mobile-ns="detail"] .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    /* md:grid-cols-2 强制 2 列横排 */
    [data-mobile-ns="detail"] .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    /* md:grid-cols-4 强制 2 列横排 (mobile 4 列太挤) */
    [data-mobile-ns="detail"] .grid.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* 数字卡内边距缩小 (p-4 → p-2 8px) */
    [data-mobile-ns="detail"] .grid > .text-center.p-4,
    [data-mobile-ns="detail"] .grid > .p-4 {
        padding: 8px !important;
    }

    /* 图标尺寸缩小: w-8 h-8 (32px) → w-5 h-5 (20px) 在数字卡内 */
    [data-mobile-ns="detail"] .grid i.w-8.h-8,
    [data-mobile-ns="detail"] .grid i[class*="w-8"][class*="h-8"] {
        width: 20px !important;
        height: 20px !important;
        margin-bottom: 4px !important;
    }

    /* flex items-center mb-2 容器 (图标+文字一行) 缩 */
    [data-mobile-ns="detail"] .flex.items-center.mb-2 i {
        width: 16px !important;
        height: 16px !important;
    }

    /* ============================================================================
       CTA 按钮 / flex-wrap 容器: 强制单行不转行 + 缩小 padding (2026-07-09)
       关键修复: .text-center > .inline-flex { display: block } 会破坏按钮布局
       需要更具体的 selector 把按钮强制回 inline-flex
       ============================================================================ */

    /* 通用: 所有按钮、CTA 强制文字单行 */
    [data-mobile-ns="detail"] a,
    [data-mobile-ns="detail"] button,
    [data-mobile-ns="detail"] .cta-button,
    [data-mobile-ns="detail"] .hero-cta-primary,
    [data-mobile-ns="detail"] .hero-cta-secondary {
        white-space: nowrap !important;
    }

    /* 关键修复: .text-center 内的 inline-flex 按钮强制回 inline-flex
       (覆盖 .text-center > .inline-flex { display: block !important }) */
    [data-mobile-ns="detail"] .text-center a.inline-flex,
    [data-mobile-ns="detail"] .text-center a.cta-button,
    [data-mobile-ns="detail"] .text-center a.hero-cta-primary,
    [data-mobile-ns="detail"] .text-center a.hero-cta-secondary {
        display: inline-flex !important;
        align-items: center !important;
        flex-direction: row !important;
        vertical-align: middle !important;
        width: auto !important;
        max-width: fit-content !important;
    }

    /* .cta-button padding 缩 (14px/32px → 8px/16px) */
    [data-mobile-ns="detail"] .cta-button {
        padding: 8px 16px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        flex-direction: row !important;
    }

    /* 第二个按钮 inline-flex items-center px-6 py-3 缩 (24px/12px → 14px/8px) */
    [data-mobile-ns="detail"] a.inline-flex.items-center.px-6.py-3,
    [data-mobile-ns="detail"] a.inline-flex[class*="px-6"][class*="py-3"] {
        padding: 8px 14px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        flex-direction: row !important;
    }
    /* 同款按钮的图标缩小 + 不允许 wrap */
    [data-mobile-ns="detail"] a.inline-flex.items-center i.w-5.h-5 {
        width: 16px !important;
        height: 16px !important;
        margin-right: 6px !important;
        flex-shrink: 0 !important;
    }
    /* 按钮内的 i 元素全部不缩 (避免 icon 被挤到下一行) */
    [data-mobile-ns="detail"] a.inline-flex > i {
        flex-shrink: 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* CTA 卡片底部 "10 年行业经验 · 1000+ 家庭服务 · 客观中立推荐" 横排防止溢出 */
    [data-mobile-ns="detail"] .flex.flex-wrap.justify-center.gap-4 {
        gap: 8px !important;
    }

    /* ============================================================================
       Hero pill badge 适配 (2026-07-09): 详情页 hero 顶部圆角胶囊
       根因: .text-center > .inline-flex { display: block } 把 pill 拉成全宽 banner
       修法: white-list 让 .text-center > .rounded-full 强制回 inline-flex + max-width
       ============================================================================ */
    [data-mobile-ns="detail"] .text-center > div.rounded-full,
    [data-mobile-ns="detail"] .text-center > div[class*="rounded-full"] {
        display: inline-flex !important;
        align-items: center !important;
        flex-direction: row !important;
        width: auto !important;
        max-width: max-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
        white-space: nowrap !important;
    }
    [data-mobile-ns="detail"] .text-center > div.rounded-full > i,
    [data-mobile-ns="detail"] .text-center > div[class*="rounded-full"] > i {
        flex-shrink: 0 !important;
        display: inline-block !important;
    }
}