/**
 * product-banner.css
 * 控制产品详情页 Hero Banner 区域（.hero）的背景图及布局样式
 * 背景图路径请在 .hero 的 background-image 属性中填写
 */

/* ===== Hero Banner 背景图 ===== */
.hero {
  /* ↓ 请将路径替换为实际背景图路径，例如：url('/assets/imgs/banners/product-hero-bg.jpg') */
  background-image: url('');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  /* 在背景图上叠加半透明渐变遮罩，确保文字可读性 */
  background-color: transparent;
  position: relative;
}

/* 当背景图加载失败或路径为空时，回退到原有渐变背景 */
.hero:not([style*="background-image"]) {
  background: linear-gradient(135deg, #f5fbf7 0%, #e8f4ee 40%, #d4ece0 100%);
}

/* 背景图遮罩层（可选：在背景图上叠加一层半透明白色，让内容更清晰） */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* 从左侧白色渐变到右侧透明，保护左侧文字区域的可读性 */
  background: linear-gradient(
    to right,
    rgba(245, 251, 247, 0.92) 0%,
    rgba(245, 251, 247, 0.75) 45%,
    rgba(245, 251, 247, 0.15) 70%,
    rgba(245, 251, 247, 0.0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* 确保 hero 内部内容层级高于遮罩 */
.hero-inner {
  position: relative;
  z-index: 1;
}

/* ===== Hero 尺寸与间距 ===== */
.hero {
  min-height: 320px;
  padding: 48px 0 0;
  overflow: hidden;
}

/* ===== Hero 右侧产品图 ===== */
.hero-right {
  flex: 0 0 420px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.hero-product-img {
  width: 100%;
  max-width: 420px;
  height: 280px;
  object-fit: contain;
  object-position: center bottom;
  /* 产品图本身不需要圆角，背景图已提供视觉层次 */
  border-radius: 0;
  background: transparent;
  transform: translateY(0);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
}

/* ===== 响应式：平板 ===== */
@media (max-width: 1100px) {
  .hero {
    min-height: 280px;
    padding: 36px 0 0;
  }

  .hero-right {
    flex: 0 0 320px;
  }

  .hero-product-img {
    max-width: 320px;
    height: 240px;
  }
}

/* ===== 响应式：移动端 ===== */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 28px 0 0;
  }

  /* 移动端遮罩改为从上到下，覆盖整个区域 */
  .hero::before {
    background: rgba(245, 251, 247, 0.82);
  }

  .hero-right {
    flex: none;
    width: 100%;
    justify-content: center;
  }

  .hero-product-img {
    max-width: 260px;
    height: 200px;
  }
}