/* 图片质量优化样式 */

/* 新闻卡片图片质量优化 */
.news-grid .card-image img,
.card-image img {
  /* 图片渲染优化 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  
  /* 硬件加速 */
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  
  /* 图片质量优化 */
  image-orientation: from-image;
  image-resolution: from-image;
  
  /* 防止图片模糊 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .news-grid .card-image img,
  .card-image img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* 4K屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .news-grid .card-image img,
  .card-image img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* 图片加载时的占位符 */
.news-grid .card-image::before,
.card-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
              linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
              linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
              linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  opacity: 0.5;
  z-index: -1;
}

/* 图片加载完成后的优化 */
.news-grid .card-image img[src],
.card-image img[src] {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* 图片加载前的状态 */
.news-grid .card-image img:not([src]),
.card-image img:not([src]) {
  opacity: 0;
}