/* --- General Image Styling --- */

img {
  max-width: 100%;
  height: auto;
}

/* Rounded image styling */
.img-rounded img {
  border-radius: 50%;
}

/* --- Full Width Image for Conversation Articles --- */

.w-100 > img {
  width: 100%;
  height: auto;
}

/* --- Thumbnail Image Styling --- */

/* Minimum width for thumbnail images in person and alumni nodes */
.node--type-person .blazy--field-thumbnail img, 
.node--type-alumni .blazy--field-thumbnail img {
  min-width: 150px;
}

/* --- Centered Blazy Images --- */

/* Center alignment for blazy images */
.align-center > .blazy--field-media-image .media--blazy.media--image img,
.align-center > .blazy--field-media-image > .field__item > .media--blazy.media--image > picture > img {
  margin-left: auto;
  margin-right: auto;
}

/* Center alignment for blazy image captions */
.align-center > .blazy--field-media-image .blazy__caption,
.align-center > .blazy--field-media-image > .field__item > .blazy__caption {
  text-align: center !important;
  margin: 0 auto;
}

/* --- Image loading placeholder --- */

/*
 * Blazy loading treatment.
 *
 * The palette is derived from the theme's existing ANU gold family rather
 * than a cool grey/blue skeleton. Keep the effect deliberately quiet: the
 * placeholder is only a temporary surface and should never compete with the
 * image itself.
 */
.media--image.is-b-loading,
.media--blazy.is-b-loading {
  background-color: #f7f0e2;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.82) 0, rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 82% 86%, rgba(190, 131, 14, 0.10) 0, rgba(190, 131, 14, 0) 46%),
    linear-gradient(125deg, #fbf8f2 0%, #f7f0e2 42%, #efe1c5 72%, #f8f3e9 100%);
}

/*
 * Hide Blazy's blank asset while loading. The wrapper keeps the image's
 * reserved dimensions, so this does not introduce layout shift.
 */
.media--image.is-b-loading img.b-lazy,
.media--blazy.is-b-loading img.b-lazy,
.media--image.is-b-loading img[src$="blank.svg"],
.media--image.is-b-loading img[src*="/blank.svg?"],
.media--blazy.is-b-loading img[src$="blank.svg"],
.media--blazy.is-b-loading img[src*="/blank.svg?"] {
  opacity: 0;
}

/*
 * A slightly longer ease gives the final image a soft photographic reveal
 * without holding it back once Blazy has finished loading it. Card hover
 * treatment is handled separately in hover.css. The loading lifecycle itself
 * only controls opacity so the image reveal and hover motion stay independent.
 */
.media--image img.b-lazy,
.media--image img.b-loaded,
.media--blazy img.b-lazy,
.media--blazy img.b-loaded {
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Hero copy is white, so use a warm bronze neutral instead of black or a cool
 * blue-grey while the hero image is loading. The existing hero overlay still
 * provides text contrast on top of this surface.
 */
.layout-bg-bg-container .media--image.is-b-loading,
.layout-bg-bg-container .media--blazy.is-b-loading,
.slick--view--feature-listing-hero-carousel--features-home-page .media--image.is-b-loading,
.slick--view--feature-listing-hero-carousel--features-home-page .media--blazy.is-b-loading,
.slick--view--feature--features-home-page .media--image.is-b-loading,
.slick--view--feature--features-home-page .media--blazy.is-b-loading,
.slick--view--feature-listing--feature-listing-home-page .media--image.is-b-loading,
.slick--view--feature-listing--feature-listing-home-page .media--blazy.is-b-loading {
  background-color: #40382f;
  background-image:
    radial-gradient(circle at 22% 14%, rgba(233, 213, 173, 0.20) 0, rgba(233, 213, 173, 0) 44%),
    radial-gradient(circle at 78% 82%, rgba(190, 131, 14, 0.13) 0, rgba(190, 131, 14, 0) 48%),
    linear-gradient(125deg, #4b4135 0%, #3d362e 48%, #302c27 100%);
}

@media (prefers-reduced-motion: reduce) {
  .media--image img.b-lazy,
  .media--image img.b-loaded,
  .media--blazy img.b-lazy,
  .media--blazy img.b-loaded {
    transition: none;
  }
}

/* Only the successfully loaded, explicitly promoted first image bypasses the
 * loading reveal. Blazy still owns its wrapper, errors and lazy lifecycle. */
.media--image img.acton-priority-image-ready,
.media--blazy img.acton-priority-image-ready {
  opacity: 1 !important;
  transition: none;
}