/* =========================================================
   基础层：设计变量 / 重置 / 排版 / 通用工具类
   设计基准：1920px 宽度 = 100vw，单断点 980px 切换移动端
   ========================================================= */

/* ---------- 自托管字体（取自原站 /web/fonts 与阿里 iconfont 项目 960019） ---------- */
@font-face {
  font-family: "HarmonyOS Sans SC";
  src: url("../../fonts/HarmonyOS_SansSC_Light.ttf") format("truetype");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "iconfont";
  src: url("../../fonts/iconfont.woff2") format("woff2"),
       url("../../fonts/iconfont.woff") format("woff"),
       url("../../fonts/iconfont.ttf") format("truetype");
  font-display: swap;
}

/* 原站仅实际使用 3 枚图标：搜索、左箭头、右箭头 */
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sousuo::before { content: "\e637"; }
.icon-arr_l::before { content: "\e61b"; }
.icon-arr_r::before { content: "\e638"; }

:root {
  /* 色彩（与原站 :root 逐值对齐） */
  --sg-theme: #ada097;
  --sg-theme-soft: rgba(173, 160, 151, .6);
  --sg-accent: #a8cb05;
  --sg-text: #312f30;
  --sg-text-weak: #8f8c8d;
  --sg-bg: #e6e7e9;
  --sg-bg-soft: #f2f2f3;
  --sg-line: #dbdbdb;
  --sg-white: #fff;
  --sg-dark: #2e2c2d;

  /* 原站深/浅色块交替用色 */
  --sg-sand: #cdc4bc;      /* 暖褐区块 */
  --sg-warm: #e1dbd6;      /* 文化区第二屏 */
  --sg-neutral: #e1e2e4;   /* 案例摘要区 */
  --sg-grey: #d8d9da;      /* 交互态 / CTA 底 */
  --sg-grey-2: #dddcda;    /* 灰区块 */
  --sg-line-strong: #c2c2c2; /* 荣誉页分隔线 */
  --sg-line-warm: #c8c8c8;   /* 品牌介绍分隔线 */

  /* 尺寸：注释中为 1920px 设计稿换算 */
  --sg-gutter: 2.6042vw;        /* 50 / 1920 */
  --sg-container: 79.1667vw;    /* 1520 / 1920 */
  --sg-header-h: clamp(55px, 6.25vw, 126px); /* 120 / 1920 */

  /* 字号阶梯 */
  --sg-fs-14: clamp(12px, .7292vw, 14.7px);
  --sg-fs-16: clamp(14px, .8333vw, 16.8px);
  --sg-fs-18: clamp(15px, .9375vw, 18.9px);
  --sg-fs-20: clamp(16px, 1.0417vw, 21px);
  --sg-fs-24: clamp(18px, 1.25vw, 25.2px);
  --sg-fs-32: clamp(20px, 1.6667vw, 33.6px);
  --sg-fs-36: clamp(22px, 1.875vw, 37.8px);
  --sg-fs-50: clamp(24px, 2.5vw, 50.4px);
  --sg-fs-70: clamp(32px, 3.6458vw, 73.5px);

  /* 动效 */
  --sg-ease: cubic-bezier(.25, .1, .25, 1);
  --sg-dur: .7s;
}

/* ---------- 重置 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, pre, ul, ol, li {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg, video { display: block; max-width: 100%; border: 0; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: none;
}

button { cursor: pointer; }

pre {
  font-family: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

body {
  background: var(--sg-bg);
  color: var(--sg-text);
  /* 与原站一致：优先自托管 HarmonyOS Sans SC Light */
  font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: var(--sg-fs-16);
  line-height: 1.75;
  overflow-x: hidden;
}

body.sg-lock { overflow: hidden; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #e6edf9; }
::-webkit-scrollbar-thumb { background: var(--sg-theme); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sg-theme-soft); }

