/*
 * Service 页 —— 1:1 对应设计稿 Astra 6月 / 1075:1435（1920×7496）
 *
 *   首屏 1075:1436     整幅 1920×960，居中白字（走 page-banner 默认款）
 *   数字条 1114:1509   白底 301 高、上下 1px #DEDFE0 描边（Figma 内描边，所以留白要减掉 1px）
 *                      左右各 240，四栏等分，数值 48/53 Bold 黑 → 24 → 名目 24/32 #808080
 *   棋盘 1119:1606     #F9F9F9 py120，标题栈（1280 宽）与棋盘之间 96
 *                      3×3 共 1440，格子 464×285、横竖间距都是 24，卡片与配图交错排
 *                      卡片 p20 gap20：Stage 18/25 Bold →20→ 2px 线（左 72 红）→ 标题 32/38 → 说明 24/32 #333
 *   页签轮播 1124:936  白底 py120，标题栈（1440 宽、间距 36）→76→ 页签条 →76→ 轮播
 *                      页签三等分、间距 36，px20 py10 的 28/34；常态 #DEDFE0/#808080，选中 #E60012/白
 *                      每屏左图右文各占一半，文栏 p48 gap30：56/56 → 2px 线（左 60 红）→ 28/34 #333
 *   暗色双栏 1124:969  #141414 py120：整幅大图 1440×471 →96→ 双栏
 *                      左栏定宽 696（gap30、顶对齐），右栏自适应（gap36、纵向居中），都是 p28
 *                      标题 48/53 Bold 白 → 2px 线（左 60 红）→ 说明 28/34 #999
 *   团队 1124:985      #F9F9F9 py120，标题栈 →76→ 人物轮播（1440 宽、卡间距 32、一屏三张）
 *                      卡片白底 p24：410 方图 → #F9F9F9 文框 172 高，岗位 32/38、职责 24/32 #808080
 *   页尾 CTA 1075:1492 沿用全站那条
 *
 * 尺寸字号一律走 CSS 变量，由组件的响应式控制项按断点写入；
 * 这里的媒体查询只翻转排布方向，绝不写死尺寸（写死会盖掉控制项，见记忆里那条坑）。
 */

.astra-svc {
  --svc-primary: #e60012;
  --svc-text: #333333;
  --svc-strong: #000000;
  --svc-muted: #808080;
  --svc-subtle: #999999;
  --svc-border: #dedfe0;
  --svc-bg-subtle: #f9f9f9;
  --svc-dark: #141414;

  font-family: inherit;
  color: var(--svc-text);
}

/* ================================================== 通用：居中区块标题栈 */
.astra-svc__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--svc-header-gap, 36px);
  width: 100%;
  max-width: calc(var(--svc-header-width, 1440px) + 32px);
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.astra-svc__title {
  margin: 0;
  width: 100%;
  font-size: var(--svc-title-size, 48px);
  line-height: var(--svc-title-line, 53px);
  font-weight: 700;
  letter-spacing: -1.92px;
  color: var(--svc-strong);
  overflow-wrap: break-word;
}

.astra-svc__rule {
  display: block;
  flex: 0 0 auto;
  width: var(--svc-rule-width, 100px);
  height: var(--svc-rule-height, 4px);
  background: var(--svc-primary);
}

.astra-svc__sub {
  margin: 0;
  width: 100%;
  font-size: var(--svc-sub-size, 24px);
  line-height: var(--svc-sub-line, 32px);
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--svc-text);
}

/* 2px 横线，左端一截主题色（设计稿里的 Line Decoration） */
.astra-svc__line {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  height: 2px;
  background: var(--svc-border);
  border-left: var(--svc-line-lead, 60px) solid var(--svc-primary);
}

.astra-svc__empty {
  margin: 0;
  padding: 24px 0;
  font-size: 18px;
  color: var(--svc-subtle);
  text-align: center;
}

/* ===================================================== 数字条 1114:1509 */
.astra-svc-stats {
  background: #ffffff;
  border-top: 1px solid var(--svc-border);
  border-bottom: 1px solid var(--svc-border);
  /* Figma 的描边画在框内、不撑高；这里把 1px 从留白里扣回去才等于设计稿的 301 */
  padding: calc(var(--svc-stats-padding, 96px) - 1px) 0;
}

.astra-svc-stats__row {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: calc(var(--svc-stats-width, 1440px) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}

.astra-svc-stats__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--svc-stats-gap, 24px);
  padding: 0 var(--svc-stats-item-padding, 20px);
  text-align: center;
}

.astra-svc-stats__value {
  margin: 0;
  width: 100%;
  font-size: var(--svc-stats-value-size, 48px);
  line-height: var(--svc-stats-value-line, 53px);
  font-weight: 700;
  letter-spacing: -1.92px;
  color: var(--svc-strong);
  overflow-wrap: break-word;
}

.astra-svc-stats__label {
  margin: 0;
  width: 100%;
  font-size: var(--svc-stats-label-size, 24px);
  line-height: var(--svc-stats-label-line, 32px);
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--svc-muted);
  overflow-wrap: break-word;
}

