/* ===========================================================
   Urealm — طبقات الوسائط الموحدة.
   =========================================================== */

.media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-surface-2);
}

.media__tiny,
.media__img {
  position: absolute;
  display: block;
  max-inline-size: none;
  max-block-size: none;
}

/* Placeholder فقط أثناء القراءة. إذا فشلت الصورة لا نبقي ضبابًا
   مكبرًا مكانها؛ نعود إلى لون الغلاف بدل تشويه بصري دائم. */
.media__tiny {
  z-index: 1;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: .38;
  filter: blur(8px);
  transform: scale(1.035);
  transition: opacity var(--dur-2) var(--ease);
}

.media__img {
  z-index: 2;

  /* stylelint-disable-next-line property-disallowed-list --
     فيزيائيّ عمدًا: الصورة ليست نصًّا. يسارُها يسارُها في العربيّة
     والإنجليزيّة، ولو انقلبت مع الاتّجاه لعرض الضبطُ المحفوظ
     بالعربيّة الطرفَ المقابل بالإنجليزيّة. */
  left: var(--media-left, 0%);
  /* stylelint-disable-next-line property-disallowed-list -- كسابقه */
  top: var(--media-top, 0%);
  inline-size: var(--media-w, 100%);
  width: var(--media-w, 100%);
  block-size: var(--media-h, 100%);
  height: var(--media-h, 100%);
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}

.media[data-media-fit="cover"] .media__img { object-fit: cover; }
.media[data-media-fit="contain"] .media__img {
  object-fit: contain;
  object-position:
    calc(var(--mx, 50) * 1%)
    calc(var(--my, 50) * 1%);
}

.media[data-loaded="yes"] .media__img { opacity: 1; }
.media[data-loaded="yes"] .media__tiny,
.media[data-media-state="error"] .media__tiny { opacity: 0; visibility: hidden; }

.media .media-loader { z-index: 3; }
.media[data-loaded="yes"] .media-loader,
.media[data-media-state="error"] .media-loader { opacity: 0; visibility: hidden; }

.media[data-auto-hero="yes"] { background: none; }

@media (prefers-reduced-motion: reduce) {
  .media__img,
  .media__tiny { transition: none; }
}

.tile__tint { z-index: 4; }
.tile__scrim { z-index: 5; }