/* ============================================================
   来云顶班® 官网 · 移动端适配补丁 v2 · 2026-09-23
   ------------------------------------------------------------
   适用范围：根页面 10 个 / articles 文章归档 66 篇 / training 培训 10 个模块
   目标设备：320 / 360 / 375 / 390 / 430（iPhone SE → Pro Max、主流安卓）
   体检依据：Playwright 真实设备视口实测（320×568 / 375×812 / 390×844）

   v1 → v2 变更（依据 v1 上线前复测结果）
     · 2.3 触控目标扩面：v1 只覆盖 .btn/.nav-item，复测仍有真实过小目标 ——
       .hamburger（手机端主导航触发点，仅 16px 高）与 a.cta-btn（22px 高）
       以及报名表单的 select / date 输入框；v2 一并抬到 44px。
       ⚠️ 刻意不覆盖裸 <a>：正文内联链按 WCAG 2.5.8 豁免，强撑会破坏行距。

   ⚠️ 设计原则
   1) 只做「追加覆盖」，不改动任何页面原有样式规则；回滚 = 删除本文件与注入的 <link>。
   2) 本文件需要覆盖的目标里，有一部分是**内联样式**（articles 的导航、各页 header），
      内联优先级高于本文件，故这些地方**必须**用 !important。每一处都标注了原因。
   3) 浅色底铁律：本文件不引入任何深色背景。

   本次修复对应的实测问题编号见《来云顶班_官网移动端适配报告》。
   ============================================================ */

/* ---------- 0. 安全区变量（iPhone 刘海 / 灵动岛 / home 指示条） ---------- */
:root {
  --sat: env(safe-area-inset-top, 0px);      /* top    */
  --sab: env(safe-area-inset-bottom, 0px);   /* bottom */
  --sal: env(safe-area-inset-left, 0px);     /* left   */
  --sar: env(safe-area-inset-right, 0px);    /* right  */
}

/* ---------- 1. 全局兜底 ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; }
/* 长链接 / 连续字符不撑破容器（中文长句也受益） */
p, li, td, th, h1, h2, h3, h4, blockquote { overflow-wrap: break-word; word-break: break-word; }
/* 触屏点击高亮：去掉 iOS 灰块，改由各组件自身提供按下反馈 */
a, button, input, select, textarea { -webkit-tap-highlight-color: rgba(0,0,0,.06); }
/* 手机端引导条：桌面默认隐藏，仅 ≤768px 显示（定义见 2.6 段） */
.mobile-guide { display: none; }

/* ============================================================
   2. 移动端主体（≤768px）
   ============================================================ */
