/*
 * 系统列表页 —— 1:1 对应设计稿 Astra 6月 / System 908:2888
 * 三个区块共用这一份样式（首屏直接复用 astratech-page-banner，不在这里）：
 *   特性区 1215:1642  白底、上下 120、栈间距 80
 *     左标题 48/53(-1.92px) + 红线 100×4 + 副标题 24/32 #333
 *     三栏 gap 20、高 260、左右 32，底边 2px：默认 #DEDFE0，hover 转 #E60012
 *       图标 32、标题 28/34(-0.56px)、说明 18/25 Bold #999、Learn More 14/20 红 + 箭头
 *     底部描边按钮 220×56
 *   网格区 923:708   #F9F9F9 底、上下 120，内层左右各 64
 *     筛选条：项 上下 10 左右 20、18/25 Bold，选中红字 + 2px 红下边框；右侧 View all recent
 *     卡片 2 列 gap 36：图 462、正文左右 36 上下 32、栈间距 48
 *       分类 24/32 #333、标题 32/38(-0.64px)、说明 24/32 #333
 *       两枚按钮 160×44：描边红 + 实心红
 *   案例区 933:1951  白底、上下 96、栈间距 96
 *     左标题 + 轮播进度条 95×4 + 副标题 24/32 #333
 *     卡片 462：图 320、栈间距 32，日期 24/32 #000、说明 24/32 #333、描边按钮 160×44
 */

.astra-sys {
  --sys-primary: #e60012;
  --sys-text-strong: #000000;
  --sys-text: #333333;
  --sys-text-subtle: #999999;
  --sys-border: #dedfe0;
  --sys-bg: #ffffff;
}

/* 通用：左对齐区块标题 */
.astra-sys__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

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

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

.astra-sys__sub {
  margin: 0;
  width: 100%;
  font-size: var(--sys-sub-size, 24px);
  line-height: var(--sys-sub-line, 32px);
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--sys-text);
}

/* 通用：ASTRA / Button（Figma 467:510） */
.astra-sys__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--sys-primary);
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--sys-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

.astra-sys__btn:hover,
.astra-sys__btn:focus-visible {
  background: var(--sys-primary);
  color: #ffffff;
}

.astra-sys__btn--solid {
  background: var(--sys-primary);
  color: #ffffff;
}

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

.astra-sys__btn--lg {
  height: 56px;
  padding: 0 24px;
  min-width: 220px;
}

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

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

.astra-sys__empty {
  margin: 0;
  padding: 48px 0;
  text-align: center;
  font-size: 18px;
  line-height: 28px;
  color: var(--sys-text-subtle);
}

/* ==================================================== 特性区 1215:1642 */
.astra-sys-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sys-features-gap, 80px);
  padding: var(--sys-features-padding, 120px) 0;
  background: var(--sys-bg);
}

.astra-sys-features__stack {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}

.astra-sys-features__item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px;
  border-bottom: 2px solid var(--sys-border);
  transition: border-color 0.3s;
}

.astra-sys-features__item:hover {
  border-bottom-color: var(--sys-primary);
}

.astra-sys-features__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.astra-sys-features__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: block;
}

.astra-sys-features__icon img,
.astra-sys-features__icon svg {
  display: block;
  width: 32px;
  height: 32px;
}

.astra-sys-features__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.astra-sys-features__title {
  margin: 0;
  width: 100%;
  font-size: var(--sys-feature-title-size, 28px);
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.56px;
  color: var(--sys-text-strong);
}

.astra-sys-features__desc {
  margin: 0;
  width: 100%;
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--sys-text-subtle);
}

.astra-sys-features__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--sys-primary);
  text-decoration: none;
  transition: opacity 0.3s;
}

.astra-sys-features__link:hover {
  opacity: 0.75;
}

/* ==================================================== 网格区 923:708 */
.astra-sys-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: var(--sys-grid-padding, 120px) 0;
  /* 主导航按分类跳进来时锚到这里；吸顶导航 80 高，留 100 免得筛选条被压住
     （跟产品总页的 --pcat-scroll-offset 一个道理） */
  scroll-margin-top: var(--sys-scroll-offset, 100px);
}

.astra-sys-grid__header {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 0 64px;
}

