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

.aes-soc {
  background: #F8F8F8;
  padding: 170px 0 0;
}

.aes-soc {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1560;         /* Figma #596:34247 */
  background: #F8F8F8;
  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: min(76px, 3.958vw);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #3EA8D9;
  margin: 0 0 32px;
}

.aes-soc__desc {
  font-size: min(32px, 1.667vw);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #999999;
  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: 24px;
  line-height: 48px;
  letter-spacing: -0.02em;
  color: #999999;
}

.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);   /* 绿色 #A8CE50 */
  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: 8px;
}

/* ---------- 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: 52px;
  }
  .aes-soc__desc {
    font-size: 24px;
  }
  .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: 36px;
    margin: 0 0 40px;               /* 与下方灰色描述留出间距 */
  }
  .aes-soc__desc {
    font-size: 17px;
    line-height: 1.7;               /* 宽松行距，避免挤压 */
    margin-bottom: 32px;
  }
  .aes-soc__badges {
    text-align: left;            /* 覆盖 copy 的 text-align:center：描述文字左对齐 */
  }
  .aes-soc__badge {
    font-size: 16px;
    line-height: 28px;         /* 行距缩小 */
  }
  .aes-soc__visual img {
    height: 300px;
  }
}