/* 与主CSS保持一致的页面宽度修复 */

/* 在移动端确保与主CSS一致的容器宽度 */
@media (max-width: 767px) {
  /* 使用与主CSS相同的容器设置 */
  .container {
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
  }

  /* 确保内容区域不会超出容器 */
  .content-wrap,
  .main-content {
    overflow-x: hidden;
    width: 100%;
  }

  /* 修复可能造成宽度异常的元素 */
  .category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0 -5px; /* 使用负边距平衡内边距 */
  }

  .category-card {
    width: 100%;
    margin: 0 5px;
    box-sizing: border-box;
  }

  /* 保持与主CSS一致的帖子项目宽度 */
  .posts-item.card {
    width: calc(50% - 10px);
    margin: 5px;
    box-sizing: border-box;
  }

  .swiper-scroll .posts-item.card {
    margin-right: 10px !important;
    width: calc(50% - 5px) !important;
  }

  /* 修复可能的溢出元素 */
  table,
  .wp-block-table,
  pre,
  code,
  .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    display: block;
  }

  /* 确保图片和媒体元素不会撑破容器 */
  img,
  video,
  iframe,
  .fit-cover {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  /* 修复表单和输入框宽度 */
  .form-control,
  input,
  textarea,
  select {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 修复可能的flex容器宽度问题 */
  .flex,
  .inflex {
    min-width: 0;
    box-sizing: border-box;
  }

  .flex .flex1,
  .flex .flex-auto {
    min-width: 0;
    overflow: hidden;
  }

  /* 确保导航栏宽度一致 */
  .navbar-top .navbar-nav {
    margin-left: 10px;
    margin-right: 10px;
  }

  /* 修复省份选择器宽度 */
  .province-selector-container {
    margin: 0;
    padding: 15px 10px;
  }

  .province-select {
    min-width: 150px;
    max-width: 100%;
    width: 100%;
  }

  /* 修复字母导航宽度 */
  .alphabet-nav {
    margin: 0;
    padding: 12px 10px;
  }

  .alphabet-nav-inner {
    justify-content: flex-start;
    gap: 4px;
    min-width: fit-content;
    width: 100%;
  }

  .alphabet-link {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  /* 修正可能的绝对定位元素 */
  .abs,
  .absolute {
    max-width: 100vw;
  }

  /* 修正可能的固定定位元素 */
  .fixed {
    width: 100vw;
  }

  /* 修正底部TAB的宽度 */
  .footer-tabbar {
    width: 100vw;
    left: 0;
    right: 0;
  }

  /* 修正可能的模态框宽度 */
  .modal-dialog {
    margin: 30px 10px;
    width: calc(100% - 20px);
  }

  .modal-mini,
  .modal-sm {
    width: calc(100% - 20px);
    max-width: 400px;
  }
}

/* 确保在不同设备上的一致性 */
@media screen and (max-width: 480px) {
  /* 针对更小屏幕的调整 */
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
  
  .posts-item.card {
    width: calc(50% - 8px);
    margin: 4px;
  }
}

@media screen and (max-width: 360px) {
  /* 针对非常小的屏幕 */
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
  }
  
  .alphabet-link {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}

/* 防止页面级水平滚动 */
body {
  overflow-x: hidden;
}

/* 确保根元素不产生额外宽度 */
html {
  overflow-x: hidden;
  width: 100vw;
  max-width: 100vw;
}