/* ============================================================
   校招易产教融合平台 - 移动端适配层 (mobile.css)
   作用于窄屏 ≤768px；使用 !important 覆盖 Tailwind 工具类。
   仅调整布局，不改变 PC 端表现。
   ============================================================ */
@media (max-width: 768px) {
  /* 全局：禁止横向溢出，统一盒模型 */
  html, body { overflow-x: hidden !important; }
  *, *::before, *::after { box-sizing: border-box; }

  /* ---------- 企业端 / 后台：侧边栏抽屉化 ---------- */
  /* 原 body.flex.h-screen / div.flex.h-screen 改为纵向流式布局 */
  body.flex.h-screen,
  div.flex.h-screen {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  /* 侧边栏变成左侧抽屉（默认隐藏，点击汉堡滑出） */
  aside.w-64 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 82% !important;
    max-width: 300px !important;
    height: 100% !important;
    transform: translateX(-100%) !important;
    transition: transform .25s ease !important;
    z-index: 1200 !important;
  }
  body.xz-drawer-open aside.w-64 { transform: translateX(0) !important; }

  /* 主内容占满宽度 */
  main.flex-1,
  div.flex-1 {
    width: 100% !important;
    margin: 0 !important;
  }

  /* 顶部栏左侧给汉堡按钮留位 */
  header.h-16 { padding-left: 56px !important; }
  .h-16 { padding-left: 56px !important; }

  /* 汉堡按钮（由 mobile.js 注入） */
  .xz-menu-btn {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 1300 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    border: none !important;
    background: #4F46E5 !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .xz-mask {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, .45) !important;
    z-index: 1100 !important;
    display: none !important;
  }
  body.xz-drawer-open .xz-mask { display: block !important; }

  /* ---------- 学生端：容器与网格自适应 ---------- */
  .max-w-7xl {
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .px-6, .px-8 { padding-left: 14px !important; padding-right: 14px !important; }
  .p-8 { padding: 16px !important; }
  .p-6 { padding: 14px !important; }
  .py-8 { padding-top: 16px !important; padding-bottom: 16px !important; }
  .gap-6 { gap: 14px !important; }
  .gap-8 { gap: 16px !important; }

  /* 多列网格强制单列（推荐区 / 平台推荐区 / 子卡片区） */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  /* 列表页左右分栏在手机上堆叠 */
  .lg\:flex-row,
  .md\:flex-row { flex-direction: column !important; }

  /* 顶部导航横向滚动，避免溢出 */
  header nav { overflow-x: auto !important; flex-wrap: nowrap !important; }

  /* ---------- 表格横向滚动（后台 / 列表） ---------- */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* ---------- 弹窗手机上接近全屏 ---------- */
  .max-w-2xl,
  .max-w-md,
  .max-w-lg,
  .max-w-3xl,
  .max-w-\[600px\] {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
  }

  /* ---------- 触控优化 ---------- */
  button, a { min-height: 36px; }
  input, select, textarea { font-size: 16px !important; }
}
