/* ============================================================
   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: space-between;
  gap: min(0.781vw, 15px);           /* 15/1920 */
  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;
  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: 800;
  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 下移（147/1920=7.66vw），与 desc 保持 30px 间距；
   desc 与绿色箭头维持原位置不变 */
.ab-cta__card:hover .ab-cta__title {
  transform: translateY(7.66vw);
}

.ab-cta__desc {
  position: absolute;
  left: 6.18%;
  top: 80.67%;                       /* 242/300 */
  font-family: var(--font-primary);
  font-weight: 400;
  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;
  }
}

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