@media (max-width: 768px) {

  /* ----------------------------------------------------------
     2.1 顶部导航
     实测问题：articles 的 .seo-nav 在 320px 下「官网首页/全部文章/城市服务商」
     被挤成 2–3 行竖排，导航不可读（见体检截图 articles_320）。
     该导航是内联样式 → 必须 !important。
     ---------------------------------------------------------- */
  nav.seo-nav > div {
    padding: 10px calc(14px + var(--sal)) 10px calc(14px + var(--sar)) !important;
    gap: 8px !important;
  }
  nav.seo-nav > div > a:first-child {
    font-size: 15px !important;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  nav.seo-nav > div > div {
    gap: 12px !important;
    font-size: 13px !important;
    min-width: 0;
    overflow-x: auto;                 /* 极端窄屏可横滑，绝不换行 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav.seo-nav > div > div::-webkit-scrollbar { display: none; }
  nav.seo-nav > div > div > a { white-space: nowrap; }

  /* 其它页面的固定导航：统一让开刘海 */
  #navbar, nav.nav, header.header, .topbar {
    padding-top: var(--sat) !important;
  }
  #navbar > div, nav.nav > div, header.header > div {
    padding-left: calc(16px + var(--sal)) !important;
    padding-right: calc(16px + var(--sar)) !important;
  }

  /* ----------------------------------------------------------
     2.2 🔴 iOS 输入框防「聚焦自动放大」
     Safari 对 font-size < 16px 的表单控件会在获得焦点时强制放大整页，
     用户输入完页面仍停留在放大态 —— 实测命中：
       kpi 54 个 / transfer-register 32 个 / laocunzhang-register 5 个 /
       share-poster 3 个 / layout 1 个
     ⚠️ 必须 !important：表格行内的输入框多为 JS 用 innerHTML 生成并带内联
        style="font-size:12px"，内联优先级高于本文件，不加则完全无效（v1 实测踩过）。
     ---------------------------------------------------------- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ----------------------------------------------------------
     2.3 触控目标最小 44×44（iOS HIG / Material）
     实测命中：transfer-register 20 个 / kpi 10 个 / layout 8 个 / training 8 个
     v2 扩面（复测后仍不合格的真实目标）：
       · .hamburger —— 手机端主导航唯一入口，原高仅 16px（3 条 2px 横线 + 2×5px 间距）
       · a.cta-btn —— 文章页行动按钮，原高 22px
       · select / 日期输入框 —— 报名表单，原高 24–41px
     ⚠️ 裸 <a> 不在覆盖范围：正文内联链属 WCAG 2.5.8 豁免项，强撑会毁掉行距。
     ---------------------------------------------------------- */
  .btn, .btn-generate, .btn-save, .back-btn,
  button, input[type="submit"], input[type="button"], .nav-item {
    min-height: 44px;
  }
  .nav-item { display: flex; align-items: center; justify-content: center; }

  .hamburger, .menu-toggle, .nav-toggle {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;      /* column 布局下把 3 条横线垂直居中 */
    align-items: center;
    margin-right: -10px;          /* 视觉上仍贴右边缘，多出的面积是「可点区」 */
  }
  .cta-btn, a.cta-btn, .back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) {
    min-height: 44px;
  }

  /* 底部导航（training 用）：让开 home 指示条 */
  .bottom-nav {
    padding-bottom: var(--sab) !important;
    padding-left: calc(8px + var(--sal)) !important;
    padding-right: calc(8px + var(--sar)) !important;
  }
  /* 页面主体底部留白，避免被底部导航遮住最后一行 */
  .page-container { padding-bottom: calc(80px + var(--sab)); }

  /* ----------------------------------------------------------
     2.4 表格：窄屏不再挤压，改为按内容展开 + 横向滚动
     实测问题：articles 的 .data-table（36 篇含表）与 station/CityPartner 的
     宽表在窄屏把「哈尔滨」等文字逐字竖排。修法：解除宽度挤压 + 允许横滑。
     ---------------------------------------------------------- */
  .data-table, .article-wrap table, .article-wrap .data-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;              /* ⛔ 关键：不再逐字竖排 */
    scrollbar-width: thin;
    background-image: linear-gradient(to left, rgba(0,0,0,.08), rgba(0,0,0,0));
    background-repeat: no-repeat;
    background-size: 24px 100%;
    background-position: right center;
    background-attachment: local;     /* 滑到最右时渐隐自动消失 */
  }
  .data-table, .article-wrap table { font-size: 13px; }
  .article-wrap th, .article-wrap td { padding: 9px 11px; }

  /* ----------------------------------------------------------
     2.5 文章正文：窄屏舒适排版
     ---------------------------------------------------------- */
  .article-wrap,
  .wrap { padding-left: 16px; padding-right: 16px; }
  .article-wrap p,
  .body-content p {
    font-size: 16px;
    line-height: 1.85;
    text-align: left;                 /* 窄屏两端对齐会产生难看的字距 */
  }
  .article-wrap h1 { font-size: 22px; line-height: 1.45; }
  .article-wrap h2 { font-size: 19px; }
  .article-wrap h3 { font-size: 17px; }
  .article-wrap img { height: auto; }

  /* ----------------------------------------------------------
     2.6 招商一页纸（A4 打印版）手机端引导条
     该页 body 固定 210mm×297mm（A4），手机上右侧内容被裁掉。
     这里只负责样式；提示条元素与跳转见页面内联脚本。
     ---------------------------------------------------------- */
  .mobile-guide {
    display: block !important;
    position: sticky;
    top: 0;
    z-index: 999;
    margin: 0;
    padding: calc(10px + var(--sat)) calc(14px + var(--sar)) 10px calc(14px + var(--sal));
    background: #fbf7f0;
    border-bottom: 1px solid #e8dcc8;
    color: #3d3426;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
  }
  .mobile-guide a {
    display: inline-block;
    margin-top: 6px;
    padding: 10px 18px;
    min-height: 44px;
    background: #c2410c;
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
  }

  /* 招商一页纸（A4 打印版）：手机端重排为单列流式
     该页 body 固定 210mm×297mm（≈794px），手机上右侧「年服务费」等列会被裁掉。
     此处解除纸张宽度约束、多列改单列、表格允许横滑 —— 即使不跳转手机版也能读全。
     ⚠️ 这些是页面内联/自身样式，优先级更高，故用 !important。 */
  body.pitch-a4 { width: 100% !important; height: auto !important; min-height: 0 !important; }
  body.pitch-a4 .page { width: 100% !important; min-height: 0 !important; padding: 14px 14px 20px !important; }
  body.pitch-a4 .header { flex-wrap: wrap; gap: 8px; }
  body.pitch-a4 .hero h1 { font-size: 19px !important; line-height: 1.45 !important; }
  body.pitch-a4 .stats-row {
    display: grid !important; grid-template-columns: 1fr !important;
    flex-direction: column !important; gap: 10px !important;
  }
  body.pitch-a4 .main-grid,
  body.pitch-a4 .grid-2,
  body.pitch-a4 .two-col,
  body.pitch-a4 .empower-list {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    display: block !important;
  }
  body.pitch-a4 .main-grid > * + * { margin-top: 12px; }
  body.pitch-a4 .price-table {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  body.pitch-a4 .top50-text { font-size: 12px !important; }

  /* 招商一页纸-手机版：390px 固定宽 → 自适应（320/360 屏原本横向溢出 30–70px） */
  body.pitch-mobile {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
  }

  /* ----------------------------------------------------------
     2.7 卡片类组件：窄屏去掉悬停位移的残留
     ---------------------------------------------------------- */
  .card:hover, .not-card:hover, .stat-card:hover, .empower-item:hover { transform: none !important; }
}

/* ============================================================
   3. 超窄屏（≤360px，iPhone SE / 小屏安卓）
   ============================================================ */
@media (max-width: 360px) {
  nav.seo-nav > div > div { gap: 9px !important; font-size: 12px !important; }
  nav.seo-nav > div > a:first-child { font-size: 14px !important; }
  .article-wrap, .wrap { padding-left: 13px; padding-right: 13px; }
  .article-wrap p, .body-content p { font-size: 15.5px; }
  .article-wrap h1 { font-size: 20px; }
  .article-wrap th, .article-wrap td { padding: 8px 9px; }
}

/* ============================================================
   4. 触屏设备（无 hover 能力）：清掉悬停态残留
   ============================================================ */
@media (hover: none) {
  a:hover { color: inherit; }
  .card:hover, .not-card:hover, .stat-card:hover { transform: none !important; }
}

/* ============================================================
   5. 尊重系统「减少动态效果」
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .fade-in, .scale-in, .swipe-item { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   6. 打印
   ============================================================ */
@media print {
  .mobile-guide { display: none !important; }
}