/* ============================================================
   mobile.css · Lulin Power 移动端优化补丁
   适用：92.8% 移动端流量 + Google Ads 转化优化
   设计原则：
   - 触摸目标 ≥44x44（iOS HIG / WCAG 2.5.5）
   - 正文 16px 防 iOS 自动缩放
   - Sticky bottom CTA + WhatsApp 浮动 提升 Ads 转化
   - 不动 style.css 既有规则，本文件全部为"追加/覆盖"
   引入方式：<link rel="stylesheet" href="css/mobile.css" />
            （位于 style.css 之后以保证覆盖）
   ============================================================ */

/* ===== 1. 全局基础（移动端 + 桌面端都生效，但只放大不影响桌面） ===== */
html, body { -webkit-text-size-adjust: 100%; }
body { font-size: 16px; line-height: 1.6; }
img, video, svg { max-width: 100%; height: auto; }
input, select, textarea, button { font-size: 16px; font-family: inherit; }
input, select, textarea { line-height: 1.5; }
a { -webkit-tap-highlight-color: rgba(15,118,110,.18); }

/* 防止 iOS 横滑溢出（由 transform/grid/fixed 宽度算错导致）
   注意：.container / .hero-inner 有设计限宽（1200px / 880px），
   这里的 max-width:100% 会覆盖掉限宽、导致桌面端内容拉满屏幕，
   因此只给它们加溢出保护、不覆盖 max-width。 */
body, .wrap, main, .page, .layout, .row, .grid {
  overflow-x: hidden; max-width: 100%;
}
.container, .hero-inner { overflow-x: clip; }

