/*
 * 项目详情页 —— 1:1 对应设计稿 Astra 6月 / 943:2550
 *
 *   首屏 943:2551      与列表页同款（page-banner 左对齐 + 靠上 126）
 *   项目参数 957:483   白底，左栏 pt20/px48 高 580：标题 48/53 + 红线 100×4，
 *                      下面「Project Overview」24/32 + 5 行参数（18/25 Bold #333，标签列 208）
 *                      右栏 811.48 宽、内边距 20，放项目大图
 *   数据条 957:484     上下各 2px #DEDFE0、上下 36：三等分，数值 56/56 Bold 主题色，
 *                      说明 28/34 #808080，中间 2px×100 竖线
 *   项目简述 957:526   左文右图，间距 48、左右 32：正文 24/32 #333，图 707×248
 *   总结区 961:157     上半 #F9F9F9、下半白（533 处分界），上下 120：
 *                      左标题 48/53 + 红线 + 副标题 24/32 #808080，右手机图 284×581（上移 75）
 *                      三条要点：图标 32 + 标题 24/32 + 1px×48 竖线 + 说明 18/25 Bold，行间 1px 线
 *                      两个按钮：实底主题色 / 描边 #808080，高 56
 *
 * 尺寸字号走 CSS 变量，由组件的响应式控制项按断点写入。
 */

.astra-pjd {
  --pjd-primary: #e60012;
  --pjd-primary-dark: #c1000f;
  --pjd-text: #333333;
  --pjd-strong: #000000;
  --pjd-muted: #808080;
  --pjd-subtle: #999999;
  --pjd-border: #dedfe0;

  font-family: inherit;
  color: var(--pjd-text);
}

/* 定宽内容盒：左右各留 16 防窄屏贴边，max-width 把这 32 加回去 */
.astra-pjd__inner {
  width: 100%;
  max-width: calc(var(--pjd-content-width, 1440px) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}

.astra-pjd__rule {
  display: block;
  flex: 0 0 auto;
  width: 100px;
  height: 4px;
  background: var(--pjd-primary);
}

/* ASTRA / Button 大号款，高 56、图标 20 */
.astra-pjd__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  border: 1px solid var(--pjd-primary);
  background: var(--pjd-primary);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.16px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

.astra-pjd__btn:hover,
.astra-pjd__btn:focus-visible {
  background: var(--pjd-primary-dark);
  border-color: var(--pjd-primary-dark);
}

/* 次按钮：描边 #808080、文字 #333，hover 转主题色 */
.astra-pjd__btn--ghost {
  border-color: var(--pjd-muted);
  background: transparent;
  color: var(--pjd-text);
}

.astra-pjd__btn--ghost:hover,
.astra-pjd__btn--ghost:focus-visible {
  border-color: var(--pjd-primary);
  background: var(--pjd-primary);
  color: #ffffff;
}

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

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

.astra-pjd__empty {
  margin: 0;
  padding: 24px 0;
  font-size: 18px;
  color: var(--pjd-subtle);
  text-align: center;
}

/* ==================================================== 项目参数 957:483 */
.astra-pjd-overview {
  padding: var(--pjd-overview-top, 120px) 0 var(--pjd-overview-bottom, 48px);
  background: #ffffff;
}

.astra-pjd-overview__row {
  display: flex;
  align-items: center;
}

.astra-pjd-overview__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: var(--pjd-overview-height, 580px);
  padding: 20px 48px 0;
}

.astra-pjd-overview__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

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

.astra-pjd-overview__stats {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.astra-pjd-overview__stats-title {
  margin: 0;
  padding: 16px 8px;
  border-bottom: 1px solid var(--pjd-border);
  font-size: var(--pjd-stats-title-size, 24px);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--pjd-strong);
}

.astra-pjd-overview__stat {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 16px 8px;
  border-bottom: 1px solid var(--pjd-border);
  font-size: var(--pjd-stat-size, 18px);
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--pjd-text);
}

.astra-pjd-overview__stat-label {
  flex: 0 0 auto;
  width: var(--pjd-stat-label-width, 208px);
}

.astra-pjd-overview__stat-value {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: break-word;
}

