/* ============================================================
   base-mobile.css — 自包含移动端适配（不依赖 Tailwind 构建产物）
   在 style.css 之后引入
   覆盖：底部导航栏 + 横向溢出根因兜底 + 图片自适应 + 长串断词
   ============================================================ */

/* 默认（桌面）隐藏底部导航 */
.app-bottom-nav,
.bottom-nav {
  display: none;
}

@media (max-width: 767px) {

  /* ========== 底部导航栏 ========== */
  .app-bottom-nav,
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.07);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .app-bottom-nav > a,
  .bottom-nav > a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    color: #6b7280;
    text-decoration: none;
    font-size: 11px;
    min-height: 54px;
    -webkit-tap-highlight-color: transparent;
  }

  .app-bottom-nav > a > i,
  .bottom-nav > a > i,
  .app-bottom-nav > a > svg,
  .bottom-nav > a > svg {
    font-size: 18px;
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
  }

  .app-bottom-nav > a.active,
  .bottom-nav > a.active,
  .app-bottom-nav > a:hover,
  .bottom-nav > a:hover {
    color: #1e88e5;
  }

  .app-bottom-nav > a span,
  .bottom-nav > a span {
    line-height: 1.2;
  }

  /* 内容区给底部导航留白，避免被遮挡 */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  /* ========== 根因兜底：禁止整页横向溢出 ========== */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ========== 图片 / 媒体自适应 ========== */
  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  /* ========== 用户生成内容 / 正文长串断词 ========== */
  .ck-content,
  .editor-content,
  .post-body,
  .community-content,
  .detail-content,
  .product-desc,
  .agent-desc,
  .description,
  article,
  .content,
  .topic-content,
  .comment-content,
  .rich-text,
  .prose,
  .ql-editor {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* ========== 表单 16px 防 iOS 自动缩放 ========== */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* ========== 表格横向滚动兜底层 ========== */
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ========== 网格在超小屏降级（无断点的多列网格）========== */
  .grid-cols-4,
  .grid-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 平板：网格降为 3 列 */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-cols-4,
  .grid-cols-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}