/*
 * product-card.css —— 全站共用的「产品卡」（第三轮，客户《网页修改3》）。
 *
 * 客户原话：「产品展示也需要公用一个样式，不然没法同步修改，就用 Systems 产品展示样式。
 *             四个全部统一，后期上传一份图一个标题全部同步更新。」
 *
 * 之前四处产品卡各写各的：
 *   系统详情 System Components（.astra-syd-comp__card）  ← 客户点名的参考样式
 *   产品列表（.astra-pcat__card）                          图是 360:318 且留 8% 内边（HM-10）
 *   联系页推荐产品（.astra-ct-prod__card）                 图是 3:2（AB-15 为了塞进一屏）
 *   首页推荐产品                                            Elementor 循环模板手拼的
 * 现在四处都挂 .astra-pcard 这一套类名、只认这一份样式；各组件自己的 CSS 只管栅格和留白，
 * 不再碰卡片长什么样。首页那块改用「推荐产品」组件渲染，不再走循环模板。
 *
 * 数据本来就同源（都是 product 文章的标题 / 缩略图 / 规格），所以「一份图一个标题全部同步」
 * 在这之后自动成立。
 *
 * 可调的量全部走变量，组件按断点写入；这里只给默认值（= 参考样式的设计稿值）。
 */

.astra-pcard {
  --pcard-primary: var(--astra-primary, #e60012);
  --pcard-border: #e5e5e5;
  --pcard-text: #333333;
  --pcard-strong: #000000;
  --pcard-media-bg: #f9f9f9;

  flex: 1 1 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-areas: "media" "info";
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--pcard-gap, 28px);
  /* 业主 2026-09-30「这个间隙还是很大」：原来这里按 1920 设计稿写死最小高 604。
     图是 1:1 的卡（首页推荐、系统组件）内容本来就 ≥ 604，这条从不起作用；
     图矮于 1:1 或卡变窄时（产品 / 方案详情的 3:2 推荐卡、产品列表宽屏四列的 265 卡）
     它把卡撑出一截空洞，被 info 的 space-between 摊进「名称→规格」「规格→View More」两道间距，
     1470 宽下名称到规格空了 124px。各处卡片都在 grid / swiper 里等高，不靠这个数，
     不再给默认值；哪个组件真要固定高再自己写 --pcard-height。 */
  min-height: var(--pcard-height, 0px);
  padding: var(--pcard-pad, 20px);
  background: #ffffff;
  border-bottom: 2px solid var(--pcard-border);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.astra-pcard:hover,
.astra-pcard:focus-visible {
  border-bottom-color: var(--pcard-primary);
  box-shadow: 14px 14px 2.4px rgba(0, 0, 0, 0.02);
}

/* 图：统一 1:1、灰底、裁满。参考样式就是这样，客户要求四处一致。
   联系页那块因为 AB-15（整屏吸附装不下）单独把比例变量改成 3:2，其余都用默认。 */
.astra-pcard__media {
  grid-area: media;
  flex: 0 0 auto;
  position: relative;
  width: 100%;
  aspect-ratio: var(--pcard-media-ratio, 1 / 1);
  overflow: hidden;
  background: var(--pcard-media-bg);
}

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

.astra-pcard__info {
  grid-area: info;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 16px 0;
  text-align: center;
}

.astra-pcard__name {
  margin: 0;
  font-size: var(--pcard-name-size, 24px);
  line-height: var(--pcard-name-line, 32px);
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--pcard-text);
  transition: color 0.3s;
}

.astra-pcard:hover .astra-pcard__name,
.astra-pcard:focus-visible .astra-pcard__name {
  color: var(--pcard-primary);
}

.astra-pcard__specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.astra-pcard__spec {
  padding: 0 10px;
  font-size: var(--pcard-spec-size, 14px);
  line-height: 20px;
  font-weight: 600;
  color: var(--pcard-text);
  /* 业主 2026-10-16「这里显示有问题」：原来 nowrap，规格按短标签（100kWh | 51.2V）设计；
     太阳能板的 products_type 填的是一整句，一个标签比卡还宽，横着穿出去压到隔壁卡。
     改成可换行：短标签放不下仍整块挪到下一行（flex-wrap 按整块算），只有单个超宽的才在内部折行 */
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

.astra-pcard__spec + .astra-pcard__spec {
  border-left: 1px solid var(--pcard-border);
}

.astra-pcard__more {
  grid-area: media;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--pcard-primary);
  font-size: var(--pcard-more-size, 18px);
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 220ms ease-out, transform 220ms ease-out, visibility 220ms;
}

