/* ==========================================================================
   Tunas Muda — Media Frame
   Full image visibility (object-fit: contain) + intentional letterbox fill.
   Paste into main.css or link as assets/css/tm-media-frame.css

   Variants:
     .tm-media-frame--tint  — soft navy-tinted surface (default)
     .tm-media-frame--blur  — blurred duplicate backdrop (premium)
   ========================================================================== */

.tm-pro {
  --tm-image-fill: color-mix(in srgb, var(--tm-navy, #1d365c) 6%, var(--tm-surface-2, #eef1f5));
  --tm-image-fill-deep: color-mix(in srgb, var(--tm-navy, #1d365c) 14%, var(--tm-navy-deep, #0c1829));
  --tm-media-ratio: 16 / 10;
  --tm-media-radius: var(--tm-radius-lg, 24px);
  --tm-media-blur: 28px;
  --tm-media-blur-brightness: 0.58;
  --tm-media-blur-saturate: 1.12;
}

/* —— Base frame —— */
.tm-media-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--tm-media-ratio);
  overflow: hidden;
  border-radius: var(--tm-media-radius);
  background: var(--tm-image-fill);
  border: 1px solid rgba(29, 54, 92, 0.08);
  box-shadow: var(--tm-shadow-sm, 0 2px 8px rgba(15, 30, 53, 0.06));
  isolation: isolate;
}

/* Fill parent (heroes, card headers) */
.tm-media-frame--fill {
  aspect-ratio: unset;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

/* Foreground — always fully visible */
.tm-media-frame__img,
.tm-media-frame > img:not(.tm-media-frame__backdrop) {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* —— Option A: subtle tint fill (default) —— */
.tm-media-frame--tint {
  background: var(--tm-image-fill);
}

/* —— Option B: blurred glass backdrop —— */
.tm-media-frame--blur .tm-media-frame__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale3d(1.12, 1.12, 1);
  filter: blur(var(--tm-media-blur)) brightness(var(--tm-media-blur-brightness))
    saturate(var(--tm-media-blur-saturate));
  pointer-events: none;
  user-select: none;
}

.tm-media-frame--blur::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(12, 24, 41, 0.08) 0%,
    rgba(12, 24, 41, 0.18) 100%
  );
  pointer-events: none;
}

/* CSS-variable blur (single <img>, set --tm-media-src on container) */
.tm-media-frame--blur-src::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  background-image: var(--tm-media-src);
  background-size: cover;
  background-position: center;
  filter: blur(var(--tm-media-blur)) brightness(var(--tm-media-blur-brightness))
    saturate(var(--tm-media-blur-saturate));
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}

.tm-media-frame--blur-src::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(12, 24, 41, 0.06) 0%,
    rgba(12, 24, 41, 0.2) 100%
  );
  pointer-events: none;
}

/* Dark frames (hero overlays) */
.tm-media-frame--dark {
  --tm-image-fill: var(--tm-image-fill-deep);
  background: var(--tm-image-fill-deep);
}

/* Ratio presets */
.tm-media-frame--wide {
  --tm-media-ratio: 21 / 9;
}

.tm-media-frame--square {
  --tm-media-ratio: 1 / 1;
}

.tm-media-frame--portrait {
  --tm-media-ratio: 3 / 4;
}

/* Layout stability while loading */
@supports not (aspect-ratio: 1) {
  .tm-media-frame:not(.tm-media-frame--fill) {
    min-height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-media-frame--blur .tm-media-frame__backdrop {
    filter: blur(12px) brightness(0.7) saturate(1);
  }
}

@media (max-width: 767.98px) {
  .tm-media-frame {
    --tm-media-radius: var(--tm-radius, 16px);
  }

  .tm-media-frame--wide {
    --tm-media-ratio: 16 / 10;
  }
}