/* ==========================================================================
   首页（对应 page_1_index.png）
   区块间距全部由 docs/design-system.md 第 4 节的纵向节奏实测表相减得出，
   注释里的数字是该值在 1920 视口下的 CSS px。
   ========================================================================== */

/* --------------------------------------------------------------------------
   首屏：大图通栏 1:1 铺满（1921×850），文案压在图上
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
}

.hero__bg {
  width: 100%;
  height: auto;
}

.hero__inner {
  position: absolute;
  inset: 0;
  padding-top: 18.6rem; /* 186：首行行盒顶 301.6 − 首屏顶 116 */
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: 700;
  color: var(--c-title);
}

.hero__play {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 9.6rem; /* 96：按钮顶 622 − 标题行盒底 525.6 */
  padding: 0 3rem 0 1rem;
  height: 5.6rem;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: var(--fs-nav);
  line-height: 1;
  transition: background var(--dur) var(--ease);
}

.hero__play:hover {
  background: var(--c-primary-strong);
}

.hero__play-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--c-on-primary);
}

.hero__play-icon::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.3rem;
  border-left: 1.2rem solid var(--c-primary);
  border-top: 0.7rem solid transparent;
  border-bottom: 0.7rem solid transparent;
}

/* --------------------------------------------------------------------------
   公告条：压在首屏底部（压入 94，露出 50），高 144
   -------------------------------------------------------------------------- */
.notice {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 14.4rem;
  margin-top: -9.4rem; /* -94：公告条顶 872 − 首屏底 965.6 */
  padding: 0 12rem;
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-notice);
}

/* min-width:0 —— 弹性项默认 min-width:auto，窄屏时会撑到 max-content，把长标题顶出卡片 */
.notice__list {
  min-width: 0;
}

.notice__list > li {
  display: flex;
  gap: 3.2rem;
  font-size: var(--fs-notice);
  line-height: var(--lh-notice);
  color: var(--c-text);
}

.notice__list a {
  transition: color var(--dur) var(--ease);
}

.notice__list a:hover {
  color: var(--c-primary);
}

/* 设计稿两侧是蓝紫色卡片插画，资源包缺该素材，先用 CSS 图形占位（详见设计文档 5.3） */
.notice__deco {
  position: relative;
  flex: none;
  width: 11rem;
  height: 7rem;
  border-radius: 1rem;
  background: linear-gradient(140deg, #8ea2f0, #6f86e8);
  box-shadow: 0 1rem 2rem rgba(111, 134, 232, 0.25);
}

.notice__deco::before {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 1.8rem;
  width: 4.6rem;
  height: 0.6rem;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1.6rem 0 rgba(255, 255, 255, 0.9), 0 3.2rem 0 rgba(255, 255, 255, 0.55);
}

.notice__deco::after {
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 1.6rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   企业简介
   -------------------------------------------------------------------------- */
.section--intro {
  padding-top: 8.4rem; /* 84：标题行盒顶 1100 − 公告条底 1016 */
}

.section--intro .section-title {
  margin-bottom: 5rem; /* 50：卡片顶 1216 − 标题行盒底 1166 */
}

.intro {
  display: grid;
  grid-template-columns: 42.4rem 1fr; /* 图 424 + 文 1016 = 1440 */
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--r-card-lg);
  box-shadow: var(--shadow-card);
}

.intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro__body {
  padding: 5.5rem 0 5.4rem; /* 上 55、下 54，左右留白由内部块自己控制 */
}

.intro__heading {
  margin: 0 7.6rem 0.6rem;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--c-title);
}

.intro__text {
  margin: 0 7.6rem; /* 76：正文左右留白 */
}

.intro__text p {
  text-indent: 2em;
  color: var(--c-text);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.5rem; /* 25：数字行盒顶 1746 − 正文末行行盒底 1721 */
}

.stats__item {
  text-align: center;
}

.stats__item + .stats__item {
  border-left: 1px solid var(--c-line-soft);
}

.stats__num {
  font-size: var(--fs-stat);
  line-height: 1;
  font-weight: 700;
  color: var(--c-navy);
}

.stats__label {
  margin-top: 1.4rem;
  font-size: var(--fs-stat-label);
  line-height: var(--lh-tight);
  color: var(--c-title);
}

/* --------------------------------------------------------------------------
   成功案例
   -------------------------------------------------------------------------- */
.section--cases {
  padding-top: 7.2rem; /* 72：标题行盒顶 2028 − 企业简介卡片底 1956 */
}

.section--cases .section-title {
  margin-bottom: 7.2rem; /* 72：卡片顶 2166 − 标题行盒底 2094 */
}

.case-grid,
.biz-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 333 × 4 + 36 × 3 = 1440 */
  gap: var(--grid-gap);
}

/* 卡片给定实测高度：配合按钮的 margin-top:auto，让同一行卡片按钮齐平贴底 */
.case-card {
  min-height: 49.4rem; /* 494 */
}

