/*!
 * responsive.css — renweifeng.com.cn 全站响应式适配
 * 覆盖手机（≤480）/ 平板（≤900）/ 桌面（>1024）三类客户端，含 iPad 与 iOS 专项处理。
 * 加载位置：所有页面 </head> 前最后一项，用于覆盖各子站既有样式（同优先级后来居上）。
 * 结构：1 基础守卫 / 2 触控与 iOS / 3 主站门户（含表单收缩守卫）/ 4 洞察与案例文章 / 5 子站网格 / 6 微信悬浮组件 / 7 动效
 * 实测基线（Chrome 154 真机渲染，320/375/390/414/768/1024/1440 七档）：51 页横向溢出 0
 */

/* ========== 1. 基础守卫（所有页面） ========== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 兜底禁止整页横向滚动；用 clip 而非 hidden，避免破坏 position:sticky 导航 */
  overflow-x: clip;
}
*, *::before, *::after { box-sizing: border-box; }

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

/* 长 URL / 邮箱 / 无空格长串在窄屏换行（anywhere 同时修正 grid 最小内容宽度导致的撑破） */
body { overflow-wrap: anywhere; }

pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
code, kbd, samp { overflow-wrap: break-word; }

table { max-width: 100%; }
fieldset { min-width: 0; }
textarea { resize: vertical; }

/* 表单控件：内在宽度（默认约 177px + 内边距）会把 grid/flex 轨道顶大，
   2 列表单在手机上可撑出 420px+ → 必须允许收缩到 0 */
input, select, textarea, button { max-width: 100%; min-width: 0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select, textarea { width: 100%; }

/* ========== 2. 触控与 iOS 专项 ========== */
/* iPhone 刘海屏横屏：配合 viewport-fit=cover，内容避让左右安全区（竖屏 inset 为 0，无副作用） */
@media (max-width: 1024px) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}
@media (pointer: coarse) {
  /* iOS 聚焦输入框小于 16px 会自动放大页面，锁定为 16px */
  input, select, textarea { font-size: 16px !important; }
  /* 触控目标不小于 44px（仅作用于真正的按钮类控件，避免撑高普通导航链接） */
  .btn, button, .cta-button, .cta-buttons a, .burger, .drawer-close { min-height: 44px; }
}

/* ========== 3. 主站门户组件 ========== */
/* 平板：定义列表左列收窄 */
@media (max-width: 1024px) {
  .dl-row { grid-template-columns: 148px 1fr; gap: 18px; }
}

/* 手机：定义列表上下堆叠。
   注意：主站部分 .dl-row 带内联 grid-template-columns（如 sites.html 的 280px 190px 1fr），
   内联优先级高于样式表，必须用 !important 才能复位为单列 */
