/* ============================================================
   引力回路 NEOLOOP — 移动端响应式优化
   保持桌面端不变，仅优化移动端 UI
   ============================================================ */

/* ---------- 导航栏移动端优化 ---------- */
@media (max-width:860px){
  /* 导航栏高度优化 */
  .nav__in{height:64px}
  
  /* Logo 尺寸优化 */
  .brand img{height:28px}
  
  /* 购物车按钮优化 */
  .cart-btn{padding:.4em .7em}
  
  /* 汉堡菜单按钮优化 */
  .burger{width:40px;height:40px}
}

/* ---------- 移动端菜单优化 ---------- */
@media (max-width:860px){
  .mmenu{padding:80px 24px 40px}
  
  /* 菜单项字体缩小，避免过大 */
  .mmenu a{
    font-size:clamp(1.3rem,5vw,1.8rem);
    padding:.35em 0;
    line-height:1.3
  }
  
  /* 英文副标题缩小 */
  .mmenu a .en{
    font-size:.7rem;
    letter-spacing:.15em;
    margin-top:2px
  }
  
  /* 菜单项间距调整 */
  .mmenu{gap:4px}
}

/* ---------- Hero 区域移动端优化 ---------- */
@media (max-width:860px){
  /* Hero 标题字体调整 */
  .hero h1{font-size:clamp(2rem,10vw,3.5rem)}
  
  /* 副标题字体调整 */
  .hero__sub{
    font-size:1rem;
    line-height:1.6;
    max-width:100%
  }
  
  /* 标签字体调整 */
  .hero__tag{font-size:.75rem}
  
  /* 按钮区域调整 */
  .hero__cta{gap:10px;margin-top:24px}
  .hero__cta .btn{
    padding:.8em 1.2em;
    font-size:.85rem
  }
  
  /* SCROLL 指示器 — 隐藏或调整位置避免重叠 */
  .hero__scroll{
    display:none  /* 移动端隐藏竖排 SCROLL，避免与内容重叠 */
  }
}

/* ---------- 页面标题区域移动端优化 ---------- */
@media (max-width:860px){
  .phero{min-height:45vh}
  .phero h1{font-size:clamp(1.8rem,8vw,3rem)}
  .phero p{font-size:1rem}
  .crumb{font-size:.75rem}
}

/* ---------- 分栏布局移动端优化 ---------- */
@media (max-width:860px){
  .split{gap:12px}
  
  /* 图片容器比例调整 - 使用4:3比例更适合横向图片 */
  .split__media{
    aspect-ratio:4/3;
    max-height:240px;
    border-radius:var(--r);
    width:100%;
    max-width:100%
  }
  
  /* 确保图片本身也有圆角，防止object-fit:contain时露出直角背景 */
  .split__media img{
    border-radius:var(--r);
    object-fit:cover;
    width:100%;
    height:100%;
    min-height:100%
  }
  
  /* 文字区域标题缩小 */
  .split h2{font-size:clamp(1.4rem,5vw,2rem);margin-bottom:12px}
  
  /* 段落文字优化 */
  .split .lead{font-size:.95rem;line-height:1.65;margin-bottom:12px}
  
  /* 减少图片下方到文字的间距 */
  .split__media + div,
  div + .split__media{margin-top:0}
  
  /* 列表间距优化 */
  .split .specs{margin-top:12px}
  .split .specs li{padding:10px 0}
}

/* ---------- 区域间距移动端优化 ---------- */
@media (max-width:860px){
  .section{padding-block:clamp(32px,6vw,60px)}
}

/* ---------- 四大板块移动端优化 ---------- */
@media (max-width:860px){
  .pillar{min-height:280px;padding:20px}
  .pillar h3{font-size:1.3rem}
  .pillar .en{font-size:.7rem}
  .pillar p{font-size:.85rem}
  
  /* 悬停效果在移动端简化 */
  .pillar:hover p{max-height:80px}
}

/* ---------- 卡片网格移动端优化 ---------- */
@media (max-width:860px){
  .card__body{padding:16px}
  .card__body h3{font-size:1.05rem}
  .card__body p{font-size:.85rem}
}

