/* 凡人山水 —— 移动端响应式微调（R31）
 * 设计原则：
 *   ① 全部规则限定在 @media (max-width: 820px) 内，桌面端（>820px）完全不受影响；
 *   ② 仅做布局/可读性修正，不引入任何颜色（主题无关，浅色/深色模式均生效）；
 *   ③ 只“补充/收敛”已有样式，绝不删除或破坏桌面布局；
 *   ④ 修复两类最普遍的移动端真实缺陷：a) 整页横向溢出（横向滚动条/内容被裁切）
 *      b) 顶部导航的内联 flex 链接行在窄屏溢出/被截断（商城/订单/预订等页尤为明显）。
 * 注：首页 .navbar-primary 已有独立移动端侧边栏（.sidebar），本文件只针对 .navbar-custom 类导航。
 */

/* ============ 平板 / 手机（≤820px） ============ */
@media (max-width: 820px) {
  /* ① 杜绝整页横向溢出：根容器裁掉意外超宽内容（图片/长表格/绝对定位元素）。
       首页的 .sidebar 为 position:fixed 且仅在 .show 时 display:block 并 translateX(0) 回到视口内，
       隐藏时为 display:none，故不会被本规则裁切。 */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* ② 顶部 .navbar-custom 的导航行在窄屏换行而非溢出/截断 */
  .navbar-custom > .container {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }
  .navbar-custom > .container > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 0.35rem;
  }
  /* 导航链接在移动端给予可触摸的点击区域，并允许整行换行 */
  .navbar-custom .nav-link-custom {
    white-space: nowrap;
    padding: 0.4rem 0.65rem;
    font-size: 0.9rem;
  }

  /* ③ 媒体与嵌入内容永不超出视口宽度 */
  img, video, canvas, iframe, svg {
    max-width: 100%;
    height: auto;
  }

  /* ④ 内容容器在窄屏适度收窄内边距，避免文字贴边 */
  .container {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  /* ⑤ 通用可读性：收紧大字号标题，避免折行难看 */
  .hero-title { font-size: 1.7rem !important; line-height: 1.25; }
  .hero-subtitle { font-size: 1rem !important; }
  .section-title { font-size: 1.3rem !important; }
  .stat-num { font-size: 1.4rem !important; }

  /* ⑥ 卡片网格在窄屏退化为更密的两列，避免单列过长 */
  .quick-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.6rem !important; }
  .quick-card .card-title { font-size: 0.8rem; }

  /* ⑦ 按钮/可点击块在移动端至少 40px 高，便于手指点击 */
  .btn, button.btn, .nav-link-custom, .quick-card, .spot-card {
    min-height: 40px;
  }

  /* ⑧ 长表格在窄屏内部横向滚动，而不是撑破页面 */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============ 小屏手机（≤480px） ============ */
@media (max-width: 480px) {
  .container { padding-left: 0.75rem; padding-right: 0.75rem; }
  .hero-title { font-size: 1.45rem !important; }
  .section-title { font-size: 1.15rem !important; }
  .quick-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .navbar-custom .nav-link-custom { padding: 0.35rem 0.5rem; font-size: 0.85rem; }
}

/* E5 移动端深化（R102）：刘海屏 / 底部安全区适配
   仅在触摸设备（mobile-touch.js 加 .frs-touch）生效；桌面无此 class，完全不受影响
   包在 @media 内以满足"所有规则都在媒体查询内"的桌面安全契约 */
@media (max-width: 820px) {
  @supports (padding: env(safe-area-inset-top)) {
    .frs-touch .navbar-custom,
    .frs-touch .navbar-primary {
      padding-top: calc(env(safe-area-inset-top) + 0.5rem);
    }
    .frs-touch {
      padding-bottom: env(safe-area-inset-bottom);
    }
    .frs-touch .container,
    .frs-touch .container-fluid {
      padding-left: calc(env(safe-area-inset-left) + 0.75rem);
      padding-right: calc(env(safe-area-inset-right) + 0.75rem);
    }
  }
}