/* Screenshots and looping clips captured from the Core Demos rooms. */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.8rem;
  margin: 1em 0;
}
.media-grid figure {
  position: relative;
  margin: 0;
}
.media-grid img,
.media-grid video {
  display: block;
  width: 100%;
  border-radius: 0.2rem;
}
.media-grid figcaption {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

/* ── Full-size view (javascripts/media-viewer.js) ─────────────────────────── */
.media-grid__item--zoomable img,
.media-grid__item--zoomable video:not([controls]) {
  cursor: zoom-in;
}

.media-zoom,
.media-viewer__close {
  position: absolute;
  padding: 0;
  font-size: 0;
}
.media-zoom::before,
.media-viewer__close::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  mask: var(--media-icon) center / 60% no-repeat;
}
.media-zoom:focus-visible,
.media-viewer__close:focus-visible {
  outline: var(--tcma-border-thin) solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.media-zoom {
  --media-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="2"><path d="M10 2h4v4M14 2l-5 5M6 14H2v-4M2 14l5-5"/></svg>');
  top: 0.4rem;
  right: 0.4rem;
  width: 1.6rem;
  height: 1.6rem;
  border: var(--tcma-border-thin) solid var(--tcma-ink);
  background-color: var(--tcma-bone);
  color: var(--tcma-ink);
  opacity: 0.85;
  cursor: zoom-in;
}
.media-zoom:hover,
.media-zoom:focus-visible {
  opacity: 1;
  background-color: var(--tcma-lime);
}

.media-viewer {
  max-width: none;
  max-height: none;
  padding: 2.8rem 1rem 0.8rem;
  border: var(--tcma-border) solid var(--tcma-line);
  background-color: var(--tcma-surface);
  color: var(--md-default-fg-color);
}
.media-viewer::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}
.media-viewer__frame img {
  display: block;
  max-width: 88vw;
  max-height: 78vh;
}
/* Every clip is 16:9 at 1280x720: sized up front, so it does not jump from the poster's
   size once the video loads. */
.media-viewer__frame video {
  display: block;
  width: min(88vw, 1280px, calc(78vh * 16 / 9));
  aspect-ratio: 16 / 9;
}
.media-viewer__caption {
  margin: 0.6rem 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}
.media-viewer__close {
  --media-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="2"><path d="M3 3l10 10M13 3L3 13"/></svg>');
  top: 0.5rem;
  right: 0.5rem;
  width: 1.8rem;
  height: 1.8rem;
  border: var(--tcma-border-thin) solid var(--tcma-line);
  background: none;
  color: inherit;
  cursor: pointer;
}
.media-viewer__close:hover,
.media-viewer__close:focus-visible {
  background-color: var(--tcma-lime);
  color: var(--tcma-ink);
}