/* The source is laid out for each orientation; no crop or stretch. */
.adaptive-media {
  position: relative; width: 100%; aspect-ratio: var(--media-ratio, 16 / 9);
  overflow: hidden; background: var(--paper); border-radius: inherit;
}
.adaptive-media .adaptive-video {
  display: block; width: 100%; height: 100%; max-height: none;
  aspect-ratio: var(--media-ratio, 16 / 9); object-fit: contain; background: var(--paper);
}
.media-toggle {
  position: absolute; right: 0.5rem; top: 0.5rem; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0.375rem 0.75rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: rgba(251, 249, 243, 0.95); color: var(--ink);
  font-size: 0.75rem; line-height: 1.2; font-weight: 700;
}
.media-toggle:hover { background: var(--paper); }
.gallery-frame:has(.adaptive-media) { aspect-ratio: auto; }
.gallery-frame .adaptive-media { box-shadow: 0 0 0 1px var(--rule); }
.preview-stage:has(.adaptive-media) { background: var(--paper); }
.video-frame:has(.adaptive-media) { background: var(--paper); }
@media (max-width: 699px) {
  .preview-stage .adaptive-media, .video-frame .adaptive-media {
    max-width: calc(82svh * 9 / 16); margin-inline: auto;
  }
}

/* A source that fails to load keeps the box truthful: the case poster, else the case name. */
.adaptive-media .media-fallback {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; padding: 1rem;
  background: var(--paper); text-align: center; overflow-wrap: anywhere;
}
.adaptive-media .media-fallback img { width: 100%; height: 100%; object-fit: contain; }
.media-fallback-name { margin: 0; font-family: var(--mincho); font-weight: 700; font-size: 1.25rem; line-height: 1.4; }
.media-fallback-note { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); }