/* ==========================================================================
   东成大学 · 全站通用移动端适配层（小屏手机优先）
   加载方式：所有页面经 /assets/css/mobile.css 引入。
   原则：桌面端零影响；仅在 ≤768 / ≤480 / ≤360 断点内生效。
   目标：字体、容器宽度、标签/按钮/徽章高度在小屏全面收缩。
   ========================================================================== */

/* ---- 基础（桌面/移动通用，安全） ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;   /* 防止任何固定宽度元素导致横向滑动 */
}

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

/* 状态栏 / 底部手势条安全区，防止内容被时间、电量栏遮挡 */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

pre,
code,
table {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

pre {
  white-space: pre-wrap;
}

table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   ≤768px 普通手机
   ========================================================================== */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
  body {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* 段落与正文继承 */
  p, li, td, th, span, div, label, input, textarea, select, button, a,
  .text, .desc, .description, .content-text, .article-text, .body-text {
    font-size: inherit !important;
  }

  /* ---- Hero 大标题缩放 ---- */
  .hero-title, .hero h1, .hero h2, .hero-inner h1, .hero-inner h2,
  [class*="hero"] h1, [class*="hero"] h2,
  .page-hero h1, .page-hero h2, .banner h1, .banner h2 {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.25 !important;
  }
  .hero-subtitle, .hero p, .hero-inner p, .hero-desc, .hero-description,
  [class*="hero"] p, .page-hero p, .banner p {
    font-size: clamp(12px, 3.6vw, 15px) !important;
    line-height: 1.5 !important;
  }

  /* ---- 区块/模块标题 ---- */
  .section-title, .section-header h2, .section-header h3,
  [class*="section"] h2, [class*="section"] h3,
  .module-title, .block-title, .area-title,
  .about-title, .mission-title, .features-title,
  .career-title, .tools-title, .resources-title,
  .community-title, .path-title, .job-title,
  h2.section-title, h3.section-title {
    font-size: clamp(17px, 4.8vw, 21px) !important;
    line-height: 1.3 !important;
  }

  /* ---- h1-h6 标题 ---- */
  h1 { font-size: clamp(19px, 5.5vw, 24px) !important; line-height: 1.3 !important; }
  h2 { font-size: clamp(16px, 4.8vw, 20px) !important; line-height: 1.3 !important; }
  h3 { font-size: clamp(14px, 4.2vw, 17px) !important; line-height: 1.35 !important; }
  h4 { font-size: clamp(13px, 3.8vw, 15px) !important; }
  h5 { font-size: clamp(12px, 3.5vw, 14px) !important; }
  h6 { font-size: clamp(11px, 3vw, 13px) !important; }

  /* ---- 卡片标题 ---- */
  .card h3, .card h4, .card-title, .card-header h3, .card-header h4,
  [class*="card"] h3, [class*="card"] h4,
  .academy-card h3, .academy-card .title, .job-card h3, .job-card .title,
  .tool-card h3, .resource-card h3, .community-card h3,
  .course-card h3, .news-card h3, .event-card h3,
  .path-card h4, .path-card .title, .role-card h3,
  .case-card h3, .case-card .title, .recommend-card h3 {
    font-size: clamp(13px, 3.8vw, 16px) !important;
    line-height: 1.35 !important;
  }
  .card p, .card .desc, .card-description,
  [class*="card"] p, [class*="card"] .desc,
  .academy-card p, .job-card p, .tool-card p,
  .path-card p, .resource-card p, .community-card p {
    font-size: clamp(11px, 3.3vw, 13px) !important;
    line-height: 1.5 !important;
  }

  /* ======================================================================
     标签 / 徽章 / 胶囊：高度与内边距全面收缩（核心要求）
     ====================================================================== */
  .tag, .badge, .label-tag, .category-tag, .path-tag, .status-tag, .job-tag,
  .level-badge, .level-tag, .chip, .pill,
  .tabs a, .tab-item, .tab, .filter-btn, .filter-tag,
  [class*="tag"], [class*="badge"], [class*="pill"],
  .academy-links span, .job-role-levels span,
  .breadcrumb a, .breadcrumb span, .breadcrumb li {
    display: inline-block !important;
    font-size: clamp(10px, 2.8vw, 12px) !important;
    line-height: 1.4 !important;
    padding: 2px 8px !important;
    margin: 0 4px 6px 0 !important;
    min-height: 0 !important;
    border-radius: 10px !important;
  }

  /* ---- 导航 ---- */
  .nav a, .nav-link, .nav-item, .navbar a, .menu a, .menu-item,
  .breadcrumb a, .breadcrumb span, .breadcrumb li {
    font-size: clamp(11px, 3vw, 13px) !important;
  }

  /* ---- 按钮 ---- */
  .btn, button.btn, a.btn, .button,
  .cta-btn, .primary-btn, .secondary-btn, .action-btn,
  input[type="submit"], input[type="button"] {
    font-size: clamp(11px, 3.3vw, 13px) !important;
    padding: 7px 12px !important;
    min-height: 32px !important;
    line-height: 1.3 !important;
  }

  /* ---- 品牌/Logo 文字 ---- */
  .brand-title, .brand-name, .logo-text, .site-title,
  .brand, .logo span, .footer-brand h4, .footer-logo span {
    font-size: clamp(15px, 4.5vw, 20px) !important;
  }

  /* ---- 统计数字 ---- */
  .stat .num, .stat-number, .stat-value, .stat-num,
  .counter, .count, .score, .result-panel .score,
  [class*="stat"] .num, [class*="stat"] strong, [class*="stat"] .value {
    font-size: clamp(20px, 6.5vw, 30px) !important;
    line-height: 1.2 !important;
  }
  .stat .label, .stat-label, .stat-desc, [class*="stat"] .label {
    font-size: clamp(10px, 2.8vw, 12px) !important;
  }

  /* ---- 图标/emoji 大小 ---- */
  .icon-large, .icon-big, .hero-icon, .section-icon, .feature-icon,
  .academy-icon, .job-icon, .tool-icon, .resource-icon, .community-icon,
  .card-icon, .path-icon, .mission-icon, .career-icon,
  [class*="icon-"] {
    font-size: clamp(20px, 6vw, 30px) !important;
  }

  /* ---- 步骤/流程编号 ---- */
  .step-number, .step-num, .flow-number, .timeline-number,
  .process-step .num, .roadmap-step .num {
    font-size: clamp(13px, 3.8vw, 16px) !important;
  }
  .level-title, .tier-title, .rank-title, .grade-title {
    font-size: clamp(12px, 3.5vw, 15px) !important;
  }

  /* ---- 模态/弹窗 ---- */
  .modal h1, .modal h2, .modal h3, .modal h4, .modal-title,
  .dialog h1, .dialog h2, .dialog h3, .dialog-title,
  .popup h1, .popup h2, .popup h3, .popup-title {
    font-size: clamp(15px, 4.5vw, 20px) !important;
  }
  .modal p, .modal span, .dialog p, .dialog span, .popup p, .popup span {
    font-size: clamp(11px, 3.3vw, 13px) !important;
  }

  /* ---- 页脚 ---- */
  footer, .footer, .site-footer, .page-footer {
    font-size: clamp(10px, 2.8vw, 12px) !important;
  }
  footer h4, .footer h4, .site-footer h4,
  footer .title, .footer .title {
    font-size: clamp(12px, 3.5vw, 15px) !important;
  }

  /* ---- 页面标题/路径页 Hero ---- */
  .page-title, .content-header h1, .content-header h2,
  .tool-detail h2, .master-detail h2, .knowledge-detail h2,
  .path-hero h2, .path-hero h1, .level-hero h2 {
    font-size: clamp(19px, 5.5vw, 24px) !important;
  }

  /* ---- 工具/知识库内容 ---- */
  .tool-detail h3, .knowledge-detail h3, .article h3,
  .tool-detail .title, .knowledge-detail .title {
    font-size: clamp(14px, 4.2vw, 17px) !important;
  }

  /* ---- 搜索结果/题库特殊 ---- */
  .result-panel h3, .question-text, .knowledge-item h3,
  .td-search-result h3, .exam-question .text, .quiz-question {
    font-size: clamp(12px, 3.8vw, 15px) !important;
  }

  /* ======================================================================
     容器与栅格：收窄留白、强制单列
     ====================================================================== */
  .container,
  .wrap,
  .wrapper,
  .content,
  main,
  article,
  section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 横向排列的导航/列表自动换行，避免横向滚动 */
  nav,
  .nav,
  .nav-row,
  .main-nav,
  .navbar,
  .menu,
  .breadcrumb,
  ul.nav,
  .tabs,
  .tab-bar {
    flex-wrap: wrap !important;
  }

  /* 栅格类自动变为单列/可换行 */
  [class*="row"],
  [class*="grid"],
  [class*="flex"],
  .card-row,
  .academy-grid,
  .job-role-grid,
  .tool-grid,
  .resource-grid,
  .community-grid,
  .path-grid,
  .career-path-grid,
  .job-grid,
  .path-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  [class*="col-"],
  [class*="grid"] > *,
  [class*="card"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* 触摸目标最小高度，便于点按 */
  a,
  button,
  .btn,
  input,
  select,
  textarea,
  label {
    min-height: 32px;
  }

  /* 输入框/按钮在窄屏占满 */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  textarea,
  select,
  button,
  .btn {
    max-width: 100%;
  }
}

/* ==========================================================================
   ≤480px 小屏手机
   ========================================================================== */
@media (max-width: 480px) {
  html { font-size: 14px; }
  body { font-size: 12px !important; }

  .container,
  .wrap,
  .wrapper,
  .content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .hero-title, .hero h1, .hero h2,
  [class*="hero"] h1, [class*="hero"] h2 {
    font-size: clamp(20px, 6.5vw, 26px) !important;
  }
  .hero-subtitle, .hero p, [class*="hero"] p {
    font-size: clamp(11px, 3.6vw, 14px) !important;
  }

  h1 { font-size: clamp(18px, 5.5vw, 22px) !important; }
  h2 { font-size: clamp(15px, 4.8vw, 18px) !important; }
  h3 { font-size: clamp(13px, 4.2vw, 16px) !important; }
  h4 { font-size: clamp(12px, 3.8vw, 14px) !important; }
  h5 { font-size: clamp(11px, 3.5vw, 13px) !important; }
  h6 { font-size: clamp(10px, 3vw, 12px) !important; }

  .section-title, [class*="section"] h2 {
    font-size: clamp(15px, 4.8vw, 19px) !important;
  }
  .card h3, .card-title, [class*="card"] h3 {
    font-size: clamp(12px, 3.8vw, 15px) !important;
  }

  /* 标签/徽章更紧凑 */
  .tag, .badge, .label-tag, .path-tag, .status-tag, .job-tag, .level-badge,
  .level-tag, .chip, .pill,
  [class*="tag"], [class*="badge"], [class*="pill"],
  .academy-links span, .job-role-levels span,
  .nav-link, .tabs a, .tab-item {
    font-size: clamp(9px, 2.6vw, 11px) !important;
    padding: 2px 6px !important;
    margin: 0 3px 5px 0 !important;
  }

  .btn, button.btn, a.btn, .button {
    font-size: clamp(10px, 3.3vw, 12px) !important;
    padding: 6px 10px !important;
    min-height: 30px !important;
  }

  .stat .num, .stat-number, .stat-value, .stat-num,
  .score, .result-panel .score {
    font-size: clamp(18px, 6.5vw, 26px) !important;
  }
}

/* ==========================================================================
   ≤360px 超小屏（iPhone SE / 老款安卓）
   ========================================================================== */
@media (max-width: 360px) {
  html { font-size: 13px; }
  body { font-size: 11px !important; }

  .container,
  .wrap,
  .wrapper,
  .content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  [class*="row"],
  [class*="grid"],
  [class*="flex"],
  .academy-grid,
  .job-role-grid,
  .tool-grid,
  .resource-grid,
  .community-grid,
  .path-grid,
  .career-path-grid {
    gap: 8px !important;
  }

  .tag, .badge, .job-tag, .level-badge,
  [class*="tag"], [class*="badge"] {
    padding: 1px 5px !important;
    font-size: 10px !important;
  }

  .btn, button.btn, a.btn, .button {
    padding: 5px 9px !important;
    min-height: 28px !important;
  }
}

/* ---- 减少动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}