/* ============================================================
   CTA 三卡片（共享组件：about / about-colloidal-silica / about-esg /
   about-rd / contact / news 各页复用，文案与背景图由各页 HTML 配置）
   Figma（1920x500，var(--color-soft-blue)），三张 550x300 卡片 x=120/685/1250（间距 15）
   卡片形状：左上/下两角圆角 8px + 右上角斜切（Figma Rectangle 3/4 精确路径）
   交互：初始全部为蓝卡（var(--color-primary)）；hover → 深蓝 var(--color-cta-deep) + 20% 图片 + 绿六边形箭头
   注意：此文件被 6 个页面共享，样式改动影响全部页面
   ============================================================ */

.ab-cta {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 500;
  background: var(--color-soft-blue); /* var(--color-soft-blue) */
  display: flex;
  align-items: center;
  justify-content: center;           /* 卡片封顶 550px 后（>1920）整体居中，间距保持 15px；≤1920 无剩余空间故无影响 */
  gap: 15px;                         /* 三卡间距固定 15px（设计稿值），>1200 任何视口下不缩放 */
  padding: 0 min(6.25vw, 120px);     /* 120/1920 */
}

.ab-cta__card {
  position: relative;
  flex: 1;
  max-width: min(28.646vw, 550px);   /* 550/1920 */
  aspect-ratio: 550 / 300;
  /* 供标题 hover 位移取容器查询单位（cqh）：位移按卡片高等比，任何视口下与 desc 间距恒 30px */
  container-type: size;
  text-decoration: none;
  display: block;
  /* 精确形状裁剪（左上/下圆角 8px + 右上斜切），随卡片等比缩放 */
  clip-path: url(#ab-cta-clip);
}

.ab-cta__card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- 卡片形状（含右上斜切，SVG 等比拉伸填充） --- */
.ab-cta__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ab-cta__shape path {
  fill: var(--color-primary); /* 初始 = 卡片 2/3 的蓝 */
  transition: fill var(--duration-base) var(--ease-standard);
}

.ab-cta__card:hover .ab-cta__shape path {
  fill: var(--color-cta-deep); /* var(--color-cta-deep)，卡片 1 的深蓝 */
}

/* --- hover 图片（先用 about-cta1-bg.jpg 占位，后续替换） --- */
.ab-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.ab-cta__card:hover .ab-cta__bg {
  opacity: 0.2;
}

/* --- 绿六边形箭头装饰（hover 出现；中心与第二行文字 desc 底边对齐，文字位置不动） --- */
.ab-cta__deco {
  position: absolute;
  left: 85.6%;
  top: 82%;                         /* 箭头下底边对齐 desc 底边：底边 270 → 中心 270-24=246/300 */
  transform: translate(-50%, -50%);
  width: 8.73%;                      /* 48/550 */
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.ab-cta__card:hover .ab-cta__deco {
  opacity: 1;
}

/* --- 文案 --- */
.ab-cta__copy {
  position: absolute;
  left: 6.18%;                       /* 34/550 */
  top: 8.67%;                        /* 26/300（卡片 2/3 标题位） */
}

.ab-cta__title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: min(1.667vw, 2rem);     /* 32/1920 */
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0;
  will-change: transform;
  transition: transform var(--duration-base) var(--ease-standard);
}

/* hover：标题 slide down 下移，落定后与下方 desc 的间距恒定 30px（设计稿值）。
   推导：desc 顶 = 卡片高×0.8067，标题顶 = 卡片高×0.0867，标题高 = 字号×1.15
        → 间距 = 卡片高×0.72 − 字号×1.15 − 位移
        → 令间距 = 30px，得 位移 = 0.72×卡片高 − 1.15×字号 − 30px
   用容器查询单位 cqh 表示「0.72×卡片高」，位移随卡片等比缩放 ——
   于是 ≤1920（卡片未封顶）与 >1920（卡片封顶 550×300）都恰好 30px。
   旧实现是裸 7.66vw：>1920 后卡片冻结在 550×300 不再变大、标题却继续按视口下落，
   实测 2560 与 desc 重叠 16.9px、3200 重叠 65.9px、3840 重叠 114.9px。
   desc 与绿色箭头维持原位置不变。 */
.ab-cta__card:hover .ab-cta__title {
  /* 回退：不支持 cqh 的浏览器仍按 vw 下落（≥1920 由 min() 封顶，保证不重叠） */
  transform: translateY(min(7.77vw, 149.2px));
  transform: translateY(calc(72cqh - 1.15em - 30px));
}

.ab-cta__desc {
  position: absolute;
  left: 6.18%;
  top: 80.67%;                       /* 242/300 */
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: min(0.9375vw, 1.125rem);    /* 18/1920 */
  line-height: min(1.458vw, 1.75rem);   /* 28/1920 */
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0;
  max-width: 90.73%;                 /* 499/550 */
}

/* ==================== 响应式（1200 以下移动端布局） ==================== */
@media (max-width: 1200px) {
  .ab-cta {
    aspect-ratio: auto;
    padding: 80px var(--container-padding);  /* 左右边距与各页内容（如新闻列表图）对齐 */
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .ab-cta__card {
    width: 100%;
    max-width: 680px;
    flex: none;
  }

  .ab-cta__title {
    font-size: clamp(1.125rem, 0.4vw + 1.03rem, 1.75rem);
  }

  .ab-cta__desc {
    font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
    line-height: 1.5;
  }
}

@media (max-width: 768px) {
  .ab-cta {
    padding: 56px var(--container-padding);
  }

  .ab-cta__card {
    max-width: 480px;
  }

  .ab-cta__title {
    font-size: clamp(1.125rem, 0.32vw + 1.05rem, 1.625rem);
  }

  .ab-cta__desc {
    font-size: 1rem;
    line-height: 1.5;
    top: calc(80.67% - 20px);
    max-width: 75%;
  }

  /* 此断点 desc 整体上移了 20px（见上），位移常量随之由 30px 改为 50px，净间距仍为 30px */
  .ab-cta__card:hover .ab-cta__title {
    transform: translateY(min(7.77vw, 149.2px));
    transform: translateY(calc(72cqh - 1.15em - 50px));
  }
}

/* ==================== 无障碍降级 ==================== */
@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;
  }
}