/* ============================================================
   About-Colloidal-Silica — Well-T Colloidal Silica（切换模式）
   Figma: Colloidal-Silica-part #596:34706 (1920×1440, 页面 y3360)
   内容列 @ (161,140) 1600 宽 gap 70：标题区(gap 30) + 轮播帧 1600×684
   帧内：大图 1600×600 / 卡片 560×480 @(157,204) / 页码 96×20 @(1350,632)
   卡片：标题 @(55,56) 32/48 white、line @(55,134) 450×1、desc @(55,164) 24/40
        hex prev @(395,396) / hex next @(460,396) 45×45
   水印 SVG 940×145 @(0,1295)，SVG 内部已含 g opacity=0.1 → CSS 不叠加透明度
   3 张切换图：当前均用第 1 张（acs-switch-bg-5ed8bb.png），待替换
   全部坐标按 1920 基准换算 vw/百分比，min(vw,px) 封顶
   ============================================================ */

.acs-switch {
  position: relative;
  height: 1440px;
  background: var(--color-white);
  overflow: hidden;
}

/* ---- 内容列 @ (161, 140) 1600 宽 ---- */
.acs-switch__inner {
  position: absolute;
  left: 8.39%;          /* 161/1920 */
  top: 9.72%;            /* 140/1440 */
  width: 83.33%;         /* 1600/1920 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(70px, 3.646vw);   /* 标题区→帧 gap 70 */
  z-index: 1;
}

/* 标题区 1267 宽 gap 30 */
.acs-switch__head {
  width: 79.19%;         /* 1267/1600 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(30px, 1.563vw);   /* 标题→desc gap 30 */
}

.acs-switch__title {
  font-size: clamp(1.75rem, 3.9583vw, 4.75rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  text-align: center;
  margin: 0;
}

.acs-switch__desc {
  font-size: min(1.75rem, 1.667vw);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
  opacity: 0.7;
  text-align: center;
  margin: 0;
}

/* ---- 轮播帧 1600×684 ---- */
.acs-switch__carousel {
  position: relative;
  width: 100%;
}

.acs-switch__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 1600 / 684;
}

/* 轨道：横向滑动切换（只动画 transform） */
.acs-switch__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform var(--duration-slow, 0.5s) var(--ease-standard, ease);
}

.acs-switch__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
}

/* 背景图 1600×600（下方 84px 露帧底）
   右下角 45° 斜切（设计稿节点 clip：透明边界 (1584,540)→(1524,600)） */
.acs-switch__bg {
  display: block;
  width: 100%;
  aspect-ratio: 1600 / 600;
  border-radius: var(--radius-md);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 95.25% 100%, 0 100%);
}

/* 蓝卡 560×480 @ (166, 204)——固定层盖在轨道上（图片滑动卡片不动），
   无 padding，内部元素绝对定位（% 相对卡片） */
.acs-switch__card {
  position: absolute;
  left: 10.375%;         /* 166/1600 */
  top: 29.82%;           /* 204/684 */
  width: 35%;            /* 560/1600 */
  aspect-ratio: 560 / 480;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  z-index: 2;
}

/* 卡片文字层：双 item 叠放，切换时从上到下 slide down（只动画 transform/opacity） */
.acs-switch__card-copy {
  position: absolute;
  left: 9.82%;           /* 55/560 */
  top: 11.67%;           /* 56/480 */
  width: 80.36%;         /* 450/560 */
  height: 88.33%;        /* 424/480：标题→卡片底 */
  overflow: hidden;
}

.acs-switch__card-copy__item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: transform var(--duration-base, 0.3s) var(--ease-standard, ease),
              opacity var(--duration-base, 0.3s) var(--ease-standard, ease);
}

.acs-switch__card-copy__item[aria-hidden="true"] {
  transform: translateY(-100%);
  opacity: 0;
}

.acs-switch__card-title {
  font-size: min(2rem, 1.667vw);
  font-weight: 600;
  line-height: 1.5;      /* 48px */
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0;
}

.acs-switch__card-line {
  display: block;
  width: 100%;           /* 450/450 */
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  margin: min(30px, 1.563vw) 0 0;   /* 标题底→line 30px */
}

.acs-switch__card-desc {
  width: 100%;           /* 450/450 */
  font-size: min(1.5rem, 1.25vw);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.75);
  margin: min(30px, 1.563vw) 0 0;   /* line→desc 30px */
}

/* 卡片内 Explore Products 按钮（绝对定位，与绿色六边形切换按钮同行） */
.acs-switch__card-btn {
  position: absolute;
  left: 9.82%;             /* 55/560，与卡片文字左对齐 */
  top: 81%;
  width: min(182px, 9.479vw);
  aspect-ratio: 182 / 58;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 3;
  transition: transform var(--duration-micro, 150ms) var(--ease-standard, ease);
}

.acs-switch__card-btn-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.acs-switch__card-btn-shape path {
  transition: fill var(--duration-base) var(--ease-standard);
}

.acs-switch__card-btn span {
  position: relative;
  font-family: var(--font-primary);
  font-size: min(1rem, 0.9375vw);
  font-weight: 300;
  color: var(--color-white);
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-standard);
}

.acs-switch__card-btn:hover .acs-switch__card-btn-shape path {
  fill: var(--color-white);
}

.acs-switch__card-btn:hover span {
  color: var(--color-primary);
}

.acs-switch__card-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 六边形箭头按钮 45×45 @ 相对 carousel (561, 601) / (626, 601)
   = 卡片(166,204) + 内容列右对齐：hex1(395,397) hex2(460,397) */
