/**
 * @file
 * Video player component.
 *
 * Self-contained and route-independent, unlike the legacy video rules in
 * custom.css which are keyed off .path-videos / .path-conferences etc.
 */

.rn-video {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

/* 16:9 without relying on padding hacks; falls back for old browsers. */
.rn-video__stage,
.rn-video__facade {
  aspect-ratio: 16 / 9;
  width: 100%;
}

@supports not (aspect-ratio: 16 / 9) {
  .rn-video__stage,
  .rn-video__facade {
    height: 0;
    padding-bottom: 56.25%;
  }
}

/* Facade -------------------------------------------------------------- */

.rn-video__facade {
  display: block;
  position: relative;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #000;
}

.rn-video__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rn-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
  opacity: 0.85;
}

.rn-video__play svg {
  width: 100%;
  height: 100%;
}

.rn-video__play-bg {
  fill: #212121;
  fill-opacity: 0.8;
}

.rn-video__play-arrow {
  fill: #fff;
}

.rn-video__facade:hover .rn-video__play,
.rn-video__facade:focus-visible .rn-video__play {
  opacity: 1;
}

.rn-video__facade:hover .rn-video__play-bg {
  fill: #d32f2f;
  fill-opacity: 1;
}

.rn-video__facade:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* Stage --------------------------------------------------------------- */

.rn-video__frame,
.rn-video__stage .plyr {
  width: 100%;
  height: 100%;
}

.rn-video__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .rn-video__play {
    transition: none;
  }
}