/* ====================================================================
   app/index.html 移动端适配 (≤768px) —— CloudCC CRM APP 下载页
   --------------------------------------------------------------------
   2026-09-14: 桌面端为 1120px 固定容器 + 大量 position:absolute
   (banner 的 title_box/img_phone, 6 个场景区的 *_img/*_text 及其内部
   time1/title1/content 全部绝对定位 + 固定盒高 520/620px)。
   移动端策略: 容器与盒高全部放开为流式, 文字块改静态居中排,
   手机图改静态居中缩放; 用 flex+order 统一为「文字在上、手机图在下」,
   不再随桌面 DOM 顺序左右交替。
   隔离原则: 全部规则包在 @media (max-width:768px) 内, 桌面零影响。
   ==================================================================== */
@media (max-width: 768px) {
  /* ---------------- banner ---------------- */
  .banner .container1 {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    margin: 0;
    padding: 40px 16px 0;
    box-sizing: border-box;
  }
  .banner .title_box {
    position: static !important;
  }
  .banner .title_box h3 {
    font-size: 22px !important;
    line-height: 34px !important;
  }
  .banner .title_box p {
    font-size: 14px !important;
    line-height: 24px !important;
    margin-top: 10px;
  }
  .banner .down {
    margin-top: 24px !important;
  }
  /* 两个二维码白卡 (90px) 本身放得下, 保持 float;
     右侧应用宝/360/豌豆荚下载列换行落到二维码下面, 不再挤在右边;
     2026-09-14 晚: 移动端直接隐藏该下载列 (应用宝/360手机助手/豌豆荚 3 个 logo) */
  .banner .down .left {
    display: none !important;
  }
  .banner .img_phone {
    position: static !important;
    text-align: center;
    margin-top: 8px;
  }
  .banner .img_phone img {
    height: auto !important;
    max-width: 28%;
    display: inline-block;
  }

  /* ---------------- 6 个场景区 ---------------- */
  .section_grey,
  .section_while {
    padding-top: 48px !important;
  }
  .conter_box {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    margin: 0;
    padding: 0 16px 44px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  .schedule_box, .latent_box, .remind_box,
  .sign_box, .examine_box, .chat_box {
    height: auto !important;
  }
  /* 统一顺序: 文字块在上, 手机图在下 (桌面 DOM 是左右交替的) */
  .conter_box > div:first-child { order: 1; }
  .conter_box > div:last-child  { order: 2; }

  /* ---- 手机图 ---- */
  .schedule_img, .latent_img, .remind_img,
  .sign_img, .examine_img, .chat_img {
    position: static !important;
    text-align: center;
    margin-top: 26px;
  }
  .schedule_img img, .latent_img img, .remind_img img,
  .sign_img img, .examine_img img, .chat_img img {
    height: auto !important;
    max-width: 64%;
    display: inline-block;
  }
  /* HTML 里的内联位移 (sign_img padding-left:100px / chat_img margin-left:-110px) */
  .sign_img img  { padding-left: 0 !important; }
  .chat_img img  { margin-left: 0 !important; }

  /* ---- 文字块 (桌面为绝对定位 + 内部时间/标题/正文三层绝对定位) ---- */
  .schedule_text, .latent_text, .sign_text,
  .examine_text, .chat_text {
    position: static !important;
  }
  .time1 {
    position: static !important;
    font-size: 15px !important;
  }
  .schedule_time { position: static !important; }
  .title1, .sign_title, .schedule_title {
    position: static !important;
    font-size: 24px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    margin-top: 8px;
  }
  .content, .schedule_content {
    position: static !important;
    width: auto !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    margin-top: 10px;
  }
  /* time_icon.png 原生 16x227, 是桌面上垫在文字后面的「竖线时间轴」装饰;
     静态流式排后它会整体立在文字上方, 把正文顶下去一大截 → 移动端隐藏
     2026-09-14 晚补: sign 区用的是 time_icon_2.png 且此前漏了 .sign_text,
     导致「下午14:30」上方顶出一大块空白 → 一并加入 */
  .schedule_text img[src*="time_icon"],
  .latent_text img[src*="time_icon"],
  .sign_text img[src*="time_icon"],
  .examine_text img[src*="time_icon"],
  .chat_text img[src*="time_icon"] {
    display: none;
  }
}