/* pages/home.css — XITEC 首页（bundle 2:53「终稿-首页-初稿 5.0」，1920×6660）
   断点：base 移动端流式；≥1280 按 1920 设计稿精确几何（frontend-execute.md §2.1/§2.3） */

/* ---------- KV（1920×1080，设计稿图片饱和度 -1 → 黑白） ---------- */
.kv {
  height: 44rem;
}

.kv::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
    url(../../assets/images/hero-bg.webp) center / cover no-repeat;
  filter: grayscale(1);
}

/* ── KV 载入缓放：背景图从 1.08 倍缓缓回到 1，持续 3.5s ──
   只作用在 ::before（背景图层），文字与 logo 不受影响。
   用 transform: scale 而非 scale 属性 —— 伪元素没有需要保护的定位 transform。
   will-change 提示浏览器开层，避免大图缩放掉帧。
   reduced-motion 下 base.css 已全局禁用 animation，自然降级为静态。 */
@media (min-width: 1280px) {
  .kv::before {
    transform: scale(1.08);
    animation: kv-zoom-in 3.5s var(--m-ease, cubic-bezier(0.075, 0.82, 0.165, 1)) forwards;
    will-change: transform;
  }

  @keyframes kv-zoom-in {
    to { transform: scale(1); }
  }
}

.kv__info {
  position: relative;
  z-index: 1;
  padding: 10rem 1.5rem 0;
}

.kv__title {
  font-size: clamp(2.125rem, 1rem + 3.6vw, var(--font-size-hero));
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  color: #fff;
}

.kv__sub {
  margin-top: var(--space-5);
  font-size: var(--font-size-h3);
  line-height: 1.8;
  color: #fff;
}

.kv__info .btn-more {
  margin-top: var(--space-8);
}

@media (min-width: 1280px) {
  .kv {
    height: 67.5rem;
  }

  .kv__info {
    padding: 22.25rem 0 0 10.3125rem; /* info y=290，标题块 x=165 */
  }

  .kv__sub {
    margin-top: 1.25rem;
  }

  .kv__info .btn-more {
    margin-top: 3.9375rem;
  }
}

/* ---------- 关于我们（1920×1080） ---------- */
/* 背景图 + 蒙版合在 ::before 一层（与 KV 同构），以便 scale 时图与蒙版一起缩放。
   之前把蒙版留在 section 上导致被 ::before 图片层盖住 → 蒙版丢失。 */
.about {
  position: relative;
  background: none;
}

.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .3) 35%, rgba(255, 255, 255, .16) 100%),
    linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)),
    url(../../assets/images/about-bg.webp) center / cover no-repeat;
  z-index: 0;
}

/* ── About 背景缓放：滚动进入视口时从 1.1 缓回到 1，持续 2.5s ──
   用 transform: scale（伪元素无定位 transform 需保护）。
   JS（count-up.js）通过 IntersectionObserver 加 .zoom-in 触发。
   reduced-motion 下不加 class → 保持 scale(1) 静态。 */
@media (min-width: 1280px) {
  .about::before {
    transform: scale(1.1);
    transition: transform 2.5s var(--m-ease, cubic-bezier(0.075, 0.82, 0.165, 1));
    will-change: transform;
  }

  .about.zoom-in::before {
    transform: scale(1);
  }
}

.about__inner {
  position: relative;
  z-index: 1;
  padding: var(--space-16) var(--space-6) var(--space-16);
}

.about__lead {
  max-width: 52rem;
  margin-top: var(--space-5);
  font-size: clamp(1.375rem, 1rem + 1.2vw, var(--font-size-h2));
  font-weight: var(--font-weight-medium);
  line-height: 1.39;
  color: #fff;
}

.about__inner > .btn-more {
  margin-top: var(--space-10);
  color: #fff;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 16.5625rem));
  gap: var(--space-10) var(--space-8);
  margin-top: var(--space-16);
}