.case-card__photo {
  width: 100%;
  height: 26rem; /* 260 */
  object-fit: cover;
}

.case-card .card__body {
  padding: 2.6rem var(--card-pad);
}

.case-card__title,
.biz-card__title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--c-title);
}

.case-card__place {
  margin-top: 1rem;
  font-size: var(--fs-meta);
  line-height: var(--lh-tight);
  color: var(--c-muted);
}

.case-card__desc {
  margin-top: 3.5rem;
  font-size: var(--fs-meta);
  line-height: var(--lh-tight);
  color: var(--c-muted);
}


/* --------------------------------------------------------------------------
   品牌墙
   -------------------------------------------------------------------------- */
.brands {
  padding-top: 13.4rem; /* 134：格子顶 2794 − 案例卡片底 2660 */
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 174.9 × 7 + 36 × 6 = 1440 */
  gap: var(--grid-gap);
}

.brand-item {
  position: relative;
  display: grid;
  place-items: center;
  height: 13.4rem; /* 134 */
  padding: 1.6rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-bottom: 0.2rem solid var(--c-line-strong);
}

/* 格子底边中央的短标记（设计稿实测 22 × 4） */
.brand-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.2rem;
  width: 2.2rem;
  height: 0.4rem;
  transform: translateX(-50%);
  background: var(--c-accent-bar);
}

/* 设计稿七个标识的墨迹高度一律 54（1420–1446 设计像素），宽度随各自比例，
   因此锁高不锁宽；max-width 只用来兜住极端宽比例的标识。 */
.brand-item img {
  width: auto;
  height: 5.4rem;
  max-width: 74%; /* 130 / 174.9 */
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   核心业务
   -------------------------------------------------------------------------- */
.section--business {
  padding-top: 6.2rem; /* 62：标题行盒顶 2990 − 品牌墙底 2928 */
  padding-bottom: 9.4rem; /* 94：页脚上边线 4256 − 第二行卡片底 4162 */
}

.section--business .section-title {
  margin-bottom: 6.6rem; /* 66：卡片顶 3122 − 标题行盒底 3056 */
}

.biz-card {
  min-height: 50.2rem; /* 502 */
}

.biz-card__figure {
  background: var(--c-surface-tint);
}

.biz-card__figure img {
  width: 100%;
  height: auto; /* 333 × 261 原图 1:1 */
}

.biz-card .card__body {
  padding: 2.7rem var(--card-pad) 3rem;
}

.biz-card__en {
  margin-top: 0.4rem;
  font-size: var(--fs-en);
  line-height: var(--lh-tight);
  letter-spacing: 0.08rem;
  color: var(--c-muted);
}

.biz-card__desc {
  margin-top: 3.2rem;
  font-size: var(--fs-meta);
  line-height: var(--lh-tight);
  color: var(--c-muted);
}


/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .notice {
    padding-inline: 6rem;
  }

  .intro {
    grid-template-columns: 36rem 1fr;
  }

  .intro__heading,
  .intro__text {
    margin-inline: 4.8rem;
  }
}

@media (max-width: 1023px) {
  /* 首屏改为「图片铺底 + 内容决定高度」，避免窄屏时图片变矮压不住文案 */
  .hero {
    display: flex;
    align-items: center;
    min-height: 52rem;
  }

  .hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 必须保留定位与 z-index：铺底大图是绝对定位的，否则会盖住文案 */
  .hero__inner {
    position: relative;
    z-index: 1;
    padding-block: 8rem;
  }

  .hero__play {
    margin-top: 4.8rem;
  }

  .notice {
    height: auto;
    padding: 3.2rem 4rem;
  }

  .notice__deco {
    display: none;
  }

  .notice__list {
    margin-inline: auto;
  }

  .intro {
    grid-template-columns: 1fr;
  }

  .intro__media img {
    height: 40rem;
  }

  .intro__body {
    padding-block: 4.8rem;
  }

  .case-grid,
  .biz-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-card,
  .biz-card {
    min-height: 0;
  }

  .biz-card .card-dash {
    margin-bottom: 3.2rem;
  }

  .case-card .card-dash {
    margin-bottom: 2.4rem;
  }

  .brand-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .brands {
    padding-top: 8rem;
  }

  .section--intro,
  .section--cases,
  .section--business {
    padding-top: 6.4rem;
  }

  .section--intro .section-title,
  .section--cases .section-title,
  .section--business .section-title {
    margin-bottom: 4.8rem;
  }
}

@media (max-width: 767px) {
  .hero__title {
    font-size: 5rem;
    line-height: 1.5;
  }

  .notice {
    margin-top: 0;
    border-radius: 0;
    padding: 2.4rem var(--gutter);
  }

  .notice__list > li {
    flex-direction: column;
    gap: 0;
  }

  .case-grid,
  .biz-grid {
    grid-template-columns: 1fr;
  }

  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .intro__heading,
  .intro__text {
    margin-inline: 3.2rem;
  }

  .stats__num {
    font-size: 6.4rem;
  }
}