/*
 * 内页 Banner —— 1:1 对应设计稿 Astra 6月
 *   首屏 Hero / Product Overview 1080:398：整幅 1920×720，内容 1280 居中、栈 gap 28
 *     标题 56/56(-2.24px) 白、红线 100×4 #E60012、描述 24/32(-0.24px) 白
 *   页尾 CTA  Content container 1080:311：上下留白 96、栈 gap 48、蒙版 rgba(0,0,0,.5)
 *     标题 48/53(-1.92px)、红线 100×8、描述 24/32、按钮 185×44 描边 #E5E5E5 文字 14/20 #999
 *
 * 两种形态共用一套结构，差异全部走 CSS 变量，由组件控制项写入行内样式。
 */

.astra-banner {
  --banner-min-height: 720px;
  --banner-padding: 40px;
  --banner-overlay: transparent;
  --banner-content-width: 1280px;
  --banner-gap: 48px;
  --banner-text-gap: 28px;
  --banner-title-size: 56px;
  --banner-title-line: 56px;
  --banner-title-spacing: -2.24px;
  --banner-rule-width: 100px;
  --banner-rule-height: 4px;
  --banner-rule-color: #e60012;
  --banner-desc-size: 24px;
  --banner-desc-line: 32px;
  --banner-color: #ffffff;
  --banner-btn-hover: #e60012;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--banner-min-height);
  padding: var(--banner-padding) 0;
  overflow: hidden;
}

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

.astra-banner__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 有些首屏底图设计稿是放大取中心的（如 FAQ 1051:1005 放到 169.53%），
     铺满之后再缩放一次，缩放中心由 --banner-bg-focus 调上下取景 */
  transform: scale(var(--banner-bg-zoom, 1));
  transform-origin: 50% var(--banner-bg-focus, 50%);
}

.astra-banner__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--banner-overlay);
}

.astra-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--banner-content-width);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--banner-gap);
  text-align: center;
}

.astra-banner__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--banner-text-gap);
  width: 100%;
  max-width: var(--banner-text-width, 100%);
}

/* 靠上/靠下款：project 列表页首屏 935:5779，导航压在图上、文案在可见区顶部 */
.astra-banner--top {
  align-items: flex-start;
  /* 控制项给的就是最终上边距，不再叠加通用的 --banner-padding */
  padding-top: var(--banner-offset-top, 40px);
}

.astra-banner--bottom {
  align-items: flex-end;
  padding-bottom: var(--banner-offset-top, 40px);
}

/* 左对齐款：system 详情页首屏 923:778，文案靠容器左边、字色由控制项给深色 */
.astra-banner--left .astra-banner__inner {
  align-items: flex-start;
  text-align: left;
}

.astra-banner--left .astra-banner__text {
  align-items: flex-start;
}

.astra-banner__title {
  margin: 0;
  width: 100%;
  font-size: var(--banner-title-size);
  line-height: var(--banner-title-line);
  font-weight: 700;
  letter-spacing: var(--banner-title-spacing);
  color: var(--banner-color);
  overflow-wrap: break-word;
}

.astra-banner__rule {
  flex: 0 0 auto;
  width: var(--banner-rule-width);
  height: var(--banner-rule-height);
  background: var(--banner-rule-color);
}

.astra-banner__desc {
  margin: 0;
  width: 100%;
  font-size: var(--banner-desc-size);
  line-height: var(--banner-desc-line);
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--banner-color);
}

/* ASTRA / Button —— Secondary outline / 高 44 / 图标在右（Figma 467:510） */
.astra-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 185px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid #e5e5e5;
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #999999;
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

/* hover：底色与描边转主题色，文字保持白色 */
.astra-banner__btn:hover,
.astra-banner__btn:focus-visible {
  background: var(--banner-btn-hover);
  border-color: var(--banner-btn-hover);
  color: #ffffff;
}

.astra-banner__btn-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: block;
}

.astra-banner__btn-icon path {
  stroke: currentColor;
}

/* ---------------------------------------------------------- 响应式 */
/* 设计稿只提供 1920 桌面稿。高度、字号、行高、字距、间距、红线粗细这些
 * 都由组件的响应式控制项按断点输出（Elementor 生成的选择器权重高于这里的
 * 媒体查询），所以本段只留控制项没覆盖的属性，避免写死代码。 */
@media (max-width: 768px) {
  .astra-banner {
    --banner-padding: 32px;
  }
}

/* 搜索框（Download 首屏 1054:2514）：706×58 的胶囊，右端嵌一个 116 宽的主题色按钮 */
.astra-banner__search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--banner-search-width, 706px);
  height: var(--banner-search-height, 58px);
  border-radius: 999px;
  background: #ffffff;
  overflow: hidden;
}

.astra-banner__search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 calc(var(--banner-search-btn, 116px) + 16px) 0
    var(--banner-search-pad, 32px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: var(--banner-search-size, 14px);
  line-height: 20px;
  font-weight: 600;
  color: #333333;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.astra-banner__search-input::placeholder {
  color: #999999;
  opacity: 1;
}

.astra-banner__search-input::-webkit-search-cancel-button {
  margin-right: 8px;
}

.astra-banner__search-btn {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--banner-search-btn, 116px);
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--banner-search-bg, #e60012);
  color: #ffffff;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.astra-banner__search-btn:hover {
  filter: brightness(1.1);
}

.astra-banner__search-btn svg {
  display: block;
  width: var(--banner-search-icon, 32px);
  height: var(--banner-search-icon, 32px);
}

/* 主题没定义时兜底，别让 label 露出来 */
.astra-banner .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}