/* ==========================================================
   全站响应式适配 · PC / 平板 / 手机
   解决：
   1. 手机端导航被 display:none 直接隐藏 → 加汉堡菜单
   2. 页面内联 grid-template-columns 覆盖媒体查询 → !important 强制降列
   3. 断点补齐：1080 / 900 / 760 / 560 / 400
   ========================================================== */

/* ---------- 汉堡按钮（默认隐藏，仅移动端出现） ---------- */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  margin-left: auto;
  border: 1px solid #DFEAF3;
  border-radius: 10px;
  background: #FFFFFF;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  position: relative;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: #0A3559;
  transition: background .2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: #0A3559;
  transition: transform .28s cubic-bezier(.4,0,.2,1), top .28s;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ==========================================================
   平板
   ========================================================== */
@media (max-width: 1080px) {
  .wrap { padding: 0 22px; }
  .nav a { padding: 8px 11px; font-size: 14.5px; }
  .head-in { gap: 18px; }
}

/* ==========================================================
   移动端导航：抽屉
   ========================================================== */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .head-in { height: 62px; gap: 12px; }

  .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    margin: 0;
    padding: 10px 16px 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #DFEAF3;
    box-shadow: 0 18px 36px rgba(10,53,89,.12);
    /* 收起态 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .24s ease, transform .26s cubic-bezier(.4,0,.2,1), visibility .24s;
    max-height: calc(100vh - 62px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav a {
    padding: 13px 14px;
    font-size: 16px;
    border-radius: 10px;
  }
  .nav a.on { background: #EDF6FC; }
  .nav .btn,
  .nav a.btn {
    margin-left: 0 !important;
    margin-top: 8px;
    text-align: center;
    justify-content: center;
    padding: 13px 14px;
  }

  .site-head { position: sticky; }

  /* 侧栏/双列 → 单列 */
  .hero-grid, .two-col, .contact-grid, .sol-row,
  .intro-grid, .org-tree, .reg-row { grid-template-columns: 1fr !important; }

  /* 页面内联固定列数栅格 → 2 列 */
  .cards[style*="repeat(3"],
  .cards[style*="repeat(4"],
  .cards[style*="repeat(2"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stats[style], .dash[style] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .photo-grid { grid-template-columns: 1fr 1fr !important; }
  .photo-grid .photo.wide { grid-column: 1 / -1; }

  .intro-grid { gap: 26px !important; }
  .kv-card { position: static !important; }
}

/* ==========================================================
   小屏手机
   ========================================================== */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }

  .wrap { padding: 0 18px; }

  body { font-size: 15.5px; }

  /* 所有栅格归为单列（含内联） */
  .cards[style],
  .stats[style],
  .dash[style],
  .photo-grid,
  .cards, .stats, .dash {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .photo-grid .photo.wide { grid-column: auto; }

  /* 卡片内边距收紧 */
  .card { padding: 20px 18px !important; }
  .card h3 { font-size: 16.5px; }
  .card p { font-size: 14.5px; line-height: 1.76; }

  h1 { font-size: 28px !important; line-height: 1.24; letter-spacing: -.4px; }
  h2 { font-size: 22px !important; line-height: 1.3; letter-spacing: -.2px; }
  h3 { font-size: 17px; }

  section { padding: 44px 0 !important; }
  .sec-head { margin-bottom: 26px !important; }
  .sec-head p { font-size: 14.5px !important; }

  /* 按钮：触摸友好 */
  .btn, button, .es-button {
    min-height: 44px;
    padding: 11px 20px;
    font-size: 15px;
  }

  /* 表格横向滚动，避免溢出 */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 表单 */
  .form-box { padding: 22px 18px; }
  .field input, .field textarea, .field select { font-size: 16px; }  /* ≥16px 防 iOS 自动缩放 */

  /* 页脚 */
  .foot-grid { grid-template-columns: 1fr !important; gap: 24px; }

  /* 组织架构树在窄屏改为纵向 */
  .org-branches { grid-template-columns: 1fr !important; }
  .org-branches::before { display: none; }
  .org-branches .org-node::before { display: none; }
  .org-node.root::after { display: none; }

  /* 图片网格 */
  .photo img { aspect-ratio: 16/10; }

  /* 超长文本/URL 不撑破 */
  .wrap, .card, p, li { overflow-wrap: break-word; word-break: break-word; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 15px; }
  .logo { font-size: 15.5px; }
  .logo-sub { display: none; }   /* 英文副标在手机上省略，避免挤压 */
  .head-in { height: 58px; }

  h1 { font-size: 25px !important; }
  h2 { font-size: 20px !important; }

  .card { padding: 18px 16px !important; }
  .kpi, .hero-num { gap: 14px 20px !important; }

  /* 横向 KPI 条：两列 */
  .dash-cell, .stat { padding: 14px 12px !important; }
  .dash-cell .val, .stat b { font-size: 20px !important; }
}

@media (max-width: 400px) {
  .wrap { padding: 0 13px; }
  h1 { font-size: 23px !important; }
  .card { padding: 16px 14px !important; }
  .btn, button { padding: 10px 16px; font-size: 14.5px; }
}

/* ---------- 全局防溢出：任何元素都不该把页面撑宽 ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, table { max-width: 100%; }