/* ==========================================================================
   Corporate Governance 页面
   设计稿基准 1920px，站点 rem 体系：1920px 下 1rem = 100px
   ========================================================================== */

.gov-page {
  background: #fff;
  /* 建立 BFC：否则 .gov-banner 的 margin-top 会与 .wrapper 的 margin-top 塌陷，
     ≥1817px 下的 50px 下移会被吞掉 */
  display: flow-root;
}

/* 通用标题 */
.gov-h2 {
  margin: 0;
  font-size: 0.44rem;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
}
.gov-h2-center {
  text-align: center;
}

/* --------------------------------------------------------------------------
   1. Banner
   -------------------------------------------------------------------------- */
/*
 * 站点页头 .header 是 position:fixed，高度与 .wrapper 的 margin-top 在不同断点下关系不同：
 *   - ≥1817px：页头 100px，.wrapper 只让出 50px  → 首个区块顶部 50px 被页头盖住
 *   - ≤1816px：两者基本相等（都是 vw 计算）      → 基本没有遮挡
 * 所以这里不给 banner 加顶部 padding，而是在 ≥1817px 时把整个 banner 下移 50px，
 * 让图片顶部正好贴住页头底部。50px 在该断点下是固定值（页头 100px、.wrapper 50px 都为 px，不随 vw 缩放）。
 */
.gov-banner {
  position: relative;
  height: 3.96rem;
  overflow: hidden;
}
.gov-banner-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.gov-banner-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ≥1817px：页头 100px 而 .wrapper 只让出 50px，把 banner 整体下移 50px 贴住页头底部 */
@media (min-width: 1817px) {
  .gov-banner {
    margin-top: 50px;
  }
}
/*
 * 蒙层：设计稿导出的左侧压暗渐变图（1920x396，左深右透明，峰值不透明度约 0.4），
 * 用于凸显左侧文字区域，保证白色标题/正文的可读性。
 * 图片本身按设计稿比例铺满 banner，与 banner 的 3.96rem 高度等比缩放。
 */
.gov-banner::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: url('../images/governance/banner-bg.png') no-repeat center center;
  background-size: 100% 100%;
}
.gov-banner .container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.gov-banner-title {
  margin: 0;
  font-size: 0.48rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.0053rem;
  color: #fff;
}
.gov-banner-sub {
  margin-top: 0.08rem;
  font-size: 0.24rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.0026rem;
  color: #fff;
}
.gov-banner-bar {
  display: block;
  width: 0.6rem;
  height: 0.04rem;
  margin-top: 0.04rem;
  background: #00833e;
}
.gov-banner-desc {
  margin: 0.24rem 0 0;
  max-width: 7.53rem;
  font-size: 0.18rem;
  font-weight: 400;
  line-height: 1.61;
  color: #fff;
}

/* --------------------------------------------------------------------------
   2. Our Commitments
   -------------------------------------------------------------------------- */
/*
 * 背景沿用首页的 addimg1.png（首页 .new-section1 用的同一张），
 * 并保持与首页一致的呈现方式：no-repeat + cover + top -10vw center。
 * 注意不能再用 100% 100%：旧素材 commitments-bg@2x.jpg 是 3840x1220（宽高比 3.15，
 * 与本区块一致）拉伸无影响；而 addimg1.png 是 1920x1068（宽高比 1.80），
 * 按 100% 100% 会把圆形光晕横向拉宽约 1.75 倍变成椭圆。
 */
