/* ============================================================
   京峰教育 · 移动端强化层 (mobile.css)
   作用：在 theme.css 与各页面内联样式之后加载，统一修正
        手机（≤768px）与小平板（≤1024px）下的排版问题。
   说明：只做「移动端」覆盖，桌面端样式完全不受影响。
   ============================================================ */

/* ---------- 全局兜底：禁止横向滚动 ---------- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
img, video, canvas, iframe, svg {
  max-width: 100%;
}

/* ---------- 长表格 / 代码块：自身滚动，不撑破页面 ---------- */
.table-scroll,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ============================================================
   ≤1024px 小屏笔记本 / 平板
   ============================================================ */
@media (max-width: 1024px) {
  .container, .container-wide { padding-left: 24px; padding-right: 24px; }

  /* 通用两栏及以上栅格收敛 */
  .about-hero__inner,
  .about-values__inner,
  .about-founder__grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  .hero__inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero { min-height: auto; }
  .hero-panel { max-width: 100%; }
}

/* ============================================================
   ≤768px 手机
   ============================================================ */
@media (max-width: 768px) {

  /* ---- 1. 字号基准：站点根字号为 20px，手机上偏大，收敛到 16px ---- */
  html { font-size: 16px !important; }

  body {
    font-size: 15px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
  }

  /* ---- 2. 容器内边距 ---- */
  .container, .container-wide { padding-left: 18px !important; padding-right: 18px !important; }

  /* ---- 3. 顶栏 / 抽屉 ---- */
  .nav { height: 60px; }
  .brand img { height: 32px; }
  .nav-cta { gap: 8px; }
  .nav-cta .nav-btn,
  .nav .nav-btn { padding: 8px 14px; font-size: 14px; border-radius: 10px; box-shadow: none; }
  .nav-toggle { display: flex; width: 42px; height: 42px; flex: 0 0 auto; }

  .drawer__panel { width: min(84vw, 320px); padding: 76px 16px 20px; }
  .drawer__panel a { font-size: 16px; padding: 13px 14px; }

  /* ---- 4. 面包屑 & 锚点偏移（固定顶栏 60px） ---- */
  .breadcrumb { padding-top: 68px; }
  [id] { scroll-margin-top: 72px; }

  /* ---- 5. Hero ---- */
  .hero { min-height: auto; padding: 84px 0 36px !important; }
  .hero h1 { font-size: 1.7rem !important; line-height: 1.28 !important; }
  .hero__tip { font-size: 15px !important; margin-bottom: 26px !important; }
  .hero__badges { gap: 8px; margin-bottom: 20px; }
  .hero__badge { font-size: 12px !important; padding: 5px 12px !important; }
  .hero__actions { gap: 10px; margin-bottom: 28px; }
  .hero__trust { gap: 18px; }

  /* ---- 6. 所有多列栅格 → 单列（列表型栅格保留两列） ---- */
  .grid-3, .grid-4, .svc-grid, .journey,
  .about-adv-grid,
  .footer__grid,
  .mod-list,
  .cards, .card-grid, .case-grid, .feature-grid, .train-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 数字/图标型小格子保留两列更好看 */
  .trust-bar, .trend-stats, .stats, .stat-grid, .metric-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .grid-2, .timeline-3 { grid-template-columns: 1fr !important; }

  /* ---- 7. 长文排版 ---- */
  .story { max-width: 100%; }
  .story p { font-size: 15px !important; line-height: 1.95 !important; margin-bottom: 18px; }
  .story__lead, .story__quote, .about-values__quote { font-size: 15.5px !important; padding: 20px 18px !important; }
  .story__q { font-size: 16px !important; }

  /* ---- 8. 卡片内边距收敛 ---- */
  .section { padding: 44px 0 !important; }
  [class*="__card"], [class*="-card"] { padding: 20px 18px !important; }

  /* ---- 9. 按钮：英雄区按钮撑满，触摸更好点 ---- */
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }

  /* ---- 10. 表格：可横向滚动，不撑破 ---- */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table th, table td { white-space: nowrap; font-size: 13.5px; padding: 9px 12px; }

  /* ---- 11. 装饰性资源在手机上关闭，省流量提速 ---- */
  #bgCanvas, .bg-orbs, .bg-grid, .scroll-hint { display: none !important; }
  .scroll-progress { height: 2px; }

  /* ---- 12. 底部 ---- */
  .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ============================================================
   ≤480px 小屏手机精修
   ============================================================ */
@media (max-width: 480px) {
  .container, .container-wide { padding-left: 14px !important; padding-right: 14px !important; }

  .hero h1 { font-size: 1.5rem !important; }
  .section { padding: 36px 0 !important; }

  .trust-bar, .trend-stats, .stats, .stat-grid, .metric-grid {
    grid-template-columns: 1fr !important;
  }

  .nav-cta .nav-btn { padding: 7px 11px; font-size: 13px; }
  .brand img { height: 28px; }
}

/* ============================================================
   交互组件在手机上的适配（筛选芯片 / 切换标签 / 表单 / 播放器 / 弹层）
   ============================================================ */
@media (max-width: 768px) {

  /* ---- 筛选芯片、分段切换器：换行而不是横向溢出 ---- */
  .chip, .chips, .filter-bar, .filters,
  .trial-tab, .trial-switcher, .tabs, .tab-bar,
  [class*="-chips"], [class*="-filters"], [class*="-switcher"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
  }
  .chip, .trial-tab { padding: 8px 14px; font-size: 13px; }

  /* ---- 播放器 / iframe 容器：自适应宽高，不撑破 ---- */
  .trial-frame, .trial-frame-wrap, [class*="frame-wrap"], [class*="player__card"], [class*="player-card"] {
    width: 100% !important;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
    min-height: 0;
  }
  iframe { width: 100%; max-width: 100%; }

  /* ---- 表单：iOS 聚焦不缩放（字号 ≥16px） ---- */
  input, select, textarea, button { font-size: 16px; }
  input, select, textarea {
    max-width: 100%;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
  }

  /* ---- 弹层 / 模态：贴边显示，留出安全距离 ---- */
  [class*="modal__panel"], [class*="modal-panel"], .um-modal__panel {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 86vh;
    overflow-y: auto;
  }
  [class*="modal__qr"] img, .contact img.qr { max-width: 60vw; height: auto; }

  /* ---- 时间线 / 步骤条：竖排更易读 ---- */
  [class*="timeline"], [class*="steps"], [class*="journey"] { grid-template-columns: 1fr !important; }

  /* ---- 长英文/URL 不撑破 ---- */
  p, li, h1, h2, h3, h4, td, th { word-break: break-word; overflow-wrap: anywhere; }
}