/*
 * 产品分类页 · 二级分类列表 —— 1:1 对应设计稿 Astra 6月 / Solar Panel 799:1850
 *   单块 869:1793：上下留白 96、栈间距 44，整块高 876
 *     标题行 869:1764：上下 20、下边框 2px #D9D9D9
 *       标题 32/38 SemiBold(-0.64px)、右侧系列名 18/28 Regular #E60012
 *     内容行 869:1768：左右各 720，高 562
 *       文字面板 869:1769：白底、内边距 80、底对齐、栈间距 45
 *         要点组 gap 16，单条 18/25 Bold(-0.36px)；描述 16/24 #333；两者间距 36
 *       按钮 869:1787：180×56 描边 1px #E60012，文字 14/20 SemiBold #E60012 + 右箭头
 *     配图 720×562 cover；奇数块图在右，偶数块图在左
 *
 * 列表项就是当前分类的下级分类，内容取「产品分类」的 ACF 字段 card_*。
 */

.astra-catlist {
  --catlist-primary: #e60012;
  --catlist-text-strong: #000000;
  --catlist-text: #333333;
  --catlist-border: #d9d9d9;
  --catlist-panel-bg: #ffffff;
  --catlist-item-padding: 96px;
  --catlist-body-height: 562px;
  --catlist-panel-padding: 80px;
  --catlist-media-ratio: 50%;
  --catlist-title-size: 32px;
  --catlist-title-line: 38px;
  --catlist-series-size: 18px;
  --catlist-point-size: 18px;
  --catlist-point-line: 25px;
  --catlist-desc-size: 16px;
  --catlist-desc-line: 24px;
}

.astra-catlist__item {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: var(--catlist-item-padding) 0;
}

/* -------------------------------------------------- 标题行 869:1764 */
.astra-catlist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 2px solid var(--catlist-border);
}

.astra-catlist__title {
  margin: 0;
  font-size: var(--catlist-title-size);
  line-height: var(--catlist-title-line);
  font-weight: 600;
  letter-spacing: -0.64px;
  color: var(--catlist-text-strong);
}

.astra-catlist__series {
  flex: 0 0 auto;
  font-size: var(--catlist-series-size);
  line-height: 28px;
  font-weight: 400;
  color: var(--catlist-primary);
}

/* -------------------------------------------------- 内容行 869:1768 */
.astra-catlist__body {
  display: flex;
  align-items: center;
}

.astra-catlist__item:nth-child(even) .astra-catlist__body {
  flex-direction: row-reverse;
}

.astra-catlist__panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--catlist-body-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 45px;
  /* 设计稿面板 720、文字 592 起于左边 80，右侧只剩 48。
   * 右内边距按 0.6 倍跟随，要点才能和设计稿一样不多折行。 */
  padding: var(--catlist-panel-padding)
           calc(var(--catlist-panel-padding) * 0.6)
           var(--catlist-panel-padding)
           var(--catlist-panel-padding);
  background: var(--catlist-panel-bg);
}

.astra-catlist__stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.astra-catlist__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.astra-catlist__point {
  font-size: var(--catlist-point-size);
  line-height: var(--catlist-point-line);
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--catlist-text-strong);
}

/* 设计稿要点前是一个居中点，后台只填正文，符号由这里补 */
.astra-catlist__point::before {
  content: "·";
  margin-right: 0.35em;
}

.astra-catlist__desc {
  margin: 0;
  font-size: var(--catlist-desc-size);
  line-height: var(--catlist-desc-line);
  font-weight: 400;
  color: var(--catlist-text);
}

.astra-catlist__desc p {
  margin: 0;
}

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

/* ASTRA / Button —— Secondary outline / 高 56 / 图标在右（Figma 467:510） */
.astra-catlist__btn {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 180px;
  height: 56px;
  padding: 0 24px;
  border: 1px solid var(--catlist-primary);
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--catlist-primary);
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

/* 与页尾 CTA 按钮一致：hover 底色与描边转主题色，文字转白 */
.astra-catlist__btn:hover,
.astra-catlist__btn:focus-visible {
  background: var(--catlist-primary);
  border-color: var(--catlist-primary);
  color: #ffffff;
}

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

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

/* -------------------------------------------------- 配图 869:1765 */
.astra-catlist__media {
  flex: 0 0 var(--catlist-media-ratio);
  width: var(--catlist-media-ratio);
  align-self: stretch;
  min-height: var(--catlist-body-height);
  position: relative;
  overflow: hidden;
}

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

.astra-catlist__empty {
  margin: 0;
  padding: 64px 0;
  text-align: center;
  font-size: 18px;
  line-height: 28px;
  color: #808080;
}

/* ---------------------------------------------------------- 响应式 */
/* 设计稿只有 1920 桌面稿。上下留白、区块高度、面板内边距、字号行高
 * 由组件的响应式控制项按断点输出，本段只留控制项没覆盖的属性。 */
@media (max-width: 1200px) {
  .astra-catlist__body,
  .astra-catlist__item:nth-child(even) .astra-catlist__body {
    flex-direction: column;
  }

  .astra-catlist__panel,
  .astra-catlist__media {
    flex: 1 1 auto;
    width: 100%;
  }

  .astra-catlist__media {
    order: -1;
    min-height: 0;
    aspect-ratio: 720 / 480;
  }

  .astra-catlist__panel {
    min-height: 0;
    justify-content: flex-start;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .astra-catlist__item {
    gap: 24px;
  }

  .astra-catlist__head {
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px 0;
  }

  /* 窄屏两边留白改回对称，0.6 倍的右内边距在小尺寸下会看出偏心 */
  .astra-catlist__panel {
    padding-right: var(--catlist-panel-padding);
  }

  .astra-catlist__stack {
    gap: 24px;
  }

  .astra-catlist__points {
    gap: 12px;
  }

  .astra-catlist__btn {
    width: 100%;
  }
}