/* ============================================================
   About-Colloidal-Silica — Colloidal Silica at a Glance
   Figma: cirlce-group-all-content-01 #596:34788 (1920×1200, y960)
   渐变 -62deg 白→var(--color-soft-blue)；面包屑 @(54,1019)；内容块 @(-333.96,140)
   row + alignItems:center + gap:209 → 圆组 981.31×981.3 + 文本列 925
   文本列 @(856.35, 195.65)（块内 x=1190.31；垂直居中 (981.3-870)/2）
   圆组：外圈 981.31 蓝环 / 内圈 784.04 绿环 @(100.14,99.14) / 钠离子图 457×429 @(336.96,271.31)
   特性列 677 宽 gap 55；图标 56/43.85/48/48×41；文字 x=81；标题 32px var(--color-link-alt)(第3项 var(--color-primary)) 描述 24px var(--color-text-secondary)
   全部坐标按 1920 基准换算 vw/百分比，min(vw,px) 封顶
   ============================================================ */

.acs-glance {
  position: relative;
  height: 1200px;
  overflow: hidden;
  background: linear-gradient(-62deg, var(--color-white) 0%, var(--color-soft-blue) 100%);
}

/* ---- 面包屑（独立于区块顶部，同 about.html 做法） ---- */
.acs-glance__crumb {
  position: absolute;
  top: 40px;
  left: 54px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 3;
}

.acs-glance__crumb img {
  height: clamp(16px, 1.042vw, 1.25rem);
  width: auto;
}

.acs-glance__crumb .acs-glance__crumb-arrow {
  height: clamp(12px, 0.729vw, 0.875rem);
}

.acs-glance__crumb-link {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 0.9375vw, 1.125rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.36px;
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  transition: color var(--duration-base) var(--ease-standard);
}

/* 触控目标扩展至 ≥44px */
.acs-glance__crumb-link::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.acs-glance__crumb-link:hover {
  color: var(--color-primary-dark);
}

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

/* 圆组小幅轴心偏移动效（用户指定：正圆自转不可见，改为绕自身轴心小幅公转）
   3 元素方向：蓝色外圈顺时针 / 绿色内圈逆时针 / 中间元素图顺时针；
   rotate+translate 组合：元素中心沿 20px 半径画圆游走、自身朝向不变 */