/* ======================================================= 棋盘 1119:1606 */
.astra-svc-stages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--svc-stages-gap, 96px);
  padding: var(--svc-stages-padding, 120px) 0;
}

.astra-svc-stages__grid {
  display: grid;
  grid-template-columns: repeat(var(--svc-stages-columns, 3), minmax(0, 1fr));
  grid-auto-rows: minmax(var(--svc-stages-row, 285px), auto);
  gap: var(--svc-stages-gap-y, 24px) var(--svc-stages-gap-x, 24px);
  width: 100%;
  max-width: calc(var(--svc-stages-width, 1440px) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}

.astra-svc-stages__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--svc-stages-card-gap, 20px);
  padding: var(--svc-stages-card-padding, 20px);
  min-width: 0;
}

.astra-svc-stages__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--svc-stages-head-gap, 20px);
  width: 100%;
}

.astra-svc-stages__label {
  margin: 0;
  font-size: var(--svc-stages-label-size, 18px);
  line-height: var(--svc-stages-label-line, 25px);
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--svc-strong);
  white-space: nowrap;
}

.astra-svc-stages__name {
  margin: 0;
  width: 100%;
  font-size: var(--svc-stages-name-size, 32px);
  line-height: var(--svc-stages-name-line, 38px);
  font-weight: 600;
  letter-spacing: -0.64px;
  color: var(--svc-strong);
  overflow-wrap: break-word;
}

.astra-svc-stages__desc {
  margin: 0;
  width: 100%;
  font-size: var(--svc-stages-desc-size, 24px);
  line-height: var(--svc-stages-desc-line, 32px);
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--svc-text);
  overflow-wrap: break-word;
}

.astra-svc-stages__img {
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.astra-svc-stages__img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ==================================================== 页签轮播 1124:936 */
.astra-svc-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--svc-tabs-padding, 120px) 0;
  background: #ffffff;
}

.astra-svc-tabs__nav {
  display: flex;
  align-items: stretch;
  gap: var(--svc-tabs-nav-gap, 36px);
  width: 100%;
  max-width: calc(var(--svc-tabs-width, 1440px) + 32px);
  margin: var(--svc-tabs-nav-top, 76px) auto 0;
  padding: 0 16px;
}

.astra-svc-tabs__btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--svc-tabs-btn-padding, 10px) var(--svc-tabs-btn-padding-x, 16px);
  border: 0;
  border-radius: 0;
  background: var(--svc-border);
  font-family: inherit;
  font-size: var(--svc-tabs-btn-size, 28px);
  line-height: var(--svc-tabs-btn-line, 34px);
  font-weight: 600;
  letter-spacing: -0.56px;
  color: var(--svc-muted);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.astra-svc-tabs__btn:hover {
  color: var(--svc-strong);
}

.astra-svc-tabs__btn.is-active {
  background: var(--svc-primary);
  color: #ffffff;
}

/* swiper 按容器的 clientWidth 算每屏宽度，那是含左右留白的；
   所以留白只能挪到外面这层，轮播本身不留边，否则每屏会比内容宽 32 并左偏 16 */
.astra-svc-tabs__frame {
  width: 100%;
  max-width: calc(var(--svc-tabs-width, 1440px) + 32px);
  margin: var(--svc-tabs-view-top, 76px) auto 0;
  padding: 0 16px;
}

.astra-svc-tabs__viewport {
  width: 100%;
  overflow: hidden;
}

.astra-svc-tabs__viewport .swiper-slide {
  height: auto;
}

.astra-svc-tabs__slide {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--svc-slide-height, 487px);
}

/* 设计稿里图文不是对半：图 672、文 768 */
.astra-svc-tabs__media {
  flex: 0 0 var(--svc-slide-media, 46.667%);
  max-width: 100%;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.astra-svc-tabs__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.astra-svc-tabs__panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--svc-slide-gap, 30px);
  padding: var(--svc-slide-padding, 48px);
}

.astra-svc-tabs__name {
  margin: 0;
  width: 100%;
  font-size: var(--svc-slide-name-size, 56px);
  line-height: var(--svc-slide-name-line, 56px);
  font-weight: 700;
  letter-spacing: -2.24px;
  color: var(--svc-strong);
  overflow-wrap: break-word;
}

.astra-svc-tabs__desc {
  margin: 0;
  width: 100%;
  font-size: var(--svc-slide-desc-size, 28px);
  line-height: var(--svc-slide-desc-line, 34px);
  font-weight: 600;
  letter-spacing: -0.56px;
  color: var(--svc-text);
  overflow-wrap: break-word;
}

/* =================================================== 暗色双栏 1124:969 */
.astra-svc-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--svc-hl-gap, 96px);
  padding: var(--svc-hl-padding, 120px) 0;
  background: var(--svc-dark);
}

