/* ============================================
   Contact / CTA Section - 精确还原 Figma 设计
   蓝底 CTA 横幅 (图片+深蓝 0.75 叠层) + 标题/副标题/Contact Us 药丸按钮
   ============================================ */

.contact {
  position: relative;
  width: 100%;
  background: var(--color-soft-blue);
  padding: 100px 120px;
  overflow: hidden;
}

.contact__inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}

/* --- CTA 横幅 (1680x450, r=8, 图+深蓝叠层烘焙在 JPG) --- */
.contact__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1680 / 450;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-image: url(../images/contact-banner.jpg);
  background-size: cover;
  background-position: center;
}

/* --- 横幅内容 (左对齐, 绝对定位) --- */
.contact__content {
  position: absolute;
  top: 21.33%;
  left: 9.35%;
  right: 9.35%;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 2;
}

.contact__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 3.9583vw, 4.75rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0 0 clamp(8px, 1.146vw, 1.375rem);
}

.contact__subtitle {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 1.6667vw, 2rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin: 0 0 clamp(16px, 2.604vw, 52px);
}

/* --- Contact Us 按钮 (文字链接+下划线动画，同 products-cta) --- */
.contact__cta {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
  line-height: 1.6;
  color: var(--color-white);
  text-decoration: none;
  position: relative;
  padding-bottom: 6px;
  align-self: flex-start;
  transition: transform var(--duration-micro) var(--ease-emphasized);
}

/* 触控目标扩展至 ≥44px */
.contact__cta::before {
  content: "";
  position: absolute;
  inset: -13px 0;
}

.contact__cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}

.contact__cta:hover::after {
  transform: scaleX(1);
}

.contact__cta:active {
  transform: scale(0.96);
}

/* ============================================
   Responsive Contact
   ============================================ */

@media (max-width: 1200px) {
  .contact { padding: 80px 60px; }
  /* 标题/副标题字号对齐 contact.shtml 的 Contact Us Now（ct-cta）移动端 */
  .contact__title { font-size: clamp(1.5rem, 0.65vw + 1.35rem, 2.5rem); }
  .contact__subtitle { font-size: clamp(0.875rem, 1.6667vw, 2rem); font-weight: 400; line-height: 1.5; }
}

@media (max-width: 768px) {
  .contact { padding: 60px 20px; }

  .contact__cta {
    align-self: center;
  }

  /* 横幅改高一些以容纳内容 */
  .contact__banner {
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 9.35%;
  }

  .contact__content {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
  }

  /* 标题/副标题字号对齐 Contact Us Now（ct-cta）≤768 */
  .contact__title { font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem); line-height: 1.18; }
  .contact__subtitle { font-size: clamp(0.875rem, 1.6667vw, 2rem); font-weight: 400; line-height: 1.5; }
  /* 移动端：标题在 "Well-T" 前强制换行 */
  .contact__title-break { display: block; }

  .contact__cta {
    align-self: center;
  }
}

@media (max-width: 576px) {
  .contact { padding: 48px 16px; }

  .contact__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }

  .contact__banner {
    aspect-ratio: 4 / 3;
    padding: 20px 7%;
  }

  .contact__content {
    gap: 16px;
  }

  .contact__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }

  .contact__subtitle {
    font-size: clamp(0.875rem, 1.6667vw, 2rem);
    font-weight: 400;
    line-height: 1.5;
  }
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .contact__cta,
  .contact__cta-shape path,
  .contact__cta-text {
    transition: none;
  }
}