/*
 官网手机版那一套版式（独立一份，不动 PC 的 tuanjian.css）。
 与"把 PC 缩小"的区别写在每条规则上：底部常驻四格导航（拇指够得到）、首屏一个大按钮、
 精选项目改成横滑（一屏一张大图中字）、表单全单列且输入框 16px（iOS 小于 16px 聚焦会放大页面）。
 三条边界：
 ① 本文件里除了 `.tabbar{display:none}` 这一条基线，其余全部包在 @media (max-width:860px) 内 ——
    PC 拿到的字节数一样，但一条都不会生效，改手机不会碰坏 PC。
 ② 断点用 860px，与 tuanjian.css 的汉堡菜单同一个数；两处不一致会出现"有汉堡又有底栏"。
 ③ 底栏第四格由模板按"有没有配号码"渲染（配了=打电话 tel:，没配=回首页），
    这里只负责长相，不在 CSS 里判断业务状态。
*/

/* PC 一律不显示底栏（媒体查询外只留这一条） */
.tabbar{display:none}

@media (max-width:860px){
  /* 给固定底栏让位，否则最后一条内容永远被压住 */
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}

  /* ---- 底部常驻导航：拇指区，不用滚到页脚才找到出口 ---- */
  .tabbar{
    display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
    position:fixed;left:0;right:0;bottom:0;z-index:2000;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--line);
  }
  .tabbar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:48px;padding:6px 2px;border-radius:10px;
    font-size:12px;line-height:1.25;color:var(--ink2);background:var(--paper);
  }
  .tabbar a i{font-style:normal;font-size:17px}
  .tabbar a.on{color:var(--accent2);background:#f3e9dc;font-weight:600}
  /* 打电话那一格是这一屏的主行动，填色、加粗，跟另外三格拉开 */
  .tabbar a.call{color:#fff;background:var(--accent);font-weight:600}
  .tabbar a.call small{color:#f0e2d2;font-size:10px}

  /* ---- 顶栏在手机上只留品牌名与汉堡，其余交给底栏 ---- */
  .nav{padding:12px 16px;gap:12px}
  .brand{font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav .links{gap:12px}

  /* ---- 首屏：标题收窄、按钮竖成一列并把"留资"顶到第一个 ---- */
  main{padding:0 16px 32px}
  .hero{padding:18px 0 6px}
  .hero h1{font-size:23px}
  .hero .sub{font-size:14px}
  .facts{gap:10px 16px;margin:12px 0}
  .facts span{font-size:12px}
  .facts b{font-size:19px}
  .hero-cta{display:flex;flex-direction:column;gap:10px;align-items:stretch}
  .hero-cta .btn{display:block;text-align:center;padding:14px 16px;font-size:16px;border-radius:10px}
  /* 报人数领方案才是老板要的那一步，手机上排第一（不改 DOM，只用 order） */
  .hero-cta .btn.ghost{order:-1}
  .tags{gap:8px}
  .tags li{font-size:12px;padding:3px 10px}

  /* ---- 卡片：分类四格改两列；首页"精选"改横滑，一屏一张大图 ---- */
  .auds{grid-template-columns:repeat(2,1fr)}
  .cards-rail{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:10px;margin:0 -16px;padding:2px 16px 10px;
    scrollbar-width:none;
  }
  .cards-rail::-webkit-scrollbar{display:none}
  .cards-rail .card{flex:0 0 84%;scroll-snap-align:center}
  .cards-rail .card .ph{aspect-ratio:4/3;object-fit:cover}

  /* ---- 表单：全单列、字与点击区加大（16px 是 iOS 不放大的下限） ---- */
  .form{padding:14px;border-radius:12px}
  .form .grid{grid-template-columns:1fr;gap:0 0}
  .form label{font-size:14px;gap:6px;margin-top:12px}
  .form input,.form select,.form textarea{font-size:16px;padding:13px 12px;border-radius:10px}
  .form label.wide{margin-top:14px}
  .form .actions{display:block;margin-top:16px}
  .form button{width:100%;padding:15px;font-size:16px;border-radius:10px}
  .form .status{display:block;margin-top:8px;font-size:13px}

  /* ---- 案例折叠里的缩略图两列，点开能看清 ---- */
  .shots-grid{grid-template-columns:repeat(2,1fr);gap:8px}

  /* ---- 页脚在手机上不再重复导航（底栏已有），只留文字信息 ---- */
  .foot .links{display:none}
  .foot-inner{padding:16px}
}