::selection { background: var(--sg-theme); color: #fff; }

::placeholder { color: var(--sg-text-weak); }

/* ---------- 字号工具 ---------- */
.fs-14 { font-size: var(--sg-fs-14); }
.fs-16 { font-size: var(--sg-fs-16); }
.fs-18 { font-size: var(--sg-fs-18); }
.fs-20 { font-size: var(--sg-fs-20); }
.fs-24 { font-size: var(--sg-fs-24); }
.fs-32 { font-size: var(--sg-fs-32); }
.fs-36 { font-size: var(--sg-fs-36); }
.fs-50 { font-size: var(--sg-fs-50); }

/* ---------- 布局工具 ---------- */
.sg-container {
  width: var(--sg-container);
  margin: 0 auto;
}

.sg-wide { padding: 0 var(--sg-gutter); }

.sg-row { display: flex; align-items: center; }
.sg-row-between { display: flex; align-items: center; justify-content: space-between; }
.sg-col { display: flex; flex-direction: column; }
.sg-center { display: flex; align-items: center; justify-content: center; }
.sg-split { display: flex; }
.sg-grid { display: grid; }

.sg-fill { flex: 1; }

/* 图片容器：统一裁切 + 缓动放大 */
.sg-media {
  position: relative;
  overflow: hidden;
  background: var(--sg-dark);
}

.sg-media__bg {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 1.2s var(--sg-ease);
}

.sg-media:hover .sg-media__bg { transform: scale(1.05); }

/* 通栏留白 */
.sg-section { position: relative; }
.sg-pt { padding-top: clamp(48px, 6.25vw, 126px); }
.sg-pb { padding-bottom: clamp(48px, 6.25vw, 126px); }

/* ---------- 栏目标题 ---------- */
.sg-title { display: block; }

/* 对齐原站 .z_index_tit */
.sg-title__cn {
  font-size: clamp(20px, 1.875vw, 37.8px);
  font-weight: 700;
  line-height: 1.4;
}

.sg-title__en {
  margin-top: 10px;
  color: inherit;
  font-size: var(--sg-fs-16);
  line-height: 1.25vw;
  text-align: justify;
}

/* 逐字入场：由 split_chars() 输出 span，--i 为字符序号 */
.sg-split-text span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .8s var(--sg-ease), opacity .8s var(--sg-ease);
  transition-delay: calc(var(--i) * 40ms);
}

.sg-split-text { display: inline-block; overflow: hidden; vertical-align: bottom; }

.is-inview .sg-split-text span,
.sg-split-text.is-inview span { transform: translateY(0); opacity: 1; }

/* ---------- 更多按钮 ---------- */
.sg-more {
  display: inline-flex;
  align-items: center;
  gap: .5208vw;
  margin-top: 1.5625vw;
  font-size: var(--sg-fs-16);
  letter-spacing: .04em;
  transition: color .5s var(--sg-ease);
}

.sg-more::after {
  content: "";
  width: clamp(28px, 2.0833vw, 40px);
  height: 1px;
  background: currentColor;
  transition: width .5s var(--sg-ease);
}

.sg-more:hover { color: var(--sg-theme); }
.sg-more:hover::after { width: clamp(40px, 3.125vw, 60px); }

/* ---------- 箭头按钮 ---------- */
.sg-arrow {
  width: clamp(36px, 2.5vw, 48px);
  height: clamp(36px, 2.5vw, 48px);
  border: 1px solid var(--sg-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .5s var(--sg-ease);
}

.sg-arrow svg { width: 40%; height: 40%; }

.sg-arrow:hover {
  background: var(--sg-theme);
  border-color: var(--sg-theme);
  color: #fff;
}

.sg-arrow.is-disabled { opacity: .35; pointer-events: none; }

/* ---------- 标签 ---------- */
.sg-tag {
  display: inline-block;
  font-size: var(--sg-fs-14);
  letter-spacing: .1em;
  color: var(--sg-theme);
}

/* ---------- 响应式：容器 ---------- */
@media screen and (min-width: 1920px) {
  :root { --sg-gutter: 50px; --sg-container: 1520px; }
}

@media screen and (max-width: 980px) {
  :root { --sg-gutter: 16px; --sg-container: 94%; }

  body { line-height: 1.7; }

  .sg-split { display: block; }
  .sg-pt { padding-top: 48px; }
  .sg-pb { padding-bottom: 48px; }

  .sg-title__en { margin-top: 5px; line-height: 24px; }
}