/**
 * Component Sourcing 子页 · 段1 Hero
 *
 * 全部数值取自 Figma 实测（节点 1:1060 / 1:1084 / 1:1088 / 1:1087 / 1:1143 /
 * 1:1066 / 1:1145 / 1:1146 / 1:1181 / 1:1182 / 1:1585 / 1:1593 / 1:1594 / 1:1607）。
 * 本段不复用 PCB 的 Hero 样式（结构不同：PCB 是统计条，本页是品牌绿标签条 + 页内锚点）。
 */

/* ── Hero 主体：1920 × 628 ───────────────────────────── */

.csrc-hero__stage {
  position: relative;
  display: grid;
  /* 设计稿（节点 1:1060）hero 1920×628，内容从 hero 顶 +83 起（标题 1:1088 y=203）。
     用 center 会因为内容高度变化上下漂移，改为顶对齐 + 显式上内边距。 */
  align-items: start;
  min-height: 628px;
  overflow: hidden;
  background-color: #06301f;
  /* 设计稿实测 hero 平均色 #166524（R≈G/6、B≈G/3 的纯绿倾向），
     原遮罩用的是青绿（B 偏高）→ 实测平均色 #1E4538 偏灰蓝。
     这里改成低蓝值的品牌绿遮罩，让照片整体压成设计稿的饱和绿。 */
  background-image:
    linear-gradient(rgba(3, 112, 26, 0.74), rgba(2, 74, 15, 0.8)),
    var(--csrc-hero-bg, linear-gradient(135deg, #0a3d2a 0%, #062418 100%));
  background-size: cover;
  background-position: center;
}

/* 200px 描边巨字（1:1084）：仅描边，叠在标题之后作水印 */
.csrc-hero__watermark {
  position: absolute;
  top: 36px;
  left: 50%;
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-size: 200px;
  /* 设计稿节点 1:1084：Outfit Bold(700) 200px / 整节点 opacity 0.2 /
     描边 1px #FFFFFF OUTSIDE（fill 不可见）。 */
  font-weight: 700;
  line-height: 200px;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  letter-spacing: 0.01em;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.csrc-hero__content {
  position: relative;
  z-index: 2;
  /* 设计稿 hero 内容区宽 1334（实测最宽元素为服务边界框，x 292..1625）；
     此前写成 1255，把边界框压窄了 79px。 */
  width: min(1334px, calc(100% - 80px));
  margin: 0 auto;
  /* 设计稿：hero 顶 +83 起（标题 1:1088 y=203），最后元素底 717（hero 底 748）。 */
  padding: 83px 0 31px;
  text-align: center;
}

/* 标题：行1 32px，行2 48px，行高同为 58px */
.csrc-hero__title {
  /* 设计稿：标题块底 319（1:1087 y261+58）→ 正文顶 360（1:1143），间距 41。 */
  margin: 0 0 41px;
  font-family: var(--pcb-font-display);
  font-weight: 900;
  line-height: 58px;
  color: #ffffff;
}

.csrc-hero__title-line {
  display: block;
  /* 设计稿：标题行1 为 Orbitron Bold（700），行2 为 Orbitron Black（900）。
     父级 .csrc-hero__title 统一写了 900，会让行1 也按 Black 渲染。 */
  font-weight: 700;
  font-size: 32px;
}
.csrc-hero__title-accent { display: block; font-size: 48px; }

/* 正文 18 / 28 */
.csrc-hero__lead {
  /* 设计稿节点 1:1143：宽 1255 / x331（居中）/ 4 行。设计稿在第 1 行末用了
     手动换行（characters 里含 \n），后台按换行输入即可复现（pre-line）。 */
  max-width: 1255px;
  margin-inline: auto;
  /* 设计稿：正文底 470 → 边界条顶 501，间距 31（线上正文高 112 vs 设计 110，取 30 对齐）。 */
  margin: 0 auto 30px;
  white-space: pre-line;
  font-size: 18px;
  line-height: 28px;
  color: #ffffff;
}

/* 服务边界条（1:1066）：1334 宽 / 圆角 10 / 描边 #B8D8BC / 单行
   设计稿实测：框 294..1626（宽 1332）、高 49、文字高 16、内边距左右 18。 */
.csrc-hero__boundary {
  /* 设计稿节点 1:1066：1334×55 / 圆角 10 / 描边 #B8D8BC 1px INSIDE / **无填充**
     （fills[0].visible = false），文字 1:1145 为 18px/28、内缩左右 19。 */
  max-width: 1334px;
  margin: 0 auto 32px;
  /* 左右内边距按设计稿是 19，但线上 Outfit 比设计稿约宽 1.3%：
     18px 下这段单行自然宽 1310 vs 设计稿 1293，可用宽只有 1294 → 会折两行。
     文字本身是居中的，收内边距只影响左右余白（不可见），不改字号/字距。 */
  padding: 13px 6px;
  font-size: 18px;
  line-height: 28px;
  color: #cce0d7;
  text-align: center;
  background: none;
  border: 1px solid #b8d8bc;
  border-radius: 10px;
}

/* "Service boundary：" 前缀：设计稿 1:1145 segment 为 Outfit **SemiBold(600)** #FFB700。
   写成 700 会让这段加宽 ~7px，整条就折成两行（设计稿是单行 55 高）。 */
.csrc-hero__boundary-label {
  font-weight: 600;
  color: #ffb700;
}

.csrc-hero__boundary-colon {
  margin: 0;
  color: #ffb700;
}

.csrc-hero__boundary-text {
  color: #cce0d7;
}

/* 生产范围（1:1146）：设计稿整行白色加粗（暗底上用白色，与 PCBA 页的
   「绿前缀 + 灰项」不同，不要把 PCBA 的配色搬过来）。 */
.csrc-hero__scope {
  margin: 0 0 32px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #ffffff;
}

.csrc-hero__scope-label {
  color: #ffffff;
}

.csrc-hero__scope-colon {
  margin: 0 4px 0 2px;
  color: #ffffff;
}

.csrc-hero__scope-item {
  margin: 0 14px;
  color: #ffffff;
}

/* 分隔符：设计稿是细浅色竖线，不是文字竖线 */
.csrc-hero__scope-sep {
  color: rgba(255, 255, 255, 0.42);
}

/* 按钮（1:1181 / 1:1182）：381×69 / 圆角 8 / #EFF5F3 底 / #14363F 字 20px */
.csrc-hero__actions {
  display: flex;
  justify-content: center;
}

.csrc-hero__cta {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-width: 381px;
  min-height: 69px;
  /* 设计稿实测：文字距按钮左 14、绿块距按钮右 11 */
  padding: 0 11px 0 14px;
  font-size: 20px;
  font-weight: 600;
  line-height: 37px;
  color: #14363f;
  text-decoration: none;
  background: #eff5f3;
  border: 1px solid #cce0d7;
  border-radius: 8px;
  transition: background 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.csrc-hero__cta:hover {
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.csrc-hero__cta:focus-visible {
  outline: 2px solid #b8d8bc;
  outline-offset: 3px;
}

/* ── 标签条（1:1585）：品牌绿实心 121 高 ─────────────── */

.csrc-hero__tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: #008c11;
}

.csrc-hero__tag {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  min-height: 121px;
  padding: 0 24px;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #ffffff;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.csrc-hero__tag:first-child { border-left: 0; }

.csrc-hero__tag-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  opacity: 0.95;
}

.csrc-hero__tag-icon svg {
  width: 100%;
  height: 100%;
}

/* ── 页内锚点（1:1594 / 1:1607）──────────────────────── */

.csrc-hero__anchors {
  background: #ffffff;
  border-bottom: 1px solid var(--pcb-line);
}

.csrc-hero__anchors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 42px;
  justify-content: center;
  width: min(1461px, calc(100% - 80px));
  margin: 0 auto;
  padding: 22px 0;
  list-style: none;
}

.csrc-hero__anchor a {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  font-size: 16px;
  line-height: 28px;
  color: var(--pcb-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.csrc-hero__anchor a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 94px;
  max-width: 100%;
  height: 2px;
  background: #008c11;
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.csrc-hero__anchor a:hover { color: #008c11; }

.csrc-hero__anchor a.is-active {
  font-weight: 700;
  color: #008c11;
}

.csrc-hero__anchor a.is-active::after { transform: translateX(-50%) scaleX(1); }

.csrc-hero__anchor a:focus-visible {
  outline: 2px solid #008c11;
  outline-offset: 2px;
}

/* ── 响应式 ─────────────────────────────────────────── */

@media (max-width: 1500px) {
  .csrc-hero__content { padding: 64px 0 28px; }
  .csrc-hero__watermark { font-size: 150px; line-height: 150px; }
  .csrc-hero__title-line { font-size: 28px; }
  .csrc-hero__title-accent { font-size: 40px; }
  .csrc-hero__title { line-height: 52px; }
}

@media (max-width: 1280px) {
  .csrc-hero__stage { min-height: 520px; }
  .csrc-hero__content { padding: 48px 0 24px; }
  .csrc-hero__watermark { font-size: 118px; line-height: 118px; top: 24px; }
  .csrc-hero__tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csrc-hero__tag { min-height: 88px; font-size: 17px; }
  .csrc-hero__tag:nth-child(3) { border-left: 0; }
  .csrc-hero__tag:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.18); }
}

@media (max-width: 900px) {
  .csrc-hero__stage { min-height: 0; }
  .csrc-hero__watermark { display: none; }
  .csrc-hero__content { width: calc(100% - 48px); padding: 56px 0; }
  .csrc-hero__title { line-height: 42px; }
  .csrc-hero__title-line { font-size: 22px; }
  .csrc-hero__title-accent { font-size: 30px; }
  .csrc-hero__lead,
  .csrc-hero__scope { font-size: 16px; line-height: 26px; }
  /* 边界条在窄屏必须允许折行（设计稿 1332 宽单行，手机放不下） */
  .csrc-hero__boundary { padding: 12px 14px; font-size: 14px; line-height: 22px; }
  .csrc-hero__title { margin-bottom: 24px; }
  .csrc-hero__scope-item { margin: 0 8px; }
  .csrc-hero__cta { width: 100%; min-width: 0; }
  .csrc-hero__tags { grid-template-columns: minmax(0, 1fr); }
  .csrc-hero__tag {
    min-height: 64px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 0;
  }
  .csrc-hero__tag:first-child { border-top: 0; }
  .csrc-hero__anchors-list { gap: 6px 22px; padding: 16px 0; }
  .csrc-hero__anchor a::after { height: 2px; }
}