/**
 * ProgressiveImage 组件全局样式补丁
 * 确保组件在各个页面中能够正确继承和适配现有样式
 */

/* 确保 ProgressiveImage 容器能够继承父元素的尺寸 */
.progressive-image-container {
  /* 继承父元素的所有尺寸相关属性 */
  max-width: inherit;
  max-height: inherit;
}

/* 产品卡片中的图片样式 */
.product-bg .progressive-image-container,
.product-image .progressive-image-container {
  width: 100%;
  height: 100%;
}

/* Hero 区域图片样式 */
.hero-bg-image.progressive-image-container,
.hero-ad-link .progressive-image-container {
  width: 100%;
  height: 100%;
}

/* 固定背景图片样式 */
.fixed-bg-image.progressive-image-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 博客和新闻卡片图片样式 */
.blog-card__image .progressive-image-container,
.card-image-container .progressive-image-container {
  width: 100%;
  height: 100%;
}

/* 产品详情页缩略图样式 */
.thumb-item .progressive-image-container {
  width: 100%;
  height: 100%;
}

/* 产品详情页主图样式 */
.main-image .progressive-image-container {
  width: 100%;
  height: 100%;
}

/* 产品列表页横幅图片 */
.full-width-banner .progressive-image-container {
  width: 100%;
  height: auto;
  min-height: 300px;
}

/* 产品列表页产品图片 */
.product-link .progressive-image-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 180px;
  margin: 0 auto 15px;
}

/* 产品图标样式 */
.product-icon.progressive-image-container {
  width: 32px;
  height: 32px;
  margin: 15px auto 10px auto;
  min-height: 32px;
}

/* Featured 博客图片 */
.featured-main__image.progressive-image-container {
  width: 100%;
  height: 65%;
}

/* 新闻标题区域背景图片 - 使用背景图而非 ProgressiveImage */
.news-title-content {
  /* 保持原有的背景图实现 */
}

/* Header 图片 */
.header-image.progressive-image-container {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 确保图片在容器中正确显示 */
.progressive-image-container img.progressive-image {
  display: block;
  width: 100%;
  height: 100%;
}

/* 移动端适配 */
@media (max-width: 767px) {
  .product-link .progressive-image-container {
    max-width: 100%;
    margin: 0 auto 12px;
  }
}

/* 确保在打印时图片正常显示 */
@media print {
  .progressive-image-container {
    background-color: transparent !important;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .progressive-image-container {
    background-color: #ffffff;
  }
  
  .error-placeholder .error-text {
    color: #000000 !important;
  }
}

/* 避免布局偏移 */
.progressive-image-container:not([style*="aspect-ratio"]) {
  /* 如果没有指定 aspect-ratio，使用图片的自然比例 */
  height: auto;
}

/* 确保骨架屏动画不会导致页面卡顿 */
@media (prefers-reduced-motion: no-preference) {
  .skeleton-shimmer,
  .skeleton-gradient {
    /* 使用 transform 而非 background-position 以获得更好的性能 */
    will-change: transform;
  }
}

/* 针对 Safari 的特殊处理 */
@supports (-webkit-appearance: none) {
  .progressive-image-container {
    -webkit-transform: translateZ(0);
  }
}

/* 确保组件在 flex 布局中正常工作 */
.product-card-desktop .progressive-image-container,
.product-card-mobile .progressive-image-container {
  flex-shrink: 0;
}

/* 确保组件在 grid 布局中正常工作 */
.product-grid .progressive-image-container,
.blog-grid .progressive-image-container {
  align-self: stretch;
}