/* ---------- 统计数字移动端优化 ---------- */
@media (max-width:860px){
  .stat{padding:20px 16px}
  .stat .num{font-size:1.8rem}
  .stat .lab{font-size:.8rem}
}

/* ---------- 品牌色板移动端优化 ---------- */
@media (max-width:860px){
  .sw .chip{height:100px}
  .sw .meta{padding:12px 14px}
  .sw .meta b{font-size:.9rem}
  .sw .meta code{font-size:.7rem}
}

/* ---------- 辅助图案移动端优化 ---------- */
@media (max-width:860px){
  .pattern-grid{gap:8px}
  .pattern-label{font-size:.7rem;padding:8px 10px}
}

/* ---------- 字体展示区域移动端优化 ---------- */
@media (max-width:860px){
  /* 中文字体标签 */
  .tagchip{
    font-size:.65rem;
    padding:3px 10px
  }
  
  /* 字体展示图片优化 - 排除 split__media 内的图片 */
  .split > div:not(.split__media) img,
  .split__body img{
    max-width:100%;
    height:auto
  }
}

/* ---------- 滚动画廊移动端优化 ---------- */
@media (max-width:860px){
  .scroll-gallery__item{
    width:260px;
    height:180px
  }
}

/* ---------- 页脚移动端优化 ---------- */
@media (max-width:860px){
  .footer__top{gap:30px}
  .footer h4{font-size:.75rem}
  .footer a{font-size:.85rem}
  .footer__brand p{font-size:.85rem}
  .footer__big{font-size:clamp(2.5rem,12vw,5rem)}
}

/* ---------- 联系表单移动端优化 ---------- */
@media (max-width:860px){
  .field input,.field select,.field textarea{
    font-size:16px  /* 防止 iOS 缩放 */
  }
  
  .cinfo .row{padding:14px 0}
  .cinfo .row .k{width:40px;height:40px;font-size:1rem}
  .cinfo .row .v b{font-size:1rem}
}

/* ---------- 地图区域移动端优化 ---------- */
@media (max-width:860px){
  .loc__info{padding:24px}
  .loc__info h3{font-size:1.4rem}
  .loc__info .addr{font-size:.9rem}
  .loc__map{min-height:240px}
}

/* ---------- 购物车抽屉移动端优化 ---------- */
@media (max-width:860px){
  .drawer{width:100%}
}

/* ---------- 小屏手机额外优化 (<=560px) ---------- */
@media (max-width:560px){
  /* 更紧凑的导航 */
  .nav__in{height:56px;padding-inline:16px}
  .brand img{height:24px}
  
  /* Hero 区域更紧凑 */
  .hero__in{padding-bottom:32px}
  .hero h1{font-size:clamp(1.8rem,9vw,2.6rem)}
  
  /* 按钮全宽 */
  .hero__cta .btn{width:100%;justify-content:center}
  
  /* 菜单更紧凑 */
  .mmenu{padding:70px 20px 30px}
  .mmenu a{font-size:1.25rem;padding:.3em 0}
  
  /* 统计数字两列 */
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:16px}
  .stat .num{font-size:1.6rem}
  
  /* 色板单列 */
  .swatches{grid-template-columns:1fr 1fr}
  .sw .chip{height:80px}
  
  /* 页脚单列 */
  .footer__top{grid-template-columns:1fr}
  .footer__big{padding:24px 0 8px}
  
  /* 联系表单 */
  .contact-grid{gap:20px}
}

/* ---------- 横屏手机优化 ---------- */
@media (max-height:500px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:80px}
  .hero h1{font-size:2rem}
  .mmenu{justify-content:flex-start;padding-top:80px}
}

/* ---------- 安全区域适配 (iPhone 刘海屏) ---------- */
@supports (padding-top:env(safe-area-inset-top)){
  .nav__in{
    padding-top:env(safe-area-inset-top);
    padding-left:max(var(--pad),env(safe-area-inset-left));
    padding-right:max(var(--pad),env(safe-area-inset-right))
  }
  
  .mmenu{
    padding-top:calc(80px + env(safe-area-inset-top));
    padding-left:max(var(--pad),env(safe-area-inset-left));
    padding-right:max(var(--pad),env(safe-area-inset-right))
  }
  
  .drawer{
    padding-bottom:env(safe-area-inset-bottom)
  }
}