/* ═══════════════════════════════════════════════════════════════════
   SITU · Mobile baseline
   ───────────────────────────────────────────────────────────────────
   入门级移动端修复 — 让公共页 (landing/about/gallery/contact/forum/
   login/signup/store/studio-intro) 在 iPhone / iPad 上不破。

   不在范围:
     - canvas.html / studio2.html / altas5.html: 桌面工具，移动端
       不强求可用（屏幕太小 + 多 panel 布局）
     - profile / settings / admin: 后台页，desktop only

   断点:
     ≤768px   = phone / 小 tablet portrait
     ≤1024px  = iPad portrait
     >1024px  = desktop（不动）
   ═══════════════════════════════════════════════════════════════════ */


/* ═════════════════════════════════════════════════════════════════
   通用：防意外水平滚动 + 防 iOS zoom
   全屏 / 全 page 都吃这条
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* 任何元素溢出导致横向滚动 → 截掉 */
  html, body { overflow-x: hidden; }

  /* 图 / 视频 / iframe 默认响应式 */
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }

  /* table 在小屏可滑 */
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}


/* ═════════════════════════════════════════════════════════════════
   ≤768px: phone breakpoint
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* iOS Safari < 16px 输入框会自动 zoom，强制 16px 防止 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* 全站 padding 收紧，避免内容贴边 */
  body { font-size: 15px; }

  /* 主要容器边距 */
  main, .page-body, .store-main, .lab-shell, .page-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 触控目标 ≥44×44px（Apple HIG 标准） */
  button:not(.btn--sm):not(.btn--icon),
  .btn:not(.btn--sm):not(.btn--icon),
  a.cta,
  a.page-cta,
  .plan-buy,
  .submit-btn {
    min-height: 44px;
  }

  /* Landing hero 缩放 */
  .hero-title,
  .page-title,
  .store-title {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.15 !important;
  }
  .hero-sub,
  .page-sub,
  .store-sub {
    font-size: 14px !important;
    line-height: 1.55;
  }

  /* 导航条收紧 */
  nav.topbar,
  nav.site-nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .top-nav { gap: 14px !important; font-size: 11px !important; }

  /* 多列网格在移动端单列 */
  .plan-grid,
  .page-body[style*="columns"],
  .lab-cases,
  .cat-block {
    grid-template-columns: 1fr !important;
    column-count: 1 !important;
    columns: 1 !important;
  }

  /* 大间距区段收 */
  section,
  .pin-stage,
  .store-header,
  .page-hero,
  .lab-cases {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Hero / 大画面通常用 100vh，移动端改 auto 防滚不到 */
  .pin-section,
  .hero-fullscreen {
    min-height: auto !important;
    height: auto !important;
  }

  /* 浮动表格变 stack — admin 表单等 */
  .row-between,
  .header-right {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Footer 收紧 */
  .foot,
  .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 24px 16px !important;
  }

  /* 隐藏过于次级的元素 */
  .nav-utils .user-name,
  .top-right-meta { display: none !important; }
}


/* ═════════════════════════════════════════════════════════════════
   ≤480px: 极窄屏 / 老 iPhone
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  body { font-size: 14px; }

  .hero-title,
  .page-title,
  .store-title {
    font-size: clamp(24px, 9vw, 32px) !important;
  }

  /* 顶栏 logo 缩 */
  .top-brand,
  .brand-link {
    font-size: 16px !important;
    letter-spacing: 0.08em !important;
  }
  .top-brand .cn,
  .brand-link .cn { font-size: 13px !important; }

  /* 卡片 padding 收 */
  .card { padding: 24px 20px !important; }

  /* Form button 全宽 */
  .submit-btn,
  .btn--primary,
  .btn--lg {
    width: 100% !important;
  }
}


/* ═════════════════════════════════════════════════════════════════
   特殊页面例外 — 桌面工具页在 mobile 直接显示"请在桌面打开"
   而不是破败 layout。canvas / studio / atlas 三个工具页生效。
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  body[data-page="canvas"]::before,
  body[data-page="studio2"]::before,
  body[data-page="altas5"]::before {
    content: 'SITU 工作区在桌面端使用 · 建议屏幕宽度 ≥ 1024px · 移动端请回 situ.global 浏览公共页';
    display: flex;
    align-items: center; justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: #07030b;
    color: #f3e9d4;
    padding: 32px;
    font: 500 14px/1.7 system-ui, sans-serif;
    text-align: center;
    letter-spacing: 0.02em;
  }
}