.astra-sys-grid__tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.astra-sys-grid__tab {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 20px 8px; /* 设计稿页签整块 45 高，红线算在内 */
  font-family: inherit;
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--sys-text-strong);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}

.astra-sys-grid__tab:hover {
  color: var(--sys-primary);
}

.astra-sys-grid__tab.is-active {
  color: var(--sys-primary);
  border-bottom-color: var(--sys-primary);
}

/* 从主导航按电压档进来时挂出来的筛选标签。
   设计稿的筛选条只有容量一层，电压这层没有页签可选中，
   所以用一枚小标签说明「现在还按这个电压筛着」，点 ✕ 退回该容量档的全部。
   样式跟着筛选条走：同样的 18/25 Bold 和主题红，只是做成描边胶囊以示区别。 */
.astra-sys-grid__chip {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 6px 12px 6px 14px;
  background: none;
  border: 1px solid var(--sys-primary);
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--sys-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.astra-sys-grid__chip:hover,
.astra-sys-grid__chip:focus-visible {
  background: var(--sys-primary);
  color: #ffffff;
}

/* 叉：两根 1.5px 的斜杠，跟留言弹窗那个关闭键一套画法 */
.astra-sys-grid__chip-x {
  position: relative;
  width: 12px;
  height: 12px;
}

.astra-sys-grid__chip-x::before,
.astra-sys-grid__chip-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
}

.astra-sys-grid__chip-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.astra-sys-grid__chip-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.astra-sys-grid__more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--sys-primary);
  text-decoration: none;
  transition: opacity 0.3s;
}

.astra-sys-grid__more:hover {
  opacity: 0.75;
}

.astra-sys-grid__cards {
  display: grid;
  grid-template-columns: repeat(var(--sys-grid-columns, 2), minmax(0, 1fr));
  gap: 36px;
  width: 100%;
  padding: 0 64px;
}

.astra-sys-grid__card {
  display: flex;
  flex-direction: column;
  background: var(--sys-bg);
}

.astra-sys-grid__card[hidden] {
  display: none;
}

/* 图和标题都是链接，指向该系统自己的页面 */
.astra-sys-grid__media {
  display: block;
  position: relative;
  width: 100%;
  height: var(--sys-card-media-height, 462px);
  overflow: hidden;
}

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

.astra-sys-grid__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 32px 36px;
}

.astra-sys-grid__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.astra-sys-grid__cat,
.astra-sys-grid__desc {
  margin: 0;
  width: 100%;
  font-size: var(--sys-card-sub-size, 24px);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--sys-text);
}

.astra-sys-grid__title {
  margin: 0;
  width: 100%;
  font-size: var(--sys-card-title-size, 32px);
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.64px;
  color: var(--sys-text-strong);
}

.astra-sys-grid__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.astra-sys-grid__title a:hover,
.astra-sys-grid__title a:focus-visible {
  color: var(--sys-primary);
}

.astra-sys-grid__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.astra-sys-grid__actions .astra-sys__btn {
  min-width: 160px;
}

/* ==================================================== 案例区 933:1951 */
.astra-sys-stories {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sys-stories-gap, 96px);
  padding: var(--sys-stories-padding, 96px) 0;
  background: var(--sys-bg);
}

/* 设计稿这里不是普通红线，是轮播进度条（933:1954，95×4）：
 * 轨道透明、滑块红色，宽度按可视比例走 */
.astra-sys-stories__progress {
  position: relative;
  width: 285px;
  max-width: 100%;
  height: 4px;
  background: transparent;
  border-radius: 0;
}

.astra-sys-stories__progress .swiper-scrollbar-drag {
  background: var(--sys-primary);
  border-radius: 0;
}

.astra-sys-stories__viewport {
  width: 100%;
  overflow: hidden;
}

.astra-sys-stories__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  height: auto;
  text-decoration: none;
  color: inherit;
}

.astra-sys-stories__media {
  position: relative;
  width: 100%;
  height: var(--sys-story-media-height, 320px);
  background: #d9d9d9;
  overflow: hidden;
}

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

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

.astra-sys-stories__meta {
  margin: 0;
  width: 100%;
  font-size: var(--sys-story-size, 24px);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--sys-text-strong);
}

