/* ============================================================
   全站响应式适配层 responsive.css（2026-09-05）
   只做布局/字号的媒体查询，不触碰任何业务逻辑与知识库。
   - PC 端（>900px）：完全交给原样式，本文件不生效
   - 平板/窄窗口（≤900px）：收紧容器与间距
   - 手机（≤768px）：汉堡导航、卡片单列、标题缩放、rail 折叠
   - 小手机（≤480px）：进一步收紧
   - 横屏手机/小平板（≤900px 且横屏）：自动跟随
   深浅色：全部沿用 CSS 变量，两种主题自动适配。
   ============================================================ */

/* ---------- 1. 容器与页头 ---------- */
@media (max-width: 900px) {
  .container { padding: 0 18px; }
}
@media (max-width: 768px) {
  .container { padding: 0 14px; }
  .page-header { padding: 84px 0 24px; }
  .page-header-title { font-size: 26px; }
  .page-header-desc { font-size: 14px; padding: 0 4px; }
}

/* ---------- 2. 顶部导航：手机汉堡折叠 ----------
   （汉堡按钮/下拉骨架由 nav-component.js 注入，这里只做移动端细节增强） */
@media (max-width: 768px) {
  .navbar { height: 56px; }
  .navbar .container { gap: 6px; }
  .navbar-logo-img { width: 30px; height: 30px; }
  .navbar-logo { font-size: 15px; gap: 8px; }
  .brand-strip { margin-top: 0; padding: 2px 10px 4px; }
  /* 主题按钮在窄屏内保持可点区域 */
  .theme-toggle { width: 36px; height: 36px; }
  /* 汉堡按钮：保持可点击区域 */
  .navbar-hamburger {
    padding: 6px 10px !important;
    color: var(--color-text) !important;
    opacity: 1 !important;
  }
}

/* ---------- 3. 文本组件：大标题 / 小标题 / 苹果风英文 ---------- */
@media (max-width: 900px) {
  /* 页面大标题：随屏收窄，PC 视觉层级不变 */
  .page-main-title, .mm-title, .tt-title, .gk-title, .cl-title, .gv-title,
  .hv-title, .cs-title, .ad-title, .lq-title {
    font-size: clamp(24px, 6.8vw, 34px) !important;
  }
  .hero-title { font-size: clamp(30px, 8.4vw, 44px) !important; }
  .block-sub-title, .section-title { font-size: clamp(18px, 4.8vw, 24px) !important; }
  /* 苹果风英文专有名词：字号微缩、保持锐利 */
  .en-apple-text, .en-text { letter-spacing: 0.005em; }
}
@media (max-width: 480px) {
  .page-main-title, .mm-title, .tt-title, .gk-title, .cl-title, .gv-title,
  .hv-title, .cs-title, .ad-title, .lq-title {
    font-size: clamp(22px, 6.4vw, 28px) !important;
  }
  .hero-title { font-size: clamp(26px, 7.6vw, 32px) !important; }
  .page-header-title { font-size: 23px; }
}

