/* ============================================================
 * 朗慧科技移动端优化 booster v1.0 (2026-07-19)
 * 统一补全：触控热区/字号下限/断点细化/动画性能/滚动优化
 * 加载位置：在 design-system.css 之后，所有页面统一引入
 * ============================================================ */

/* ===== 1. 触控热区强制 ≥ 44×44px（WCAG 2.5.5） ===== */
@media (max-width: 768px) {
  a, button, [role="button"], .btn, .nav-link, .mobile-menu-toggle,
  .language-switcher a, .footer-link, .capability-card,
  .stat-card, .trust-badge, .timeline-item, .dataset-card,
  .scenario-card, .quality-card, .cta-button, .nav-item a {
    min-height: 44px;
    min-width: 44px;
  }
  /* 内部文字垂直居中 */
  a > span, button > span, .btn > span {
    display: inline-flex;
    align-items: center;
  }
}

/* ===== 2. 字号下限 14px（避免iOS Safari自动放大） ===== */
@media (max-width: 768px) {
  body { font-size: 16px; -webkit-text-size-adjust: 100%; }
  p, li, dd, dt, label, small, .text-sm, .text-xs {
    font-size: 14px !important;
    line-height: 1.6;
  }
  /* 极小字号仅用于辅助标签 */
  .text-muted, .text-gray-500, .text-gray-400 {
    font-size: 13px !important;
  }
}

/* ===== 3. 断点细化（480px / 640px / 768px） ===== */

/* 480px：超小屏（iPhone SE） */
@media (max-width: 480px) {
  .container, .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }
  h1 { font-size: 1.75rem !important; line-height: 1.25; }
  h2 { font-size: 1.5rem !important; line-height: 1.3; }
  h3 { font-size: 1.25rem !important; }
  h4 { font-size: 1.1rem !important; }
  .hero-title { font-size: 1.875rem !important; }
  .hero-subtitle { font-size: 0.95rem !important; }
  .stat-number { font-size: 1.5rem !important; }
  .stat-label { font-size: 0.75rem !important; }
  /* 单列布局 */
  .grid, .grid-cols-2, .grid-cols-3, .grid-cols-4, .md\\:grid-cols-3, .lg\\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  .capability-card, .dataset-card, .scenario-card, .quality-card {
    padding: 1.25rem 1rem !important;
  }
  /* 隐藏装饰性元素，提升性能 */
  .hero-particles, .hero-grid, .decorative-glow {
    display: none !important;
  }
}

/* 640px：小屏手机横屏 */
@media (min-width: 481px) and (max-width: 640px) {
  .grid-cols-2, .md\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 768px：平板竖屏 */
@media (min-width: 641px) and (max-width: 768px) {
  .grid-cols-3, .lg\\:grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-4, .lg\\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ===== 4. 动画性能优化（will-change + transform） ===== */
@media (max-width: 768px) {
  /* 移动端禁用复杂动画，提升性能 */
  .card-lift:hover, .card-enhanced:hover, .capability-card:hover {
    transform: translateY(-2px) !important;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out !important;
  }
  /* 滚动揭示动画使用更轻量的 transform */
  .reveal, .scroll-reveal, [data-reveal] {
    will-change: transform, opacity;
    transform: translateY(20px);
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
  }
  .reveal.active, .scroll-reveal.active, [data-reveal].active {
    transform: translateY(0);
  }
  /* 禁用 backdrop-filter 在低端设备上的开销 */
  .glass-card, .backdrop-blur {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* ===== 5. 横向滚动优化（touch-action + momentum scroll） ===== */
.horizontal-scroll, .overflow-x-auto, .tab-list, .category-tabs {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;
}
.horizontal-scroll > *, .overflow-x-auto > * {
  scroll-snap-align: start;
}

/* ===== 6. 首屏加载优化（image lazy hint + critical CSS） ===== */
img[loading="lazy"] {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}
/* 关键内容立即显示，避免FOUC */
.critical-above-fold {
  contain: content;
  content-visibility: visible;
}

/* ===== 7. 移动端导航优化 ===== */
@media (max-width: 768px) {
  /* 汉堡菜单触控热区 */
  .mobile-menu-toggle, .navbar-toggle {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
  }
  /* 移动菜单全屏覆盖 */
  .mobile-menu, .navbar-collapse {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 360px;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000;
    -webkit-overflow-scrolling: touch;
  }
  /* 语言切换器横向滚动 */
  .language-switcher {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ===== 8. 表单元素优化 ===== */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], textarea, select {
    font-size: 16px !important; /* 避免 iOS 自动放大 */
    min-height: 48px;
    padding: 12px 16px;
  }
}

/* ===== 9. 表格响应式优化 ===== */
@media (max-width: 768px) {
  .table-responsive, table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  thead { display: none; }
  tbody, tr, td { display: block; width: 100%; }
  tr { margin-bottom: 12px; border: 1px solid #E5E7EB; border-radius: 8px; padding: 8px; }
  td { display: flex; justify-content: space-between; padding: 8px 12px; }
  td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #64748B;
    margin-right: 12px;
  }
}

/* ===== 10. 安全区域适配（iPhone X+ 刘海/底部条） ===== */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer, .mobile-bottom-bar, .floating-cta {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  .header, .navbar {
    padding-top: max(8px, env(safe-area-inset-top)) !important;
  }
}

/* ===== 11. 暗色模式适配（系统偏好） ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary: #0F172A;
    --color-text-primary: #F1F5F9;
    --color-text-secondary: #CBD5E1;
    --color-card-bg: #1E293B;
    --color-border: #334155;
  }
}

/* ===== 12. 减少动画（无障碍偏好） ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 13. 打印优化 ===== */
@media print {
  .header, .footer, .floating-cta, .mobile-menu-toggle,
  .cookie-consent, .language-switcher, .hero-particles {
    display: none !important;
  }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}