/* ================================================================
   SUSTAINABILITY — 可持续发展页专属样式
     · 页头：可持续发展 / SUSTAINABLE DEVELOPMENT（同 products__head 样式）
     · 环境安全：左文 + 右图，撑满全宽 1/2+1/2
     · 质量经营：左图 + 右文，撑满全宽 1/2+1/2
   依赖：tokens.css、base.css、hero-image.css、footer-cta.css
   ================================================================ */

/* ── 页头：可持续发展 ─────────────────────────────────────────
   左对齐三角 + 红中文 + 绿英文（复用 products__head 模式）
   ─────────────────────────────────────────────────────────── */
.susty__head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0px clamp(24px, 5vw, 60px) 60px;
  background: #fff;
}
.susty__head .triangle {
  display: block;
  width: 38px; aspect-ratio: 54 / 33;
  background: url('../../../images/half-green-logo.svg') no-repeat center / contain;
  margin-bottom: 14px;
  margin-left: -30px;
}
.susty__head .cn {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 40px);
  color: var(--red);
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1;
}
.susty__head .en {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: .25em;
  color: var(--green);
  font-weight: 600;
}

/* ── 双联板：环境安全 / 质量经营 ───────────────────────────────
   始终撑满全宽，左右各 1/2。
   - 默认（.susty-split）= 左文 + 右图
   - .susty-split--reverse = 左图 + 右文
   ─────────────────────────────────────────────────────────── */
.susty-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #fff;
}

/* 文字面板：内边距撑出可读区；底色按板块区分 */
.susty-split__text {
  padding: clamp(40px, 6vw, 90px) clamp(28px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;        /* 兜底色，会被 #safety / #quality 覆盖 */
}
/* 环境安全：极浅绿白底 */
#safety .susty-split__text { background: #F9FFF7; }
/* 质量经营：极浅米白底 */
#quality .susty-split__text { background: #FFFEF6; }
/* 内文最大宽度限制（防止超宽屏文字过长） */
.susty-split__text-inner {
  max-width: 100%;
  width: 100%;
}

/* 图片面板：cover 撑满整半 + hover 微放大互动 */
.susty-split__pic {
  position: relative;
  overflow: hidden;        /* clip 框：让 hover scale 出去的部分被裁掉 */
  min-height: 480px;
  background: #f4f8f5;     /* 图片加载前的兜底色 */
}
.susty-split__pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);   /* 与项目 --ease-out 同款 */
  will-change: transform;
}
.susty-split__pic:hover img {
  transform: scale(1.06);    /* 6% 微放大，克制不夸张 */
}

/* reverse 变体：图左文右 */
.susty-split--reverse .susty-split__text { order: 2; }
.susty-split--reverse .susty-split__pic  { order: 1; }
/* reverse 时文字向左靠近图（视觉上文字接图） */
.susty-split--reverse .susty-split__text-inner { margin-left: 0; }

/* ── 双联板内的小标题：环境安全 · ENVIRONMENT & SAFETY ─────────
   绿色行内排版（中文加粗 + 英文细字 + 间隔点）
   ─────────────────────────────────────────────────────────── */
.susty-split__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid rgba(225, 32, 34, 0.18);   /* 红色调淡描边，与标题文字呼应 */
}
.susty-split__title .cn {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.9vw, 28px);
  color: #E12022;        /* 板块标题红 */
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.1;
}
.susty-split__title .dot {
  color: #E12022;
  font-weight: 700;
  font-size: clamp(22px, 1.9vw, 28px);   /* 跟随 CN 字号 */
  line-height: 1;
}
.susty-split__title .en {
  font-family: var(--font-en);
  font-size: clamp(22px, 1.5vw, 28px);   /* 与中文同字号 */
  letter-spacing: .14em;
  color: var(--green);                    /* 英文标准绿 */
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
}

/* ── 双联板正文 ────────────────────────────────────────────── */
.susty-split__body {
  font-family: var(--font-cn);
  color: #4A554E;
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: .02em;
  text-align: justify;
}
.susty-split__body p { margin: 0; }
.susty-split__body p + p,
.susty-split__body h4 + p { margin-top: .6em; }
.susty-split__body h4 {
  margin: 1.3em 0 .3em;
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: .04em;
}
.susty-split__body h4:first-child { margin-top: 0; }

/* ── 页脚视频广告位 V mask 颜色：与上方质量经营文字面板（#FFFEF6）齐色 ── */
section.vision::before {
  background: #FFFEF6;
}

/* ── 响应式：<980px 单列堆叠以保证文字可读 ─────────────────── */
@media (max-width: 980px) {
  .susty-split { grid-template-columns: 1fr; }
  .susty-split__pic { min-height: 320px; }
  .susty-split--reverse .susty-split__text { order: 1; }
  .susty-split--reverse .susty-split__pic  { order: 2; }
  .susty__head { padding: 0px clamp(24px, 5vw, 0px) 60px; }
  html[lang^="en"] .susty-split__body h4 { font-size: 16px; }   /* 英文页移动端：小标题放大到 16px */
}