/* Overlay video player. Self-contained so it drops onto any site's palette. */

.lb-overlay {
  position: fixed; inset: 0; z-index: 1080;
  display: grid; place-items: center;
  background: rgba(6, 9, 14, .93);
  padding: 3.5rem 2rem 2rem;
}
.lb-overlay[hidden] { display: none; }
body.lb-open { overflow: hidden; }

.lb-box { position: relative; background: #000; box-shadow: 0 30px 90px rgba(0, 0, 0, .65); }
.lb-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lb-title {
  position: absolute; left: 0; bottom: 100%; margin: 0 3rem .5rem 0;
  font-size: .95rem; line-height: 1.4; color: #e8ecf3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-title[hidden] { display: none; }

.lb-close {
  position: absolute; right: 0; bottom: 100%; margin-bottom: .3rem;
  width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #e8ecf3; font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}
.lb-close:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Sits under an .embed-wrap; only offered when the window is big enough to gain by it. */
.lb-expand {
  display: none;
  margin: -1.1rem 0 1.75rem; padding: .4rem .9rem;
  background: transparent; border: 1px solid currentColor; border-radius: 2px;
  color: inherit; opacity: .7;
  font: inherit; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.lb-expand:hover { opacity: 1; }
.lb-expand::before { content: "\2921\2922"; margin-right: .5rem; }

@media (min-width: 700px) and (min-height: 480px) {
  .lb-expand { display: inline-block; }
}