/**
 * mobile-guard.css — 全站移动端防变形兜底
 * 由 js/common.css、styles/perf.css、styles/article-mobile.css 引入
 * 2026-06-14
 */

@media (max-width: 767px) {
  html {
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
    max-width: 100%;
  }

  img,
  video,
  svg,
  iframe,
  embed,
  object {
    max-width: 100%;
    height: auto;
  }

  .container,
  main,
  section,
  article,
  aside,
  header,
  footer,
  .main-wrap,
  .blog-main,
  .news-article-page,
  .blog-content-col,
  .sidebar,
  .sidebar--hub,
  .sidebar-sticky-stack {
    max-width: 100%;
    min-width: 0;
  }

  /* grid minmax(300px) 在窄屏会撑出横向滚动 */
  .article-grid,
  .related-grid,
  .featured-grid,
  .case-grid {
    grid-template-columns: 1fr !important;
  }

  /* 芯片/标签/分页：取消 perf 误伤的 44px 最小触控框 */
  .category-btn,
  .view-btn,
  .blog-hot-chip,
  .page-btn,
  .sidebar-tags a,
  .news-subnav__link,
  .qa-nav a,
  .qa-link,
  .card-tag-chip,
  .tab-item,
  .blog-hub-head__nav a,
  .access-links a {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  /* 仅对未包在 .table-wrap 内的裸 table 做 block 化；对比表由 page-shell-unified 管 */
  table:not(.table-wrap table):not(.compare-table-wrap table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  li,
  .hub-link-title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .card-footer {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .card-footer .read-time,
  .card-footer .read-more {
    white-space: normal;
  }

  .article-grid.list-view .card-banner {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 8px 12px 0;
  }

  .blog-search-dock .articles-controls .article-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .blog-search-dock .articles-controls .view-toggle--toolbar {
    margin-left: 0;
  }

  .blog-hub-head__inner {
    gap: 12px;
  }

  .blog-hub-head__nav {
    width: 100%;
  }

  .dropdown-content {
    min-width: 0;
    max-width: calc(100vw - 24px);
  }

  .qr-float {
    max-width: calc(100vw - 24px);
  }
}