.astra-pcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 220ms ease-out;
  pointer-events: none;
}

.astra-pcard:is(:hover, :focus-visible, :focus-within) .astra-pcard__media::after {
  opacity: 1;
}

.astra-pcard:is(:hover, :focus-visible, :focus-within) .astra-pcard__more {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  color: #ffffff;
}

.astra-pcard--catalog {
  --pcard-name-size: 18px;
  --pcard-name-line: 24px;
}

.astra-pcard--catalog .astra-pcard__name {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  align-self: stretch;
  text-align: center;
}

/* 响应式：之前产品列表 / 联系页各写各的窄屏覆写，现在收到一处。
   768 以下留白、字号按产品列表原来的手机档收。 */
@media (max-width: 768px) {
  /* 客户 2026-09-30「手机端的产品两个一行」：卡只有 150～170 宽，内距和字都再收一档；
     「View More 是红色」：手机没有悬停，这一行直接用主题红（桌面仍是黑字、悬停变红） */
  .astra-pcard {
    gap: 12px;
    padding: 12px;
  }

  .astra-pcard__name {
    font-size: clamp(12px, 3.4vw, 16px);
    line-height: clamp(16px, 4.6vw, 22px);
  }

  .astra-pcard__specs {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .astra-pcard__more {
    padding: 6px 12px;
    font-size: clamp(12px, 3.4vw, 15px);
    line-height: clamp(16px, 4.6vw, 20px);
    color: #ffffff;
  }

  .astra-pcard .astra-pcard__media::after,
  .astra-pcard:is(:hover, :focus-visible, :focus-within) .astra-pcard__media::after {
    opacity: 0 !important;
  }

  .astra-pcard .astra-pcard__more,
  .astra-pcard:is(:hover, :focus-visible, :focus-within) .astra-pcard__more {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(4px);
  }

  .astra-pcard:focus-visible {
    outline: 2px solid var(--pcard-primary);
    outline-offset: 3px;
  }

  .astra-pcard--catalog .astra-pcard__name {
    min-height: 0;
  }

  /* 业主 2026-09-30「空隙有点大，最好一行显示」（套装详情的组件卡）：
     三段规格在 260 宽的卡里 14 号 + 左右 10 装不下、折成两行，收到 12 号 + 左右 6 一行放得下
     （更窄的卡仍允许折行兜底）；卡底下那截空是 info 的 16 + View More 的 12 + 卡的 16 堆出来的，收一半。 */
  .astra-pcard__info {
    padding: 8px 0 0;
    gap: 8px;
  }

  .astra-pcard__spec {
    padding: 0 6px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .astra-pcard,
  .astra-pcard__name,
  .astra-pcard__more {
    transition: none;
  }
}

/* Product cards: full outline on every device, red outline on hover, keyboard focus, or touch press. */
.astra-pcard {
  border: 1px solid #d9d9d9;
}

.astra-pcard:hover,
.astra-pcard:focus-visible,
.astra-pcard:active {
  border-color: var(--pcard-primary);
}

/* Product recommendation image surfaces: the same background on desktop and mobile. */
.astra-pcard__media {
  background-color: #f9f9f9 !important;
}

@media (min-width: 769px) and (max-width: 1199px) {
}

@media (max-width: 768px) {
}

/* Catalog card supporting details stay softer than the product title. */
.astra-pcard--catalog .astra-pcard__spec {
  color: #666666 !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 24px;
}

@media (max-width: 768px) {
  .astra-pcard--catalog .astra-pcard__spec {
    font-size: 14px !important;
    line-height: 20px;
  }
}
/* Enforce one square product image frame across every shared card context. */
.astra-pcard__media {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  align-self: start !important;
  overflow: hidden;
  background: #f9f9f9 !important;
}

.astra-pcard__media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}