/* ============================================================
   About-ESG — Social Responsibility / Responsible Governance
   Figma: #470:12038 (1920×1560 var(--color-soft-gray))
   两行：文字（标题 76px + 描述 32px + 3 徽章）± 图片 810×520 radius 8
   ============================================================ */

.aes-soc {
  background: var(--color-soft-gray);
  padding: 168px 0 0;
}

.aes-soc {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1560;         /* Figma #596:34247 */
  background: var(--color-soft-gray);
  overflow: hidden;
}

/* 行 1：文字 (208,171)、图 (1177,171) 810×520 */
.aes-soc__row {
  position: absolute;
  inset: 0;
}

.aes-soc__copy {
  position: absolute;
  left: 10.83%;                      /* 208/1920 */
  top: 10.96%;                       /* 171/1560 */
  width: 48%;
  max-width: 920px;
}

.aes-soc__row .aes-soc__visual {
  position: absolute;
  left: 61.3%;                       /* 1177/1920 */
  top: 10.96%;
  width: 42.19%;                     /* 810/1920 */
}

/* 行 2：图 (-51,862)，文字 (899,870) */
.aes-soc__row--flip .aes-soc__visual {
  position: absolute;
  left: -51px;
  top: 55.26%;                       /* 862/1560 */
}

.aes-soc__row--flip .aes-soc__copy {
  position: absolute;
  left: 46.82%;                      /* 899/1920 */
  top: 55.77%;                       /* 870/1560 */
}

.aes-soc__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);
  margin: 0 0 32px;
}

.aes-soc__desc {
  font-size: clamp(1.75rem, 1.667vw, 1.875rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
  margin: 0 0 48px;
}

.aes-soc__badges {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.aes-soc__badge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-size: clamp(0.875rem, 0.32vw + 0.795rem, 1.375rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
}

.aes-soc__badge-dot {
  flex: 0 0 22px;
  width: 22px;
  height: calc(22px * 0.866);   /* 平顶正六边形 宽:高=2:√3，同 product-detail KV 的 pd2-kv__feature-dot */
  background: var(--color-secondary);   /* 绿色 var(--color-secondary) */
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.aes-soc__visual img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

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

@media (max-width: 1440px) {
  .aes-soc {
    aspect-ratio: auto;
    padding: 120px var(--container-padding) 0;   /* 左右边距对齐 About Well-T 蓝色斜角卡片 */
    box-sizing: border-box;
    overflow: visible;
  }
  .aes-soc__row {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 100px;
  }
  .aes-soc__copy,
  .aes-soc__row .aes-soc__visual,
  .aes-soc__row--flip .aes-soc__visual,
  .aes-soc__row--flip .aes-soc__copy {
    position: static;
    width: 100%;
    max-width: 100%;
  }
  .aes-soc__copy {
    text-align: center;   /* 标题/描述整体居中（项目移动端标题惯例） */
  }
  .aes-soc__badges {
    align-items: flex-start;        /* 六边形行文字左对齐 */
  }
  .aes-soc__title {
    font-size: clamp(1.5rem, 0.65vw + 1.35rem, 2.5rem);
    line-height: 1.18;
  }
  .aes-soc__desc {
    font-size: clamp(1rem, 0.32vw + 0.92rem, 1.5rem);
  }
  .aes-soc__visual img {
    height: 480px;
  }
}

@media (max-width: 768px) {
  .aes-soc {
    padding-top: 64px;
  }
  .aes-soc__row {
    padding: 0 var(--container-padding) 64px;   /* 左右边距对齐 About Well-T 蓝色斜角卡片 */
    gap: 40px;
  }
  /* Responsible Governance（flip 行）：图片移到三小点下方（copy 在上、visual 在下） */
  .aes-soc__row--flip .aes-soc__copy {
    order: 1;
  }
  .aes-soc__row--flip .aes-soc__visual {
    order: 2;
  }
  .aes-soc__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
    margin: 0 0 40px;
  }
  .aes-soc__desc {
    font-size: clamp(0.9375rem, 0.08vw + 0.92rem, 1.0625rem);
    line-height: 1.7;               /* 宽松行距，避免挤压 */
    margin-bottom: 32px;
  }
  .aes-soc__badges {
    text-align: left;            /* 覆盖 copy 的 text-align:center：描述文字左对齐 */
  }
  .aes-soc__badge {
    font-size: 1rem;
    line-height: 1.5;         /* 行距缩小 */
  }
  .aes-soc__visual img {
    height: 300px;
  }
}

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