/**
 * iTumbuh — media component
 * ---------------------------------------------------------------------------
 * One shared way to show an image anywhere in the app, so photos, article
 * banners and carousel visuals all behave identically.
 *
 * Two stacked layers (see assets/images.js for the why):
 *   1. a local SVG illustration painted as the element's background
 *   2. the photo, as an <img class="media-photo"> absolutely covering it
 * If the photo fails to load it removes itself and layer 1 shows through.
 *
 * The element reserves its own space via aspect-ratio, so nothing on the page
 * jumps around while images are still downloading.
 */

.media {
  position: relative;
  overflow: hidden;
  background-color: #EFF4FB;        /* quiet tint while the SVG paints */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
}

.media-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  /* Fade in so a photo arriving late replaces the illustration gently
     instead of snapping. */
  animation: mediaFadeIn .45s ease both;
}

@keyframes mediaFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- shape modifiers ---- */
.media--wide  { aspect-ratio: 16 / 9; }
.media--tall  { aspect-ratio: 4 / 5; }
.media--square{ aspect-ratio: 1 / 1; }
.media--flush { border-radius: 0; }

/* ---- hover treatment ----
   Applied only when the media sits inside something interactive, and kept to
   the subtle 1.04 the brief asks for rather than a showy zoom. */
.media--zoom .media-photo,
a:hover > .media--zoom .media-photo,
.article-card:hover .media--zoom .media-photo {
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.article-card:hover .media--zoom .media-photo,
a:hover .media--zoom .media-photo {
  transform: scale(1.04);
}

/* Respect the OS-level reduced-motion preference: no fade, no zoom. */
@media (prefers-reduced-motion: reduce) {
  .media-photo { animation: none; }
  .article-card:hover .media--zoom .media-photo,
  a:hover .media--zoom .media-photo { transform: none; }
}