@keyframes glance-orbit {
  from { transform: rotate(0deg) translateX(20px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

/* ---- 左侧圆组（块 @(-333.96,140)，圆组 981.31×981.3） ---- */
.acs-glance__deco {
  position: absolute;
  left: -17.39%;       /* -333.96/1920 */
  top: 11.67%;         /* 140/1200 */
  width: 51.11%;       /* 981.31/1920 */
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.acs-glance__ring {
  position: absolute;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.acs-glance__ring--outer {
  left: 0;
  top: 0;
  width: 100%;
  will-change: transform;
  animation: glance-orbit 6s linear infinite;   /* 蓝色外圈顺时针小幅公转 */
}

.acs-glance__ring--inner {
  left: 10.2%;         /* 100.14/981.31 */
  top: 10.1%;          /* 99.14/981.3 */
  width: 79.9%;        /* 784.04/981.31 */
  will-change: transform;
  animation: glance-orbit 6s linear infinite reverse;   /* 绿色内圈逆时针小幅公转 */
}

.acs-glance__img {
  position: absolute;
  left: 34.34%;        /* 336.96/981.31 */
  top: 27.65%;         /* 271.31/981.3 */
  width: 46.57%;       /* 457/981.31 */
  aspect-ratio: 457 / 429;
  object-fit: cover;
}

/* ---- 文本列 @ (856.35, 195.65) 925 宽 ---- */
.acs-glance__content {
  position: absolute;
  left: 44.6%;         /* 856.35/1920 */
  top: 16.31%;         /* 195.65/1200 */
  width: 48.18%;       /* 925/1920 */
  z-index: 1;
}

.acs-glance__title {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  white-space: nowrap;   /* 不折行：76px 下标题宽 ≈ 992px 略超容器 925px，字距 -0.04em 收进 */
  margin: 0 0 min(61px, 3.177vw);   /* 标题→特性列 gap 61 */
}

.acs-glance__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: min(55px, 2.865vw);          /* 特性行 gap 55 */
}

.acs-glance__item {
  display: flex;
  align-items: flex-start;
}

/* 图标：设计稿尺寸 56 / 43.85 / 48 / 48×41 / 48 */
.acs-glance__icon {
  flex: 0 0 auto;
}

.acs-glance__item:nth-child(1) .acs-glance__icon {
  width: min(56px, 2.917vw);
  aspect-ratio: 1 / 1;
}

.acs-glance__item:nth-child(2) .acs-glance__icon {
  width: min(43.85px, 2.284vw);
  aspect-ratio: 1 / 1;
}

.acs-glance__item:nth-child(3) .acs-glance__icon,
.acs-glance__item:nth-child(5) .acs-glance__icon {
  width: min(48px, 2.5vw);
  aspect-ratio: 1 / 1;
}

.acs-glance__item:nth-child(4) .acs-glance__icon {
  width: min(48px, 2.5vw);
  aspect-ratio: 48 / 41;
}

/* 文字 x：item1 81 / item2 78.81 / item3 79 / item4 81 / item5 81
   gap = x - 图标宽：25 / 34.96 / 31 / 33 / 33 */
.acs-glance__item:nth-child(1) { gap: min(24px, 1.302vw); }
.acs-glance__item:nth-child(2) { gap: min(34.96px, 1.821vw); }
.acs-glance__item:nth-child(3) { gap: min(31px, 1.615vw); }
.acs-glance__item:nth-child(4),
.acs-glance__item:nth-child(5) { gap: min(33px, 1.719vw); }

.acs-glance__item-title {
  font-size: min(2rem, 1.667vw);
  font-weight: 600;
  line-height: 1.375;
  letter-spacing: -0.02em;
  color: var(--color-link-alt);
  margin: 0 0 19px;                 /* 标题→描述 19（item1 22） */
}

/* 标题垂直偏移（设计稿 y：6 / 1 / 2 / 0 / 5），使图标与标题中心对齐 */
.acs-glance__item:nth-child(1) .acs-glance__item-title { margin-top: 8px; margin-bottom: 22px; }
.acs-glance__item:nth-child(2) .acs-glance__item-title { margin-top: 1px; }
.acs-glance__item:nth-child(3) .acs-glance__item-title { margin-top: 2px; }
.acs-glance__item:nth-child(5) .acs-glance__item-title { margin-top: 5px; }

.acs-glance__item:nth-child(3) .acs-glance__item-title {
  color: var(--color-primary);
}

.acs-glance__item-desc {
  font-size: 20px;  /* PC 固定 20px（仅 ≥1441；≤1440 / ≤768 断点各自重述字号）；
                       字重/行高见文件末尾 @media (min-width:1441px) 覆盖块 */
  line-height: 1.375;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
  margin: 0;
}

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

@media (max-width: 1440px) {
  .acs-glance {
    height: auto;
    padding: 120px 60px 100px;
  }
  .acs-glance__crumb {
    top: 24px;
    left: 60px;
  }
  .acs-glance__deco {
    display: none;
  }
  .acs-glance__content {
    position: static;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  .acs-glance__title {
    font-size: clamp(1.5rem, 0.65vw + 1.35rem, 2.5rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 44px;
  }
  .acs-glance__list {
    gap: 40px;
  }
  .acs-glance__item {
    gap: 20px !important;   /* 覆盖 nth-child 的 min(vw,px) */
  }
  .acs-glance__item:nth-child(n) .acs-glance__icon {
    width: 28px;
    margin-top: 4px;    /* 图标中心对齐标题中心（35.75 - 28）/2 */
  }
  /* 第 4 项图标 48/41 非方形：高度 28×41/48 ≈ 23.9px */
  .acs-glance__item:nth-child(4) .acs-glance__icon {
    margin-top: 8px;    /* (35.75 - 23.9) / 2 */
  }
  .acs-glance__item:nth-child(n) .acs-glance__item-title {
    font-size: clamp(1rem, 0.4vw + 0.91rem, 1.625rem);
    margin-top: 0;
    margin-bottom: 12px;
  }
  .acs-glance__item-desc {
    font-size: clamp(1rem, 0.12vw + 0.97rem, 1.1875rem);
  }
}

@media (max-width: 768px) {
  .acs-glance {
    padding: 80px 24px 64px;
  }
  .acs-glance__crumb {
    top: 24px;
    left: var(--container-padding);
  }
  .acs-glance__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
    text-align: center;
    margin-bottom: 28px;
  }
  /* 移动端：标题在 "at" 前强制换行 */
  .acs-glance__title-break {
    display: block;
  }
  .acs-glance__list {
    gap: 24px;
  }
  .acs-glance__item {
    gap: 16px !important;
  }
  .acs-glance__item:nth-child(n) .acs-glance__icon {
    width: 24px;
    margin-top: 2px;    /* 图标中心对齐标题中心（27.5 - 24）/2 */
  }
  /* 移动端：Inorganic Nanoparticle System 前的图标放大 */
  .acs-glance__item:nth-child(1) .acs-glance__icon {
    width: 32px;
    margin-top: 0;
  }
  /* 第 4 项图标 48/41 非方形：高度 24×41/48 ≈ 20.5px */
  .acs-glance__item:nth-child(4) .acs-glance__icon {
    margin-top: 3.5px;  /* (27.5 - 20.5) / 2 */
  }
  .acs-glance__item:nth-child(n) .acs-glance__item-title {
    font-size: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
    margin-top: 0;
    margin-bottom: 8px;
  }
  .acs-glance__item-desc {
    font-size: clamp(0.875rem, 0.04vw + 0.87rem, 0.9375rem);
    line-height: 1.6;
  }
}

/* prefers-reduced-motion 降级（区块本身无动画，为一致性保留） */
@media (max-width: 576px) {
  .acs-glance__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acs-glance *,
  .acs-glance *::before,
  .acs-glance *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* .acs-glance__item-desc 的字重 / 行高基础档（400 / 1.375）在 ≤1440 / ≤768 断点未重述，
   直接改基础档会把窄 PC 与移动端一起改掉 → 追加 PC 覆盖块（同 ard / acs-switch 做法）。
   该选择器基础档生效区间为 ≥1441（≤1440 与 ≤768 均重述了 font-size）。 */
@media (min-width: 1441px) {
  .acs-glance__item-desc {
    font-weight: 400;
    line-height: 32px;
  }
}