@media (min-width: 1280px) {
  .about {
    min-height: 67.5rem;
  }

  .about__inner {
    padding: 9.9375rem 0 0 7.6875rem; /* 内容 x=123，眉题 y=159 */
  }

  .about__lead {
    max-width: min(86.5rem, calc(100% - 4.1875rem)); /* 1384@1920，随视口流式 */
    margin-top: 1.25rem;
  }

  .about__inner > .btn-more {
    margin-top: 5.1875rem;
  }

  .about__stats {
    display: flex;
    gap: 3.75rem;
    margin-top: 15.875rem; /* 数据行 y=725 */
  }

  .stat {
    width: 16.5625rem;
  }
}

/* ---------- 产品（1920×1440） ---------- */
.products {
  background: var(--color-bg-page);
}

.products__head {
  text-align: center;
}

.products__title {
  margin-top: var(--space-5);
  font-weight: var(--font-weight-bold);
  max-width: 52rem; /* 832 —— 约束钉宽，让词揭示遮罩块不太宽、动效更明显 */
  margin-inline: auto; /* 配合 max-width 居中（products__head 是 text-align:center） */
}

.products__desc {
  max-width: 52rem;
  margin: var(--space-5) auto 0;
  font-size: clamp(1.25rem, 1.2rem + 1.25vw, var(--font-size-h2));
  line-height: 1.39;
  text-align: center;
}

.products__strip {
  display: flex;
  gap: 0;
  height: 30rem;
  margin-top: var(--space-12);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.product-card {
  position: relative;
  flex: none;
  width: 80vw;
  scroll-snap-align: start;
  background-color: var(--color-text-1);
  overflow: hidden;
}

/* 图片层（::before 承载图片以便单独灰度化，::after 为遮罩） */
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .2);
}

.product-card--environment::before { background-image: url(../../assets/images/product-smart-environment.webp); }
.product-card--energy::before { background-image: url(../../assets/images/product-smart-energy.webp); }
.product-card--pile::before { background-image: url(../../assets/images/product-smart-pile.webp); }
.product-card--drilling::before { background-image: url(../../assets/images/product-smart-drilling.webp); }

.product-card__icon {
  position: absolute;
  top: var(--space-10);
  right: var(--space-8);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #000, #666);
}

.product-card__icon img {
  width: 2.25rem;
  height: 2.25rem;
}

.product-card__title {
  position: absolute;
  left: 2.0625rem;
  bottom: 12.1875rem; /* 标题块底 859-3-120≈距底 118 */
  z-index: 1;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, var(--font-size-h1));
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-title);
  color: #fff;
}

.product-card__title .title-break {
  display: inline;
}

.product-card .btn-more {
  position: absolute;
  left: 2.0625rem;
  bottom: 3.75rem;
  z-index: 1;
  color: #fff;
}

