/* =========================================================
   VIDEO CONTAINER
   ========================================================= */

.project-video-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  border-radius: var(--radius, 4px);
  height: 500px;
}


/* =========================================================
   NORMAL VIDEO
   Full video inside the complete div
   ========================================================= */

.project-video {
  display: block;
  width: 100%;
  height: 500px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


/* =========================================================
   MINI MODE
   Outer DIV stays in its original place.
   ONLY VIDEO becomes small.
   ========================================================= */

/* =========================================================
   MINI MODE
   Remove the large container
   Keep ONLY the video floating
   ========================================================= */

.project-video-wrap.is-mini {
  position: relative;

  width: 0;
  height: 0;

  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: visible;

  background: transparent;
  border: 0;
  box-shadow: none;
}


/* =========================================================
   ONLY VIDEO — FLOATING MINI PLAYER
   ========================================================= */

.project-video-wrap.is-mini .project-video {
  position: fixed;

  right: var(--mp-gap);
  bottom: var(--mp-gap);

  width: var(--mp-w);
  height: auto;

  aspect-ratio: 16 / 9;
  object-fit: cover;

  margin: 0;
  padding: 0;

  border-radius: var(--mp-radius);

  /* box-shadow:
    0 24px 60px -12px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.3); */

  z-index: var(--mp-z);
}


/* Hide CTA */

.project-video-wrap.is-mini .mp-cta {
  display: none;
}

/* .mp-cta {
  display: none !important;
} */