/* ==========================================================
   design-scale.css
   模块：固定设计画布等比缩放
   作用：
   1. 用于 PC 端复杂视觉模块保持设计稿比例；
   2. 避免浏览器不同缩放比例下，模块内部元素位置发生明显漂移；
   3. 移动端恢复正常响应式布局。
   ========================================================== */

/* ========== 固定设计画布外层容器 ========== */
.design-scale-section {
  --design-scale: 1;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ========== 固定设计画布内层 ========== */
.design-scale-section__canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--design-width, 1960px);
  height: var(--design-height, auto);
  transform: translateX(-50%) scale(var(--design-scale));
  transform-origin: top center;
}

/* ==========================================================
   Banner 特殊处理：铺满当前浏览器视窗
   说明：
   1. Banner 不再只按固定 1960×900 高度显示；
   2. 让 Banner 轮播图始终填满当前视窗高度；
   3. 背景图通过 object-fit: cover 铺满，不变形，超出部分自动裁切。
   ========================================================== */

.design-scale-section--banner {
  height: 100vh !important;
  min-height: 100vh;
  overflow: hidden;
}

.design-scale-section--banner .design-scale-section__canvas,
.design-scale-section--banner .banner-wrap,
.design-scale-section--banner .banner-slider,
.design-scale-section--banner .banner-item {
  height: 100vh !important;
  min-height: 100vh;
}

.design-scale-section--banner .banner-wrap {
  width: 100%;
  max-width: none;
  overflow: hidden;
}

.design-scale-section--banner .banner-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Banner 画布宽度仍按设计稿控制，保证内部文案位置稳定 */
.design-scale-section--banner .design-scale-section__canvas {
  width: 1960px;
}

/* ==========================================================
   section03 服务模式模块
   说明：
   section03 继续采用固定设计画布 + 整体缩放，
   保证四宫格、竖排标题、左右背景图比例稳定。
   ========================================================== */

.design-scale-section--service {
  background: #061329;
}

.design-scale-section--service .design-scale-section__canvas {
  width: 1960px;
  height: 720px;
}

/* ==========================================================
   移动端处理
   说明：
   1. 移动端禁用固定画布缩放；
   2. 模块恢复正常文档流；
   3. Banner 仍保持 100vh 全屏显示。
   ========================================================== */

@media (max-width: 1200px) {
  .design-scale-section--banner {
    height: 100vh !important;
    min-height: 100vh;
  }

  .design-scale-section--banner .design-scale-section__canvas {
    position: relative;
    left: auto;
    width: 100%;
    height: 100vh !important;
    transform: none;
  }

  .design-scale-section--banner .banner-wrap,
  .design-scale-section--banner .banner-slider,
  .design-scale-section--banner .banner-item {
    height: 100vh !important;
    min-height: 100vh;
  }
}

@media (max-width: 768px) {
  .design-scale-section--service {
    height: auto !important;
    min-height: 0;
    overflow: visible;
  }

  .design-scale-section--service .design-scale-section__canvas {
    position: relative;
    left: auto;
    width: 100%;
    height: auto;
    transform: none;
  }
}