/* ============================================================
   JIAHE GROUP — 全局移动端适配增强补丁
   作用域: 所有页面公用
   最后更新: 2026-03-02
   ============================================================ */

/* ---- 基础变量覆盖 (手机端) ---- */
@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
    --section-pad: 64px;
  }
}

/* ============================================================
   1. 导航栏 — 移动端
   ============================================================ */

/* 导航栏高度缩小 */
@media (max-width: 900px) {
  .nav-links,
  .nav-actions .btn,
  .lang-toggle { display: none !important; }
  .nav-hamburger { display: flex !important; }
}

@media (max-width: 768px) {
  .navbar { height: 64px; }
  .nav-logo-cn { display: none; }
  .nav-logo-mark { width: 36px; height: 36px; font-size: 1rem; }
  .nav-logo-en { font-size: 0.88rem; }
}

/* 手机侧边栏导航 */
@media (max-width: 768px) {
  .mobile-nav {
    width: 100%;           /* 全屏宽度更好 */
    max-width: 320px;
    padding: 90px 32px 40px;
  }
  .mobile-nav-link {
    font-size: 1rem;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  /* 导航底部添加联系信息 */
  .mobile-nav-footer {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.8;
  }
  .mobile-nav-footer a {
    color: #c9a84c;
    display: block;
    margin-top: 4px;
  }
}

/* ============================================================
   2. 按钮 — 移动端
   ============================================================ */
@media (max-width: 768px) {
  /* 主要 CTA 按钮全宽 */
  .hero-ctas {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 0.9rem;
  }
  /* btn-lg 手机缩小 */
  .btn-lg {
    padding: 14px 24px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .btn { padding: 13px 20px; font-size: 0.82rem; }
  .btn-sm { padding: 10px 16px; font-size: 0.78rem; }
}

/* ============================================================
   3. 排版 — 移动端
   ============================================================ */
@media (max-width: 768px) {
  .display-xl {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    letter-spacing: -0.01em;
  }
  .display-lg {
    font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
  }
  .display-md {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
  }
  .heading-lg { font-size: clamp(1.2rem, 4vw, 1.6rem) !important; }
  .body-lg { font-size: 1rem; }
}

@media (max-width: 480px) {
  .display-xl { font-size: clamp(1.8rem, 8.5vw, 2.6rem) !important; }
  .display-lg { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; }
}

/* ============================================================
   4. 布局与网格 — 移动端
   ============================================================ */
@media (max-width: 768px) {
  .container { padding: 0 18px; }
  .section-pad { padding: 64px 0; }
  .section-pad-sm { padding: 44px 0; }
  .section-pad-lg { padding: 80px 0; }

  /* 通用网格折叠为单列 */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
}

/* ============================================================
   5. 页面 Hero（非首页）— 移动端
   ============================================================ */
@media (max-width: 768px) {
  .page-hero {
    padding: 110px 0 56px !important;
  }
  .page-hero h1 {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    margin-bottom: 14px;
  }
  .page-hero p {
    font-size: 0.95rem;
    max-width: 100%;
  }
  /* 面包屑 */
  .breadcrumb { font-size: 0.75rem; }
}

/* ============================================================
   6. 首页 Hero — 移动端
   ============================================================ */
@media (max-width: 768px) {
  .hero {
    height: auto !important;
    min-height: 100svh;
    padding-top: calc(var(--nav-height) + 40px);
    padding-bottom: 150px;
    align-items: flex-start;
  }
  .hero-content { max-width: 100%; }
  .hero-eyebrow { margin-bottom: 20px; }
  .hero-title {
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
    margin-bottom: 18px;
  }
  .hero-desc {
    font-size: 0.92rem;
    margin-bottom: 28px;
    max-width: 100%;
  }
  /* Stats bar */
  .hero-stats { padding: 10px 0 14px; }
  .stat-num { font-size: 1.2rem !important; }
  .stat-tag { font-size: 0.55rem; }
  .stat-lbl { font-size: 0.6rem; }
}

@media (max-width: 480px) {
  .hero { padding-top: calc(var(--nav-height) + 28px); padding-bottom: 160px; }
  .hero-title { font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important; }
  .hero-desc { font-size: 0.85rem; }
  .stat-item { flex: 0 0 50% !important; }
  .stat-num { font-size: 1.05rem !important; }
}

/* ============================================================
   7. 卡片 — 移动端
   ============================================================ */
@media (max-width: 768px) {
  .card { border-radius: 10px; }
  /* 防止 hover transform 在触屏产生残留 */
  @media (hover: none) {
    .card:hover {
      transform: none;
      box-shadow: none;
    }
  }
}

/* ============================================================
   8. 页脚 — 移动端
   ============================================================ */
@media (max-width: 768px) {
  .footer { padding: 50px 0 0; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .footer-tagline { font-size: 0.85rem; max-width: 100%; }
  .footer-social { flex-wrap: wrap; gap: 8px; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 0;
  }
  .footer-btm-links { gap: 14px; flex-wrap: wrap; }
  .footer-copy,
  .footer-btm-links a { font-size: 0.75rem; }
  .footer-badge { font-size: 0.68rem; }
  /* 联系信息换行适配 */
  .footer-contact-item { margin-bottom: 12px; }
  .footer-contact-text { font-size: 0.82rem; }
}

@media (max-width: 480px) {
  .footer-social a { width: 34px; height: 34px; }
}

/* ============================================================
   9. 表单 — 移动端
   ============================================================ */
@media (max-width: 768px) {
  .contact-form-wrap { padding: 28px 18px !important; border-radius: 16px; }
  .form-grid { grid-template-columns: 1fr !important; gap: 0; }
  /* 防止 iOS 输入框自动放大 */
  .form-input,
  .form-select,
  .form-textarea { font-size: 16px !important; padding: 13px 14px; }
  .form-submit,
  .btn-primary[type="submit"] {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 0.92rem;
  }
  .faq-q-text { font-size: 0.88rem; }
}

@media (max-width: 480px) {
  .contact-form-wrap { padding: 22px 14px !important; }
  .ci-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   10. Contact 页面联系信息卡片 — 移动端
   ============================================================ */
@media (max-width: 768px) {
  .ci-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .contact-info-card { padding: 20px 16px; }
  .ci-icon { width: 40px; height: 40px; font-size: 1rem; margin-bottom: 10px; }
  .ci-value { font-size: 0.88rem; word-break: break-all; }
  /* 电话/WhatsApp 点击区域 */
  .contact-info-card a[href^="tel"],
  .contact-info-card a[href^="https://wa"],
  .contact-info-card a[href^="https://api.whatsapp"] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c9a84c;
    font-weight: 600;
    font-size: 1rem;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .ci-grid { grid-template-columns: 1fr !important; }
  .contact-info-card { padding: 18px 14px; }
}

/* ============================================================
   11. 服务页 — 移动端
   ============================================================ */
@media (max-width: 768px) {
  /* Phase nav 纵向排列 */
  .phase-nav {
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    overflow: visible;
  }
  .phase-nav-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 16px;
    font-size: 0.82rem;
    border-radius: 8px;
  }
  /* 服务卡片 */
  .svc-detail-card { flex-direction: column; }
  .svc-detail-img-wrap,
  .svc-detail-img-placeholder { height: 160px !important; min-height: unset; }
  /* 对比表格 */
  .diff-compare-header,
  .diff-compare-row {
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 0.65rem;
  }
  .diff-compare-header > *,
  .diff-compare-row > * { padding: 8px 5px; }
  /* 数字卡片 */
  .numbers-grid { grid-template-columns: 1fr 1fr !important; gap: 16px; }
  .number-card { padding: 24px 18px; }
  .number-val,
  .number-val-en { font-size: 2rem; }
}

@media (max-width: 480px) {
  .phase-nav-btn span:not(.phase-num) { font-size: 0.78rem; }
  .svc-tag { font-size: 0.65rem; padding: 3px 8px; }
  .deliverable-item { font-size: 0.78rem; }
  .numbers-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   12. 案例页 — 移动端
   ============================================================ */
@media (max-width: 768px) {
  .cases-grid { grid-template-columns: 1fr !important; }
  .featured-case { grid-column: span 1 !important; }
  .stats-banner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .sb-item { padding: 18px 14px; }
  .sb-num { font-size: 1.8rem !important; }
  /* 筛选栏横向滚动 */
  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 8px;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; white-space: nowrap; }
}

@media (max-width: 480px) {
  .stats-banner { grid-template-columns: 1fr 1fr !important; }
  .sb-num { font-size: 1.5rem !important; }
}

/* ============================================================
   13. 团队页 — 移动端
   ============================================================ */
@media (max-width: 768px) {
  .expert-grid { grid-template-columns: 1fr 1fr !important; gap: 16px; }
  .expert-card { padding: 20px 16px; }
  .expert-avatar { width: 60px; height: 60px; font-size: 1.2rem; }
  .expert-name { font-size: 1rem; }
}

@media (max-width: 480px) {
  .expert-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   14. 关于页 — 移动端
   ============================================================ */
@media (max-width: 768px) {
  .about-hero { padding: 110px 0 56px !important; }
  /* 时间线 */
  .timeline::before { left: 20px !important; }
  .timeline-item {
    grid-template-columns: 40px 1fr !important;
    gap: 0 !important;
  }
  .timeline-item .tl-spacer { display: none !important; }
  .tl-dot { width: 12px; height: 12px; }
  /* 优势 / 价值卡片 */
  .value-card { padding: 24px 18px; }
  .adv-item { flex-direction: column; gap: 14px; padding: 18px; }
  .adv-icon-box { width: 42px; height: 42px; font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .about-hero { padding: 96px 0 44px !important; }
  .partner-badge { font-size: 0.72rem; padding: 7px 12px; }
}

/* ============================================================
   15. 隐私/条款页 — 移动端
   ============================================================ */
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr !important; }
  .legal-toc { position: static !important; }
}

@media (max-width: 768px) {
  .legal-content h2 { font-size: 1.2rem; }
  .legal-content p,
  .legal-content li { font-size: 0.88rem; }
}

/* ============================================================
   16. 通用 UX 优化
   ============================================================ */

/* 触屏设备禁止 hover 浮起效果，避免残影 */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .btn-primary:hover,
  .btn-outline:hover,
  .btn-outline-dark:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .card:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm, 0 2px 12px rgba(0,0,0,.06)) !important;
    border-color: var(--gray-200, #e8e8e0) !important;
  }
}

/* 增大所有可点击元素的触摸目标 */
@media (max-width: 768px) {
  a, button, [role="button"], .lang-btn, .faq-question, .faq-q {
    min-height: 40px;
  }
  /* 导航链接 */
  .mobile-nav-link { min-height: 48px; display: flex; align-items: center; }
  /* 返回顶部按钮 */
  .back-to-top { bottom: 20px; right: 16px; width: 44px; height: 44px; }
  /* Section label */
  .section-label { font-size: 0.65rem; }
}

/* 防止横向溢出 */
* { box-sizing: border-box; }
body { overflow-x: hidden; }

/* 图片自适应 */
img, video { max-width: 100%; height: auto; }

/* 长文本防溢出 */
@media (max-width: 480px) {
  p, span, div { word-break: break-word; overflow-wrap: break-word; }
}

/* ============================================================
   17. 滚动进度条 & 回顶按钮
   ============================================================ */
@media (max-width: 480px) {
  .scroll-progress { height: 2px; }
}