/* =========================================================
   BLACKBOX — Media (image/placeholder frames used across pages)
   ========================================================= */

.media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(145deg, #2b3733, #10201c);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 24px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.55);
  border: 1px dashed rgba(255,255,255,0.25);
  margin: 10px;
  border-radius: 12px;
}
.media.has-img::after { display: none; }
.media--wide { aspect-ratio: 16 / 10; }
.media--square { aspect-ratio: 1 / 1; }