/*
 * 产品分类页 · 首屏 Banner + 参数条 —— 1:1 对应设计稿 Astra 6月 / Solar Panel 799:1850
 *   首屏 867:1593：整幅 1920×960，文案左起 x=320（内容区 1280），栈间距 40
 *     标题 48/53(-1.92px)、红线 100×4 #E60012、要点 24/32
 *     （设计稿这块是一张扁平参考图，以上尺寸为按 1920 原图实测还原）
 *   参数条 869:1604：白卡 1280×180，y=865 压住首屏底边 95px
 *     内边距 32/28，每项 306 宽、左右各 32、竖分隔 1px #EAECED
 *     数值 18/25(-0.36px)、说明 14/20 #333，投影 0 13px 18.85px rgba(197,197,197,.15)
 *
 * 内容全部来自「产品分类」的 ACF 字段（hero_bg / hero_title / hero_points / hero_stats）。
 */

.astra-cathero {
  --cathero-height: 960px;
  --cathero-content-width: 1280px;
  --cathero-overlay: transparent;
  --cathero-text-gap: 40px;
  --cathero-title-size: 48px;
  --cathero-title-line: 53px;
  --cathero-title-spacing: -1.92px;
  --cathero-title-color: #000000;
  --cathero-point-size: 24px;
  --cathero-point-line: 32px;
  --cathero-point-color: #333333;
  --cathero-rule-width: 100px;
  --cathero-rule-height: 4px;
  --cathero-rule-color: #e60012;
  --cathero-stats-overlap: 95px;
  --cathero-stats-bg: #ffffff;
  --cathero-stats-border: #eaeced;
}

/* ------------------------------------------------------------ 首屏 */
.astra-cathero__banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--cathero-height);
  padding: 40px 0;
  overflow: hidden;
}

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

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

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

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

.astra-cathero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cathero-text-gap);
}

.astra-cathero__title {
  margin: 0;
  font-size: var(--cathero-title-size);
  line-height: var(--cathero-title-line);
  font-weight: 700;
  letter-spacing: var(--cathero-title-spacing);
  color: var(--cathero-title-color);
  overflow-wrap: break-word;
}

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

.astra-cathero__points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.astra-cathero__point {
  font-size: var(--cathero-point-size);
  line-height: var(--cathero-point-line);
  font-weight: 600;
  color: var(--cathero-point-color);
}

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

/* ---------------------------------------------------------- 参数条 */
.astra-cathero__stats-wrap {
  position: relative;
  z-index: 2;
  max-width: calc(var(--cathero-content-width) + 32px);
  margin: calc(var(--cathero-stats-overlap) * -1) auto 0;
  padding: 0 16px;
}

.astra-cathero__stats {
  display: flex;
  align-items: stretch;
  padding: 32px 28px;
  background: var(--cathero-stats-bg);
  box-shadow: 0 13px 18.85px rgba(197, 197, 197, 0.15);
}

.astra-cathero__stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 32px;
  border-right: 1px solid var(--cathero-stats-border);
}

.astra-cathero__stat:last-child {
  border-right: 0;
}

.astra-cathero__stat-value {
  margin: 0;
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #000000;
}

.astra-cathero__stat-desc {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #333333;
}

/* ---------------------------------------------------------- 响应式 */
/* 设计稿只有 1920 桌面稿。高度、字号、行高、字距、栈间距、压边距离
 * 由组件的响应式控制项按断点输出（Elementor 生成的选择器权重高于这里的
 * 媒体查询），本段只留控制项没覆盖的属性。 */
@media (max-width: 1200px) {
  .astra-cathero__stats {
    flex-wrap: wrap;
    padding: 24px 12px;
  }

  .astra-cathero__stat {
    flex: 1 1 50%;
    padding: 16px 20px;
  }

  .astra-cathero__stat:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 768px) {
  .astra-cathero__banner {
    padding: 32px 0;
  }

  .astra-cathero__stat {
    flex: 1 1 100%;
    border-right: 0;
    border-bottom: 1px solid var(--cathero-stats-border);
  }

  .astra-cathero__stat:last-child {
    border-bottom: 0;
  }
}