/* public/assets/ui/framework/08_media.css
   KomodUI Media v0.2
   Images, avatars, aspect-ratio, anti-distortion rules + legacy bridge.
*/

/* =========================
   Base Image Safety
   ========================= */

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

/* Prevent images from stretching inside flex/grid */
.media-safe {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================
   Avatar System (Framework)
   ========================= */

.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border-radius: 50%;
  overflow: hidden;

  background: var(--color-primary-soft);
  border: 1px solid var(--color-border);

  flex: 0 0 auto;
}

/* Any avatar image inside framework avatar */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   Aspect ratio helpers
   ========================= */

.media-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   Legacy bridge — Master cards + Public profile
   (keeps old CSS working without distortion)
   ========================= */

/* Overlapping avatar on cards */
.card-avatar-overlap {
  display: inline-block;
  width: 56px;
  height: 56px;

  border-radius: 50%;
  overflow: hidden;

  background: var(--color-primary-soft);
  border: 1px solid var(--color-border);

  flex: 0 0 auto;
}

.card-avatar-overlap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cover image inside master cards */
.card-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Public profile avatar */
.pp-avatar-container {
  width: 140px;
  height: 140px;

  border-radius: 50%;
  overflow: hidden;

  background: var(--color-primary-soft);
  border: 1px solid var(--color-border);

  flex: 0 0 auto;
}

.pp-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   Responsive safety
   ========================= */

@media (max-width: 576px) {

  .avatar--xl {
    width: 96px;
    height: 96px;
  }

  .card-avatar-overlap {
    width: 48px;
    height: 48px;
  }

  .pp-avatar-container {
    width: 110px;
    height: 110px;
  }

  .media-cover {
    aspect-ratio: 16 / 9;
  }

}