/* ==========================================================================
   about.css — /about-us/ 公司页
   1 公司简介两栏 / 2 自制能力 / 3 项目流程 / 4 车间能力与实拍
   5 型材族一览 / 6 服务行业 / 7 出口与售后 / 8 合作理由
   依赖 tokens.css 变量与按钮 / 区块 / 面包屑，products.css 的 cat-hero 与 qa。
   颜色、圆角、间距沿用同一套变量，不另立设计语言。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 公司简介：左文右图，桌面图片随滚动停靠
   -------------------------------------------------------------------------- */

/* H1 比分类页长（含地域词），22ch 会把 Manufacturer 挤成单独一行：
   放宽到 30ch，断成 "Roll Forming Machine" / "Manufacturer in Wuxi, China" 两行 */
.ab-page .cat-hero__title {
  max-width: 30ch;
}

.abprofile__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: var(--sp-8);
  align-items: start;
}

.abprofile__title {
  margin-top: var(--sp-3);
  max-width: 26ch;
}

.abprofile__lead {
  margin-top: var(--sp-4);
  max-width: 58ch;
}

.abprofile__prose {
  margin-top: var(--sp-5);
}

.abprofile__figure {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  margin: 0;
}

.abprofile__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
}

.abprofile__figure figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   2. 自制能力：两列，上边框起分隔
   -------------------------------------------------------------------------- */

.abpoints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
  margin: var(--sp-7) 0 0;
}

.abpoints__item {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.abpoints dt {
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--navy);
}

.abpoints dd {
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.68;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. 项目流程：六步，三列
   -------------------------------------------------------------------------- */

.abflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-7);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.abflow__item {
  position: relative;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* 序号：橙色数字，压在分隔线上 */
.abflow__num {
  position: absolute;
  top: calc(var(--sp-4) * -1 - 1px);
  left: 0;
  padding-right: 8px;
  background: var(--bg);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.abflow__title {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--navy);
}

.abflow__desc {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.68;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   4. 车间能力：六卡 + 三图
   -------------------------------------------------------------------------- */

.abwork__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.abwork__cell {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
}

.abwork__num {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--orange);
}

.abwork__title {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--navy);
}

.abwork__desc {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.68;
  color: var(--muted);
}

.abwork__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.abwork__shot {
  margin: 0;
}

.abwork__shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
}

.abwork__shot figcaption {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   5. 型材族一览：两列可点行
   -------------------------------------------------------------------------- */

.abfam__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.abfam__item {
  border-top: 1px solid var(--line);
}

.abfam__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 14px 0;
  text-decoration: none;
  transition: color 0.16s var(--ease);
}

.abfam__label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
  transition: color 0.16s var(--ease);
}

.abfam__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.abfam__meta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.18s var(--ease);
}

.abfam__link:hover .abfam__label,
.abfam__link:focus-visible .abfam__label {
  color: var(--orange-dark);
}

.abfam__link:hover .abfam__meta svg,
.abfam__link:focus-visible .abfam__meta svg {
  transform: translateX(3px);
}

.abfam__foot {
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   6. 服务行业：三列卡
   -------------------------------------------------------------------------- */

.abserve__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.abserve__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  text-decoration: none;
  transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}

.abserve__card:hover,
.abserve__card:focus-visible {
  border-color: var(--navy);
  transform: translateY(-2px);
}

.abserve__name {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--navy);
}

.abserve__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.abserve__tag {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

.abserve__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--orange-dark);
}

.abserve__more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.18s var(--ease);
}

.abserve__card:hover .abserve__more svg,
.abserve__card:focus-visible .abserve__more svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   7. 出口与售后
   -------------------------------------------------------------------------- */

.abmarket__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.abmarket__label {
  margin-top: var(--sp-6);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.abregions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-3);
  padding: 0;
  list-style: none;
}

.abregions li {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
}

.abmarket__panel {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
}

.abmarket__panel .abmarket__label {
  margin-top: 0;
}

.absupport {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.absupport__item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.absupport__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.absupport__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--orange);
}

.absupport__item strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--navy);
}

.absupport__item span {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--muted);
}

/* 指向 /service/ 的出口：与上面三条承诺拉开一点距离，读起来是「去哪看细节」 */
.absupport__link {
  margin-top: var(--sp-5);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   8. 合作理由：三列
   -------------------------------------------------------------------------- */

.abwhy__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-7);
}

.abwhy__item {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.abwhy__num {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--orange);
}

.abwhy__title {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--navy);
}

.abwhy__desc {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.68;
  color: var(--muted);
}

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

@media (max-width: 1199.98px) {
  .abprofile__grid {
    gap: var(--sp-7);
  }

  .abwork__grid,
  .abserve__grid,
  .abwhy__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .abprofile__grid,
  .abmarket__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .abprofile__figure {
    position: static;
    order: -1;
  }

  .abflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .abwork__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .abpoints,
  .abfam__list,
  .abflow {
    grid-template-columns: minmax(0, 1fr);
  }

  .abflow {
    gap: var(--sp-5);
  }

  .abwork__grid,
  .abserve__grid,
  .abwhy__grid,
  .abwork__gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .abwork__gallery {
    gap: var(--sp-3);
  }

  .abfam__link {
    align-items: center;
    gap: var(--sp-2);
    padding: 12px 0;
  }

  /* 长分类名（Drywall Stud and Track…）在窄屏换行，计数仍贴在右侧 */
  .abfam__label {
    flex: 1 1 auto;
  }

  .abfam__meta {
    font-size: 0.6875rem;
  }
}