/* ============================================================
   About-ESG — KV
   Figma: #470:12085 (1920×850) 渐变 -49deg 白→浅蓝
   左侧标题/副标题；右侧六边形（渐变描边 30px + 内部图片）
   ============================================================ */

.aes-kv {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 850;
  background: linear-gradient(-49deg, var(--color-white) 0%, var(--color-soft-blue) 100%);
  overflow: hidden;
}

.aes-kv__inner {
  position: absolute;
  inset: 0;
}

/* 标题（Figma #596:34301 @ 101,170，96px ExtraBold，2 行 200px） */
.aes-kv__title {
  position: absolute;
  left: 5.26%;                       /* 101/1920 */
  top: 37.2%;                        /* 316.21/850：整体下移 30px 对齐背景 */
  max-width: 1030px;
  font-size: 68px;  /* PC 端固定 68px（仅 ≥993 生效——≤992/≤768/≤576 三档各自重述字号）；移动端原样未动 */
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0;
}

/* 描述（Figma #596:34302 @ 101,400，32px #999） */
.aes-kv__desc {
  position: absolute;
  left: 5.26%;
  top: 64.26%;                       /* 546.21/850：整体下移 30px 对齐背景 */
  max-width: 1030px;
  font-size: 24px;  /* PC 端固定 24px（仅调整 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;
}

/* 视觉组（Figma #596:42145 @ 1221,170，597.45×510.42）：
   纸飞机 plan-pic #596:42143 560×500 @ (1221,180.42)，cover 填满
   镂空六边形 #596:42142 542.91×472.85 @ (1275.55,170) 叠于飞机上
   飞机大于六边形 → 飞机在左/下缘溢出六边形 */
.aes-kv__visual {
  position: absolute;
  left: 63.59%;                      /* 1221/1920 */
  top: 30.61%;                       /* 260.21/850：视觉组再下移 50px */
  width: 29.17%;                     /* 560/1920 */
  height: 58.82%;                    /* 500/850 */
}

.aes-kv__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* 设计稿 FILL/cover：飞机铺满、完整放大溢出 */
}

.aes-kv__hex {
  position: absolute;
  left: 9.74%;                       /* 54.55/560 相对飞机容器 */
  top: -2.08%;                       /* -10.42/500：六边形比飞机略高 */
  width: 96.95%;                     /* 542.91/560 */
  height: 94.57%;                    /* 472.85/500 */
  display: block;
}

/* ---- KV 入场动效（仅 PC，≤1024 在下方媒体查询关闭） ----
   时序：六边形旋转出现（xl 800ms）→ 停留 0.5s → 飞机从左下往右上缓缓划入（2s，初始不显示） */
.aes-kv__hex {
  animation: aes-kv-hex-in var(--duration-xl, 0.8s) var(--ease-decelerate, cubic-bezier(0, 0, 0.2, 1)) 0s forwards;
}

@keyframes aes-kv-hex-in {
  from { opacity: 0; transform: rotate(-180deg); }
  to   { opacity: 1; transform: rotate(0deg); }
}

.aes-kv__img {
  animation: aes-kv-plane-in 2s var(--ease-decelerate, cubic-bezier(0, 0, 0.2, 1)) 1.3s both;  /* 0.8s 六边形 + 0.5s 停留；both = 延迟期保持 from(opacity:0) */
}

@keyframes aes-kv-plane-in {
  from { opacity: 0; transform: translate(calc(-1 * var(--translate-xl, 2rem) * 4), calc(var(--translate-xl, 2rem) * 4)); }
  to   { opacity: 1; transform: translate(0, 0); }
}

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

@media (max-width: 1024px) {
  .aes-kv__hex,
  .aes-kv__img {
    animation: none;               /* 入场动效仅 PC 端 */
  }
  .aes-kv {
    aspect-ratio: auto;
    padding: 100px 60px 80px;
    box-sizing: border-box;
  }
  .aes-kv__inner {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .aes-kv__title,
  .aes-kv__desc {
    position: static;
    max-width: 100%;
  }
  .aes-kv__title {
    margin: 20px 0 20px;            /* 与上边距留 20px、与下方灰色描述留 20px */
  }
  .aes-kv__desc {
    margin: 0 0 48px;               /* 与飞机保留原 gap 48px */
  }
  .aes-kv__visual {
    position: relative;             /* 保持定位容器（内部绝对定位元素依赖） */
    align-self: center;
    left: 0;                        /* 清除 PC left:63.59% 残留——relative 下 left 仍生效导致整组右移 */
    width: 420px;
    height: 366px;
  }
  /* 六边形在 PC 设计稿中右缘本就超出飞机容器 6.7%（560 容器内 left 9.74% + 宽 96.95%），
     小容器下被 .aes-kv overflow:hidden 裁剪 → 移动端改为相对飞机容器水平居中，完整显示 */
  .aes-kv__hex {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 992px) {
  .aes-kv__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
  }
}

@media (max-width: 768px) {
  .aes-kv {
    padding: 64px 24px 56px;
  }
  .aes-kv__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
  }
  .aes-kv__desc {
    font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
    line-height: 1.6;
  }
  .aes-kv__visual {
    position: relative;
    width: 280px;
    height: 244px;
  }
}

@media (max-width: 576px) {
  .aes-kv__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }
  .aes-kv__desc {
    font-size: 1rem;
  }
  .aes-kv__visual {
    width: 240px;
    height: 209px;
  }
}

/* PC端：导航背景透明，文字保持深色 */
@media (min-width: 993px) {
  .navbar {
    background: rgba(255, 255, 255, 0) !important;
  }

  .navbar.scrolled {
    background: rgba(255, 255, 255, 1) !important;
  }

  .navbar__menu-item > a {
    color: #333333 !important;
  }

  .navbar__brochure {
    color: #333333 !important;
  }

  .navbar__brochure .navbar__icon path {
    fill: #333333 !important;
  }

  .navbar__divider {
    background: var(--color-divider) !important;
  }

  .navbar__lang {
    color: #333333 !important;
  }

  .navbar__lang .navbar__icon path {
    fill: #333333 !important;
  }
}

/* ==================== 无障碍降级 ==================== */
@media (prefers-reduced-motion: reduce) {
  .aes-kv__hex,
  .aes-kv__img {
    animation: none !important;
  }
}

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

/* KV 标题 PC 单行（≥993）：基础档无 white-space 声明，加 nowrap 使「可持续发展与ESG」不换行。
   仅 PC——≤992 无此规则，仍可自然换行（三档字号各自动态缩放，移动端原样未动）。
   同块内把描述 top 由百分比改为「标题 top + 标题高 + 80px」，实现标题与描述固定 80px 间距：
   标题 top=37.2%、标题高=68px×1.18=80.24px → calc(37.2% + 160.24px)。
   基础档 top:64.26%（随视口浮动 39~150px）在 ≤992 仍生效，移动端/平板原样未动。 */
@media (min-width: 993px) {
  .aes-kv__title {
    white-space: nowrap;
  }
  .aes-kv__desc {
    top: calc(37.2% + 160.24px);   /* 37.2% + 80.24(标题高) + 80(目标间距) */
  }
}