@media (min-width: 1280px) {
  .products__head.section__flow {
    padding: 7.875rem 0 0; /* 眉题 y=126 */
  }

  .products__desc {
    max-width: 95rem; /* 1520 */
  }

  .products__strip {
    height: 60rem;
    overflow: hidden;
    margin-top: 5rem;
  }

  /* 4 卡抽屉式：宽度由 JS 设为 px 值，过渡由 CSS 管。
     ⚠⚠ 这里的特异性必须 ≥ (0,3,0)：motion.css 的 `.m-ready [data-m-anim]`（特异性 0,2,0）
     会给本元素设 transition（opacity/translate/scale）+ transition-delay，会把下面这条
     width 过渡**整条盖掉** —— 卡片宽度于是永远是「瞬跳」，这才是 hover 卡顿的真正根因
     （只改渲染成本救不了「根本没有动画」）。故把 motion 的三条过渡原样抄回，再追加 width。 */
  .section .products__strip .product-card {
    flex: none;
    width: 25%;
    transition:
      opacity var(--m-dur) ease var(--m-delay, 0ms),
      translate var(--m-dur) var(--m-ease) var(--m-delay, 0ms),
      scale var(--m-dur) var(--m-ease) var(--m-delay, 0ms),
      width .5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* 图片层：尺寸钉死为 hover 宽度（不再随卡宽变化）→ 卡宽动画期间不重采样位图。
     图片层中心与卡中心重合，故与原「按卡宽 cover 居中」渲染逐像素一致。
     注：不要加 will-change —— 它会把图片层提升为合成层，与相邻卡之间出现 1px 白缝。 */
  .product-card::before {
    inset: 0 auto 0 50%;
    width: 28.125vw; /* strip 宽 = 视口宽，1920 时为 540 */
    translate: -50% 0;
    filter: grayscale(1);
    transition: filter .5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* hover 卡：彩色 */
  .product-card:hover::before,
  .product-card:focus-within::before {
    filter: grayscale(0);
  }

  .product-card__icon,
  .product-card__title,
  .product-card .btn-more {
    opacity: 0;
    transition: opacity .5s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-delay: .1s; /* 等 flex-basis 过半再淡入，避免同时动太杂 */
  }

  .product-card:hover .product-card__icon,
  .product-card:hover .product-card__title,
  .product-card:hover .btn-more,
  .product-card:focus-within .product-card__icon,
  .product-card:focus-within .product-card__title,
  .product-card:focus-within .btn-more {
    opacity: 1;
  }

  .product-card__icon {
    top: 2.5rem;
    right: 2.9375rem;
  }

  .product-card__title {
    top: 44.625rem;   /* y=714 */
    bottom: auto;
  }

  .product-card .btn-more {
    top: 53.6875rem;  /* y=859 */
    bottom: auto;
  }
}

/* ---------- 解决方案（1920×960） ---------- */
/* 背景图 + 蒙版合在 ::before 一层（与 about 同构），蒙版不会被图片盖住 */
.solution {
  position: relative;
  background: none;
  overflow: hidden;
}

.solution::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(137, 137, 137, 0) 0%, rgba(137, 137, 137, .3) 51%, rgba(0, 0, 0, .3) 100%),
    linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)),
    url(../../assets/images/solution-bg.webp) center / cover no-repeat;
  z-index: 0;
  transform: scale(1);
  transition: transform .8s var(--m-ease, cubic-bezier(0.075, 0.82, 0.165, 1));
  will-change: transform;
}

@media (min-width: 1280px) {
  .solution:hover::before {
    transform: scale(1.05);
  }
}

.solution__inner {
  position: relative;
  z-index: 1;
  padding: var(--space-20) var(--space-6);
}

.solution__tag {
  display: inline-flex;
  align-items: center;
  height: 1.5625rem;
  padding: 0 .5rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-body-md);
  line-height: 1.5;
}

.solution__title {
  margin-top: var(--space-4);
  color: #fff;
}

.solution__inner .btn-more {
  margin-top: var(--space-12);
}

@media (min-width: 1280px) {
  .solution {
    min-height: 60rem;
  }

  .solution__inner {
    padding: 0;
  }

  .solution__tag {
    position: absolute;
    left: 54.6354%;   /* x=1049 */
    top: 14.375rem;   /* y=230 */
  }

  .solution__title {
    position: absolute;
    left: 54.6354%;   /* x=1049 */
    right: 4.1875rem; /* 右缘留 67px，窄视口自动换行不裁切 */
    top: 17.1875rem;  /* y=275 */
    margin: 0;
  }

  .solution__inner .btn-more {
    position: absolute;
    left: 54.9479%;   /* x=1055 */
    top: 46.9375rem;  /* y=751 */
    margin: 0;
  }
}

/* ---------- 新闻（1920×1088） ---------- */
.news {
  background: var(--color-bg-page);
  padding: var(--space-16) var(--space-6) var(--space-16);
}

.news__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.news__head .section-title {
  max-width: 79.5rem; /* 1272 */
  margin-top: var(--space-5);
}

/* 窄屏标题略微缩小（≥1280 恢复标准 48px） */
.news .section-title {
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 1.75rem);
}

.news__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

/* 卡内两列网格：日期居左，灰色箭头同行居右
   overflow: hidden 裁住 hover 时 scale 放大的图片，不溢出到相邻卡片
   cursor: pointer —— 整卡可点（见下方 stretched link），光标要给提示 */
.news-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

.news-card__img {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 583 / 526;
  object-fit: cover;
  transform: scale(1);
  transition: transform .6s var(--m-ease, cubic-bezier(0.075, 0.82, 0.165, 1));
  will-change: transform;
}

@media (min-width: 1280px) {
  .news-card:hover .news-card__img {
    transform: scale(1.06);
  }
}

