/* ==========================================================================
   Responsive Styles — Xiangying Precision
   Mobile-first breakpoints: 641px, 769px, 1025px, 1050px, 1281px
   ========================================================================== */

/* ===== Default 段（无媒体查询包裹，实际对所有宽度生效；导航在 >=1050px 才由 1050 段接管）===== */
:root { --section-pad: 64px; --container-pad: 20px; }

.container { padding: 0 16px; }

.nav-links,
.main-nav ul { display: none; }
.menu-toggle { display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }  /* 实测 38x32px，抬到 44x44 */
.skip-link { display: none; }
#main-content { padding-top: var(--header-height); }

/* Mobile nav open */
.main-nav.open ul {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-100);
  padding: 12px 20px;
  box-shadow: var(--shadow-lg);
  gap: 4px;
}
.main-nav.open ul li { width: 100%; }
.main-nav.open ul a { display: block; padding: 12px 16px; }
/* 移动菜单打开时锁滚动。原来写在 document.body.style.overflow 上锁不住
   （实测 scrollY 仍能到 400/1000）——滚动容器是 <html>，不是 <body>。 */
html.nav-open,
html.nav-open body { overflow: hidden; }
.has-dropdown .dropdown {
  position: static;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transform: none;
  box-shadow: none;
  border: none;
  padding: 0 0 0 16px;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.has-dropdown.open .dropdown {
  opacity: 1;
  max-height: 300px;
  overflow: visible;
  visibility: visible;
}
.main-nav.open .dropdown a {
  white-space: normal;
  word-break: break-word;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-cta .btn-sm {
  display: none;              /* 移动端隐藏，已有浮动询价按钮 */
}
.header-cta .lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--color-gray-200);
  padding: 2px;
  background: var(--color-gray-50);
}
.header-cta .lang-switch a {
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  white-space: nowrap;
  /* 实测 34.31x28.8（EN）/ 42.02x28.8（中文），抬到 44px 高 */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* <1050px（汉堡菜单区间）：语言区只留地球图标 —— EN / 中文 两个快捷链接收进地球菜单
   （菜单里的 English / 中文 两项见 header.html 的 .lang-menu-list 顶部）。
   桌面（>=1050px）在 1050 段恢复这两个链接。 */
.header-cta .lang-switch > a { display: none; }
.header-cta .lang-switch a.active {
  color: var(--color-white);
  background: var(--color-brand-mid);
}
.header-cta .lang-more > summary { padding: 6px 8px; min-height: 44px; display: inline-flex; align-items: center; }
/* 触屏没有 hover：不显示提示气泡；弹层贴右边缘、不溢出视口 */
.header-cta .lang-more::after { display: none; }
.header-cta .lang-menu { min-width: min(200px, calc(100vw - 24px)); }
/* 菜单项从 11 项增到 13 项（English / 中文 置顶）后弹层更高：留出页头与安全边距，
   超出则在面板内滚动，避免在矮屏上被视口裁掉。 */
.header-cta .lang-menu {
  max-height: calc(100vh - var(--header-height) - 32px);
  max-height: calc(100dvh - var(--header-height) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 地球菜单里的可用语言项（English / 中文）。移动端把 .lang-switch 里独立的 EN / 中文
   链接隐藏后（见本段末尾），这里是语言切换的唯一入口 —— 所以它必须可点、可聚焦。 */
.header-cta .lang-menu-list li.lang-item { padding: 0; cursor: pointer; }
.header-cta .lang-menu-list li.lang-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;              /* 触控目标：与移动端 EN / 中文 快捷链接同一标准 */
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-800);
}
.header-cta .lang-menu-list li.lang-item:hover { color: var(--color-gray-600); }
.header-cta .lang-menu-list li.lang-item > a[aria-current="true"] {
  color: var(--color-brand-mid);
  font-weight: 600;
}
.header-cta .lang-menu-list li.lang-item > a[aria-current="true"]::after {
  content: "✓";
  color: var(--color-accent);
  font-weight: 700;
}

.hero { padding: 60px 0 48px; }
.hero h1 { font-size: 28px; }
.hero p { font-size: 15px; max-width: 100%; }
.hero-trust {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
}
.hero-badge {
  font-size: 11px;
  padding: 4px 12px;
  white-space: normal;
  word-break: break-word;
}
.hero-trust-value { font-size: 20px; }
.hero-actions,
.hero-buttons { flex-direction: column; }
.hero-actions .btn,
.hero-buttons .btn { width: 100%; justify-content: center; }

/* Prevent hero buttons from creating flex min-content overflow */
.hero-actions .btn,
.hero-buttons .btn {
  min-width: 0;
  white-space: normal;
}

.hero-split .hero-visual { height: 260px; }

.cap-grid { grid-template-columns: 1fr; max-width: 400px; margin: 24px auto 0; }
.section-header { margin-bottom: 40px; }
.section-header h2 { font-size: 1.5rem; }
.section-header p { font-size: 1rem; }

.stats-grid,
.stats-row { grid-template-columns: 1fr 1fr; gap: 4px; }
.stat { padding: 24px 16px; }
.stat-number { font-size: 32px; }

.product-grid { grid-template-columns: 1fr; max-width: 400px; margin: 32px auto 0; }
.industry-grid { grid-template-columns: repeat(2, 1fr); }

/* Prevent industry-tag text from overflowing grid cells */
.industry-tag {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.features-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.about-features { grid-template-columns: 1fr; }
.cap-cards { grid-template-columns: 1fr; max-width: 480px; margin: 32px auto 0; }
.gallery-grid { grid-template-columns: 1fr; }
.gallery-grid .gallery-item:first-child { grid-column: 1; }

.footer-grid { grid-template-columns: 1fr; }

.cta-section { padding: 80px 0; }
.cta-section h2 { font-size: 28px; }

.equipment-table { font-size: 13px; }
.equipment-table th,
.equipment-table td { padding: 10px 12px; }

.trust-bar-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.float-inquiry { display: none; }
.back-to-top { bottom: 24px; right: 20px; }

.form-row { grid-template-columns: 1fr; }

/* contact 页表单/信息列：<769px 必须是单列。原单列规则只写在 769 段（>=769 才生效），
   <=768px 落回 style.css 的 `.contact-grid { grid-template-columns: 1fr 1fr }` 基线，
   两列 min-content 之和超出内容栏 —— 2026-10-09 渲染实测（放行 webfont）：
     /cn/contact 320 -> body.scrollWidth 481（溢出 161px）
     /cn/contact 375 -> 481（溢出 106px）
     /cn/contact 414 -> 481（溢出 67px）
     /en/contact 375 -> 520（溢出 145px）
   `min-width: 0` 一并压掉子项（表单控件）的 min-content 撑宽。 */
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
.contact-grid > * { min-width: 0; }

/* v3（2026-10-11）：contact 表单 ≥768px 恢复 style.css 的双列基线。
   原恢复规则写在 769 段（768 恰落在另一侧）→ 768 档表单为单列、
   输入框宽 728px；768 是 iPad 竖屏档，双列（每列约 356px）更贴合。
   作用域限定 .contact-grid，不波及其它页面的 .form-row。 */
@media (min-width: 768px) { .contact-grid .form-row { grid-template-columns: 1fr 1fr; } }

/* ===== 641px ===== */
@media (min-width: 641px) {
  .container { padding: 0 20px; }

  .hero h1 { font-size: 32px; }
  .hero p { font-size: 16px; }

  .cap-grid { grid-template-columns: repeat(2, 1fr); max-width: none; margin: 0; }

  .stats-grid,
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-number { font-size: 36px; }

  .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }

  .section-header h2 { font-size: 1.75rem; }
  .section-header p { font-size: 1.125rem; }

  .hero-trust { grid-template-columns: repeat(2, 1fr); }
  .hero-trust-value { font-size: 22px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }

  .industry-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 769px ===== */
@media (min-width: 769px) {
  :root { --section-pad: 80px; --container-pad: 24px; }

  /* 桌面导航与页头 CTA 延后到 >=1050px 才展开（规则见下方的 1050 段）。
     实测：页头「logo + 导航 + 语言切换 + Get a Quote」最小收缩宽约 1040px；
     低于该宽度会横向溢出，并被 html/body 的 overflow-x:hidden 静默裁掉右侧。
     断点沿革：原在 769px（769-1039px 最坏溢出 271px）；v1 一度设 1025px，
     仍小于 1040px 的最小收缩宽（1025-1039px 溢出 1.08-15.08px）——故定为 1050px。 */
  .header-cta .lang-switch { display: flex; }
  .header-cta .lang-switch {
    border: 1px solid var(--color-gray-200);
    padding: 2px;
    gap: 2px;
    flex-wrap: nowrap;
  }
  .header-cta .lang-switch a {
    padding: 5px 11px;
    font-size: 13px;
  }
  .header-cta .lang-more > summary { padding: 5px 9px; }
  /* ≥769px 有指针悬停：恢复提示气泡（<641px 默认段里被关掉了） */
  .header-cta .lang-more::after { display: block; }
  .skip-link { display: block; }
  #main-content { padding-top: 0; }

  .hero h1 { font-size: 42px; }
  .hero p { font-size: 18px; }
  .hero-trust-value { font-size: 24px; }

  .cap-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .section-header h2 { font-size: 2rem; }

  .stats-grid,
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-number { font-size: 48px; }

  .features-grid { grid-template-columns: repeat(2, 1fr); max-width: none; margin: 0; }
  .cap-cards { grid-template-columns: repeat(2, 1fr); max-width: none; margin: 32px 0 0; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .about-features { grid-template-columns: 1fr 1fr; }

  .cta-section h2 { font-size: 32px; }

  .hero-split .hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-visual { height: 360px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .product-categories { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .cap-intro { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  .hero-trust {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
    padding-top: 32px;
  }

  .hero-actions,
  .hero-buttons { flex-direction: row; }
  .hero-actions .btn,
  .hero-buttons .btn { width: auto; }

  .float-inquiry { display: flex; }
  /* 与 .float-inquiry（bottom:24px、高约 48px）留出间距，避免两个浮动按钮叠在一起 */
  .back-to-top { bottom: 88px; right: 24px; }

  .form-row { grid-template-columns: 1fr 1fr; }

  /* Desktop: restore dropdown hover behavior */
  .has-dropdown .dropdown {
    opacity: 0;
    max-height: none;
    overflow: visible;
    visibility: hidden;
    position: absolute;
  }
  .has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
  }
}

/* ===== 1025px ===== */
@media (min-width: 1025px) {
  .container { padding: 0 24px; }

  /* F3：恢复 style.css 的 4 列桌面基线。
     原 responsive.css 的默认段（无媒体查询）把 .footer-grid 压成 1 列、641/769 段只到 2 列，
     1025/1281 段没有恢复 → >=769px 全宽度恒 2 列（实测 1280px 仍是 600px 600px）。 */
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
  .footer-grid > :first-child { grid-column: auto; }

  .hero h1 { font-size: 48px; }

  .cap-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid .gallery-item:first-child { grid-column: 1; }
  .cap-cards { grid-template-columns: repeat(3, 1fr); }
  .industry-grid { grid-template-columns: repeat(4, 1fr); }
  .product-categories { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .hero-split .hero-content {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .about-features { grid-template-columns: repeat(3, 1fr); }
  .cap-intro { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero-visual { height: 400px; }

  .stats-grid,
  .stats-row { grid-template-columns: repeat(4, 1fr); gap: 16px; }

  .hero-trust { gap: 20px; }
}

/* ===== 1050px =====
   桌面导航与页头 CTA 的展开阈值。依据（2026-10-08 渲染实测）：页头最小收缩宽 ≈1040px
   （logo 152.61 + nav 575.80 + cta 287.67）；低于它就会横向溢出，并被
   html/body 的 overflow-x:hidden 静默裁掉。取 1050 留 10px 余量。
   注：该角色更早由 769 段承担，实测 769-1039px 溢出最坏 271px。 */
@media (min-width: 1200px) {
  .nav-links,
  .main-nav ul { display: flex; }
  .menu-toggle { display: none; }
  .header-cta .btn-sm { display: inline-flex; }
  /* 桌面恢复 EN / 中文 快捷链接（<1050px 由默认段隐藏，只留地球图标） */
  .header-cta .lang-switch > a { display: inline-flex; }
}

/* ===== 1281px ===== */
@media (min-width: 1281px) {
  .hero h1 { font-size: 56px; }

  .cap-grid { grid-template-columns: repeat(4, 1fr); }
  .features-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* ===== Print ===== */
@media print {
  .site-header { position: static; }
  .float-inquiry,
  .back-to-top,
  .menu-toggle { display: none !important; }
}