/* ============================================================
   mobile-v1.css — 移动端优化批1（2026-10-02）
   ============================================================
   纪律：
   - 除 .m-cta-bar/.tbl-* 基础结构外，一切生效样式限定 ≤768px
   - 无 backdrop-filter / 大面积阴影（低端安卓性能红线）
   - 动画只用 transform/opacity（走合成层）
   - 可点目标 ≥44px；安全区用 env() + viewport-fit=cover（header.php 已加）
   ============================================ */

/* ---------- M2 表格滑动容器（结构，全端） ---------- */
.tbl-wrap { position: relative; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tbl-scroll::-webkit-scrollbar { display: none; }
.tbl-scroll table { min-width: 100%; }
.tbl-hint { display: none; font-size: 12px; color: #8a95a3; text-align: right; margin-top: 4px; }
.swipe-mask {
    position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
    pointer-events: none; border-radius: 0 8px 8px 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 80%);
    opacity: 0; transition: opacity .3s;
}

/* ---------- M1 底部 CTA 转化条（桌面隐藏） ---------- */
.m-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    display: none; gap: 8px; align-items: stretch;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid #e5e9ef;
    box-shadow: 0 -4px 14px rgba(22, 64, 94, .10);
    transform: translateY(120%);
    transition: transform .3s ease;
}
.m-cta-bar.m-cta-on { transform: translateY(0); }
.m-cta-bar.m-cta-kb { transform: translateY(120%); } /* 键盘弹出时隐藏（安卓微信防顶起） */
.m-cta-tel {
    flex: 1.15; display: flex; align-items: center; justify-content: center;
    background: #16405e; color: #fff; font-size: 16px; font-weight: 700;
    border-radius: 10px; min-height: 44px; text-decoration: none;
    white-space: nowrap; overflow: hidden; transition: transform .1s;
}
.m-cta-go {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: #e8641b; color: #fff; font-size: 16px; font-weight: 700;
    border-radius: 10px; min-height: 44px; text-decoration: none;
    white-space: nowrap; transition: transform .1s;
}
.m-cta-tel:active, .m-cta-go:active { transform: scale(.97); }

/* ============================================================
   ≤768px 生效区
   ============================================================ */
@media (max-width: 768px) {

    /* M1 CTA 条显示 + 让出底部空间 */
    .m-cta-bar { display: flex; }
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

    /* 右下悬浮圆钮与 CTA 条功能重复 → 移动端由 CTA 条接管（桌面不变）
       !important：footer.php 在页面底部有内联 <style> 定义 .floating-consult{display:flex}，
       文档顺序在其之后会覆盖本文件的普通规则，故此处必须加 !important */
    .floating-consult { display: none !important; }

    /* 返回顶部抬到 CTA 条上方 */
    .back-to-top { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }

    /* M3 iOS 防聚焦缩放：输入类统一 ≥16px */
    input, select, textarea { font-size: 16px !important; }

    /* M4 触控：去灰色高亮块 + 按压态 */
    * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
    .btn:active { transform: scale(.98); }

    /* M5 iOS 地址栏收缩跳动修复（100vh → dvh 双写兜底） */
    .mobile-nav, .search-overlay, .modal-overlay, .page-loader {
        height: 100vh;
        height: 100dvh;
    }

    /* M2 表格：溢出时才显示渐变提示（JS 检测 is-overflow） */
    .tbl-wrap.is-overflow .swipe-mask { opacity: 1; }
    .tbl-wrap.is-overflow .swipe-mask.swiped { opacity: 0; }
    .tbl-wrap.is-overflow .tbl-hint { display: block; }
}

/* 极小屏（<360px）：电话按钮收缩为「拨打」，号码进无障碍标签 */
@media (max-width: 359px) {
    .m-cta-tel { flex: .75; }
    .m-cta-tel .m-cta-num { display: none; }
}

/* ============================================================
   首页 Hero 溢出修复（2026-10-02 真机渲染测试实锤）
   根因：基础样式用高特异性选择器 .hero-title-area .hero-title
   （white-space:nowrap + 52px），原 768px 覆盖写作低特异性
   .hero-title —— 级联打输，移动端覆盖从未生效；
   grid 轨道被 853px 不换行标题撑死，整页横向溢出 503px。
   修法：同特异性覆写（本文件加载在 style.css 之后，同分后来胜）
   ============================================================ */
@media (max-width: 768px) {
    /* 标题/描述：允许换行（选择器与基础样式同级，后来者胜） */
    .hero-title-area .hero-title { white-space: normal; font-size: 30px; line-height: 1.35; }
    .hero-title-area .hero-desc { white-space: normal; font-size: 16px; }

    /* 网格/弹性子项允许收缩（打破 min-width:auto 撑宽链） */
    .hero-inner > * { min-width: 0; }
    .hero-left { min-width: 0; }
    .hero-form-wrapper { min-width: 0; }
    .hero-data-wrap { min-width: 0; }

    /* 数据行与资质标签：允许换行（320px 不溢出） */
    .hdata-row { flex-wrap: wrap; row-gap: 10px; }
    .hero-tags-row { flex-wrap: wrap; row-gap: 8px; }

    /* 兜底：正文横向溢出一律裁剪（防未知元素再撑破） */
    body { overflow-x: hidden; }
}
