/*
 * Culture 页 —— 1:1 对应设计稿 Astra 6月(fwdnLm0W) / 1071:389（1920×6640）
 * 五个板块在设计稿里都正好 1080，天然一屏一块，所以这页开了全屏滚动
 * （原生 scroll-snap，机制在共用的 assets/css/fullpage.css）。
 *
 *   首屏 1071:396     整幅 1080：48/53 Bold 白 + 红线 100×4 + 24/32 白（844 宽），蒙版 rgba(0,0,0,.2)
 *   寄语 1073:866     整幅 1080，底图铺满，左右 240、下对齐
 *                     左：px80 py96 的 520×650 #D9D9D9 相框，底部压 505×568 人像 + 140×54 签名
 *                     右：px32 py200 两端对齐
 *                        标题 48/53 Bold #333 →36→ 红线 100×4 →36→ 正文 28/34 Semi #808080
 *                        两个数据（各 290 宽、间距 20）：左 2px 主题色竖线 + 36/40 Bold 黑，下面 18/25 Bold #999
 *   价值观 1071:810   整幅 1080，px240 py120，左右各 720、顶对齐
 *                     左栏两端对齐：标题栈（px48 gap24：72 空位 + 48/53 + 红线 49×4 + 24/32 #333）
 *                                   底部 374 高的图（px36）
 *                     右栏：720×840 大图
 *   使命 1073:1011    整幅 1080：底图 + rgba(0,0,0,.4)，48/53 白 + 红线 100×4 + 24/32 白（1202 宽）
 *   价值卡 1074:1143  #141414 py120 gap96：标题栈（1280）
 *                     轮播每屏 1280：左卡 600（白底 px55 py40，投影 4/4/20）+ 右图 680，屏间距 80
 *                     卡内 py44 两端对齐：标题 40/44 Bold #333(-1.2) + 正文 24/32 Semi #333
 *                     卡底 2px 横线（#333 底，左端 100 主题色）
 *   页尾 CTA 1071:498 沿用全站那条
 *
 * 尺寸字号一律走 CSS 变量，由组件的响应式控制项按断点写入；
 * 这里的媒体查询只翻转排布方向，绝不写死尺寸（写死会盖掉控制项，见记忆里那条坑）。
 */

.astra-cul {
  --cul-primary: #e60012;
  --cul-text: #333333;
  --cul-strong: #000000;
  --cul-muted: #808080;
  --cul-subtle: #999999;
  --cul-dark: #141414;
  --cul-frame: #d9d9d9;

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

/* 板块按设计稿 1080；开了全屏滚动时改成跟着视口走 */
.astra-cul-msg,
.astra-cul-values {
  min-height: var(--cul-height, 1080px);
}

html.astra-snap .astra-snap-section .astra-cul-msg,
html.astra-snap .astra-snap-section .astra-cul-values {
  flex: 1 1 auto;
  min-height: 0;
}

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

/* ======================================================= 寄语 1073:866 */
.astra-cul-msg {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 0 var(--cul-msg-pad, 240px);
  overflow: hidden;
}

.astra-cul-msg__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

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

.astra-cul-msg > *:not(.astra-cul-msg__bg) {
  position: relative;
  z-index: 1;
}

.astra-cul-msg__side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: var(--cul-msg-side-pad-y, 96px) var(--cul-msg-side-pad-x, 80px);
}

/* 人像相框：灰底，人像贴底 */
.astra-cul-msg__frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: var(--cul-frame-width, 520px);
  height: var(--cul-frame-height, 650px);
  max-width: 100%;
  background: var(--cul-frame);
}

.astra-cul-msg__portrait {
  position: relative;
  width: var(--cul-portrait-width, 505px);
  height: var(--cul-portrait-height, 568px);
  max-width: 100%;
  overflow: hidden;
}

/* :not() 是必须的：签名也在相框里，权重上会被这条压成 505×568 */
.astra-cul-msg__portrait > img:not(.astra-cul-msg__sign) {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.astra-cul-msg__sign {
  position: absolute;
  left: var(--cul-sign-x, 16px);
  top: var(--cul-sign-y, 189px);
  width: var(--cul-sign-width, 140px);
  height: auto;
  max-width: none;
}

.astra-cul-msg__text {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding: var(--cul-msg-text-pad-y, 200px) var(--cul-msg-text-pad-x, 32px);
}

.astra-cul-msg__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cul-msg-head-gap, 36px);
  width: 100%;
}

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

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

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

.astra-cul-msg__stats {
  display: flex;
  align-items: flex-start;
  gap: var(--cul-stat-gap, 20px);
  width: 100%;
}

.astra-cul-msg__stat {
  flex: 0 1 var(--cul-stat-width, 290px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--cul-stat-inner-gap, 32px);
}

.astra-cul-msg__value {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--cul-stat-value-height, 44px);
  margin: 0;
  padding: 0 12px;
  border-left: 2px solid var(--cul-primary);
  font-size: var(--cul-stat-value-size, 36px);
  line-height: var(--cul-stat-value-line, 40px);
  font-weight: 700;
  letter-spacing: -0.72px;
  color: var(--cul-strong);
  white-space: nowrap;
}

.astra-cul-msg__note {
  margin: 0;
  width: 100%;
  font-size: var(--cul-stat-note-size, 18px);
  line-height: var(--cul-stat-note-line, 25px);
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--cul-subtle);
  overflow-wrap: break-word;
}

