/* ==========================================================================
   mobile-bridge.css — 769px ~ 1024px「桥接层」（横屏手机 / 小平板 / 折叠屏展开）
   --------------------------------------------------------------------------
   为什么需要这一层：
     mobile-app.css 的移动治理层整层包在 @media (max-width:768px) 内；
     responsive.css 只覆盖了 769–1024 的少量排版规则。
     于是 769–1024px 落在「半桌面」真空带：
       · 页脚 5 组 <dl>（采购服务 / 租赁与二手 / 供应商服务 / 研发服务 / 关于我们）
         全部展开 → 实测页脚高 463px，而横屏手机视口仅 396px，
         滚到底部时整屏只有页脚，用户直接判定为「手机版不显示」；
       · 底部 Tab（.mobile-bottom-nav）display:none → 横屏完全没有移动端主导航；
       · 页脚未预留 Tab 高度 → 版权行被遮挡。
   本层只做「收敛」，不重排桌面：
     1) 全部规则限定在 769–1024px，>1024px 桌面零影响；
     2) 只覆盖页脚 / 底部 Tab / 安全区留白，不动 header、不动栅格；
     3) 依赖后加载顺序，特异性与 mobile-app.css 保持一致。
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  /* ---- 1. 页脚：重复入口折叠（与 ≤768px 移动端口径一致） ----
     底部 Tab + 顶部导航已覆盖全部高频入口，页脚这 5 组在横屏上纯属重复，
     且把页脚撑到 463px。保留品牌简介与版权行，折叠 <dl> 列表。 */
  .footer {
    margin-top: 24px;
    padding-top: 22px;
    /* 底部避让由 body 的 padding-bottom 统一承担（见第 3 节），
       这里不再重复 72px，否则横屏下页脚会多出一整块深蓝空白。 */
    padding-bottom: 20px;
  }
  .footer .cols {
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
  }
  .footer .cols dl { display: none !important; }
  .footer .cols .about { width: 100%; flex: none; }
  .footer .cols .about p { max-width: 100%; font-size: 13px; line-height: 1.85; }
  .footer .footer-contact { margin-top: 10px; }

  /* ---- 2. 底部 Tab：横屏同样保留移动端主导航 ----
     responsive.css 在 @media(min-width:769px) 里用 !important 把 Tab 整条隐藏；
     桥接层后加载、同特异性，用等强度 !important 收回。
     注意：a 的纵向排布 / 字号 / 高亮条都写在 responsive.css 的 ≤768px 块里，
     这里必须整组复刻，否则图标与文字会横排挤成一行（实测已验证）。 */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.06);
    padding: 5px 0;
    padding-bottom: max(5px, env(safe-area-inset-bottom));
  }
  .mobile-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    padding: 6px 0;
    font-size: 11px;
    color: #8a919c;
    text-decoration: none;
    position: relative;
    transition: all 0.2s;
  }
  .mobile-bottom-nav a .ico { font-size: 21px; line-height: 1; transition: transform 0.2s; }
  .mobile-bottom-nav a.on { color: #1f6bff; font-weight: 600; }
  .mobile-bottom-nav a.on .ico { transform: scale(1.1); }
  .mobile-bottom-nav a.on::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2.5px;
    background: linear-gradient(90deg, #1f6bff, #4d8bff);
    border-radius: 2px;
  }

  /* ---- 3. 安全区留白：避免固定 Tab 压住正文 / 页脚版权行 ---- */
  body { padding-bottom: max(62px, calc(62px + env(safe-area-inset-bottom))); }

  /* ---- 4. 内容容器：横屏左右留白收紧，卡片不贴边 ---- */
  .container { padding-left: 16px; padding-right: 16px; }

  /* ---- 5. 首页栅格回正：撤销 responsive.css ≤1024 的强制 flex nowrap ----
     responsive.css 在 @media(max-width:1024px) 把 .section / .goods / .rental /
     .used-list 一律 display:flex !important + flex-shrink:0，
     而把 .used-list 改回 block 的纠正只写在 ≤768px 里。
     于是 769–1024px 整排横铺：实测 .used-list 宽 7152px，
     布局视口被撑到 3200px，页面横向溢出（scrollWidth 7257）。
     这里按 769–1024px 的可用宽度重排为栅格 / 纵向。 */
  .wrap { width: 100% !important; max-width: 100% !important; padding: 0 16px !important; }
  .section { display: block !important; }
  /* 1fr 轨道的 min-width 默认是 auto（=min-content），卡片内长标题会把轨道撑到 350px+，
     3 列就撑出 1107px 的布局视口。必须用 minmax(0,1fr) 才能真正收缩。 */
  .section .goods { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  .section .rental { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .used-list { display: block !important; overflow: hidden !important; }
  .used-item { width: auto !important; flex: none !important; min-width: 0 !important; }
  .used-item .desc { min-width: 0 !important; }
  .brands { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 10px !important; }
  .news-wrap { display: flex !important; flex-direction: column !important; }
  .match { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  /* 栅格子项允许收缩，长标题换行而不是撑宽 */
  .goods .card, .rental > *, .match > *, .brands > *, .used-item, .used-item .desc { min-width: 0 !important; }
  .goods .card h4, .goods .card .t, .section .rental h4 { overflow-wrap: anywhere; }
  .service { display: flex !important; flex-wrap: wrap !important; }
  .bomtool { display: flex !important; flex-direction: column !important; }
  .quicklinks { display: flex !important; flex-wrap: wrap !important; }
}