/* Universal image loading/error treatment. No wrappers are injected, so the
   site's established image/container geometry and direct-child selectors stay intact. */
img.ad-image-state--loading {
  color: transparent !important;
  background-color: var(--surface-soft, #20272c);
  background-image: url("../../images/ui/image-loading.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(1.6rem, 8%, 2.6rem) auto;
}
img.ad-image-state--loaded { background-image: none; }
img.ad-image-state--error {
  color: transparent !important;
  background-color: var(--surface-soft, #20272c);
  background-image: url("../../images/ui/image-unavailable.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: min(36%, 10rem) auto !important;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  img.ad-image-state--loading { background-image: url("../../images/ui/image-loading-static.svg"); }
}

/* The homepage Archive artwork is assembled lazily from two raster layers in a
   role=img mount rather than a static <img>. Give that picture container the
   same loading/error language as ordinary images. */
[data-archive-art-lazy][data-archive-art-load-state="loading"],
[data-archive-art-lazy][data-archive-art-load-state="retry"] {
  background-color: var(--surface-soft, #20272c);
  background-image: url("../../images/ui/image-loading.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(1.8rem, 8%, 2.8rem) auto;
}
[data-archive-art-lazy][data-archive-art-load-state="mounted"] { background-image: none; }
[data-archive-art-lazy][data-archive-art-load-state="error"] {
  background-color: var(--surface-soft, #20272c);
  background-image: url("../../images/ui/image-unavailable.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(36%, 10rem) auto;
}
@media (prefers-reduced-motion: reduce) {
  [data-archive-art-lazy][data-archive-art-load-state="loading"],
  [data-archive-art-lazy][data-archive-art-load-state="retry"] {
    background-image: url("../../images/ui/image-loading-static.svg");
  }
}