/* ===== 2. 触摸目标升级（移动端） ===== */
@media (max-width: 980px) {
  .btn, button.btn, a.btn, button[type="submit"], .pager a, .more, .vf-ext,
  .nav a, .nav button, .menu a, .menu-toggle, .hamburger, .footer a, .breadcrumb a {
    min-height: 44px; padding-top: 12px; padding-bottom: 12px;
  }
  .btn { padding-left: 22px; padding-right: 22px; }
  .footer a { display: inline-block; padding: 8px 0; }
  .breadcrumb a, .breadcrumb span { padding: 6px 0; }
  nav ul li a, .menu a, .nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ===== 3. Hero / 首屏（移动端） ===== */
@media (max-width: 980px) {
  .hero { padding: 56px 0 40px; }
  .hero h1 { font-size: clamp(26px, 7.5vw, 36px); line-height: 1.18; }
  .hero .lead { font-size: 16px; line-height: 1.6; max-width: 100%; }
  .hero-stats { gap: 16px; }
  .hero-stats .stat { padding: 10px 12px; }
  .hero-stats .num { font-size: 20px; }
  .hero-stats .lbl { font-size: 12px; }
  .hero .cta-row { flex-direction: column; align-items: stretch; }
  .hero .cta-row .btn { width: 100%; justify-content: center; }
  .hero .badge { font-size: 11px; padding: 5px 10px; }
}
@media (max-width: 640px) {
  .hero { padding: 40px 0 32px; }
  .hero h1 { font-size: 26px; }
  .hero-stats { flex-wrap: wrap; }
  .hero-stats .stat { flex: 1 1 calc(50% - 8px); min-width: 0; }
}

/* ===== 4. Section / Container（移动端收紧） ===== */
@media (max-width: 980px) {
  section { padding: 40px 0; }
  section + section { padding-top: 32px; }
  .section-head { margin-bottom: 24px; }
  .section-head h2 { font-size: clamp(22px, 5.5vw, 28px); }
  .section-head p { font-size: 15px; }
  .container, .wrap { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 640px) {
  section { padding: 32px 0; }
  .container, .wrap { padding-left: 16px; padding-right: 16px; }
}

/* ===== 5. 卡片 / 网格（移动端单列） ===== */
@media (max-width: 980px) {
  .cards, .grid, .features, .case-grid, .gallery, .products-grid, .row-3, .row-4 {
    grid-template-columns: 1fr !important; gap: 16px !important;
  }
  .card, .feature, .case, .gi, .pc { padding: 18px; }
  .pc h3, .card h3 { font-size: 17px; }
}
@media (max-width: 640px) {
  .card .pc-media, .pc .pc-media { aspect-ratio: 16/10; }
}

/* ===== 6. 表单（移动端核心：字段大、按钮大、防缩放） ===== */
@media (max-width: 980px) {
  .form-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .form-grid .field.full, .form-grid .field { grid-column: 1 / -1 !important; }
  .form-grid .field input,
  .form-grid .field select,
  .form-grid .field textarea {
    width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px;
    border-radius: 10px; border: 1px solid #cbd5e1; background: #fff;
  }
  .form-grid .field textarea { min-height: 110px; resize: vertical; }
  .form-grid label { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
  .form-grid .field input:focus, .form-grid .field select:focus, .form-grid .field textarea:focus {
    border-color: var(--brand, #0f766e); outline: 3px solid rgba(15,118,110,.18);
    outline-offset: 1px;
  }
  .form-grid button[type="submit"], .form-grid .btn-primary {
    width: 100%; min-height: 52px; font-size: 17px; justify-content: center;
  }
  .form-note { font-size: 13px; line-height: 1.5; }
}

/* ===== 7. Header / 导航（移动端） ===== */
@media (max-width: 980px) {
  header .nav, .header .nav, nav.primary { padding: 10px 0; }
  .header-inner, header .container, header .wrap { gap: 10px; }
  .header .logo, header .logo { max-height: 36px; }
  .menu-toggle, .hamburger { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .nav-open .nav-list, .nav-open .menu, header.nav-open nav ul { display: flex !important; }
  nav ul { gap: 0; }
  nav ul li a { padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.06); }
}

/* ===== 8. 表格（移动端可滚动容器） ===== */
@media (max-width: 980px) {
  /* .article table 需显式列入：style.css 的 `.article table` 权重高于裸 `table`，
     不列出会导致文章内表格在手机上溢出被裁、右侧内容看不到。 */
  table, .table, .article table, .article .spec-table, .article .cmp-table {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  table thead, .table thead, .article thead { display: table; width: 100%; }
  table tbody, .table tbody, .article tbody { display: table; width: 100%; }
  th, td { padding: 10px 12px; font-size: 14px; }
  .table-wrap, .table-responsive { overflow-x: auto; border-radius: 8px; border: 1px solid #e5e7eb; }
}

/* ===== 9. 视频（移动端） ===== */
@media (max-width: 980px) {
  .video, .video-card, .vf, [data-video] {
    aspect-ratio: 16/9; max-height: 60vh;
  }
  .vf-ext { font-size: 11px; padding: 5px 9px; }
}

/* ===== 10. 移动端专属模块（mb- 前缀） ===== */
.mb-only { display: none; }
@media (max-width: 980px) { .mb-only { display: block; } .mb-hide { display: none !important; } }

/* 信任标识条 */
.mb-trust {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  padding: 10px 14px; margin: 14px 0; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 10px;
  font-size: 13px; color: #334155;
}
.mb-trust strong { color: #0f766e; }
.mb-trust .dot { width: 4px; height: 4px; background: #94a3b8; border-radius: 50%; }

/* WhatsApp 浮动按钮（右下） */
.mb-wa {
  position: fixed; right: 14px; bottom: 84px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(37,211,102,.45), 0 2px 6px rgba(0,0,0,.18);
  text-decoration: none; transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.mb-wa:hover, .mb-wa:active { transform: scale(1.06); color: #fff; }
.mb-wa svg { width: 28px; height: 28px; display: block; }
.mb-wa::after {
  content: ""; position: absolute; right: -2px; top: -2px;
  width: 14px; height: 14px; background: #ef4444; border-radius: 50%;
  border: 2px solid #fff;
}
@media (min-width: 981px) { .mb-wa { display: none; } }
@media (prefers-reduced-motion: reduce) { .mb-wa::after { animation: none; } }

/* Sticky bottom CTA（仅移动端） */
.mb-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none;
  background: rgba(255,255,255,.98);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-top: 1px solid #e2e8f0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -6px 18px rgba(0,0,0,.08);
}
@media (max-width: 980px) {
  body.has-sticky-cta .mb-cta-bar { display: flex; gap: 8px; }
  body.has-sticky-cta { padding-bottom: 78px; }
}
.mb-cta-bar .btn { flex: 1 1 0; min-height: 46px; padding: 10px 12px; font-size: 14px; justify-content: center; }
.mb-cta-bar .btn-wa { background: #25D366; color: #fff; flex: 0 0 auto; padding: 10px 14px; }
.mb-cta-bar .btn-wa:hover { color: #fff; }

/* 关键路径 CTA 增强（hero 内"获取报价"按钮触达放大） */
@media (max-width: 980px) {
  .hero .btn-primary, .cta-row .btn-primary {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    box-shadow: 0 10px 24px rgba(15,118,110,.36);
    font-size: 16px;
  }
}

/* FAQ 移动端 */
@media (max-width: 980px) {
  .faq details, details.faq-item, .faq-item {
    padding: 14px 16px; border-radius: 10px;
  }
  .faq summary, details summary { padding: 6px 0; font-size: 15px; min-height: 44px; }
  .faq p, .faq .a, details[open] > * { font-size: 14px; line-height: 1.65; }
}

/* 产品页（移动端首屏 CTA） */
@media (max-width: 980px) {
  .product-card, .pc, .p-card { display: flex; flex-direction: column; }
  .product-card .pc-cta, .pc .pc-cta, .p-card .pc-cta { margin-top: auto; }
  .product-card .pc-cta .btn, .pc .pc-cta .btn { width: 100%; }
}

/* 文章页（移动端） */
@media (max-width: 980px) {
  .article, .post, .blog-post, main article { font-size: 16px; line-height: 1.7; }
  .article h2, .post h2, main article h2 { font-size: 22px; margin: 28px 0 12px; }
  .article h3, .post h3, main article h3 { font-size: 18px; margin: 22px 0 10px; }
  .article p, .post p, main article p { margin: 0 0 14px; }
  .article ul, .article ol, main article ul, main article ol { padding-left: 22px; margin: 0 0 14px; }
  .article li, main article li { margin-bottom: 6px; }
  .article img, main article img { margin: 16px 0; border-radius: 8px; }
  .article blockquote, main article blockquote { padding: 12px 16px; margin: 16px 0; font-size: 15px; }
}

/* 按钮组（移动端双列布局） */
@media (max-width: 640px) {
  .cta-row, .btn-group, .action-row { flex-direction: column; }
  .cta-row .btn, .btn-group .btn, .action-row .btn { width: 100%; }
}

/* 页脚（移动端） */
@media (max-width: 980px) {
  footer, .footer { padding: 32px 0 110px; text-align: left; }
  footer .row, .footer .row { grid-template-columns: 1fr !important; gap: 24px; }
  footer h4, .footer h4 { font-size: 15px; margin-bottom: 12px; }
  footer .col, .footer .col { padding: 0; }
  footer ul li, .footer ul li { margin-bottom: 8px; }
}

/* 面包屑（移动端） */
@media (max-width: 640px) {
  .breadcrumb { font-size: 12px; padding: 10px 16px; overflow-x: auto; white-space: nowrap; }
}

/* 减小大块 box-shadow 性能开销 */
@media (max-width: 980px) {
  .card, .feature, .pc, .gi { box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04) !important; }
  .stat-band::before { display: none; }
}

/* iOS 100vh 修复（hero 全屏背景） */
@supports (-webkit-touch-callout: none) {
  .hero-full, .fullheight { min-height: -webkit-fill-available; }
}

/* 性能：减少 transform 动画在大列表中的使用 */
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity .4s ease, transform .4s ease; }
}

/* 打印友好（用户在 PC 打印资料时） */
@media print {
  .mb-wa, .mb-cta-bar, .header, .footer-cta, nav.primary { display: none !important; }
}

/* 2026-09-15 移动端表格单元间距（阅读列由 .container 提供内边距，无需重复） */
@media (max-width: 640px) { .article th, .article td { padding: 8px 10px; font-size: .9rem; } }