.astra-svc-highlight__media {
  width: 100%;
  max-width: calc(var(--svc-hl-width, 1440px) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}

.astra-svc-highlight__media img {
  display: block;
  width: 100%;
  height: var(--svc-hl-img-height, 471px);
  max-width: none;
  object-fit: cover;
}

.astra-svc-highlight__cols {
  display: flex;
  align-items: stretch;
  gap: var(--svc-hl-col-gap, 60px);
  width: 100%;
  max-width: calc(var(--svc-hl-width, 1440px) + 32px);
  min-height: var(--svc-hl-col-height, 610px);
  margin: 0 auto;
  padding: 0 16px;
}

.astra-svc-highlight__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--svc-hl-col-padding, 28px);
  min-width: 0;
}

.astra-svc-highlight__col--lead {
  flex: 0 0 var(--svc-hl-lead-width, 696px);
  max-width: 100%;
  gap: var(--svc-hl-lead-gap, 30px);
  justify-content: flex-start;
}

.astra-svc-highlight__col--rest {
  flex: 1 1 0;
  gap: var(--svc-hl-rest-gap, 36px);
  justify-content: center;
}

.astra-svc-highlight__name {
  margin: 0;
  width: 100%;
  font-size: var(--svc-hl-name-size, 48px);
  line-height: var(--svc-hl-name-line, 53px);
  font-weight: 700;
  letter-spacing: -1.92px;
  color: #ffffff;
  overflow-wrap: break-word;
}

.astra-svc-highlight__desc {
  margin: 0;
  width: 100%;
  font-size: var(--svc-hl-desc-size, 28px);
  line-height: var(--svc-hl-desc-line, 34px);
  font-weight: 600;
  letter-spacing: -0.56px;
  color: var(--svc-subtle);
  overflow-wrap: break-word;
}

/* ======================================================= 团队 1124:985 */
.astra-svc-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--svc-team-gap, 76px);
  padding: var(--svc-team-padding, 120px) 0;
}

.astra-svc-team__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(var(--svc-team-width, 1440px) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}

.astra-svc-team__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.astra-svc-team__viewport .swiper-slide {
  height: auto;
}

.astra-svc-team__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  padding: var(--svc-team-card-padding, 24px);
  background: #ffffff;
  transition: box-shadow 0.25s ease;
}

/* 设计稿里第二张画的就是这个态 */
.astra-svc-team__card:hover {
  box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.05);
}

.astra-svc-team__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  overflow: hidden;
}

/* 设计稿不是裁满：人像按容器宽度缩到 ~90% 居中，再往上提一点，
   两侧留出的白边和卡片底色一样，所以看不出来（1127:2029 那几张就是这么摆的） */
.astra-svc-team__media img {
  position: absolute;
  left: 50%;
  top: var(--svc-team-img-top, -6%);
  display: block;
  width: var(--svc-team-img-scale, 90%);
  height: auto;
  max-width: none;
  transform: translateX(-50%);
}

.astra-svc-team__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--svc-team-text-height, 172px);
  padding: var(--svc-team-text-padding, 20px) 24px;
  background: var(--svc-bg-subtle);
  text-align: center;
}

.astra-svc-team__role {
  margin: 0;
  width: 100%;
  min-height: var(--svc-team-role-height, 76px);
  font-size: var(--svc-team-role-size, 32px);
  line-height: var(--svc-team-role-line, 38px);
  font-weight: 600;
  letter-spacing: -0.64px;
  color: var(--svc-strong);
  overflow-wrap: break-word;
}

.astra-svc-team__duty {
  margin: 0;
  width: 100%;
  font-size: var(--svc-team-duty-size, 24px);
  line-height: var(--svc-team-duty-line, 32px);
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--svc-muted);
  overflow-wrap: break-word;
}

/* 翻页点：设计稿里没画，但一屏只放得下三张，得给个明面上的翻页 */
.astra-svc-team .astra-svc-team__dots,
.astra-svc-team .astra-svc-team__dots.swiper-pagination-bullets {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  margin: 0;
  transform: none;
}

.astra-svc-team__dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0;
  border-radius: 999px;
  background: var(--svc-border);
  opacity: 1;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.astra-svc-team__dots .swiper-pagination-bullet-active {
  width: 28px;
  background: var(--svc-primary);
}

/* ======================================================= 窄屏：只翻方向 */
@media (max-width: 1200px) {
  .astra-svc-tabs__slide {
    flex-direction: column;
  }

  /* 一列排布后 flex 的基准落到高度轴上，这里必须换成 auto */
  .astra-svc-tabs__media {
    flex: 0 0 auto;
    width: 100%;
    min-height: var(--svc-slide-media-height, 360px);
  }

  .astra-svc-tabs__panel {
    flex: 0 0 auto;
  }

  .astra-svc-highlight__cols {
    flex-direction: column;
  }

  .astra-svc-highlight__col--lead,
  .astra-svc-highlight__col--rest {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 990px) {
  .astra-svc-stats__row {
    flex-wrap: wrap;
    row-gap: var(--svc-stats-row-gap, 32px);
  }

  .astra-svc-stats__item {
    flex: 1 1 45%;
  }
}

@media (max-width: 768px) {
  .astra-svc-tabs__nav {
    flex-wrap: wrap;
  }

  .astra-svc-tabs__btn {
    flex: 1 1 100%;
  }
}