.news-card__title {
  grid-column: 1 / -1;
  max-width: 31.5625rem; /* 505 */
  margin-top: 1.75rem;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-regular);
  line-height: 2rem; /* 32 */
  color: var(--color-text-1);
  transition: color .3s ease;
}

.news-card__date {
  margin-top: var(--space-2);
  font-size: var(--font-size-body);
  line-height: 1.875rem; /* 30 */
  color: var(--color-text-3);
}

.news-card .btn-more {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  margin: 0;
}

/* ---------- 新闻卡：整卡可点 / 整卡 hover（2026-09-18 用户要求） ----------
   需求：单张卡的所有位置都能 hover 触发反馈、都能点击跳转，
   包含图片、标题、日期、箭头四处。

   ① stretched link —— 把箭头链接用伪元素撑满整张卡。
      `.btn-more` 自身是 static（基础段无 position、≥1280 段显式 position:static），
      所以伪元素的定位上下文落到最近的定位祖先 = `.news-card`（position:relative），
      inset:0 即整卡范围。
      z-index:1 是必需的：`.news-card__img` 有 transform（scale），会生成 z-index:0 那一层的
      层叠上下文；不给正值的话覆盖层会被图片压住，点图片就落不到链接上。
      ⚠ 语义上仍是**一个**链接，读屏不会重复朗读。
      ⚠ 副作用（已知并接受）：覆盖层铺满后，标题/日期文字**无法再用鼠标划选复制**。
        这是「整卡可点」的固有代价，把文字抬到覆盖层之上就等于点文字不跳转。

   ② 整卡 hover 驱动箭头 —— 取值镜像 components.css 的 `.btn-more:hover` 三条
      （方块变红 + 双箭头同步 +200%）。hover 落在卡内空白处时 `.btn-more` 本身并未被 hover，
      所以必须由 `.news-card:hover` 代发，不能省。
      另挂 `:focus-within`：键盘 Tab 到卡内链接时给同样的视觉反馈。
      特异性 (0,3,0) 与 components.css 的同名规则打平，但**取值完全相同**，不冲突。

   ③ 标题 hover 变主红（用户 2026-09-18 选定；设计稿未定义，属新增样式）。
      过渡写在 `.news-card__title` 自己的 transition 里（.3s ease）。

   ⚠ 不要给 `.news-card` 加 `transition`：motion.js 因 `.news__cards[data-m-stagger]` 会给
     3 张卡打上 `data-m-anim`，motion.css 的 `.m-ready [data-m-anim]`（特异性 (0,2,0)）会静默覆盖
     (0,1,0) 的声明。这里所有过渡都挂在子元素上，刻意绕开这个坑（详见 MEMORY.md「transition 覆盖陷阱」）。 */
.news-card .btn-more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.news-card:hover .btn-more__icon,
.news-card:focus-within .btn-more__icon {
  background: var(--color-primary);
  color: #fff;
}

.news-card:hover .btn-more__arrow--in,
.news-card:focus-within .btn-more__arrow--in  { transform: translateX(50%); }
.news-card:hover .btn-more__arrow--out,
.news-card:focus-within .btn-more__arrow--out { transform: translateX(150%); }

.news-card:hover .news-card__title,
.news-card:focus-within .news-card__title {
  color: var(--color-primary);
}

@media (min-width: 1280px) {
  .news {
    height: 68rem;
    padding: 8.25rem 3.3125rem 0 3.5rem; /* 眉题 (56,132) */
  }

  .news .section-title {
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); /* 恢复 48px 设计值 */
  }

  .news__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 583@1920，随视口流式收缩 */
    gap: 2rem;
    margin-top: 4.3125rem;
  }

  /* 桌面：箭头与标题行顶对齐（设计稿 y=556） */
  .news-card {
    align-items: start;
  }

  .news-card__img {
    grid-column: 1 / -1;
    height: auto; /* 高度随卡宽按 583:526 流式 */
  }

  .news-card__title {
    grid-column: 1; /* 桌面：标题仅占左列，与右列箭头同行（基类的 1/-1 会与箭头锁位冲突） */
  }

  .news-card .btn-more {
    grid-column: 2;
    grid-row: 2 / span 2;
    position: static;
    justify-self: end;
    margin: 1.75rem 0 0;
  }
}