.gov-commit {
  position: relative;
  padding: 0;
  background-color: #fff;
  background-image: url('../images/addimg1.png');
  background-position: top -10vw center;
  background-repeat: no-repeat;
  background-size: cover;
}
.gov-commit-box {
  height: 6.1rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.gov-commit-text {
  max-width: 6.22rem;
}
.gov-commit-desc {
  margin-top: 0.46rem;
  font-size: 0.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
}
.gov-commit-desc p {
  margin: 0;
}
.gov-commit-desc p + p {
  margin-top: 0.24rem;
}
.gov-commit-img img {
  display: block;
  width: 7.53rem;
  height: 4.54rem;
  object-fit: cover;
  border-radius: 0.12rem;
}

/* --------------------------------------------------------------------------
   3. Handling Principles
   -------------------------------------------------------------------------- */
.gov-princ {
  background: #f9f9f9;
}
.gov-princ-box {
  height: 6.6rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.gov-princ-img {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}
.gov-princ-img img {
  display: block;
  width: 7.52rem;
  height: 5.3rem;
  object-fit: cover;
  border-radius: 0.12rem;
}
.gov-princ-card {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 5.3rem;
  margin-left: 0.12rem;
  padding: 0 0.66rem;
  background: #fff;
  border-radius: 0.12rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.gov-princ-list {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}
.gov-princ-item {
  height: 0.89rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.gov-princ-ico {
  -webkit-flex: 0 0 0.86rem;
  flex: 0 0 0.86rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.gov-princ-ico img {
  display: block;
  width: 0.48rem;
  height: 0.48rem;
}
.gov-princ-txt {
  font-size: 0.2rem;
  font-weight: 400;
  line-height: 1.4;
  color: #333;
}

/* --------------------------------------------------------------------------
   4. Reportable Matters
   -------------------------------------------------------------------------- */
.gov-matters {
  padding: 0.73rem 0 0.85rem;
  background: #fff;
}
/*
 * 可举报事项列表
 * 用 CSS Grid：桌面 6 列（1920 基准下 (1536-5*19.2)/6 = 240px，与设计稿一致）
 * 移动端布局参考 sustainable 页 International Initiatives 的 .list（≤990px 转 2 列）
 */
.gov-tiles {
  margin: 0.28rem 0 0;
  padding: 0;
  list-style: none;
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 0.192rem;
}
.gov-tile {
  height: 1.58rem;
  padding: 0.36rem 0;
  background: #f1f5f9;
  border-radius: 0.12rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  box-sizing: border-box;
}
/*
 * 图标直接用设计稿导出的整图：白色圆底、投影、图形都已包含在图片里
 * （设计稿节点 8:212/8:220/8:228/8:236/8:244/8:252，56px 圆底 + 2px 投影外扩 = 60px），
 * 所以这里不再用 CSS 画圆底/阴影，只按设计尺寸约束图片大小（0.6rem = 60px，圆底正好 56px）。
 */
.gov-tile-ico img {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
}
.gov-tile-txt {
  /*
   * 设计稿：图标 Margin 下 padding 4px + 文字 Margin 上 padding 4px = 图文间距 8px。
   * 整图内已含 2px 投影外扩，故这里取 6px（2 + 6 = 8），
   * 同时让 图标 60 + 6 + 文字 19.8 ≈ 86px，正好等于区块内容高（158 - 上下各 36）。
   */
  margin-top: 0.06rem;
  font-size: 0.18rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.0014rem;
  color: #0f172a;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Whistleblowing Channels
   -------------------------------------------------------------------------- */
.gov-channels {
  padding: 0.73rem 0 1.61rem;
  background: #f9f9f9;
}
.gov-channels-desc {
  margin: 0.2rem auto 0;
  max-width: 10.14rem;
  font-size: 0.2rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  color: #333;
}
.gov-channel-cards {
  margin-top: 0.3rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.gov-channel-card {
  width: 7.44rem;
  height: 1.16rem;
  background: #f1f5f9;
  border-radius: 0.08rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.gov-channel-ico {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 0.56rem;
  height: 0.56rem;
  margin-right: 0.24rem;
  background: #fff;
  border-radius: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.gov-channel-ico img {
  display: block;
}
.gov-channel-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.gov-channel-label {
  font-size: 0.12rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.006rem;
  color: #64748b;
}
.gov-channel-value {
  color: #003521;
  text-decoration: none;
}
.gov-channel-value:hover {
  text-decoration: underline;
}
.gov-channel-mail {
  font-size: 0.24rem;
  font-weight: 700;
  line-height: 1.3;
}
.gov-channel-tel {
  font-size: 0.32rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.008rem;
}

/* --------------------------------------------------------------------------
   响应式

   关于字号：站点在 ≤767px 时 1rem = 100vw/15、≤480px 时 1rem = 100vw/7.5，
   同一 rem 值在两个区间的实际像素差近一倍。所以移动端字号统一用
   max(rem, px) 兜底，避免在 481~767px 区间被压得过小。
   -------------------------------------------------------------------------- */

/* 可举报事项列表：991~1200px 用 3 列，避免 6 列过窄 */
@media (max-width: 1200px) {
  .gov-tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 参考 sustainable 页 International Initiatives 的 .list：≤990px 转 2 列 */
@media (max-width: 990px) {
  .gov-tiles {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: max(0.24rem, 12px);
    margin-top: 0.3rem;
  }
  .gov-tile {
    height: auto;
    min-height: max(1.5rem, 74px);
    padding: max(0.3rem, 15px) max(0.12rem, 6px);
    border-radius: max(0.12rem, 6px);
  }
  /* 整图图标：按设计尺寸等比缩放，max(rem, px) 兜底避免窄屏被压得过小 */
  .gov-tile-ico img {
    width: max(0.6rem, 30px);
    height: max(0.6rem, 30px);
  }
  .gov-princ-ico img {
    max-width: 100%;
    max-height: 100%;
  }
  .gov-channel-ico img {
    max-width: 60%;
    max-height: 60%;
  }
}

@media (max-width: 1024px) {
  .gov-banner {
    height: max(4.2rem, 210px);
  }
  /*
   * 从这个断点起 banner 高度被抬高（max(4.2rem, 210px)，≤767px 为 max(3.2rem, 160px)），
   * 盒子宽高比（1024px 下约 4.6，390px 下约 2.3）小于图片自身的 4.85，cover 必然横向裁切。
   * 更宽的断点（1280px 起宽高比 4.87~5.30）盒子比图片更扁，只裁上下、不裁左右。
   * 默认居中裁切会把画面主体（居中偏右的光伏板与光环）削掉大半且构图偏移，
   * 因此把裁切锚点固定到左侧，从图片左端开始取景（左端为山峦云雾，画面更干净）。
   * 桌面端盒子与图片宽高比一致、几乎不横向裁切，故不加此规则。
   */
  .gov-banner-bg img {
    object-position: left center;
  }
  .gov-banner-title {
    font-size: max(0.5rem, 25px);
  }
  .gov-banner-sub {
    font-size: max(0.26rem, 13px);
  }
  .gov-banner-desc {
    font-size: max(0.2rem, 10px);
    max-width: 6.4rem;
  }
  /*
   * 堆叠布局（图文/图卡上下排列）的垂直节奏：
   * 区块上下内边距、图文之间的间距统一放大，避免移动端挤在一起。
   * 用 max(rem, px) 兜底：481~767px 区间 1rem = 100vw/15，纯 rem 会被压得过小。
   */
  .gov-commit-box,
  .gov-princ-box {
    height: auto;
    padding: max(0.6rem, 30px) 0;
  }
  .gov-commit-text {
    max-width: none;
    /* 文字与下方图片的间距（≤767px 下图片自身的 margin-top 归零，间距只由这里决定） */
    margin-bottom: max(0.6rem, 30px);
  }
  .gov-commit-img img,
  .gov-princ-img img {
    width: 100%;
    height: auto;
  }
  .gov-princ-box {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .gov-princ-card {
    width: 100%;
    height: auto;
    /* 图片与下方卡片之间的间距，与 .gov-commit-text 的取值保持一致 */
    margin: max(0.6rem, 30px) 0 0;
    padding: 0.4rem 0.3rem;
    box-sizing: border-box;
  }
  .gov-channel-cards {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin-top: 0.3rem;
  }
  .gov-channel-card {
    width: 100%;
    /* 卡片之间的子间距（堆叠排列），比桌面端默认值放大 */
    margin-bottom: max(0.4rem, 20px);
  }
}

@media (max-width: 767px) {
  .gov-banner {
    height: max(3.2rem, 160px);
  }
  .gov-banner-title {
    font-size: max(0.48rem, 24px);
  }
  .gov-banner-sub {
    font-size: max(0.28rem, 14px);
  }
  .gov-banner-desc {
    font-size: max(0.24rem, 12px);
    max-width: none;
    line-height: 1.5;
  }
  .gov-banner-bar {
    width: max(0.4rem, 20px);
    height: max(0.04rem, 2px);
  }
  .gov-commit-box,
  .gov-princ-box {
    display: block;
    /* 不能沿用更小的旧值，否则会把 ≤1024px 放大的上下内边距又压回去 */
    padding: max(0.6rem, 30px) 0;
  }
  .gov-h2 {
    font-size: max(0.4rem, 20px);
  }
  .gov-commit-desc {
    margin-top: 0.2rem;
    font-size: max(0.26rem, 13px);
  }
  .gov-commit-img img {
    /* 归零：与 .gov-commit-text 的 margin-bottom 会外边距合并，留着会让间距取值不明确。
       图文间距统一由 .gov-commit-text 的 margin-bottom 决定 */
    margin-top: 0;
    border-radius: max(0.12rem, 6px);
  }
  .gov-princ-card {
    /* 与 .gov-commit 的图文间距对齐 */
    margin-top: max(0.6rem, 30px);
    padding: 0.24rem 0.16rem;
    border-radius: max(0.12rem, 6px);
  }
  .gov-princ-item {
    height: auto;
    padding: 0.2rem 0;
  }
  .gov-princ-ico {
    -webkit-flex: 0 0 max(0.86rem, 43px);
    flex: 0 0 max(0.86rem, 43px);
  }
  .gov-princ-ico img {
    width: max(0.48rem, 24px);
    height: max(0.48rem, 24px);
  }
  .gov-princ-txt {
    font-size: max(0.26rem, 13px);
  }
  .gov-matters {
    padding: 0.4rem 0;
  }
  .gov-tile-txt {
    margin-top: 0.1rem;
    font-size: max(0.24rem, 12px);
    line-height: 1.3;
    white-space: normal;
    letter-spacing: 0;
  }
  .gov-channels {
    padding: 0.4rem 0 0.5rem;
  }
  .gov-channels-desc {
    margin-top: 0.16rem;
    font-size: max(0.26rem, 13px);
  }
  .gov-channel-card {
    height: auto;
    /* 移动端把卡片加高：纵向内边距与最小高度均上调（原 0.2rem/0.72rem） */
    min-height: max(1rem, 56px);
    padding: max(0.3rem, 15px) max(0.16rem, 8px);
    border-radius: max(0.08rem, 4px);
  }
  .gov-channel-ico {
    width: max(0.56rem, 28px);
    height: max(0.56rem, 28px);
    margin-right: max(0.24rem, 12px);
  }
  .gov-channel-label {
    font-size: max(0.2rem, 10px);
  }
  .gov-channel-mail {
    font-size: max(0.26rem, 13px);
    word-break: break-all;
  }
  .gov-channel-tel {
    font-size: max(0.32rem, 16px);
  }
}