/* ---------- 4. 卡片布局：手机单列垂直堆叠、内边距适配 ---------- */
@media (max-width: 900px) {
  /* 通用多列卡片网格收窄（各页 grid 容器） */
  .pr-grid, .pr-path, .modules-grid, .paths-grid, .lq-explore,
  .mm-featured, .progress-modules, .case-grid, .tool-grid, .wiki-grid,
  .entry-grid, .gallery-grid {
    grid-template-columns: 1fr !important;
  }
  /* 统计类 head-grid 保持 2 列紧凑 */
  [class*="-head-grid"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  [class*="-head-grid"] { grid-template-columns: repeat(2, 1fr) !important; }
  .pr-card, .pr-level { padding: 16px 14px; }
}

/* ---------- 5. 模块页：左 rail 侧栏折叠到顶部 ---------- */
@media (max-width: 900px) {
  .mm-layout, .tt-shell, .cs-shell, .gk-shell, .ad-layout {
    grid-template-columns: 1fr !important;
  }
  .mm-rail, .tt-rail, .cs-rail, .gk-rail, .ad-rail {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border-bottom: 1px solid var(--color-border);
    padding: 4px 0 14px !important;
    margin-bottom: 6px !important;
  }
  /* 过滤分组与标签容器：保持纵向块 + 标签换行，避免内容撑宽 rail */
  .mm-fgroup, .tt-rail-block, .cs-rail-block, .gk-rail-block, .ad-rail-block {
    max-height: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .tt-chips, .cs-chips, .ad-chips, .gk-chips {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }
  .tt-chip, .cs-chip, .ad-chip, .gk-chip {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.35;
  }
  .mm-rail > *, .tt-rail > *, .cs-rail > *, .gk-rail > *, .ad-rail > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .mm-list-col, .tt-main, .cs-main, .gk-main, .ad-main { min-width: 0; }
  .tt-shell, .cs-shell, .gk-shell, .ad-layout { min-width: 0; }
}

/* ---------- 6. 搜索框与下拉候选：宽度自适应、完整显示 ---------- */
@media (max-width: 768px) {
  .hero-search { width: 100%; max-width: none; }
  .hero-search .hero-search-input { font-size: 14px !important; }
  .search-results {
    max-width: none;
    left: 4px;
    right: 4px;
    max-height: min(300px, 42vh);
  }
  .search-result-item { padding: 11px 14px; }
  .search-result-title { font-size: 13.5px; }
  .search-result-desc { font-size: 11.5px; }
  /* 搜索历史下拉同样收窄 */
  .search-history-dropdown { max-width: none !important; left: 4px; right: 4px; }
}
@media (max-width: 480px) {
  .search-results { max-height: min(260px, 40vh); }
}

/* ---------- 7. 图谱 / 历史浏览 / 学习中心等模块细节 ---------- */
@media (max-width: 900px) {
  /* 图谱：画布容器不溢出，列表单列 */
  .gv-list, .gg-klist, .hv-list, .hv-sec-list, .hl-list {
    grid-template-columns: 1fr !important;
  }
  .gv-canvas, .gg-canvas { width: 100% !important; overflow-x: auto; }
  /* 学习中心：搜索行换行、测验区不挤压 */
  .lq-hero-search { flex-wrap: wrap; }
  .lq-search { flex: 1 1 100%; }
  /* 提示词工坊 / 创意工坊列表 */
  .pw-pal-list, .cl-col { grid-template-columns: 1fr !important; }
  /* 进阶参考条目头：允许换行，避免名称+别名+状态挤压溢出 */
  .ad-head { flex-wrap: wrap !important; gap: 8px !important; }
  .ad-head-right { margin-left: 0 !important; }
  /* 页脚链接换行 */
  .footer-links { flex-wrap: wrap; gap: 6px 12px; }
  .footer-disclaimer { padding: 12px 4px; }
}

/* ---------- 8. 横屏手机 / 小平板（旋转适配） ---------- */
@media (max-width: 900px) and (orientation: landscape) {
  .navbar { height: 56px; }
  .page-header { padding: 72px 0 20px; }
  .pr-grid, .pr-path { grid-template-columns: repeat(2, 1fr) !important; }
  .modules-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .mm-layout, .tt-shell, .cs-shell { grid-template-columns: 1fr !important; }
  .search-results { max-height: min(280px, 50vh); }
}

/* ---------- 9. 超小屏兜底（≤360px） ---------- */
@media (max-width: 360px) {
  .navbar-logo span { display: none; }
  .hero-title { font-size: 24px !important; }
  .pr-card h3 { font-size: 16px; }
  [class*="-head-grid"] { grid-template-columns: 1fr !important; }
  .ad-head-right, .tt-head-right, .cs-head-right { max-width: 100%; }
}

/* ---------- 10. 全站手机端文字压缩遮挡修复（≤768px） ---------- */
@media (max-width: 768px) {
  /* 10.1 移除不必要的 nowrap，允许长文本自动换行 */
  .navbar-menu a, .navbar-menu .nav-item,
  .footer-links a, .footer-disclaimer,
  .stat-item .stat-label, .stat-item .stat-value,
  .module-card h3, .module-card p,
  .pr-card h3, .pr-card p, .pr-card .pr-meta,
  .tool-card h3, .tool-card p,
  .case-card h3, .case-card p,
  .wiki-card h3, .wiki-card p,
  .entry-card h3, .entry-card p,
  .gallery-card h3, .gallery-card p,
  .tip-card h3, .tip-card p,
  .ad-entry-title, .ad-entry-desc,
  .tt-entry-title, .tt-entry-desc,
  .cs-entry-title, .cs-entry-desc,
  .gk-entry-title, .gk-entry-desc,
  .mm-entry-title, .mm-entry-desc,
  .lq-card h3, .lq-card p,
  .hv-card h3, .hv-card p,
  .gg-card h3, .gg-card p,
  .cl-card h3, .cl-card p,
  .pw-card h3, .pw-card p {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.5;
  }

  /* 10.2 按钮文字不被压缩，增加安全内边距 */
  .btn, .button, button,
  .search-btn, .hero-search-btn,
  .theme-toggle, .nav-toggle,
  .gv-btn, .gv-chip, .gv-facet,
  .pw-btn, .cl-btn, .lq-btn, .gg-btn,
  .ad-btn, .tt-btn, .cs-btn, .gk-btn, .mm-btn,
  .hv-btn, .tool-btn, .case-btn, .wiki-btn {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.4;
    padding-left: 10px !important;
    padding-right: 10px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 10.3 卡片/容器增加左右安全内边距，文字不贴边被裁切 */
  .card, .module-card, .pr-card, .tool-card, .case-card,
  .wiki-card, .entry-card, .gallery-card, .tip-card,
  .ad-card, .tt-card, .cs-card, .gk-card, .mm-card,
  .lq-card, .hv-card, .gg-card, .cl-card, .pw-card,
  .stat-card, .info-card, .feature-card {
    padding-left: 14px !important;
    padding-right: 14px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* 10.4 弹窗内文字优化：成就弹窗、搜索弹窗 */
  .achievement-modal, .achievement-popup,
  .my-modal, .my-panel,
  .search-results, .search-history-dropdown,
  .gg-modal, .gg-popup, .gg-dialog,
  .pw-modal, .cl-modal, .lq-modal,
  .ad-modal, .tt-modal, .cs-modal, .gk-modal, .mm-modal,
  .dev-panel, .developer-panel {
    padding-left: 14px !important;
    padding-right: 14px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .achievement-modal *, .achievement-popup *,
  .my-modal *, .my-panel *,
  .search-results *, .search-history-dropdown *,
  .gg-modal *, .gg-popup *, .gg-dialog *,
  .dev-panel *, .developer-panel * {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.5;
  }

  /* 10.5 标题字号降级，防止大标题撑破容器 */
  h1, .h1, .title, .main-title, .page-title,
  .hero-title, .section-title, .block-title,
  .card-title, .module-title {
    font-size: clamp(18px, 5.5vw, 28px) !important;
    line-height: 1.3 !important;
    word-break: break-word;
    white-space: normal !important;
  }
  h2, .h2, .sub-title, .subtitle {
    font-size: clamp(16px, 4.8vw, 24px) !important;
    line-height: 1.35 !important;
    word-break: break-word;
    white-space: normal !important;
  }
  h3, .h3 {
    font-size: clamp(14px, 4.2vw, 20px) !important;
    line-height: 1.4 !important;
    word-break: break-word;
    white-space: normal !important;
  }

  /* 10.6 正文/描述文字行高优化，避免垂直挤压重叠 */
  p, .desc, .description, .text, .content,
  .lead, .lede, .summary, .intro,
  .card-desc, .module-desc, .entry-desc {
    font-size: clamp(12px, 3.6vw, 15px) !important;
    line-height: 1.65 !important;
    word-break: break-word;
    white-space: normal !important;
  }

  /* 10.7 标签/徽章文字不被压缩 */
  .tag, .badge, .label, .chip, .pill,
  .rarity-tag, .category-tag, .status-tag,
  .gv-chip, .gv-facet .lb,
  .tt-chip, .cs-chip, .ad-chip, .gk-chip, .mm-chip {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.3;
    padding: 3px 8px !important;
    max-width: 100% !important;
  }

  /* 10.8 表格/列表文字不被挤压 */
  table, .table, .data-table,
  ul, ol, .list, .item-list,
  .gv-nb, .gv-d-row, .gv-row,
  .ad-row, .tt-row, .cs-row, .gk-row, .mm-row {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  table td, table th, .table td, .table th,
  .gv-d-row dt, .gv-d-row dd,
  .gv-row-name, .gv-row-meta, .gv-row-txt {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.5;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 10.9 导航下拉菜单文字完整显示 */
  .navbar-menu, .navbar-dropdown, .mobile-menu {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .navbar-menu a, .navbar-menu span, .navbar-menu div {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.4;
  }

  /* 10.10 页脚文字不被挤压 */
  .footer, footer, .site-footer,
  .footer-links, .footer-disclaimer, .footer-contact,
  .footer-copyright, .footer-info {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.6;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---------- 11. 超小屏文字进一步收紧（≤480px） ---------- */
@media (max-width: 480px) {
  h1, .h1, .title, .main-title, .hero-title {
    font-size: clamp(16px, 6vw, 22px) !important;
  }
  h2, .h2, .sub-title {
    font-size: clamp(15px, 5.2vw, 20px) !important;
  }
  p, .desc, .description, .text {
    font-size: clamp(11px, 3.8vw, 14px) !important;
    line-height: 1.6 !important;
  }
  .btn, .button, button {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
  .card, .module-card, .pr-card, .tool-card {
    padding: 12px !important;
  }
}

/* ---------- 12. 特定元素移动端文字遮挡补充修复（≤768px） ---------- */
@media (max-width: 768px) {
  /* 12.1 各页pal行定义文字：移除nowrap，允许换行 */
  .ad-pal-row-def, .cs-pal-row-def, .tt-pal-row-def, .gk-pal-row-def,
  .hv-pal-row-name, .hv-pal-row-meta,
  .search-history-kw {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.5;
    max-width: 100% !important;
  }

  /* 12.2 图谱facet标签：允许换行 */
  .gv-facet .lb {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
  }

  /* 12.3 各页分组名称/小标题：允许换行 */
  .cs-group-name, .gg-sec-kicker, .gg-sec-note, .cl-sec-note,
  .ad-head-right, .tt-head-right, .cs-head-right, .gk-head-right {
    white-space: normal !important;
    word-break: break-word;
    max-width: 100% !important;
  }

  /* 12.4 学习中心特定元素：文字不被挤压 */
  .lq-cat-prog, .lq-resume-bar, .lq-score-bar,
  .lq-rstats, .lq-opts {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .lq-chip, .lq-tagbtn, .lq-link, .lq-fun-link {
    white-space: normal !important;
    word-break: break-word;
    max-width: 100% !important;
  }

  /* 12.5 实践页标签：允许换行 */
  .pr-level-tag, .pr-badge {
    white-space: normal !important;
    word-break: break-word;
    max-width: 100% !important;
  }

  /* 12.6 模型图鉴/工具库统计数字行：不挤压 */
  .mm-meta, .tt-stat, .hero-stat, .cl-stat {
    min-width: 0 !important;
  }
  .mm-meta b, .tt-stat dd, .hero-stat b, .cl-stat b {
    white-space: normal !important;
    word-break: break-word;
  }

  /* 12.7 面包屑导航：允许换行，不溢出 */
  .breadcrumb, .breadcrumb-inner, .lm-breadcrumb {
    flex-wrap: wrap !important;
    white-space: normal !important;
    word-break: break-word;
  }
}