/* WEB3HIRE-RESPONSIVE-FIX v1 (2026-10-08)
   覆盖层：解决手机/平板/小屏的挤压、溢出、过小字号、过小点击目标、iOS 聚焦缩放 */
html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }
a, button { touch-action: manipulation; }

/* ========== 1. Hero：手机上原来被挤成两栏（文字只有 205px），改为通栏 ========== */
@media (max-width: 1023px) {
  .wh-hero-grid,
  .wh-hero-2col { grid-template-columns: minmax(0, 1fr) !important; display: grid !important; }
  .wh-hero-textcol { max-width: 100% !important; width: 100% !important; }
  .wh-hero-title { font-size: clamp(24px, 7.2vw, 40px) !important; line-height: 1.22 !important; }
  .wh-hero-sub { font-size: 13.5px !important; line-height: 1.75 !important; max-width: 100% !important; }
  .wh-hero-engbadge { font-size: 11.5px !important; }
  /* 四宫格数据：原来 4 列塞不下（205px 容器要 219px），改 2×2 */
  .wh-hero-stats {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 10px !important; width: 100% !important; flex-wrap: wrap !important;
  }
  .wh-hero-statnum { font-size: 22px !important; }
  .wh-hero-statlabel { font-size: 11.5px !important; line-height: 1.4 !important; white-space: normal !important; }
  /* 头像与自然叠加重影：轮播已含人像，原生小头像隐掉 */
  .whc-has-carousel .wh-hero-mimg { display: none !important; }
}

/* 中间地带（768–1023 平板）：不堆叠但保证不挤 */
@media (min-width: 768px) and (max-width: 1023px) {
  .wh-hero-grid,
  .wh-hero-2col { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important; }
}

/* ========== 2. 手机上不再出现 8–11px 的小字（阅读困难） ========== */
@media (max-width: 900px) {
  [class*="text-[8px]"], [class*="text-[9px]"], [class*="text-[10px]"] { font-size: 11.5px !important; }
  [class*="text-[11px]"] { font-size: 12.5px !important; }
  .wh-flink-t { font-size: 12px !important; line-height: 1.5 !important; }
  .wh-f-brand p, footer .disc { font-size: 12px !important; }
  .industry-badge { font-size: 11px !important; }
}

/* ========== 3. 表单：防 iOS 自动放大 + 触摸友好 ========== */
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea {
    font-size: 16px !important;
    min-height: 48px !important;
    line-height: 1.5 !important;
  }
  input[type="checkbox"], input[type="radio"] { width: 20px !important; height: 20px !important; }
  label { line-height: 1.6; }
}

/* ========== 4. 点击目标 ≥ 40px（页脚友链、导航、语言切换） ========== */
@media (max-width: 900px) {
  footer a, .wh-flink, .wh-footer a, .wh-footer-grid a {
    min-height: 40px !important; display: flex !important; align-items: center !important;
  }
  footer a:hover, .wh-footer a:hover { text-decoration: underline; }
  nav a, nav button, header a, header button {
    min-height: 40px !important; display: inline-flex !important; align-items: center !important;
  }
  .wh-hero-ctas a, .wh-hero-ctas button { min-height: 48px !important; }
}

/* ========== 5. 卡片里的单行截断放宽到两行（避免职位/头衔被切掉） ========== */
@media (max-width: 600px) {
  .grid [class*="line-clamp-1"], .wh-card [class*="line-clamp-1"] {
    -webkit-line-clamp: 2 !important; line-clamp: 2 !important;
  }
}