.astra-sys-stories__desc {
  margin: 0;
  width: 100%;
  font-size: var(--sys-story-size, 24px);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--sys-text);
}

/* ---------------------------------------------------------- 响应式 */
/* 设计稿只有 1920 桌面稿。上下留白与字号由组件的响应式控制项按断点输出，
 * 本段只处理控制项没覆盖的排布。 */
@media (max-width: 1400px) {
  .astra-sys-grid__header,
  .astra-sys-grid__cards {
    padding: 0 24px;
  }

  .astra-sys-features__item {
    padding: 0 20px;
  }
}

@media (max-width: 1200px) {
  .astra-sys-features__stack {
    flex-wrap: wrap;
  }

  .astra-sys-features__item {
    flex: 1 1 calc(50% - 10px);
    min-width: 260px;
    min-height: 0;
    padding: 24px 20px;
  }

  .astra-sys-grid__header {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* 卡片从 990 起变单列（组件的 columns 控制项 mobile_extra = 1）。
   单列之后卡片之间不用再对齐，定高就只剩坏处：图是 object-fit:cover，
   高度对不上原图比例就得裁——实测 390 宽时定高 320 会把 550×395 的图左右各裁 43，
   900 宽时定高 440 会上下各裁 55。改成按原图比例自适应。
   注意是把「图」从绝对定位改回常规流（父级的 relative 保留），
   父级若改成 static，图会跑去贴更外层的定位祖先。 */
@media (max-width: 990px) {
  .astra-sys-grid__media {
    height: auto;
  }

  .astra-sys-grid__media img {
    position: static;
    height: auto;
  }
}

@media (max-width: 768px) {
  .astra-sys__title {
    font-size: clamp(15px, 4.8vw, 26px);
    line-height: clamp(18.46px, 5.91vw, 32px);
    letter-spacing: -0.5px;
  }

  .astra-sys__sub {
    font-size: clamp(12px, 3.6vw, 15px);
    line-height: clamp(19.2px, 5.76vw, 24px);
  }

  /* 只有卡片里那对按钮要撑满换行；纵向排布的区块按钮不能吃这条，
   * 否则 flex-basis 走的是主轴（高度），按钮会被压扁 */
  .astra-sys-grid__actions .astra-sys__btn {
    flex: 1 1 100%;
  }

  .astra-sys__btn--lg {
    flex: 0 0 auto;
    width: 100%;
    min-height: 48px;
  }

  .astra-sys-features {
    gap: 40px;
  }

  .astra-sys-features__item {
    flex: 1 1 100%;
  }

  .astra-sys-features__title {
    font-size: clamp(13px, 4.2vw, 20px);
    line-height: clamp(18.2px, 5.88vw, 28px);
  }

  .astra-sys-features__desc {
    font-size: clamp(12px, 3.6vw, 15px);
    line-height: clamp(19.2px, 5.76vw, 24px);
  }

  .astra-sys-grid {
    gap: 32px;
  }

  .astra-sys-grid__header,
  .astra-sys-grid__cards {
    padding: 0;
  }

  .astra-sys-grid__tab {
    padding: 8px 12px;
    font-size: clamp(12px, 3.6vw, 15px);
  }

  .astra-sys-grid__chip {
    padding: 5px 10px 5px 12px;
    font-size: clamp(12px, 3.2vw, 13px);
    line-height: clamp(18.46px, 4.92vw, 20px);
  }

  .astra-sys-grid__more {
    font-size: clamp(12px, 3.6vw, 15px);
  }

  .astra-sys-grid__body {
    gap: 24px;
    padding: 24px 20px;
  }

  .astra-sys-grid__cat,
  .astra-sys-grid__desc,
  .astra-sys-stories__meta,
  .astra-sys-stories__desc {
    font-size: clamp(12px, 3.6vw, 15px);
    line-height: clamp(19.2px, 5.76vw, 24px);
  }

  .astra-sys-grid__title {
    font-size: clamp(13px, 4.2vw, 20px);
    line-height: clamp(18.2px, 5.88vw, 28px);
  }

  .astra-sys-stories {
    gap: 40px;
  }

  .astra-sys-stories__body,
  .astra-sys-stories__card {
    gap: 16px;
  }
}