/*
 * Join Us 页 —— 1:1 对应设计稿 Astra 6月(fwdnLm0W) / 1074:1200（1920×4480）
 * 三个板块都是整幅 1080，所以这页开了全屏滚动（机制在共用的 assets/css/fullpage.css）。
 *
 *   首屏 1074:1207   整幅 1080：底图 + rgba(0,0,0,.2) 蒙版
 *                    48/53 Bold 白 + 红线 100×4 + 24/32 Semi 白（844 宽），gap 36
 *   招聘引子 1131:1249 整幅 1080，白底，px240 py120，上下两行两端对齐
 *                    上行 gap48 高 417 居中：
 *                      左栏 py20 两端对齐：小标题 28/34 Semi #333
 *                                          大标题 64/64 Bold 黑(-2.56)，"Astra Solar" 转红，644 宽
 *                                          描边按钮：1px 黑框 px40 py12，40/44 Bold #333
 *                      右栏 704 整图
 *                    下行 gap48 顶对齐：左图 522×366 + 右段 40/44 Bold 黑（首词 "Astra" 转红）
 *   宣言 1131:1267   整幅 1080，#141414
 *                    居中 56/56 Bold 白(-2.24)，1280 宽，距顶 159，末句 "with us." 转红
 *                    左右各一张 280 方图：距边 240、距底 173
 *   页尾 CTA         沿用全站那条
 *
 * 红色段落不靠写 HTML：组件把文案拆成「前段 / 红色段 / 后段」三个控制项，
 * 业主在后台直接改字，不用碰标签。
 * 尺寸字号一律走 CSS 变量，由组件的响应式控制项按断点写入；
 * 媒体查询只翻排布方向，绝不写死尺寸（写死会盖掉控制项，见记忆里那条坑）。
 */

.astra-jn {
  --jn-primary: #e60012;
  --jn-text: #333333;
  --jn-strong: #000000;
  --jn-dark: #141414;
  --jn-muted: #808080;

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

.astra-jn__empty {
  margin: 0;
  padding: 24px 0;
  font-size: 18px;
  color: var(--jn-muted);
  text-align: center;
}

/* 红色高亮段：三个板块共用 */
.astra-jn__hl {
  color: var(--jn-primary);
}

/* ================================================ 招聘引子 1131:1249 */
.astra-jn-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
  min-height: var(--jn-intro-height, 1080px);
  padding: var(--jn-intro-pad-y, 120px) var(--jn-intro-pad-x, 240px);
  background: #ffffff;
}

html.astra-snap .astra-snap-section .astra-jn-intro {
  flex: 1 1 auto;
  min-height: 0;
}

/* ------------------------------------------------------------- 上行 */
.astra-jn-intro__lead {
  display: flex;
  align-items: center;
  gap: var(--jn-row-gap, 48px);
  width: 100%;
  min-height: var(--jn-lead-height, 417px);
}

.astra-jn-intro__copy {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: var(--jn-copy-pad-y, 20px) 0;
}

.astra-jn-intro__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--jn-head-gap, 20px);
  width: 100%;
}

.astra-jn-intro__eyebrow {
  margin: 0;
  width: 100%;
  font-size: var(--jn-eyebrow-size, 28px);
  line-height: var(--jn-eyebrow-line, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--jn-text);
  overflow-wrap: break-word;
}

.astra-jn-intro__title {
  margin: 0;
  width: 100%;
  max-width: var(--jn-title-width, 644px);
  font-size: var(--jn-title-size, 64px);
  line-height: var(--jn-title-line, 64px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--jn-strong);
  overflow-wrap: break-word;
}

/* 描边按钮：设计稿是个 1px 黑框的文字块，给了链接就变成真按钮 */
.astra-jn-intro__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  padding: var(--jn-cta-pad-y, 12px) var(--jn-cta-pad-x, 40px);
  border: 1px solid var(--jn-strong);
  font-size: var(--jn-cta-size, 40px);
  line-height: var(--jn-cta-line, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--jn-text);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

a.astra-jn-intro__cta:hover,
a.astra-jn-intro__cta:focus-visible {
  background: var(--jn-primary);
  border-color: var(--jn-primary);
  color: #ffffff;
}

.astra-jn-intro__shot {
  position: relative;
  flex: 0 0 var(--jn-shot-width, 704px);
  max-width: 100%;
  align-self: stretch;
  min-height: var(--jn-shot-min, 320px);
  overflow: hidden;
}

