/**
 * 全站响应式增强 + 性能/可访问性微优化
 * ---------------------------------------------------------------
 * 设计原则（务必遵守，改动前请先读）：
 *  1) **绝不改变 PC 端（>=1200px）的现有样式与交互** —— 本文件所有规则
 *     一律包在 max-width 媒体查询内，或仅作用于原本就缺失的属性；
 *     不存在无媒体查询的全局覆盖。
 *  2) 本文件在所有既有 CSS 之后加载，仅用于「补齐」而非「重写」。
 *  3) 断点与主题既有断点对齐（1024 / 767），额外补 1200(笔记本) 与 480(小屏手机)。
 */

/* ============================================================
   零、屏幕阅读器专用（视觉完全隐藏，不占位、不影响任何布局）
   用于给缺少可见 H1 的列表页补语义化 H1：
   搜索引擎与读屏器可正常读取，而屏幕上不可见 → 满足 SEO 与可访问性，
   同时严格不改变现有视觉（这是用户的硬性要求）。
   注意：不能用 display:none / visibility:hidden —— 那样搜索引擎可能
   判定为隐藏文本（作弊风险），且读屏器也读不到。
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   一、全局基础优化（不影响 PC 视觉，仅修正体验缺陷）
   ============================================================ */

/* 图片自适应兜底：防止个别页面图片在窄屏溢出横向滚动。
   只限制最大宽度、不改变 PC 下的实际显示尺寸（PC 下图片本就未超出容器）。 */
img {
  max-width: 100%;
}

/* 触摸设备的点击高亮去除 + 平滑滚动（PC 无感知） */
@media (hover: none) and (pointer: coarse) {
  a,
  button,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}

/* 尊重用户「减少动画」偏好：可访问性得分项，且不影响默认 PC 表现 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   二、笔记本 / 小桌面（<=1200px）
   仅收窄过大的横向留白与字号，布局结构不变
   ============================================================ */
@media only screen and (max-width: 1200px) {
  /* 首页方案卡片：固定 380px 高在小桌面下略显空旷 */
  .solution-list li {
    height: 340px;
  }
  .solution-list li .text-wrap {
    top: 60px;
  }
  .solution-list li .text-wrap h1 {
    font-size: 26px;
  }
  .solution-list li .text-wrap-2 {
    top: 106px;
  }
  .solution-list li .card-desc {
    top: 156px;
    font-size: 15px;
  }
  .solution-list li .card-btns {
    top: 252px;
  }
}

/* ============================================================
   三、平板（<=1024px）
   ============================================================ */
@media only screen and (max-width: 1024px) {
  /* 防止任何页面出现横向滚动条（PageSpeed / 移动可用性扣分项） */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 表格类内容改为可横向滚动，避免撑破布局 */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 长英文/URL 断行，防止溢出 */
  p,
  li,
  .desc,
  .text {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ============================================================
   四、手机（<=767px）
   ============================================================ */
@media only screen and (max-width: 767px) {
  /* 触摸目标最小 44x44（Google 可访问性要求），避免「点击目标过小」扣分。
     用 min-height 而非 height，不改变已达标元素的现有尺寸。 */
  .zs-header .rightbox .ico-contact a,
  .card-btn,
  .product-list li .content .btn-warp .btn a,
  .footer-search-form button {
    min-height: 44px;
  }

  /* 页脚导航折叠项的点击区加大，便于手指操作 */
  .zs-footer .zs-footermain .footer-menu-title {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* 正文可读性：手机端最小字号 14px，避免 Google 判定「字体过小」 */
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* 首页方案卡片：手机端单列，收敛高度 */
  .solution-list li {
    height: auto;
    min-height: 260px;
    padding-bottom: 24px;
  }
  /* 高度改自适应后，绝对定位的内容需回归文档流，否则会重叠 */
  .solution-list li .text-wrap,
  .solution-list li .text-wrap-2,
  .solution-list li .card-desc,
  .solution-list li .card-btns {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
  }
  .solution-list li .text-wrap {
    padding: 24px 24px 0;
  }
  .solution-list li .text-wrap-2 {
    padding: 10px 24px 0;
  }
  .solution-list li .card-desc {
    padding: 8px 24px 0;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .solution-list li .card-btns {
    padding: 16px 24px 0;
  }

  /* 营销服务页卡片：手机端高度自适应，避免文字被裁 */
  .product-list li {
    height: auto;
    min-height: 200px;
    padding-bottom: 20px;
  }
  .product-list li .content {
    position: static;
    height: auto;
  }
  .product-list li .content .text-warp {
    padding-top: 24px;
  }
}

/* ============================================================
   五、小屏手机（<=480px）
   ============================================================ */
@media only screen and (max-width: 480px) {
  .solution-list li .text-wrap h1 {
    font-size: 19px;
  }
  .solution-list li .card-desc {
    font-size: 13px;
  }
  /* 按钮组在极窄屏改为等分两列，避免换行错位 */
  .solution-list li .card-btns {
    display: flex;
    gap: 10px;
  }
  .solution-list li .card-btn {
    flex: 1 1 0;
    min-width: 0;
  }
  /* 页脚搜索：小屏下标签换行更紧凑 */
  .zs-footer .footer-search-tabs {
    gap: 4px 16px;
  }
  .zs-footer .footer-search-tabs .fst-item {
    font-size: 14px;
  }
}