/**
 * 顶栏 + 常驻二级导航（pill 条）
 * 设计令牌：与 home-v2 homeAnchorNav 一致
 */

:root {
  --site-header-h: 6.4rem;
  --site-subnav-h: 4.8rem;
}

.siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5555;
  background: var(--hp-canvas, #fff);
}

.siteHeader .header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100%;
}

.siteHeaderSpacer {
  height: var(--site-header-h);
  flex-shrink: 0;
}

.siteHeaderSpacer--withSub {
  height: calc(var(--site-header-h) + var(--site-subnav-h));
}

.navSubBar {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--hp-hairline, #e8e8e8);
  box-shadow: var(--hp-shadow-soft, 0 2px 8px rgba(26, 26, 26, 0.06));
}

.navSubBar__inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.8rem;
  overflow-x: auto;
  padding: 1rem 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

.navSubBar__link {
  flex-shrink: 0;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-size: 1.4rem;
  color: var(--hp-graphite, #636363);
  background: var(--hp-cloud, #f7f7f7);
  border: 1px solid transparent;
  text-decoration: none;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.navSubBar__link:hover {
  color: var(--hp-primary, #024ad8);
  background: rgba(2, 74, 216, 0.06);
}

.navSubBar__link.is-active {
  color: var(--hp-on-ink, #fff);
  background: var(--hp-ink, #1a1a1a);
  border-color: var(--hp-ink, #1a1a1a);
}

.header .menu .one .first.active {
  color: var(--hp-primary, #024ad8);
}

.header .menu .one .first.active::after {
  opacity: 1;
}

/* 内页顶距改由 siteHeaderSpacer 承担 */
.inpage {
  padding-top: 0 !important;
}

@media (max-width: 640px) {
  :root {
    --site-header-h: 5.6rem;
    --site-subnav-h: 4.4rem;
  }

  .navSubBar__link {
    font-size: 1.3rem;
    padding: 0.7rem 1.2rem;
  }
}

/* 锚点滚动时避开固定顶栏 + 二级导航 */
#brand,
#capabilities,
#cap-design,
#cap-production,
#cap-digital,
#cap-green,
#cap-color,
#cap-quality,
#cap-delivery,
#products-entry,
#industries-entry,
#cases-entry,
#service-entry,
#contact-entry,
.homeHub[id] {
  scroll-margin-top: calc(var(--site-header-h) + var(--site-subnav-h) + 1.2rem);
}

/* 方案 / 行业分组列表页 */
.catalogHub__intro {
  padding: 4.8rem 0 2.4rem;
}

.catalogHub__title {
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--hp-ink, #1a1a1a);
  margin-bottom: 1.2rem;
}

.catalogHub__body {
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--hp-graphite, #636363);
  max-width: 72rem;
}

.catalogHub__gridWrap {
  padding: 2.4rem 0 8rem;
}

.catalogHub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  gap: 2.4rem;
}

.catalogHubCard {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2.4rem;
  border-radius: 1.2rem;
  border: 1px solid var(--hp-hairline, #e8e8e8);
  background: #fff;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.catalogHubCard:hover {
  border-color: rgba(2, 74, 216, 0.35);
  box-shadow: var(--hp-shadow-soft, 0 2px 8px rgba(26, 26, 26, 0.08));
}

.catalogHubCard__title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--hp-ink, #1a1a1a);
}

.catalogHubCard__desc {
  flex: 1;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--hp-graphite, #636363);
}

.catalogHubCard__btn {
  font-size: 1.4rem;
  color: var(--hp-primary, #024ad8);
}