/* 图一律绝对定位：当普通子元素时它的原始宽高比会参与算高，把整屏撑开 */
.astra-jn-intro__shot img,
.astra-jn-intro__aside img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ------------------------------------------------------------- 下行 */
.astra-jn-intro__note {
  display: flex;
  align-items: flex-start;
  gap: var(--jn-row-gap, 48px);
  width: 100%;
}

.astra-jn-intro__aside {
  position: relative;
  flex: 0 0 var(--jn-aside-width, 522px);
  max-width: 100%;
  height: var(--jn-aside-height, 366px);
  overflow: hidden;
}

.astra-jn-intro__desc {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  align-self: stretch;
  font-size: var(--jn-desc-size, 40px);
  line-height: var(--jn-desc-line, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--jn-strong);
  overflow-wrap: break-word;
}

/* ==================================================== 宣言 1131:1267 */
.astra-jn-stmt {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: var(--jn-stmt-height, 1080px);
  padding: var(--jn-stmt-pad-top, 159px) var(--jn-stmt-pad-x, 320px)
    var(--jn-stmt-pad-bottom, 120px);
  background: var(--jn-dark);
  overflow: hidden;
}

html.astra-snap .astra-snap-section .astra-jn-stmt {
  flex: 1 1 auto;
  min-height: 0;
}

/* 宽屏下这两层不参与布局（方图是绝对定位的），
   窄屏才变回真容器把方图收到文字下面 */
.astra-jn-stmt__inner,
.astra-jn-stmt__squares {
  display: contents;
}

.astra-jn-stmt__text {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--jn-stmt-width, 1280px);
  margin: 0;
  font-size: var(--jn-stmt-size, 56px);
  line-height: var(--jn-stmt-line, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #ffffff;
  text-align: center;
  overflow-wrap: break-word;
}

/* 左右两张方图：贴边 240、离底 173（设计稿 1131:1277 / 1131:1278） */
.astra-jn-stmt__square {
  position: absolute;
  bottom: var(--jn-sq-bottom, 173px);
  width: var(--jn-sq-size, 280px);
  height: var(--jn-sq-size, 280px);
  overflow: hidden;
}

.astra-jn-stmt__square--left {
  left: var(--jn-sq-inset, 240px);
}

.astra-jn-stmt__square--right {
  right: var(--jn-sq-inset, 240px);
}

.astra-jn-stmt__square img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focus, 50%) center;
}

/* 招聘引子照设计稿算出来是 1071（两行 417+366 加 py120），比可视 1000 高，
   开了整屏吸附时把留白按视口收一收；min() 让控制项给的值始终是上限。
   必须圈 min-width：html.astra-snap 在窄屏还在，不圈会漏进竖排那套 */
@media (min-width: 1201px) {
  html.astra-snap .astra-snap-section .astra-jn-intro {
    padding-block: min(var(--jn-intro-pad-y, 120px), 6vh);
  }
}

/* ====================================================== 窄屏：只翻方向 */
@media (max-width: 1200px) {
  .astra-jn-intro {
    padding: var(--jn-intro-pad-narrow, 72px) 16px;
    gap: 40px;
  }

  .astra-jn-intro__lead,
  .astra-jn-intro__note {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  /* 一列排布后 flex 的基准落到高度轴上，这里必须换成 auto */
  .astra-jn-intro__copy,
  .astra-jn-intro__shot,
  .astra-jn-intro__aside,
  .astra-jn-intro__desc {
    flex: 0 0 auto;
    width: 100%;
    align-self: auto;
  }

  .astra-jn-intro__shot {
    height: var(--jn-shot-height-narrow, 320px);
  }

  .astra-jn-intro__aside {
    height: var(--jn-aside-height-narrow, 260px);
  }

  .astra-jn-stmt {
    padding: var(--jn-stmt-pad-narrow, 72px) 16px;
    align-items: center;
  }

  /* 窄屏没地方摆那两张方图，收到文字下面排成一行。
     注意不能改 static：里面的图是 absolute inset:0，
     父级一旦不定位，图就跑去贴 .astra-jn-stmt 铺满整屏了 */
  .astra-jn-stmt__square {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: var(--jn-sq-height-narrow, 200px);
  }

  .astra-jn-stmt__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
  }

  .astra-jn-stmt__squares {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .astra-jn-intro__cta {
    width: 100%;
  }
}