/*
 * 师途智汇全站手机/平板适配层
 * 目标：
 * 1. 不改业务接口、不改页面功能；
 * 2. 自动适配手机、平板；
 * 3. 旧页面过宽时提供兜底缩放；
 * 4. 避免横向滚动撑爆页面。
 */

:root {
  --stzh-safe-x: clamp(12px, 3vw, 24px);
  --stzh-mobile-radius: 14px;
  --stzh-scale: 1;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* 媒体元素默认不撑破屏幕 */
img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

/* 输入控件在手机上更好点按 */
input,
select,
textarea,
button {
  max-width: 100%;
  font-family: inherit;
}

/* iPhone 避免输入框聚焦时自动放大 */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 常见容器统一收口 */
.container,
.wrapper,
.wrap,
.page,
.page-wrap,
.content,
.main,
.main-content,
.auth-wrap,
.auth-shell,
.admin-wrap,
.panel,
.dashboard,
.section,
.card,
.box {
  max-width: 100%;
}

/* 常见网格：平板自动减少列数 */
.grid,
.style-grid,
.resource-grid,
.card-grid,
.tool-grid,
.tools-grid,
.admin-grid,
.stats-grid,
.modules-grid,
.feature-list,
.feature-grid,
.list-grid,
.product-grid,
.order-grid,
.wallet-grid {
  max-width: 100%;
}

/* 表格不再撑爆页面 */
table {
  max-width: 100%;
  border-collapse: collapse;
}

.stzh-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.stzh-table-scroll table {
  min-width: 680px;
}

/* 顶部导航适配 */
nav,
.header,
.top,
.topbar,
.navbar {
  max-width: 100vw;
}

/* 超长文字自动换行 */
p,
div,
span,
a,
td,
th,
li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 平板适配 */
@media (max-width: 1024px) {
  body {
    min-width: 0 !important;
  }

  .main-wrapper,
  .layout,
  .page-layout,
  .admin-layout,
  .dashboard-layout {
    display: block !important;
    width: 100% !important;
  }

  .main-content,
  .content,
  .main,
  .page-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-left: var(--stzh-safe-x) !important;
    padding-right: var(--stzh-safe-x) !important;
  }

  .sidebar,
  .side,
  .side-nav,
  .left-menu,
  aside {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e5edf5;
  }

  .grid,
  .style-grid,
  .resource-grid,
  .card-grid,
  .tool-grid,
  .tools-grid,
  .admin-grid,
  .stats-grid,
  .modules-grid,
  .feature-list,
  .feature-grid,
  .list-grid,
  .product-grid,
  .order-grid,
  .wallet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .hero,
  .banner,
  .top-banner,
  .carousel,
  .carousel img {
    max-width: 100% !important;
  }

  .hero h1,
  .banner h1,
  h1 {
    font-size: clamp(26px, 5vw, 42px) !important;
    line-height: 1.22 !important;
  }

  h2 {
    font-size: clamp(22px, 4vw, 32px) !important;
  }

  h3 {
    font-size: clamp(18px, 3vw, 24px) !important;
  }
}

/* 手机适配 */
@media (max-width: 768px) {
  body {
    width: 100% !important;
  }

  nav,
  .header,
  .top,
  .topbar,
  .navbar {
    min-height: 56px;
    height: auto !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .brand,
  .brand-box,
  .brand-link,
  .logo {
    max-width: 100%;
    font-size: 18px !important;
    white-space: nowrap;
  }

  .nav-links,
  .menu,
  .top-actions,
  .right-container,
  .auth-box {
    max-width: 100%;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .nav-links {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .search-box,
  .search,
  .search-form {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search-box input,
  .search input {
    width: 100% !important;
  }

  .main-content,
  .content,
  .main,
  .page-content,
  .wrap,
  .container {
    padding: 14px !important;
  }

  .grid,
  .style-grid,
  .resource-grid,
  .card-grid,
  .tool-grid,
  .tools-grid,
  .admin-grid,
  .stats-grid,
  .modules-grid,
  .feature-list,
  .feature-grid,
  .list-grid,
  .product-grid,
  .order-grid,
  .wallet-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .card,
  .box,
  .panel,
  .hero,
  .banner,
  .section,
  .auth-card {
    border-radius: var(--stzh-mobile-radius) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .style-media,
  .media-card,
  .resource-card,
  .grid-card,
  .item-card,
  .order-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .btn,
  button,
  input[type="button"],
  input[type="submit"] {
    min-height: 42px;
  }

  .form-row,
  .form-group,
  .input-row,
  .filter-row,
  .toolbar,
  .actions,
  .button-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .form-row > *,
  .form-group > *,
  .input-row > *,
  .filter-row > *,
  .toolbar > *,
  .actions > *,
  .button-row > * {
    max-width: 100% !important;
  }

  .modal,
  .dialog,
  .popup,
  .drawer {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
  }

  .footer,
  .footer-note {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 12px !important;
  }
}

/* 小屏手机进一步压缩 */
@media (max-width: 480px) {
  .main-content,
  .content,
  .main,
  .page-content,
  .wrap,
  .container {
    padding: 10px !important;
  }

  .card,
  .box,
  .panel,
  .hero,
  .banner,
  .section,
  .auth-card {
    padding: 14px !important;
  }

  h1 {
    font-size: 26px !important;
  }

  h2 {
    font-size: 22px !important;
  }

  .cat-title,
  .section-title {
    font-size: 20px !important;
  }
}

/*
 * 旧页面兜底缩放：
 * 如果某些历史页面仍然强制宽度过大，JS 会加 stzh-auto-scale。
 */
html.stzh-auto-scale {
  overflow-x: hidden !important;
}

html.stzh-auto-scale body {
  transform: scale(var(--stzh-scale));
  transform-origin: top left;
  width: calc(100% / var(--stzh-scale));
  min-height: calc(100vh / var(--stzh-scale));
}