@charset "UTF-8";
/* ============================================================
   WCGhost 移动端适配  mobile.css
   只在 ≤767px 生效，桌面端零影响。
   设计原则：不重排结构，只修正「一屏装不下」的硬伤。
   ============================================================ */

@media (max-width: 767px) {

  /* ---------- 1. 基础：字号与防溢出 ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; }

  img, video, iframe { max-width: 100%; height: auto; }
  table { max-width: 100%; }

  /* ---------- 1.1 核心：栅格在手机上必须单列 ----------
     Elementor 的列是固定百分比（col-33 = 33.333%），不会像 Bootstrap 那样自动堆叠；
     定价区的 .row > .col-lg-4 也被外层宽容器带着跑。统一压成单列。 */
  html, body { overflow-x: hidden; max-width: 100%; }

  .container,
  .container-fluid,
  .elementor-container,
  .elementor-section-boxed > .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .row { flex-wrap: wrap !important; margin-left: 0 !important; margin-right: 0 !important; }

  [class*="col-xs-"], [class*="col-sm-"],
  [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .elementor-row { flex-wrap: wrap !important; }

  .elementor-column,
  .elementor-col-20, .elementor-col-25, .elementor-col-33,
  .elementor-col-40, .elementor-col-50, .elementor-col-66 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .elementor-widget-wrap { padding: 0 !important; }
  .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 单列后给每张卡片留出间距，避免粘在一起 */
  .why-choose-us-block,
  .xs-service-block,
  .elementor-widget-xs-image-box,
  .elementor-widget-xs-service-box {
    margin-bottom: 22px;
  }

  /* 卡片内边距：桌面是 60px 四面，手机上等于白吃 120px 高 */
  .xs-service-block { padding: 26px 16px !important; }
  .why-choose-us-block { padding: 10px 4px !important; }
  .why-choose-us-block img,
  .xs-service-block .service-img img {
    margin: 0 auto 10px;
  }
  .why-choose-us-block { text-align: center; }
  .why-choose-us-block p { text-align: left; }

  /* 长英文/型号名不要顶破容器 */
  .banner-title, .banner-sub-title, .xs-banner-content p,
  .elementor-heading-title, .xs-title, h1, h2, h3, h4 {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* ---------- 2. 首屏主标题：64px → 28px ----------
     桌面用 3.76rem，手机上会把 "WCGhost" 硬折成两行 */
  .banner-title,
  .xs-banner.inner-banner .banner-title,
  .xs-banner.banner-v4 .banner-title,
  .xs-banner.banner-v5 .xs-banner-content .banner-title,
  .banner-6-content.xs-banner-content .banner-title {
    font-size: 28px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    margin-bottom: 12px !important;
    white-space: normal;
  }

  .banner-sub-title { font-size: 15px !important; line-height: 1.7 !important; }

  .xs-banner-content p,
  .xs-banner.service-banner .xs-banner-content p {
    font-size: 14.5px;
    line-height: 1.8;
    margin-bottom: 22px !important;
  }

  /* ---------- 3. 首屏按钮：等宽、好点 ---------- */
  .xs-banner-content .btn,
  .banner-btn-group .btn {
    min-width: 148px;
    padding: 12px 22px;
    font-size: 15px;
  }
  .banner-btn-group { gap: 10px; }

  /* ---------- 4. 右侧悬浮客服栏：整体缩到 66% ----------
     雪碧图是 71px 定尺,直接改宽高会裁错图标,所以用 transform 缩放 */
  .right-server {
    transform: scale(.66);
    transform-origin: top right;
    right: 0 !important;
    top: 96px !important;
  }
  .right-server li { margin-bottom: 6px; }

  /* ---------- 4.1 首屏装饰插画：绝对定位，手机上必然压字，隐藏 ---------- */
  .inner-welcome-image-group { display: none !important; }

  /* 波浪装饰是 calc(100% + 200px) 并带负偏移，防止横向滚动 */
  .xs-banner { overflow: hidden; }
  .xs-banner .wave_animation_wraper { display: none !important; }

  /* ---------- 5. 区块间距：桌面 100px+ 在手机上太浪费 ---------- */
  .xs-section-padding,
  .section-padding {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  /* Elementor 各区块的桌面大内边距，手机上压到 34px */
  .elementor-top-section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
  .elementor-inner-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .elementor-top-section:first-of-type { padding-top: 0 !important; }

  .container { padding-left: 16px; padding-right: 16px; }

  /* ---------- 6. 标题与正文的层级 ---------- */
  .section-title, .xs-heading-title, .heading-title {
    font-size: 22px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }
  .section-subtitle, .xs-heading-subtitle {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* ---------- 7. 卡片：单列时留出呼吸 ---------- */
  .xs-service-block { margin-bottom: 18px; }
  .pricing-table, .pricing-content { margin-bottom: 20px; }

  /* ---------- 8. 页脚 ---------- */
  .footer-widget { margin-bottom: 26px; }
  .footer-bottom-info p { font-size: 13.5px; line-height: 1.75; }
}