@media (max-width: 720px) {
  .dl-row, .dl-row[style] { grid-template-columns: 1fr !important; gap: 6px; padding: 16px 0; }
  .dl-row dt { font-size: 13px; letter-spacing: .02em; }
  .dl-row dd { font-size: 14.5px; }
  .sec { padding: 52px 0; }
  .foot-bot { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .foot-links { justify-content: center; flex-wrap: wrap; }
  /* 长链接/邮箱不撑破 */
  .foot-contact a, .mws-legal a, .foot-links a { overflow-wrap: anywhere; }
  /* 横向滚动的宽表格（洞察/案例正文为主） */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { min-width: 104px; }
}

@media (max-width: 480px) {
  .wrap, .wrap-narrow, .nav-in { padding-left: 18px; padding-right: 18px; }
  .cta-in, .phero-in { padding-left: 18px; padding-right: 18px; }
  .stat b, .stat strong { font-size: 28px; }
  .quote { font-size: 15px; }
}

/* 表单：窄屏把两列字段行改为单列（联系页表单的行是内联 grid-template-columns:1fr 1fr） */
@media (max-width: 640px) {
  form [style*="grid-template-columns:1fr 1fr"],
  form [style*="grid-template-columns: 1fr 1fr"],
  form [style*="grid-template-columns:1fr, 1fr"],
  form .g2, form .grid-2, form .form-row { grid-template-columns: 1fr !important; }
  form input, form select, form textarea { min-width: 0; }
}

/* ========== 4. 洞察与案例文章页 ========== */
/* 平板及以下：指标卡与 CTA 收紧 */
@media (max-width: 900px) {
  .art-metrics { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
  .art-metrics div { padding: 18px 20px; }
  .tldr { padding: 20px 22px; }
  .cta-box { padding: 28px 24px; }
}

@media (max-width: 720px) {
  .art-hero { aspect-ratio: 16 / 10; }
  .art-hero-cap { padding: 10px 14px; font-size: 11.5px; }
  .art-meta { gap: 8px 12px; font-size: 12.5px; }
  .art-meta .ai-note { margin-left: 0; width: 100%; }
  .tldr { padding: 18px 18px; margin-bottom: 28px; }
  .tldr ul li { font-size: 14.5px; line-height: 1.7; }
  .art-metrics b { font-size: 21px; }
  .art-metrics span { font-size: 12px; }
  /* 正文宽表格：整表可横向滑动，单元格不再被压扁 */
  .prose table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prose th, .prose td { min-width: 112px; padding: 9px 11px; font-size: 13.5px; }
  .prose blockquote { padding: 15px 17px; font-size: 15px; margin: 20px 0; }
  .prose .fig { margin: 24px 0; }
  .faq { margin-top: 36px; padding-top: 26px; }
  .faq h2 { font-size: 20px; }
  .faq summary { padding: 14px 16px; font-size: 15px; }
  .faq details p { padding: 0 16px 16px; font-size: 14.5px; }
  /* 上一篇/下一篇改为纵向堆叠 */
  .art-nav { flex-direction: column; gap: 10px; margin-top: 36px; padding-top: 22px; }
  .cta-box { padding: 24px 20px; }
  .cta-box h3 { font-size: 18px; }
  .case-insight .thumb { margin: -18px -18px 16px; }
}

@media (max-width: 430px) {
  .art-metrics { grid-template-columns: 1fr; }
  .cta-box { padding: 20px 16px; }
  .insights-strip { margin-bottom: 32px; }
}

/* ========== 5. 子站（内联样式站 + Tailwind 站） ========== */
@media (max-width: 900px) {
  /* auto-fit + minmax 的最小值在窄屏会撑破容器，统一钳制为 min(280px, 100%) */
  .services-grid, .service-grid, .stats-grid, .categories, .category-grid,
  .value-cards, .office-grid, .office-cards, .feature-grid, .portfolio-grid,
  .testimonial-grid, .contact-grid, .gallery, .grid-2, .grid-3, .grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  }
  /* 四列数据块改两列 */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* flex 版数据块（zhongqifu 等）换行 */
  .stats { flex-wrap: wrap; gap: 22px; }
  .stat-number { font-size: 30px; }
  .header-container { padding-left: 18px; padding-right: 18px; }
  .hero-title, .hero h1, .hero h2 { font-size: clamp(25px, 5.6vw, 38px); }
  .emergency-box { padding: 20px 16px; }
  .contact-info li, .footer-column li { overflow-wrap: anywhere; }
  .office-card { padding: 20px 18px; }
}

@media (max-width: 560px) {
  .header-container { padding-left: 14px; padding-right: 14px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .logo-text, .logo span, .logo h1 { font-size: 17px; }
  /* 按钮行改纵向排列后再拉伸：避免两个 100% 宽按钮并排撑破容器 */
  .cta-buttons, .hero-buttons, .phero-acts, .cta-acts, .slide-acts {
    flex-direction: column; align-items: stretch; gap: 12px;
  }
  .cta-buttons .btn, .cta-buttons .cta-button, .hero-buttons .btn,
  .hero-buttons .cta-button, .phero-acts .btn, .cta-acts .btn, .slide-acts .btn {
    width: 100%; justify-content: center;
  }
  /* 页脚多列改单列（子站多为 grid/flex 两套命名） */
  .footer-column, .footer-links { min-width: 0; }
}

/* ========== 6. 微信悬浮联系组件（移动端与安全区） ========== */
html body #wxfc-btn {
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  right: 14px;
}
html body #wxfc-panel {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  right: 14px;
  max-width: calc(100vw - 28px);
}
@media (max-width: 480px) {
  html body #wxfc-btn { padding: 9px 14px; font-size: 13.5px; }
  html body #wxfc-panel { width: calc(100vw - 28px); }
}
/* 二维码在超窄屏按视口收缩（内联尺寸需覆盖） */
@media (max-width: 560px) {
  img[alt="企业微信二维码"], img[alt="负责人微信二维码"] {
    width: min(110px, 42vw) !important;
    height: auto !important;
  }
}

/* ========== 7. 动效偏好（补充子站缺失项） ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}