/* ========== 6. 表格 / 长串 / 代码块 不再顶破容器 ========== */
@media (max-width: 900px) {
  table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  pre, code { overflow-wrap: anywhere !important; white-space: pre-wrap !important; }
  .wrap, .max-w-7xl, .max-w-6xl, .max-w-5xl { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ========== 7. 底部悬浮客服组不遮挡页脚内容 ========== */
@media (max-width: 900px) {
  footer, .wh-footer { padding-bottom: 96px !important; }
  body > footer { padding-bottom: 96px !important; }
  #wh-dock { bottom: 14px !important; }
}

/* ========== 8. 轮播（Hero + 快讯）在小屏留足边距 ========== */
@media (max-width: 900px) {
  .wh-hcar, #wh-hcar.whc-mobile, .whc-mobile { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
  .wh-pp-card, .wh-hr-card { padding: 16px 14px !important; }
}

/* ========== 9. 横屏矮屏（手机横放）压缩纵向留白 ========== */
@media (max-height: 520px) and (orientation: landscape) {
  section { padding-top: 26px !important; padding-bottom: 26px !important; }
  .wh-hero-stats { gap: 6px 8px !important; }
  #wh-dock { transform: scale(.85); bottom: 8px !important; }
}

/* ========== 10. 可读性兜底：正文最小行长 ========== */
@media (max-width: 900px) {
  p, li { overflow-wrap: break-word; }
}

/* ========== 11. 补②：轮播圆点 / 卡片按钮 / 行内块链接 的触控区 ========== */
@media (max-width: 900px) {
  .wh-hr-dot, .whc-dot { position: relative; }
  .wh-hr-dot::after, .whc-dot::after {
    content: ""; position: absolute; left: -10px; right: -10px; top: -14px; bottom: -14px;
  }
  .whc-cta, .wh-hr-more { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 2px; }
  .wh-hr-txt { font-size: 12px !important; line-height: 1.55 !important; }
  [class*="inline-flex"] { min-height: 40px; }
  nav button, .filters button, .toolbar button, .pagination button {
    min-width: 40px !important; min-height: 40px !important;
  }
  .breadcrumb a, .crumbs a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ========== 12. 小图标按钮：在不改变外观的前提下把可点区域撑到 40px ========== */
@media (max-width: 900px) {
  button[class*="w-6"], button[class*="w-7"], button[class*="w-8"] { position: relative; }
  button[class*="w-6"]::after, button[class*="w-7"]::after, button[class*="w-8"]::after {
    content: ""; position: absolute; left: -8px; right: -8px; top: -8px; bottom: -8px;
  }
  .wh-hr-dots button, .whc-dots button { position: relative; }
  .wh-hr-dots button::after, .whc-dots button::after {
    content: ""; position: absolute; left: -12px; right: -12px; top: -16px; bottom: -16px;
  }
}


/* ========== 13. 头部行在 430px 以下收紧（原本右侧溢出 9px） ========== */
@media (max-width: 430px) {
  header .h-16, nav .h-16 { padding-left: 10px !important; padding-right: 10px !important; }
  header .gap-2, nav .gap-2, .flex.lg\:hidden { gap: 4px !important; }
  header .flex, nav .flex { min-width: 0 !important; }
}

/* ========== 14. 长链接 / 小卡片：允许任意断行，不再顶破 ========== */
@media (max-width: 560px) {
  a[class*="text-xs"], .group.block { overflow-wrap: anywhere !important; min-width: 0 !important; }
  .group.block * { min-width: 0 !important; }
}

/* ========== 15. 补③（10-08 第二轮收尾）：头部右侧组 / nowrap 邮箱 / 卡片内长文本 ========== */
@media (max-width: 430px) {
  /* 语言切换 pill 原本 81px，压缩到 ~55px；汉堡 43px→36px（::after 隐形撑回 40+ 触控区）；gap 2px */
  header .lg\:hidden .relative > button, nav .lg\:hidden .relative > button {
    padding: 4px 5px !important; font-size: 11.5px !important; gap: 2px !important;
  }
  header .lg\:hidden > button, nav .lg\:hidden > button {
    width: 36px !important; height: 36px !important; min-width: 36px !important; padding: 4px !important; position: relative !important;
  }
  header .lg\:hidden > button::after, nav .lg\:hidden > button::after {
    content: ""; position: absolute; left: -6px; right: -6px; top: -6px; bottom: -6px;
  }
  header .flex.lg\:hidden, nav .flex.lg\:hidden { gap: 2px !important; }
}
@media (max-width: 560px) {
  /* partner 页邮箱链接是 nowrap，溢出 28px：允许换行 */
  a[class*="text-xs"] { white-space: normal !important; word-break: break-all !important; }
  /* 合作伙伴素材包卡片内部长文本顶破容器：全子代允许断词 + 解除 nowrap */
  .group.block, .group.block * {
    overflow-wrap: anywhere !important; word-break: break-word !important; white-space: normal !important;
  }
}

/* ===== 段16 · 页脚紧凑化（2026-10-11 Brian：高度降到 ~1/3 且无遮挡） ===== */
footer .py-12{padding-top:16px !important;padding-bottom:16px !important}
footer .mb-10{margin-bottom:8px !important}
footer .gap-8{gap:14px 20px !important}
footer h4{font-size:11px !important;margin-bottom:6px !important}
footer .space-y-2>*+*{margin-top:3px !important}
footer .mb-4{margin-bottom:6px !important}
footer .mb-3{margin-bottom:5px !important}
footer .mb-1{margin-bottom:2px !important}
footer p{line-height:1.45 !important}
footer .divider-gold{margin-bottom:10px !important}
footer a.w-8.h-8{width:26px !important;height:26px !important;border-radius:7px !important}
/* 友链：小 chips 横排；描述悬停浮出，不占位不遮挡 */
footer .wh-flinks{flex-direction:row !important;flex-wrap:wrap;gap:2px 12px !important}
footer .wh-flink{position:relative;display:inline-flex !important}
footer .wh-flink:hover{transform:none !important}
footer .wh-flink-u{font-size:11.5px !important}
footer .wh-flink-t{display:none}
footer .wh-flink:hover .wh-flink-t{display:block;position:absolute;left:0;top:100%;z-index:60;
  background:#0d2242;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:3px 9px;
  white-space:nowrap;font-size:11px !important;color:#cbd5e1;margin-top:2px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
/* ≥768px：列宽按内容重分配，友链列加宽 chips 多排 */
@media (min-width:768px){
  footer .md\:grid-cols-5{grid-template-columns:1.05fr .62fr .82fr 1.5fr 1.05fr !important}
}
/* 段16b · 页脚二次压缩 + 防浮窗遮挡 */
footer .mb-4>a[href^="mailto:"]{display:none !important}  /* 个人邮箱与公司邮箱同址，去重 */
@media (min-width:768px){
  footer .md\:grid-cols-5>div:nth-child(2) .space-y-2{columns:2;column-gap:14px}
  footer .md\:grid-cols-5>div:nth-child(2) .space-y-2>a{break-inside:avoid}
  footer .md\:grid-cols-5>div:last-child{padding-right:88px}  /* 让开右下 Mr H 浮窗区 */
}
/* 段16c · 联系方式双列 + 列宽再分配（向 1/3 高度靠拢） */
@media (min-width:1024px){
  footer .md\:grid-cols-5{grid-template-columns:1fr .55fr .75fr 1.3fr 1.55fr !important}
  footer .md\:grid-cols-5>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-content:start;padding-right:70px}
  footer .md\:grid-cols-5>div:last-child h4{grid-column:1/-1}
  footer .md\:grid-cols-5>div:last-child a,footer .md\:grid-cols-5>div:last-child p{font-size:11px !important;white-space:nowrap}
  footer .md\:grid-cols-5>div:last-child p{white-space:normal}
  footer p.max-w-xs{font-size:11px !important}
}
/* 段16d · 导航列 nowrap 防折行 */
@media (min-width:1024px){
  footer .md\:grid-cols-5{grid-template-columns:1fr .7fr .75fr 1.3fr 1.5fr !important}
  footer .md\:grid-cols-5>div:nth-child(2) a{white-space:nowrap;font-size:11px !important}
  footer .md\:grid-cols-5>div:nth-child(3) a{white-space:nowrap;font-size:11px !important}
}