.astra-pjd-overview__media {
  flex: 0 0 auto;
  width: var(--pjd-overview-media, 811px);
  min-height: var(--pjd-overview-height, 580px);
  padding: 20px;
}

.astra-pjd-overview__frame {
  position: relative;
  width: 100%;
  height: calc(var(--pjd-overview-height, 580px) - 40px);
  overflow: hidden;
  background: #ebebeb;
}

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

/* ==================================================== 数据条 957:484 */
.astra-pjd-impact {
  padding: var(--pjd-impact-top, 48px) 0 var(--pjd-impact-bottom, 48px);
  background: #ffffff;
}

.astra-pjd-impact__row {
  display: flex;
  align-items: stretch;
  /* 设计稿这条 178 高是含上下 2px 描边的，CSS 描边额外占位，所以内边距收 2 */
  padding: 34px 0;
  border-top: 2px solid var(--pjd-border);
  border-bottom: 2px solid var(--pjd-border);
}

.astra-pjd-impact__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 32px;
}

/* 列间那条 2px×100 竖线（设计稿 Line 339/340） */
.astra-pjd-impact__item + .astra-pjd-impact__item {
  border-left: 2px solid var(--pjd-border);
}

.astra-pjd-impact__value {
  margin: 0;
  width: 100%;
  font-size: var(--pjd-impact-value-size, 56px);
  line-height: var(--pjd-impact-value-line, 56px);
  font-weight: 700;
  letter-spacing: -2.24px;
  color: var(--pjd-primary);
  overflow-wrap: break-word;
}

.astra-pjd-impact__desc {
  margin: 0;
  width: 100%;
  font-size: var(--pjd-impact-desc-size, 28px);
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.56px;
  color: var(--pjd-muted);
}

/* ==================================================== 项目简述 957:526 */
.astra-pjd-brief {
  padding: var(--pjd-brief-top, 48px) 0 var(--pjd-brief-bottom, 120px);
  background: #ffffff;
}

.astra-pjd-brief__row {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 0 32px;
}

.astra-pjd-brief__text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--pjd-brief-size, 24px);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--pjd-text);
}

.astra-pjd-brief__media {
  position: relative;
  flex: 0 0 auto;
  width: var(--pjd-brief-media, 707px);
  height: var(--pjd-brief-media-height, 248px);
  overflow: hidden;
}

.astra-pjd-brief__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ==================================================== 总结区 961:157 */
/* 上半 #F9F9F9、下半白，分界线在 533（设计稿 Rectangle 1 的起点）。
 * 这里不能用 linear-gradient：Elementor 的容器懒加载会给第 2 个之后的容器
 * 加一条 `background-image: none !important`，渐变会被整条抹掉，
 * 所以改成一个铺在顶部的伪元素上色（背景色不受那条规则影响）。 */
.astra-pjd-outcome {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pjd-outcome-gap, 36px);
  padding: var(--pjd-outcome-padding, 120px) 0;
  background: #ffffff;
}

.astra-pjd-outcome::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--pjd-outcome-split, 533px);
  background: #f9f9f9;
}

.astra-pjd-outcome > * {
  position: relative;
  z-index: 1;
}

.astra-pjd-outcome__top {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  /* 设计稿这一行是左 240 右 156（1920 下），不是居中定宽，按百分比等比缩放 */
  padding: 0 var(--pjd-outcome-pad-right, 8.125%) 0 var(--pjd-outcome-pad-left, 12.5%);
}

/* 文案在 566 高的栏目里是从顶部 100 处起排的（设计稿 957:536 Title 的 y），
 * 不是按内容居中：那样整块会往下掉，副标题正好压在浅底带的分界线上 */
.astra-pjd-outcome__head {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  min-height: var(--pjd-outcome-head-height, 566px);
  padding-top: var(--pjd-outcome-head-offset, 100px);
}

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

.astra-pjd-outcome__sub {
  margin: 0;
  width: 100%;
  max-width: var(--pjd-outcome-sub-width, 964px);
  font-size: var(--pjd-outcome-sub-size, 24px);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--pjd-muted);
}

/* 手机图比栏目高、还要往上探出去一点（设计稿 981:1157） */
.astra-pjd-outcome__shot {
  flex: 0 0 auto;
  width: var(--pjd-outcome-shot, 284px);
  align-self: center;
  margin-top: var(--pjd-outcome-shot-offset, -75px);
}

