/* web/components/hero/hero.css
   英雄区 - 样式（.hero__ 前缀，令牌驱动）

   职责：组件根容器只管内部布局。限宽/居中由宿主 Layer 2 的 .layer-2-content 负责。
   英雄区是门面页，视觉分量要足：大标题 + 价值主张 + 引导按钮 + 能力条，纵向居中撑开。
   颜色/字号/间距全走 var(--bp-*)，不写死字面量。 */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 首屏撑开：宿主 .layer-2-content 已占掉「导航高 + 上留白 32 + 下留白 48」，
     这里必须一并扣掉，否则总高超过 100vh 会凭空多出一条滚动条。 */
  min-height: calc(100vh - var(--bp-navbar-h) - var(--bp-space-6) - var(--bp-space-7));
  color: var(--bp-color-text);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-5);
  max-width: 760px;
}

/* 眉标：小字距放大，点明身份，工程图小标题的装饰感 */
.hero__eyebrow {
  margin: 0;
  font-size: var(--bp-font-sm);
  font-weight: var(--bp-font-semibold);
  letter-spacing: 0.14em;
  color: var(--bp-color-primary-strong);
}

/* 主标题：整页视觉重心，特大特粗 */
.hero__title {
  margin: 0;
  font-size: var(--bp-font-3xl);
  font-weight: var(--bp-font-extrabold);
  line-height: var(--bp-leading-tight);
  letter-spacing: 0.01em;
  color: var(--bp-color-text);
}

/* 强调词：主色，把价值主张的落点"变成自动化设备"挑出来 */
.hero__title-accent {
  color: var(--bp-color-primary);
}

.hero__lead {
  margin: 0;
  font-size: var(--bp-font-md);
  line-height: var(--bp-leading-relaxed);
  color: var(--bp-color-text-muted);
}

/* ─── 引导按钮组 ─── */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-space-3);
  margin-top: var(--bp-space-1);
}

.hero__btn {
  padding: var(--bp-space-3) var(--bp-space-6);
  border: 1px solid var(--bp-color-border-strong);
  border-radius: var(--bp-radius-md);
  background: var(--bp-color-bg-elevated);
  color: var(--bp-color-primary);
  font-family: inherit;
  font-size: var(--bp-font-md);
  font-weight: var(--bp-font-semibold);
  cursor: pointer;
  transition: background var(--bp-dur-fast) var(--bp-ease),
    color var(--bp-dur-fast) var(--bp-ease),
    border-color var(--bp-dur-fast) var(--bp-ease),
    transform var(--bp-dur-fast) var(--bp-ease);
}

.hero__btn:hover {
  border-color: var(--bp-color-primary);
  background: var(--bp-color-primary-tint);
  transform: translateY(-1px);
}

/* 主按钮：主色实心，视觉优先，是"下载资源"这个主转化路径 */
.hero__btn--primary {
  background: var(--bp-color-primary);
  border-color: var(--bp-color-primary);
  color: var(--bp-color-on-primary);
}

.hero__btn--primary:hover {
  background: var(--bp-color-primary-strong);
  border-color: var(--bp-color-primary-strong);
  color: var(--bp-color-on-primary);
}

/* ─── 能力条：三项交付能力，横向排开，顶部细分隔线 ─── */
.hero__skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bp-space-5);
  margin: var(--bp-space-5) 0 0;
  padding: var(--bp-space-5) 0 0;
  list-style: none;
  border-top: 1px dashed var(--bp-color-border-strong);
}

.hero__skill {
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-1);
}

.hero__skill-title {
  margin: 0;
  font-size: var(--bp-font-md);
  font-weight: var(--bp-font-semibold);
  color: var(--bp-color-text);
}

.hero__skill-desc {
  margin: 0;
  font-size: var(--bp-font-sm);
  line-height: var(--bp-leading-relaxed);
  color: var(--bp-color-text-faint);
}

/* ─── 断点降档（走骨架属性选择器，不写媒体查询） ─── */
/* 平板：主标题收一档，避免折行过碎 */
#stage[data-breakpoint="tablet"] .hero__title {
  font-size: var(--bp-font-2xl);
}

/* 手机：标题再收、能力条改纵向堆叠、按钮占满宽度好点 */
#stage[data-breakpoint="mobile"] .hero {
  min-height: auto;
  padding-top: var(--bp-space-4);
}

#stage[data-breakpoint="mobile"] .hero__title {
  font-size: var(--bp-font-xl);
}

#stage[data-breakpoint="mobile"] .hero__lead {
  font-size: var(--bp-font-sm);
}

#stage[data-breakpoint="mobile"] .hero__skills {
  grid-template-columns: 1fr;
  gap: var(--bp-space-4);
}

#stage[data-breakpoint="mobile"] .hero__btn {
  flex: 1 1 auto;
  text-align: center;
  padding: var(--bp-space-3) var(--bp-space-4);
  font-size: var(--bp-font-sm);
}