/* ============================================================
   RapiMonto 统一响应式层（design / about / survey 三页共用）
   - 统一断点：1024px（平板） / 768px（手机） / 480px（小屏）
   - 统一容器 .wrap、导航汉堡抽屉、页脚四栏→两栏→单栏
   各页面自己的 CSS 只保留「内容区块」专属的响应式规则。
   ============================================================ */

/* 统一容器：桌面 1200px，移动端左右 4% 留白（等价于 width:1200px; max-width:92%） */
.wrap {
  width: min(1200px, 92%);
  margin-inline: auto;
}

/* 防止移动端抽屉（position:fixed; right:0; translateX(100%)）被推到视口右侧外导致横向滚动条。
   用 overflow-x: clip 而非 hidden —— clip 不创建滚动容器，不会破坏 .nav 的 sticky 定位。 */
html, body {
  overflow-x: clip;
}

/* ---------- 页脚：4 → 2 → 1 ---------- */
@media (max-width: 1024px) {
  .ft__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .ft__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 42px;
  }
  .ft__brand p {
    max-width: none;
  }
}

/* ---------- 导航：≤768px 收起为右侧抽屉 ---------- */
@media (max-width: 768px) {
  .nav__links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 260px;
    background: #fff;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    padding: 80px 24px 24px;
    box-shadow: -10px 0 30px rgba(0, 0, 0, .1);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s, visibility .3s;
    z-index: 100;
  }
  .nav__links.open {
    transform: translateX(0);
    visibility: visible;
  }
  .nav__links a {
    color: #1a1a1a;
    width: 100%;
    padding: 12px 0;
    border-radius: 0;
  }
  .nav__burger {
    display: flex;
    z-index: 101;
    margin-left: auto;
    flex-direction: column;
  }
}

/* ---------- 小屏微调 ---------- */
@media (max-width: 480px) {
  .wrap {
    width: 94%;
  }
}