/*
  Shared Room Media — Phase 06
  Images, galleries, video, audio, posters, and captions.
*/
.room-media-stage {
  --room-media-ratio: 16 / 9;
  position: relative;
  width: min(100%, 96rem);
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.room-media-stage::before {
  content: none;
}

.room-media-stage__screen {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 24% 38%, rgba(75, 170, 227, 0.11), transparent 38%),
    radial-gradient(ellipse at 82% 64%, rgba(126, 66, 153, 0.1), transparent 42%),
    #020307;
  box-shadow:
    inset 0 0 4.5rem rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(238, 232, 220, 0.035);
}

.room-media-stage--editorial .room-media-stage__screen,
.room-media-stage--video .room-media-stage__screen {
  aspect-ratio: var(--room-media-ratio);
}

.room-media-stage--video video,
.room-media-stage--video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.room-media-stage--audio {
  --room-media-ratio: 21 / 9;
}

.room-media-stage--audio .room-media-stage__screen {
  aspect-ratio: var(--room-media-ratio);
  display: grid;
  align-content: center;
}

.room-media-stage--audio audio {
  display: block;
  width: calc(100% - clamp(2rem, 8vw, 8rem));
  margin-inline: auto;
  accent-color: var(--house-gold);
}

@media (max-width: 980px) {
  .room-media-stage--editorial .room-media-stage__screen {
    aspect-ratio: auto;
  }
}

@media (max-width: 640px) {
  .room-media-stage--audio .room-media-stage__screen {
    aspect-ratio: auto;
    min-height: 15rem;
  }
}

.media-frame {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--house-rule);
  background: rgba(0, 0, 0, 0.32);
}
.media-frame img,
.media-frame video,
.media-frame iframe { display: block; width: 100%; height: auto; }
.media-frame--video video,
.media-frame--video iframe { aspect-ratio: 16 / 9; border: 0; object-fit: contain; }
.media-frame--portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.media-frame--square img { aspect-ratio: 1; object-fit: cover; }
.media-frame audio { display: block; width: calc(100% - 2rem); margin: 1rem; }
.media-frame figcaption,
.media-caption {
  padding: 0.8rem 1rem;
  color: var(--house-faint);
  font: 0.68rem/1.55 var(--house-ui);
  letter-spacing: 0.05em;
}
.media-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.media-poster { position: relative; }
.media-poster__action {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}