/* ===================================================== 价值观 1071:810 */
.astra-cul-values {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--cul-values-gap, 0px);
  width: 100%;
  padding: var(--cul-values-pad-y, 120px) var(--cul-values-pad-x, 240px);
}

.astra-cul-values__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.astra-cul-values__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--cul-values-head-gap, 24px);
  width: 100%;
  padding: 0 var(--cul-values-head-pad, 48px);
}

/* 设计稿标题上方那块 72 高的空位（1073:1009） */
.astra-cul-values__spacer {
  display: block;
  width: 100%;
  height: var(--cul-values-spacer, 72px);
}

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

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

.astra-cul-values__shot {
  position: relative;
  width: 100%;
  height: var(--cul-values-shot-height, 374px);
  padding: 0 var(--cul-values-shot-pad, 36px);
  box-sizing: border-box;
}

.astra-cul-values__shot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* 必须把图绝对定位：当普通子元素时，它的原始宽高比会参与算高，
   把整块从 1002 撑到 1194（height:100% 在算内在尺寸时是不确定的） */
.astra-cul-values__hero {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  min-height: var(--cul-values-hero-min, 420px);
  overflow: hidden;
}

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

/* ===================================================== 价值卡 1074:1143 */
.astra-cul-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cul-cards-gap, 96px);
  width: 100%;
  padding: var(--cul-cards-pad, 120px) 0;
  background: var(--cul-dark);
}

.astra-cul-cards__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cul-cards-head-gap, 24px);
  width: 100%;
  max-width: calc(var(--cul-cards-head-width, 1280px) + 32px);
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

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

.astra-cul-cards__sub {
  margin: 0;
  width: 100%;
  font-size: var(--cul-cards-sub-size, 24px);
  line-height: var(--cul-cards-sub-line, 32px);
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--cul-subtle);
  overflow-wrap: break-word;
}

.astra-cul-cards__viewport {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cul-cards-dots-gap, 40px);
  width: 100%;
}

.astra-cul-cards__strip {
  width: 100%;
  overflow: hidden;
}

.astra-cul-cards__strip .swiper-wrapper {
  align-items: center;
}

.astra-cul-cards__slide {
  display: flex;
  align-items: stretch;
  width: min(var(--cul-slide-width, 1280px), 92vw);
  height: var(--cul-slide-height, 575px);
  filter: drop-shadow(14px 14px 6px rgba(0, 0, 0, 0.1));
}

.astra-cul-cards__card {
  flex: 0 0 var(--cul-card-width, 600px);
  max-width: 55%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--cul-card-pad-y, 40px) var(--cul-card-pad-x, 55px);
  background: #ffffff;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.astra-cul-cards__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: var(--cul-card-body-pad, 44px) 0;
}

.astra-cul-cards__name {
  margin: 0;
  width: 100%;
  font-size: var(--cul-card-name-size, 40px);
  line-height: var(--cul-card-name-line, 44px);
  font-weight: 700;
  letter-spacing: -1.2px;
  color: var(--cul-text);
  overflow-wrap: break-word;
}

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

/* 卡底那条：整条深色，左端一截主题色 */
.astra-cul-cards__bar {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  height: 2px;
  background: var(--cul-text);
  border-left: var(--cul-card-bar-lead, 100px) solid var(--cul-primary);
}

.astra-cul-cards__shot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

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

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

.astra-cul-cards__dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
  transition: background-color 0.2s ease, width 0.2s ease;
}

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

/* 开了整屏吸附时，这块比一屏高（设计稿 1080 > 实际视口）：
   轮播吃掉剩下的高度，留白和卡高按视口收一收，
   但 min() 让控制项给的值始终是上限，不会被这里写死 */
@media (min-width: 1201px) {
  html.astra-snap .astra-snap-section .astra-cul-cards {
    flex: 1 1 auto;
    min-height: 0;
    padding-block: min(var(--cul-cards-pad, 120px), 8vh);
    gap: min(var(--cul-cards-gap, 96px), 6vh);
  }

  html.astra-snap .astra-snap-section .astra-cul-cards__viewport,
  html.astra-snap .astra-snap-section .astra-cul-cards__strip {
    flex: 1 1 auto;
    min-height: 0;
  }

  html.astra-snap .astra-snap-section .astra-cul-cards__slide {
    height: 100%;
    min-height: var(--cul-slide-min, 460px);
    max-height: var(--cul-slide-height, 575px);
  }
}

/* ======================================================== 窄屏：只翻方向 */
@media (max-width: 1200px) {
  .astra-cul-msg {
    flex-direction: column;
    align-items: stretch;
    padding: var(--cul-msg-pad-narrow, 72px) 16px;
  }

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

  .astra-cul-msg__side {
    justify-content: center;
    margin-bottom: 40px;
  }

  .astra-cul-values {
    flex-direction: column;
    padding: var(--cul-values-pad-narrow, 72px) 16px;
  }

  .astra-cul-values__col,
  .astra-cul-values__hero {
    flex: 0 0 auto;
    width: 100%;
  }

  .astra-cul-values__head {
    padding: 0;
  }

  .astra-cul-values__shot {
    padding: 0;
  }

  .astra-cul-values__hero {
    margin-top: 32px;
  }

  .astra-cul-cards__slide {
    flex-direction: column;
    height: auto;
  }

  .astra-cul-cards__card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .astra-cul-cards__shot {
    flex: 0 0 auto;
    width: 100%;
    min-height: var(--cul-shot-height-narrow, 320px);
  }
}