/* 首页 Banner —— 对应设计稿 Astra 6月 / Home 799:2053
   文案栈 402:1399（左对齐，gap 44）、分页点 953:576（8px / 选中 80×8） */

.index_banner_box {
  --ib-accent: #e60012;        /* color/brand/primary */
  --ib-dot: #fdf1f1;           /* color/brand/subtle */
  --ib-text: #ffffff;          /* color/text/inverse */
  --ib-offset: 80px;           /* 页头高度，JS 按实测覆盖 */
  --ib-overlay: 0;             /* 蒙版深度，由组件控件写入 */
  --ib-gutter: 48px;           /* 内容区最小左右留白，按断点收窄 */

  position: relative;
  width: 100%;
  height: calc(100vh - var(--ib-offset));
  /* 手机浏览器的地址栏会吃掉 100vh 的一截，dvh 才是真正可见的高度；
     不支持 dvh 的浏览器会忽略这一行，回落到上面的 100vh */
  height: calc(100dvh - var(--ib-offset));
  min-height: 420px;           /* 横屏手机上别塌成一条 */
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.index_banner_box *,
.index_banner_box *::before,
.index_banner_box *::after {
  box-sizing: border-box;
}

.index_banner_sw,
.index_banner_sw .swiper-slide {
  width: 100%;
  height: 100%;
}

.index_banner_sw .swiper-slide {
  position: relative;
  overflow: hidden;
}

/* ---------------- 背景 */

.index_banner_swiper_bg {
  position: relative;
  width: 100%;
  height: 100%;
}

.index_banner_swiper_bg img,
.index_banner_swiper_bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------- 文案层 */

/* 设计稿把文案按整个 1080 屏居中（页头是压在图上的），而实际页头不透明、
   banner 从页头下方才开始。这里补一个等于页头高的下内边距，把居中轴上移相同距离，
   文案位置才和设计稿对齐。 */
.index_banner_content_box {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-bottom: var(--ib-offset);
}

/* 设计稿没有蒙版，默认透明；照片过亮时可在组件里调 */
.index_banner_content_box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--ib-overlay));
  pointer-events: none;
}

/* 设计稿 1920 下内容宽 1280、左右各 320 */
.index_banner_inner {
  position: relative;
  z-index: 1;
  width: min(1280px, 100% - var(--ib-gutter) * 2);
  margin: 0 auto;
}

.index_banner_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 设计稿 44，跟着视口连续收到 20 */
  gap: clamp(20px, 2.3vw, 44px);
  animation-delay: 0.2s;
}

.index_banner_content h1,
.index_banner_content h2 {
  margin: 0;
  /* 设计稿 64/64，字距 -2.56px = -0.04em，随字号缩放。
     原来是 clamp(32px, 3.34vw, 64px)：3.34vw 在 958px 以下就低于 32px 下限，
     于是从平板一路到 320px 手机全都锁死在 32px，小屏上标题占满整宽还要换四行。
     换成一次函数，过 (390, 27.6) 和 (1920, 64) 两点，全程连续。 */
  font-size: clamp(26px, calc(18.8px + 2.353vw), 64px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--ib-text);
}

.index_banner_content h1 img,
.index_banner_content h2 img {
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
  max-width: 26%;
}

.index_banner_content p {
  margin: 0;
  /* 设计稿 24/32，字距 -0.24px = -0.01em。
     同样避开下限锁死：1.25vw 在 1280px 以下就跌破 16px，正文从笔记本起就不再缩了 */
  max-width: 742px;
  font-size: clamp(14px, calc(12.7px + 0.588vw), 24px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ib-text);
}

/* ---------------- 按钮：ASTRA / Button，Secondary outline，高 44 */

.index_banner_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 148px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ib-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ib-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.index_banner_btn svg {
  flex: none;
  color: currentColor;
}

.index_banner_btn:hover,
.index_banner_btn:focus-visible {
  background: var(--ib-accent);
  border-color: var(--ib-accent);
  color: #fff;
}

/* ---------------- 分页点 */

.index_banner_page {
  bottom: 60px !important;
  z-index: 3;
}

.index_banner_page .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 5px !important; /* 设计稿间距 10px */
  background: var(--ib-dot);
  border-radius: 999px;
  opacity: 1;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.index_banner_page .swiper-pagination-bullet-active {
  width: 80px;
  background: var(--ib-accent);
}

/* ---------------- 响应式
   断点与本站 Elementor 的自定义断点一致：1768 / 1400 / 1200 / 990 / 768。

   字号和行间距不放在断点里，用 clamp 连续缩放（见上面 h1 / p / gap）——
   标题在断点之间跨度太大，分档会在边界上突然跳一截；而边距、分页点这些
   离散的量才按断点给。 */

@media (max-width: 1768px) {
  .index_banner_box {
    --ib-gutter: 40px;
  }
}

@media (max-width: 1400px) {
  .index_banner_box {
    --ib-gutter: 32px;
  }
}

@media (max-width: 1200px) {
  .index_banner_box {
    --ib-gutter: 28px;
  }

  .index_banner_page {
    bottom: 40px !important;
  }

  .index_banner_page .swiper-pagination-bullet-active {
    width: 56px;
  }
}

@media (max-width: 990px) {
  .index_banner_box {
    --ib-gutter: 24px;
  }

  /* 窄屏页头是不透明的，banner 从它下面才开始，没有被盖住的部分要补，
     文案直接在可见区域里居中 */
  .index_banner_content_box {
    padding-bottom: 0;
  }
}

@media (max-width: 768px) {
  .index_banner_box {
    --ib-gutter: 20px;

    /* 移动端高度按视口宽度定死，不再是「一屏减页头」。
       盖掉上面的 100vh / 100dvh 两条，min-height 也要撤，
       否则窄到 365px 以下会被 420px 的兜底顶住。 */
    height: 115vw;
    min-height: 0;
  }

  .index_banner_page {
    bottom: 28px !important;
  }

  .index_banner_page .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 4px !important;
  }

  .index_banner_page .swiper-pagination-bullet-active {
    width: 36px;
  }

  /* 分页点会压到按钮上，给文案栈底部让出位置。
     点在 bottom:28、直径 6，占到底部 34px，留 10px 余量即可；
     高度定死成 115vw 之后这里每多一点都会挤到 320px 档的文案 */
  .index_banner_content_box {
    padding-bottom: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .index_banner_box *,
  .index_banner_box *::before,
  .index_banner_box *::after {
    transition: none !important;
    animation: none !important;
  }
}