/* Resonika 1.9.4 - backstage mural video thumbnail matches the existing YouTube card. */

/* Keep the backstage copy on the left, but size the film card like the existing
   16:9 YouTube preview on the mural page. */
html body .res-project-document .res-mural-local-video .res-local-video-media {
  width:min(100%,720px);
  justify-self:end;
}

html body .res-project-document .res-mural-local-video .res-local-video-trigger,
html body .res-project-document .res-mural-local-video .res-local-video-frame {
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:0;
  background:#141414;
  isolation:isolate;
}

html body .res-project-document .res-mural-local-video .res-local-video-trigger img,
html body .res-project-document .res-mural-local-video .res-local-video-frame > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) brightness(.42);
  transform:none;
  transition:none;
}

/* The YouTube card does not add an extra gradient layer over the poster. */
html body .res-project-document .res-mural-local-video .res-local-video-trigger::after,
html body .res-project-document .res-mural-local-video .res-local-video-frame::after {
  display:none;
}

html body .res-project-document .res-mural-local-video .res-local-video-trigger:hover img,
html body .res-project-document .res-mural-local-video .res-local-video-trigger:focus-visible img {
  filter:grayscale(1) brightness(.42);
  transform:none;
}

html body .res-project-document .res-mural-local-video .res-local-video-overlay {
  gap:20px;
  padding:24px;
}

html body .res-project-document .res-mural-local-video .res-local-video-overlay i {
  width:66px;
  height:66px;
  border:1px solid #c3bdb4;
  background:transparent;
  backdrop-filter:none;
}

html body .res-project-document .res-mural-local-video .res-local-video-overlay i::after {
  left:27px;
  top:22px;
  border-top-width:10px;
  border-bottom-width:10px;
  border-left-width:15px;
}

html body .res-project-document .res-mural-local-video .res-local-video-overlay b {
  font:500 11px/1.5 var(--res-font-menu,'Courier New',monospace);
  letter-spacing:.1em;
}

/* Same caption line as the YouTube card, but deliberately without an external link. */
html body .res-project-document .res-mural-local-video .res-local-video-caption {
  display:flex;
  justify-content:flex-start;
  gap:10px;
  margin:0;
  padding-top:13px;
  border:0;
  color:#cfc9c0;
  font:500 10px/1.6 var(--res-font-menu,'Courier New',monospace);
  letter-spacing:.03em;
  text-transform:uppercase;
}

@media(max-width:900px){
  html body .res-project-document .res-mural-local-video .res-local-video-media {
    width:100%;
    max-width:720px;
    justify-self:start;
  }
}

@media(max-width:520px){
  html body .res-project-document .res-mural-local-video .res-local-video-overlay {
    gap:10px;
    padding:10px;
  }
  html body .res-project-document .res-mural-local-video .res-local-video-overlay i {
    width:48px;
    height:48px;
  }
  html body .res-project-document .res-mural-local-video .res-local-video-overlay i::after {
    left:20px;
    top:16px;
    border-top-width:8px;
    border-bottom-width:8px;
    border-left-width:12px;
  }
}