/* ============================================================
   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: 56px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 32px;
}

.aes-soc__desc {
  font-size: 20px;  /* PC 端固定 20px（仅调整 PC，移动端 ≤768 仍用下方 clamp）；
                       字重/行高见文件末尾 @media (min-width:769px) 覆盖块 */
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: var(--color-text-secondary);  /* #666666 */
  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: 18px;  /* PC 固定 18px（≤768 断点重述字号 → 基础档生效区间 ≥769）；
                       字重见文件末尾 @media (min-width:769px) 覆盖块 */
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: var(--color-text);  /* #666666 */
}

.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__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__badge-dot {
    flex: 0 0 11px;
    width: 11px;
    height: calc(11px * 0.866);   /* 移动端绿色六边形减半（PC 保持 22px） */
  }
  .aes-soc__badges {
    text-align: left;            /* 覆盖 copy 的 text-align:center：描述文字左对齐 */
  }
  .aes-soc__badge {
    font-size: clamp(0.9375rem, 0.08vw + 0.92rem, 1.0625rem);   /* 移动端与上方 .aes-soc__desc 字号一致 */
    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;
  }
}

/* .aes-soc__desc 的字重 / 行高基础档（300 / 1.5）在 ≤768 断点未重述，
   直接改基础档会把移动端一起改掉 → 追加 PC 覆盖块（同 ard / acs-switch 做法） */
@media (min-width: 769px) {
  .aes-soc__desc {
    font-weight: 400;
    line-height: 32px;
  }
}

/* .aes-soc__badge 的字重基础档（300）在 ≤768 断点未重述，直接改基础档会把移动端一起改掉
   → 追加 PC 覆盖块（字号已在基础档改 18px，该档 ≥769 生效）。 */
@media (min-width: 769px) {
  .aes-soc__badge {
    font-weight: 400;
  }
}