@charset "utf-8";

/*
 * rtPopVideoVJS
 * Cleaned component-only CSS.
 *
 * Important sizing fix:
 * The old dialog combined min-width: 300px, max-height: 80vh,
 * a portrait aspect-ratio, and overflow: auto. For a 720/1280 video,
 * 300px wide requires 533.33px high. At a 665px viewport, 80vh is
 * only 532px, so the constraints conflict and a scrollbar appears.
 */

/* Video thumbnail / launcher */
/* max-width: 420px; */
.rtPopVideoVJS {
  position: relative;

  /* Use this style for typical text-at-bottom containers */
  /* display: flex; */
  /* flex: 1 1 240px; */
  /* padding: 1rem; */
  /* justify-content: center; */
  /* align-items: flex-end; */
  /* font-size: 2.4rem; */
  /* font-weight: bold; */
  /* line-height: 1; */
  /* color: white; */
  /* text-shadow: 0 0 4px black; */
}

.rtPopVideoVJS::before {
  /* content: ""; */
  /* position: absolute; */
  /* inset: 0; */
  /* pointer-events: none; */
  /* transition: background 0.2s ease; */
}

.rtPopVideoVJS:hover {
  /* transform: translateY(-6px) scale(1.02); */
  /* box-shadow: 0 8px 20px rgb(0 0 0 / 20%); */
}

/* Prevent the page behind the modal from scrolling. */
body:has(#rtPopVideoVJS_Container[open]) {
  overflow: hidden;
}

/* Video dialog */
#rtPopVideoVJS_Container {
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: black;

  /*
   * Do NOT force a 300px minimum width here.
   * The inline aspect-ratio supplied by the script can then shrink
   * naturally when the viewport height becomes the limiting dimension.
   */
  width: auto;
  min-width: 0;
  max-width: 90vw;
  max-height: 80vh;

  /* A scrollbar is never useful inside this video-only dialog. */
  overflow: hidden;

  animation: Dialog_FadeOut 0.5s forwards;
  transition-behavior: allow-discrete;
  transition-duration: 0.5s;
}

#rtPopVideoVJS_Container[open] {
  animation: Dialog_FadeIn 0.5s forwards;
}

#rtPopVideoVJS_Container::backdrop {
  animation: DialogBackdrop_FadeOut 0.5s forwards;
}

#rtPopVideoVJS_Container[open]::backdrop {
  animation: DialogBackdrop_FadeIn 0.5s forwards;
}

/*
 * Video.js creates a DIV with class="video-js" around the actual <video>.
 * The old selector `video.video-js` did not match the generated markup.
 */
#rtPopVideoVJS_Container > .video-js {
  display: block;
  margin: 0;
  max-width: 100%;
  max-height: 80vh;
}

/* Remove the tiny inline-video baseline gap if the tech element is exposed. */
#rtPopVideoVJS_Container .vjs-tech {
  display: block;
}

/* Close button */
#rtPopVideoVJS_CloseButton {
  position: absolute;
  top: 10px;
  right: 10px;

  width: 60px;
  height: 60px;
  padding: 0;

  display: grid;
  place-items: center;

  opacity: 0.5;
  color: white;
  background: transparent;
  border: 0;
  cursor: pointer;

  filter: drop-shadow(0 0 2px rgb(0 0 0 / 80%))
    drop-shadow(0 0 4px rgb(0 0 0 / 60%)) drop-shadow(0 0 6px rgb(0 0 0 / 40%));
}

#rtPopVideoVJS_CloseButton svg {
  width: 100%;
  height: 100%;
}

#rtPopVideoVJS_CloseButton svg path {
  fill: white;
}

#rtPopVideoVJS_CloseButton:hover svg path {
  fill: lightgray;
}

/* Play Button Overlay */

.rtPopVideoVJS_PlayButtonOverlay::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(48px, 25%, 200px);
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  pointer-events: none;

  /* background-repeat: no-repeat; */
  /* background-position: center; */
  /* background-size: contain; */
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  transition: transform 0.2s ease;
  /* Change the fill color to update the arrow and shadow colors. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='20' fill='rgb(0 0 0 / 0.2)'/%3E%3Cpolygon points='29,25 29,39 41,32' fill='rgb(243 244 239)'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Animations */

@keyframes Dialog_FadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes Dialog_FadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes DialogBackdrop_FadeIn {
  from {
    background: hsl(0 0% 0% / 0%);
  }
  to {
    background: hsl(0 0% 0% / 40%);
    backdrop-filter: blur(4px);
  }
}

@keyframes DialogBackdrop_FadeOut {
  from {
    background: hsl(0 0% 0% / 40%);
    backdrop-filter: blur(4px);
  }
  to {
    background: hsl(0 0% 0% / 0%);
  }
}