.astra-pjd-outcome__shot img {
  width: 100%;
  height: auto;
  display: block;
}

.astra-pjd-outcome__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pjd-outcome-body-gap, 96px);
  width: 100%;
  max-width: calc(var(--pjd-content-width, 1440px) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}

.astra-pjd-outcome__points {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.astra-pjd-outcome__point {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px 8px;
  border-bottom: 1px solid var(--pjd-border);
}

.astra-pjd-outcome__point:first-child {
  border-top: 1px solid var(--pjd-border);
}

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

.astra-pjd-outcome__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.astra-pjd-outcome__point-title {
  flex: 0 0 auto;
  width: var(--pjd-point-title-width, 400px);
  margin: 0;
  font-size: var(--pjd-point-title-size, 24px);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--pjd-strong);
}

/* 标题与说明之间那条 48 高的竖线 */
.astra-pjd-outcome__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 48px;
  background: var(--pjd-border);
}

.astra-pjd-outcome__point-desc {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--pjd-point-desc-size, 18px);
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--pjd-text);
}

.astra-pjd-outcome__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ---------------------------------------------------------- 响应式 */
/* 设计稿只有 1920 桌面稿。字号与留白由控制项按断点输出，本段只处理排布。 */
@media (max-width: 1400px) {
  .astra-pjd-overview__main {
    padding: 20px 24px 0;
  }

  .astra-pjd-brief__row {
    padding: 0 16px;
  }
}

@media (max-width: 1200px) {
  .astra-pjd-overview__row {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  /* 竖排后主轴变成纵向，flex-basis:0 会把整栏压成 0 高，必须解开 */
  .astra-pjd-overview__main {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
  }

  .astra-pjd-overview__media {
    width: 100%;
    min-height: 0;
    padding: 0;
  }

  .astra-pjd-overview__frame {
    height: var(--pjd-overview-media-height, 420px);
  }

  .astra-pjd-brief__row {
    flex-direction: column;
    gap: 32px;
  }

  .astra-pjd-brief__text {
    flex: 0 0 auto;
  }

  .astra-pjd-brief__media {
    width: 100%;
  }

  .astra-pjd-outcome__top {
    gap: 24px;
  }

  .astra-pjd-outcome__head {
    min-height: 0;
    padding-top: 0;
  }

  .astra-pjd-outcome__shot {
    margin-top: 0;
  }

  .astra-pjd-outcome {
    /* 竖排后不再有 533 那条分界，整块统一浅底 */
    background: #f9f9f9;
  }

  .astra-pjd-outcome::before {
    display: none;
  }
}

@media (max-width: 990px) {
  .astra-pjd-impact__row {
    flex-wrap: wrap;
    gap: 24px 0;
  }

  .astra-pjd-impact__item {
    flex: 1 1 50%;
  }

  .astra-pjd-impact__item:nth-child(odd) {
    border-left: 0;
  }

  .astra-pjd-outcome__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .astra-pjd-outcome__head {
    flex: 0 0 auto;
    width: 100%;
  }

  .astra-pjd-outcome__shot {
    align-self: center;
  }
}

@media (max-width: 768px) {
  .astra-pjd-overview__stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .astra-pjd-overview__stat-label {
    width: auto;
    color: var(--pjd-muted);
  }

  .astra-pjd-impact__item {
    flex: 1 1 100%;
    border-left: 0;
    padding: 0 8px;
  }

  .astra-pjd-impact__item + .astra-pjd-impact__item {
    border-left: 0;
    border-top: 1px solid var(--pjd-border);
    padding-top: 24px;
  }

  .astra-pjd-brief__row {
    padding: 0;
  }

  /* 要点行窄屏改成竖排：图标+标题一行，说明另起一行 */
  .astra-pjd-outcome__point {
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 24px 0;
  }

  .astra-pjd-outcome__point-title {
    width: auto;
    flex: 1 1 auto;
  }

  .astra-pjd-outcome__sep {
    display: none;
  }

  .astra-pjd-outcome__point-desc {
    flex: 1 1 100%;
  }

  .astra-pjd__btn {
    flex: 1 1 100%;
  }
}