/* ---------- 客户（1920×600） ---------- */
.clients {
  background: var(--color-gray-100);
  padding: var(--space-16) var(--space-6) var(--space-16);
}

.clients .section-title {
  margin-top: var(--space-5);
}

.clients__desc {
  max-width: 50.625rem; /* 810 */
  margin-top: var(--space-5);
  font-size: var(--font-size-body-md);
  line-height: 1.625rem; /* 26 */
  color: var(--color-text-2);
}

.clients__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 10.625rem)); /* 170×80 白卡 */
  gap: var(--space-10);
  margin-top: var(--space-12);
}

.client-logo {
  display: grid;
  place-items: center;
  height: 5rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
}

.client-logo img {
  object-fit: contain;
}

/* logo 尺寸为 170×80 白卡的占比（1920 时与设计 px 一致，随卡流式缩放） */
.client-logo--1 img { width: 37.059%; height: 87.5%; }
.client-logo--2 img { width: 77.059%; height: 47.5%; }
.client-logo--3 img { width: 88.235%; height: 67.5%; }
/* BAHTI：设计稿拆层（图 40×42 + 9px 文字）已合成单图 143×63（含图标 80×84@2x + 文字），与其它卡同构 */
.client-logo--4 img { width: 84.118%; height: 78.75%; }
.client-logo--5 img { width: 88.235%; height: 41.25%; }
.client-logo--6 img { width: 88.235%; height: 31.25%; }
.client-logo--7 img { width: 88.235%; height: 58.75%; }
.client-logo--8 img { width: 88.235%; height: 66.25%; }

@media (min-width: 1280px) {
  .clients {
    height: 37.5rem;
    padding: 8.8125rem 0 0 3.5rem; /* 眉题 (56,141) */
  }

  .clients__desc {
    max-width: min(50.625rem, 42.1875%); /* 810@1920，随视口收缩避让右侧卡组 */
  }

  .clients__grid {
    position: absolute;
    left: 54.84375%;  /* x=1053 */
    right: 3.4896%;   /* 右缘 x=1853，随视口流式 */
    top: 14.0625rem;  /* y=225 */
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 170@1920 */
    gap: 2.5rem;
    margin: 0;
  }
}

/* ---------- 移动端专属（<768 手机档；PC / 平板档严格不动） ---------- */
@media (max-width: 767px) {
  /* 数据条（1956 / 150 / 37 / 2）：单行横排、可左右滑动、字号缩小（数字 80→48、标签 20→14），
     JS（js/stats-marquee.js）克隆一份内容实现自动无限循环 */
  .about__stats {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-top: 2.5rem;
  }

  .about__stats::-webkit-scrollbar {
    display: none;
  }

  .stat {
    flex: none;
    width: auto;
    /* 桌面 min-height: 143 + space-between 会在「数字 → 标签」之间凭空留出 59px
       （143 - 数字行盒 64 - 标签行盒 20）。移动端改由内容决定高度：
       间距 59 → 0，即需求 R1 的「减少 60px」。
       ⚠ 别删 min-height: 0 —— 否则那 59px 幽灵间距会回来。 */
    min-height: 0;
    justify-content: flex-start;
  }

  .stat__value {
    font-size: 3rem;              /* 80 → 48 */
    line-height: 4rem;            /* 64 */
    letter-spacing: -.09375rem;   /* -3px 等比缩放至 48 字号 */
  }

  .stat__label {
    font-size: .875rem;   /* 20 → 14 */
    line-height: 1.25rem; /* 20 */
  }

  /* 需求 R2：LATEST NEWS 大标题在 DISCOVER 前换行。
     .title-break 是桌面稿的硬换行，base.css 里 <1024 是 display: none；
     这里只给 news 头这一个标题打开（本选择器 (0,2,0) 压过 base 的 (0,1,0)）。
     ⚠ motion.js 是按 br 的 computed display 量行、再切成 .m-line 块的，
       所以本规则必须早于它生效 —— 样式表在 <head>，满足。别扩大选择器范围。 */
  .news__head .title-break {
    display: inline;
  }
}