/* 免域Pro 前台自适应增强（在既有响应式基础上叠加，保守规则，最后加载覆盖） */

/* 防止移动端出现横向滚动条 */
html, body {
  max-width: 100%;
}
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  /* 媒体元素自适应，避免溢出 */
  img, video, iframe, table {
    max-width: 100%;
  }
  img:not([width]):not([height]) {
    height: auto;
  }

  /* 长内容/表格可横向滚动而非撑破布局 */
  .table-wrap, .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 页脚在窄屏纵向堆叠 */
  .footer-content {
    flex-direction: column;
    gap: 20px;
  }
  .footer-features-container {
    flex-wrap: wrap;
    gap: 16px;
  }
  .footer-bottom-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* 常见栅格在窄屏单列 */
  .container, .nav-container, .footer-container {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* 更友好的点击区域 */
  a, button, .btn {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
  }
}

@media (max-width: 480px) {
  /* 超小屏进一步压缩大标题，避免换行溢出 */
  h1 {
    font-size: clamp(22px, 7vw, 32px);
    line-height: 1.3;
    word-break: break-word;
  }
  h2 {
    font-size: clamp(18px, 6vw, 26px);
    word-break: break-word;
  }
}