/* ============================================================
   TeachAny 门户页 · 移动端适配补丁
   ------------------------------------------------------------
   只在 <=768px 生效，桌面端零影响。
   解决的核心问题：顶部 9 个导航链接一行排开，把移动端的
   layout viewport 撑到 900+px，浏览器于是把整页缩小显示，
   字变小、排版错乱（"手机打开很乱"的根因）。
   ============================================================ */

@media (max-width: 768px) {

  /* ── 1. 全局防溢出：任何内容都不许把布局视口撑宽 ── */
  html { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
  body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
  img, video, canvas, iframe { max-width: 100%; }
  h1, h2, h3, p, a, span, button { overflow-wrap: break-word; }

  /* ── 2. 顶栏：logo 固定 + 导航横向可滑动（不换行、不撑宽） ── */
  .top-bar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    height: auto !important;
    min-height: 48px;
  }
  .top-bar h1 {
    flex: 0 0 auto !important;
    font-size: 16px !important;
    white-space: nowrap;
  }
  .top-bar h1 img { height: 28px !important; width: 28px !important; }

  .top-bar .nav-links, .nav-links {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;          /* 关键：允许 flex 子项收缩，才有横向滚动 */
    width: auto !important;
    max-width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 0 2px 0 !important;
    /* 右侧渐隐，提示后面还有入口可以滑动 */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, rgba(0,0,0,0.55) 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 92%, rgba(0,0,0,0.55) 100%);
  }
  .nav-links > a, .top-bar .nav-links > a, .nav-links > .backup-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 6px 9px !important;
    margin-left: 0 !important;
    border-radius: 8px !important;
  }
  /* path.html 按角色隐藏链接的规则仍生效，勿强制显示 */

  /* ── 3. 首页 Gallery · Hero ── */
  .hero { padding: 36px 16px 32px !important; }
  .hero h1 {
    font-size: 26px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    line-height: 1.25 !important;
  }
  .hero h1 img { height: 38px !important; width: 38px !important; }
  .hero .subtitle { font-size: 14px !important; margin-bottom: 16px; }
  .hero .stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 6px;
    margin-top: 20px;
  }
  .stat-num { font-size: 22px !important; }
  .stat-label { font-size: 10px !important; line-height: 1.35; margin-top: 2px; }
  .theories { gap: 6px; padding: 0 8px; margin-top: 20px; }
  .theory-badge { font-size: 11px !important; padding: 4px 10px; }

  /* Hero 内三张推广卡（inline style 需要 !important 覆盖） */
  .hero > a { margin-top: 16px !important; }
  .hero > a > div { padding: 14px 16px !important; border-radius: 12px !important; }
  .hero > a p { font-size: 13px !important; line-height: 1.65 !important; }

  /* ── 4. 首页 · 搜索 / 筛选 / 卡片 ── */
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  .search-box-wrapper { margin-bottom: 18px; }
  .search-input { font-size: 16px !important; }   /* 16px 可避免 iOS 聚焦自动缩放 */

  .filter-bar-group { margin-bottom: 24px; }
  .filter-row {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 6px !important;
    margin-bottom: 8px !important;
    padding-bottom: 4px;
  }
  .filter-row-label {
    flex: 0 0 auto;
    font-size: 11px !important;
    padding: 6px 4px !important;
  }
  .filter-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 18px !important;
  }

  .course-grid, .featured-grid, .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .card-cover, .card-cover-emoji { height: 140px !important; }
  .card-cover-emoji { font-size: 52px !important; }
  .card-header { padding: 14px 16px !important; }
  .card-footer { padding: 10px 16px 14px !important; }
  .card-emoji { font-size: 32px !important; margin-bottom: 8px; }
  .card-title { font-size: 17px !important; }
  .card-desc { font-size: 13px !important; }
  .card-meta { font-size: 11px !important; }
  .card-meta span { margin-right: 8px; }
  .card-action { padding: 6px 12px !important; font-size: 12px !important; }

  .gallery-section { margin-bottom: 32px; }
  .gallery-section-header { flex-wrap: wrap; gap: 8px !important; }
  .gallery-section-title { font-size: 18px !important; }
  .gallery-section-header span { font-size: 11px !important; margin-left: 0 !important; }
  .featured-section { padding: 0 14px; }
  .featured-title { font-size: 22px !important; }

  /* ── 5. 通用区块（features / cta / footer） ── */
  .features, .cta { padding: 36px 16px !important; }
  .features h2 { font-size: 22px !important; margin-bottom: 24px; }
  .feature-item { padding: 20px !important; }
  .feature-item h3 { font-size: 16px !important; }
  .cta h2 { font-size: 22px !important; }
  .cta p { font-size: 14px !important; }
  .cta-btn { padding: 12px 24px !important; font-size: 15px !important; }
  footer { padding: 24px 16px !important; }

  /* ── 6. my.html（我的学习） ── */
  .my-hero { padding: 28px 14px !important; }
  .my-hero-inner { grid-template-columns: 1fr !important; gap: 20px; }
  .my-hero h1 { font-size: 26px !important; }
  .my-hero .subtitle { font-size: 13px !important; }
  .stat-chips { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .tab-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 6px !important;
    padding-bottom: 4px;
  }
  .tab-bar .tab { flex: 0 0 auto; white-space: nowrap; font-size: 12px !important; padding: 8px 12px !important; }
  .card-grid { grid-template-columns: 1fr !important; }

  /* ── 7. knowledge-map.html · 顶部统计条可换行，侧栏不占满整屏 ── */
  .stats-bar {
    top: 52px !important;
    height: auto !important;
    min-height: 32px;
    flex-wrap: wrap;
    gap: 4px 8px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
  .stats-bar .stat-chip { padding: 2px 7px; font-size: 10px; }
  .controls { width: min(240px, calc(100vw - 16px)) !important; left: 8px !important; top: 104px !important; }
  .node-detail-panel { width: min(320px, 100vw) !important; top: 104px !important; height: calc(100vh - 104px) !important; }

  /* ── 8. 其它门户页：标题与面板字号收敛 ── */
  .header h1, .pbl-hero h1, .pbl-section h2, .hero h2 { font-size: 24px !important; }
  .pbl-section { padding: 16px !important; }
  .panel, .card, .stat-box { border-radius: 12px; }
}

/* 更小屏（<=380px）再收一点 */
@media (max-width: 380px) {
  .hero h1 { font-size: 23px !important; }
  .hero .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-chips { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}