/* =========================================================
   布局层：页头 / 导航 / 搜索 / 页脚 / 分页 / 返回顶部
   ========================================================= */

/* ---------------- 页头 ---------------- */
.sg-header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 100%;
  height: var(--sg-header-h);
  padding: 0 var(--sg-gutter);
  display: flex;
  align-items: center;
  transition: transform var(--sg-dur) var(--sg-ease), background-color var(--sg-dur) var(--sg-ease);
}

.sg-header.is-hidden { transform: translateY(-100%); }
/* 原站：滚动超过 300px 才切换成主题色实底（.z_header.active） */
.sg-header.is-solid { background: var(--sg-theme); }
.sg-header.is-open { background: var(--sg-theme); }

/* 原站 .flbox 宽 32.2917vw，导航因此固定从该位置起排 */
.sg-header__logo {
  display: block;
  width: 32.2917vw;
  height: clamp(24px, 1.5625vw, 31.5px);
  flex-shrink: 0;
}

.sg-header__logo img { height: 100%; width: auto; }

.sg-logo { display: block; }
.sg-logo--light { display: none; }

/* 内页顶部大图是深色照片，页头默认的深色文字 + 深色 LOGO 会看不清。
   因此凡是带 .sg-page-banner 的页面（由 site.js 打上 .is-over-dark），
   在未滚到实底(.is-solid)之前整体切换成浅色，与 banner 的白色标题统一；
   滚动后 .is-solid 给的是浅色底，会自动恢复深色。
   仅桌面端生效 —— 移动端页头本身已有浅色底。 */
@media screen and (min-width: 981px) {
  /* 用调色板的 LIGHT 令牌而非纯白：深色版文字是 --sg-text(#312f30) 而非纯黑，
     浅色版同理降一档，两种配色方案的整体明度观感才对齐。 */
  .sg-header.is-over-dark:not(.is-solid):not(.is-open) { color: var(--sg-bg); }

  .sg-header.is-over-dark:not(.is-solid):not(.is-open) .sg-search { background: rgba(230, 231, 233, .16); }
  .sg-header.is-over-dark:not(.is-solid):not(.is-open) .sg-search:focus-within { background: rgba(230, 231, 233, .26); }
  .sg-header.is-over-dark:not(.is-solid):not(.is-open) .sg-search__input,
  .sg-header.is-over-dark:not(.is-solid):not(.is-open) .sg-search__btn { color: var(--sg-bg); }
  .sg-header.is-over-dark:not(.is-solid):not(.is-open) .sg-search__input::placeholder { color: rgba(230, 231, 233, .7); }

  .sg-header.is-over-dark:not(.is-solid):not(.is-open) .sg-header__logo.has-light-logo .sg-logo--dark { display: none; }
  .sg-header.is-over-dark:not(.is-solid):not(.is-open) .sg-header__logo.has-light-logo .sg-logo--light { display: block; }
}

.sg-header__logo-text {
  font-size: var(--sg-fs-20);
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
  white-space: nowrap;
}

.sg-header__panel {
  flex: 1;
  display: flex;
  align-items: center;
}

.sg-nav { display: flex; align-items: center; }

.sg-nav__item { margin-right: 2.0833vw; }

.sg-nav__item > a {
  font-weight: 700;
  transition: color .4s var(--sg-ease);
}

/* 原站 .z_header li.active a / li:hover a { color:#000 }，无下划线动效 */
.sg-nav__item:hover > a,
.sg-nav__item.is-active > a { color: #000; }

/* 搜索框：对齐原站 .z_header .z_search（#eee + 20px 圆角 + 右侧外扩 10px） */
.sg-search {
  margin-left: auto;
  margin-right: -10px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  overflow: hidden;
  background: #eee;
  transition: background .6s var(--sg-ease);
}

.sg-search:focus-within { background: #fff; }

.sg-search__input {
  width: 11.4583vw;
  min-width: 140px;
  height: 40px;
  line-height: 40px;
  padding: 0 clamp(15px, .78125vw, 15.75px);
  border-radius: 20px;
  font-size: 16px;
}

.sg-search__btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sg-text);
}

.sg-search__btn svg { width: 16px; height: 16px; }

/* 汉堡按钮 */
.sg-burger {
  display: none;
  width: 28px;
  height: 20px;
  margin-left: auto;
  position: relative;
}

.sg-burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--sg-text);
  transition: transform .45s var(--sg-ease), opacity .3s var(--sg-ease), top .45s var(--sg-ease);
}

.sg-burger span:nth-child(1) { top: 0; }
.sg-burger span:nth-child(2) { top: 9px; }
.sg-burger span:nth-child(3) { top: 18px; }

.sg-burger.is-active span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.sg-burger.is-active span:nth-child(2) { opacity: 0; }
.sg-burger.is-active span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