.acs-switch__hex-btn {
  position: absolute;
  width: min(45px, 2.344vw);
  aspect-ratio: 1 / 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 3;
}

.acs-switch__hex-btn img {
  width: 100%;
  height: 100%;
  object-fit: fill;      /* 拉伸填满 45×45，与设计稿节点渲染一致 */
  display: block;
}

.acs-switch__hex-btn--prev {
  left: 35.06%;          /* (166+395)/1600 */
  top: 87.87%;           /* (204+397)/684 */
}

.acs-switch__hex-btn--next {
  left: 39.125%;         /* (166+460)/1600 */
  top: 87.87%;
}

.acs-switch__hex-btn:hover img {
  filter: brightness(0.85);
}

.acs-switch__hex-btn:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: var(--radius-md-lg);
}

/* 页码六边形指示 @ (1350, 632) 96×20：正六边形 22×19.05（√3×11），gap 15 */
.acs-switch__dots {
  position: absolute;
  left: 84.38%;          /* 1350/1600 */
  top: 92.4%;            /* 632/684 */
  display: flex;
  align-items: center;
  gap: min(15px, 0.781vw);
  z-index: 3;
}

.acs-switch__dot {
  width: min(22px, 1.146vw);
  height: min(19.05px, 0.992vw);
  border: none;
  padding: 0;
  background: rgba(168, 206, 80, 0.3);   /* var(--color-secondary) 30% */
  /* 正六边形：尖点在左右（与设计稿 SVG 一致），上下平边 */
  clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  cursor: pointer;
  transition: background var(--duration-micro, 0.15s) var(--ease-standard, ease);
}

.acs-switch__dot.is-active {
  background: var(--color-secondary);
}

/* 水印 SVG 940×145 @ 左下角贴底贴左（bottom 0 保证视口缩放下始终贴底，
   原 top 89.93% 在宽度等比缩放时高度变小会底部留白）
   —— 内部 g 已含 opacity 0.1 */
.acs-switch__watermark {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48.96%;         /* 940/1920 */
  aspect-ratio: 940 / 145;
  pointer-events: none;
}

/* ---------- responsive ---------- */

@media (max-width: 1440px) {
  .acs-switch {
    height: auto;
    padding: 100px 60px 120px;
  }
  .acs-switch__inner {
    position: static;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 52px;
  }
  .acs-switch__head {
    width: 100%;
    max-width: 900px;
    gap: 24px;
  }
  .acs-switch__title {
    font-size: clamp(1.5rem, 0.65vw + 1.35rem, 2.5rem);
    line-height: 1.18;
  }
  .acs-switch__desc {
    font-size: clamp(1rem, 0.32vw + 0.92rem, 1.5rem);
  }
  .acs-switch__card-title {
    font-size: clamp(1.25rem, 0.4vw + 1.16rem, 1.875rem);
  }
  .acs-switch__card-desc {
    font-size: clamp(1.125rem, 0.08vw + 1.1rem, 1.25rem);
    line-height: 1.6;
  }
}

@media (max-width: 1024px) {
  .acs-switch {
    padding: 80px 0 120px;
  }
  .acs-switch__inner {
    max-width: 760px;
  }
  .acs-switch__viewport {
    aspect-ratio: auto;
  }
  .acs-switch__card {
    position: static;
    width: 100%;
    aspect-ratio: auto;
    margin: 8px 0 0;
    padding: 40px 48px;
    box-sizing: border-box;
  }
  .acs-switch__card-copy {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .acs-switch__card-copy__item {
    position: static;
  }
  .acs-switch__card-copy__item[aria-hidden="true"] {
    display: none;
  }
  .acs-switch__card-title,
  .acs-switch__card-line,
  .acs-switch__card-desc {
    width: 100%;
    margin: 0 0 16px;
  }
  .acs-switch__card-desc {
    margin-bottom: 0;
    line-height: 1.6;
  }
  .acs-switch__card-btn {
    position: relative;
    left: auto;
    bottom: auto;
    width: 160px;
    margin-top: 24px;
  }
  .acs-switch__card-btn span {
    font-size: clamp(0.875rem, 0.04vw + 0.87rem, 0.9375rem);
  }
  .acs-switch__hex-btn {
    display: none;   /* 触控环境用圆点切换 */
  }
  .acs-switch__dots {
    position: static;
    justify-content: center;
    margin-top: 28px;
  }
  .acs-switch__dot {
    width: 22px;          /* 固定 PC 尺寸，避免 min(vw) 在窄屏缩小 */
    height: 19.05px;
  }
  .acs-switch__watermark {
    top: auto;
    bottom: 0;
  }
}

@media (max-width: 768px) {
  .acs-switch {
    padding: 64px 24px 100px;
  }
  .acs-switch__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
    text-align: center;
  }
  .acs-switch__desc {
    font-size: clamp(0.9375rem, 0.08vw + 0.92rem, 1.0625rem);
  }
  .acs-switch__card {
    padding: 24px;
  }
  .acs-switch__card-title {
    font-size: clamp(1.25rem, 0.16vw + 1.21rem, 1.5rem);
  }
  .acs-switch__card-desc {
    font-size: clamp(1rem, 0.04vw + 0.99rem, 1.0625rem);
  }
  .acs-switch__card-line {
    margin-bottom: 12px;
  }
  .acs-switch__watermark {
    width: 100%;            /* 同 products：移动端铺满屏宽等比缩放 */
    max-width: 940px;
  }
}

@media (max-width: 576px) {
  .acs-switch__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }
}

/* prefers-reduced-motion 降级 */
@media (prefers-reduced-motion: reduce) {
  .acs-switch__track {
    transition: none;
  }
}