/*
 * 解决方案列表页 —— 1:1 对应设计稿 Astra 6月 / Solution 891:113
 *   首屏 891:222：1920×960，左内边距 320、上 48 下 120，文案左对齐、栈间距 40、宽 622
 *     标题 48/53(-1.92px) 白、红线 100×4、描述 18/25 Bold(-0.36px) 白
 *   参数条 893:239：结构与产品分类页那条完全一致，直接复用 .astra-cathero__stats*
 *     内容改成「方案标题 + 方案导语(ACF tagline)」，压住首屏 91
 *   列表 893:319：每行上下留白 96、图文间距 40，图 708×532 / 文 693
 *     标题 36/40(-0.72px)、双线分隔（#EAECED 通条 + #E60012 89 段）、正文 18/25 Bold #808080
 *     按钮实心红 高 56、内边距 24、16/20 Bold 白
 *     奇数行图在左配 #F9F9F9 底，偶数行图在右配 #FFFFFF 底
 */

.astra-sol {
  --sol-primary: #e60012;
  --sol-text-strong: #000000;
  --sol-text-muted: #808080;
  --sol-line: #eaeced;
  --sol-band-odd: #f9f9f9;
  --sol-band-even: #ffffff;
  --sol-row-padding: 96px;
  --sol-row-gap: 40px;
  --sol-media-ratio: 49.13%;
  --sol-body-height: 532px;
  --sol-title-size: 36px;
  --sol-title-line: 40px;
  --sol-body-size: 18px;
  --sol-body-line: 25px;
}

/* ------------------------------------------------------ 首屏 891:222 */
.astra-sol-hero {
  --sol-hero-height: 960px;
  --sol-hero-text-width: 622px;
  --sol-hero-title-size: 48px;
  --sol-hero-title-line: 53px;
  --sol-hero-desc-size: 18px;
  --sol-hero-desc-line: 25px;
  --sol-hero-color: #ffffff;
  --sol-hero-overlay: transparent;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: var(--sol-hero-height);
  padding: 48px 0 120px;
  overflow: hidden;
}

.astra-sol-hero--center {
  align-items: center;
  text-align: center;
}

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

.astra-sol-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.astra-sol-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sol-hero-overlay);
}

/* 左右各留 16 防止窄屏贴边；max-width 把这 32 加回去，
 * 内容盒才正好等于设定宽度（1920 下 = 设计稿的 1280 @ x=320）。 */
.astra-sol-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--sol-hero-content-width, 1280px) + 32px);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: inherit;
}

.astra-sol-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: var(--sol-hero-text-width);
}

.astra-sol-hero--center .astra-sol-hero__text {
  align-items: center;
}

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

.astra-sol-hero__rule {
  flex: 0 0 auto;
  width: 100px;
  height: 4px;
  background: var(--sol-primary);
}

.astra-sol-hero__desc {
  margin: 0;
  width: 100%;
  font-size: var(--sol-hero-desc-size);
  line-height: var(--sol-hero-desc-line);
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--sol-hero-color);
}

/* ------------------------------------------------------ 列表 893:319 */
.astra-sol-list__row {
  padding: var(--sol-row-padding) 0;
  background: var(--sol-band-odd);
}

.astra-sol-list__row:nth-child(even) {
  background: var(--sol-band-even);
}

/* 底色是通栏的，要挣脱外层容器的左右留白。
 * 不用 100vw（含滚动条会溢出），改成按容器百分比往两侧顶，
 * 这个百分比刚好等于一侧留白（容器 75% 时为 16.667%）。 */
.astra-sol-list__row {
  --sol-bleed: 16.667%;
  margin-left: calc(var(--sol-bleed) * -1);
  margin-right: calc(var(--sol-bleed) * -1);
  padding-left: var(--sol-bleed);
  padding-right: var(--sol-bleed);
}

.astra-sol-list__inner {
  display: flex;
  align-items: center;
  gap: var(--sol-row-gap);
}

.astra-sol-list__row:nth-child(even) .astra-sol-list__inner {
  flex-direction: row-reverse;
}

.astra-sol-list__media {
  flex: 0 0 var(--sol-media-ratio);
  width: var(--sol-media-ratio);
  height: var(--sol-body-height);
  position: relative;
  overflow: hidden;
}

.astra-sol-list__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.astra-sol-list__text {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--sol-body-height);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 92px;
}

.astra-sol-list__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

.astra-sol-list__title {
  margin: 0;
  width: 100%;
  font-size: var(--sol-title-size);
  line-height: var(--sol-title-line);
  font-weight: 700;
  letter-spacing: -0.72px;
  color: var(--sol-text-strong);
}

/* 双线分隔 893:272：通条 #EAECED 上面压一段 89 的红线 */
.astra-sol-list__divider {
  position: relative;
  width: 100%;
  height: 2px;
  background: var(--sol-line);
}

.astra-sol-list__divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 89px;
  height: 2px;
  background: var(--sol-primary);
}

.astra-sol-list__desc {
  margin: 0;
  width: 100%;
  font-size: var(--sol-body-size);
  line-height: var(--sol-body-line);
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--sol-text-muted);
}

.astra-sol-list__desc p {
  margin: 0;
}

.astra-sol-list__desc p + p {
  margin-top: 12px;
}

/* ASTRA / Button —— Primary 实心 / 高 56 / 图标在右（Figma 467:510） */
.astra-sol-list__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 24px;
  border: 1px solid var(--sol-primary);
  background: var(--sol-primary);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.16px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s, border-color 0.3s;
}

.astra-sol-list__btn:hover,
.astra-sol-list__btn:focus-visible {
  background: #c1000f;
  border-color: #c1000f;
}

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

.astra-sol-list__btn-icon path {
  stroke: currentColor;
}

.astra-sol__empty {
  margin: 0;
  padding: 64px 0;
  text-align: center;
  font-size: 18px;
  line-height: 28px;
  color: var(--sol-text-muted);
}

/* ---------------------------------------------------------- 响应式 */
/* 设计稿只有 1920 桌面稿。上下留白、字号行高、区块高度由组件的响应式控制项
 * 按断点输出，本段只处理控制项没覆盖的排布与破格宽度。 */
@media (max-width: 1768px) {
  .astra-sol-list__row {
    --sol-bleed: 10%;
  }
}

@media (max-width: 1400px) {
  .astra-sol-list__row {
    --sol-bleed: 4.348%;
  }

  .astra-sol-list__text {
    gap: 48px;
  }
}

@media (max-width: 1200px) {
  .astra-sol-hero {
    padding: 40px 0 64px;
  }

  .astra-sol-list__inner,
  .astra-sol-list__row:nth-child(even) .astra-sol-list__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .astra-sol-list__media {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 708 / 532;
  }

  .astra-sol-list__text {
    min-height: 0;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .astra-sol-hero__text {
    gap: 20px;
  }

  .astra-sol-list__block {
    gap: 20px;
  }

  .astra-sol-list__btn {
    width: 100%;
    height: 48px;
    font-size: clamp(12px, 3.6vw, 15px);
  }
}