@media screen and (max-width: 980px) {
  .sg-header { background: rgba(230, 231, 233, .96); }

  .sg-header__logo { width: auto; }

  .sg-burger { display: block; }

  .sg-header__panel {
    position: fixed;
    left: 0;
    top: var(--sg-header-h);
    width: 100%;
    height: calc(100% - var(--sg-header-h));
    margin: 0;
    padding: 24px 6%;
    background: var(--sg-theme);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .65s var(--sg-ease), visibility .65s;
  }

  .sg-header__panel.is-open { transform: translateY(0); visibility: visible; }

  .sg-nav { display: block; }
  .sg-nav__item { margin: 0; }
  .sg-nav__item > a { display: block; line-height: 2.6; font-size: var(--sg-fs-20); color: #fff; }

  .sg-search { margin: 24px 0 0; width: 100%; }
  .sg-search__input { flex: 1; width: auto; }
}

/* ---------------- 页脚（对齐原站 .z_footer） ---------------- */
/* 原站 .z_footer：bg2.jpg 底纹，顶部居中 + 铺满；底图取自原站 /web/img/bg2.jpg */
.sg-footer {
  padding: 2.6042vw;
  background: url(../img/bg2.jpg) no-repeat top center;
  background-size: cover;
}

.sg-footer__logo { display: inline-block; }
.sg-footer__logo img { display: block; width: auto; max-height: 40px; }

.sg-footer__logo-text {
  font-size: var(--sg-fs-24);
  font-weight: 700;
  letter-spacing: .2em;
}

/* 标语 + 单行右对齐导航 */
.sg-footer__main {
  margin-top: clamp(15.6px, 1.5625vw, 31.5px);
  display: flex;
  justify-content: space-between;
  gap: clamp(24px, 3.125vw, 60px);
}

.sg-footer__slogan {
  font-size: var(--sg-fs-16);
  line-height: 1.9;
  color: var(--sg-text);
}

/* 原站 .z_footer .nav a 为块级 flex，右对齐后逐条纵向排列 */
.sg-footer__nav { display: block; }

.sg-footer__nav a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  line-height: 1.9;
  transition: padding-right .8s var(--sg-ease);
}

.sg-footer__nav a:hover { padding-right: 15px; }

.sg-footer__nav-arr {
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: 0;
  transition: opacity .8s var(--sg-ease);
}

.sg-footer__nav a:hover .sg-footer__nav-arr { opacity: 1; }

/* 底部区：社交图标行 + 版权行 */
.sg-footer__foot { margin-top: 13.0208vw; }

.sg-share { position: relative; display: flex; align-items: center; }

.sg-share__item {
  position: relative;
  margin-right: clamp(10.4px, 1.0417vw, 21px);
  padding: 10px 0;
  opacity: .5;
  transition: opacity .8s var(--sg-ease);
}

.sg-share__item:hover { opacity: 1; }

.sg-share__btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-share__btn svg { width: 18px; height: 18px; }

.sg-share__qr {
  position: absolute;
  left: 50%;
  bottom: 110%;
  width: 110px;
  height: 110px;
  margin-left: -55px;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  opacity: 0;
  transition: opacity .5s var(--sg-ease);
}

.sg-share__item:hover .sg-share__qr { opacity: 1; }

.sg-share__qr img { display: block; width: 100%; }

.sg-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--sg-fs-16);
}

.sg-footer__copy a { margin-left: 6px; }
.sg-footer__copy a:hover { color: var(--sg-theme); }

@media screen and (max-width: 980px) {
  .sg-footer { padding: 40px 12px; }
  .sg-footer__main { display: block; }
  .sg-footer__slogan { margin-bottom: 24px; }
  .sg-footer__nav { display: none; }
  .sg-footer__foot { margin-top: 60px; }
  .sg-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ---------------- 内页顶部大图 ---------------- */
.sg-page-banner {
  position: relative;
  height: clamp(280px, 31.25vw, 630px);
  margin-bottom: clamp(40px, 4.1667vw, 84px);
  overflow: hidden;
}

.sg-page-banner .sg-media__bg { transform: scale(1.08); }
.sg-page-banner.is-inview .sg-media__bg { transform: scale(1); }

.sg-page-banner__mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15));
}

.sg-page-banner__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sg-header-h) var(--sg-gutter) 0;
  color: #fff;
}

.sg-page-banner__cn { font-size: var(--sg-fs-50); font-weight: 700; letter-spacing: .08em; }
.sg-page-banner__en { margin-top: .5208vw; font-size: var(--sg-fs-18); opacity: .82; letter-spacing: .12em; }

/* ---------------- 分页 ---------------- */
.sg-pagination { display: flex; justify-content: center; gap: 8px; margin-top: clamp(32px, 3.125vw, 60px); flex-wrap: wrap; }

.sg-pagination a,
.sg-pagination span {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--sg-fs-14);
  background: #fff;
  transition: all .45s var(--sg-ease);
}

.sg-pagination a:hover { background: var(--sg-theme-soft); color: #fff; }
.sg-pagination .is-current { background: var(--sg-theme); color: #fff; }
.sg-pagination .is-disabled { opacity: .4; }

/* ---------------- 返回顶部 ---------------- */
.sg-backtop {
  position: fixed;
  right: var(--sg-gutter);
  bottom: 8%;
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sg-theme);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all .5s var(--sg-ease);
}

.sg-backtop.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.sg-backtop svg { width: 16px; height: 16px; }