/* The gallery lightbox.
 *
 * The live site opens its gallery in Magnific Popup, which Divi bundles. This
 * is a stand-in for that one use of it, measured off the live lightbox: the
 * overlay is #0b0b0b at 80%, the caption is the anchor's title, the counter is
 * #ccc at 12px reading "n of m", the arrows are 48px squares pinned to the
 * edges and vertically centred, and the close is a 64px white multiplication
 * sign in the top right.
 */

.wr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1043;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(11, 11, 11, 0.8);
  font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
}

.wr-lightbox[hidden] {
  display: none;
}

html.wr-lightbox-open {
  overflow: hidden;
}

.wr-lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wr-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  background: #444;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.wr-lightbox__caption {
  width: 100%;
  padding: 10px 0 0;
  color: #f3f3f3;
  font-size: 12px;
  line-height: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.wr-lightbox__counter {
  color: #ccc;
  white-space: nowrap;
}

.wr-lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0 0 18px 10px;
  color: #fff;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 64px;
  line-height: 44px;
  opacity: 0.65;
  cursor: pointer;
}

.wr-lightbox__close:hover,
.wr-lightbox__arrow:hover {
  opacity: 1;
}

.wr-lightbox__arrow {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  padding: 0;
  background: transparent;
  border: 0;
  opacity: 0.65;
  cursor: pointer;
}

.wr-lightbox__arrow::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 60%;
  mask-size: 60%;
}

.wr-lightbox__arrow--left {
  left: 0;
}

.wr-lightbox__arrow--left::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 4.6L14 3.2 5.2 12l8.8 8.8 1.4-1.4L8 12z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 4.6L14 3.2 5.2 12l8.8 8.8 1.4-1.4L8 12z"/></svg>');
}

.wr-lightbox__arrow--right {
  right: 0;
}

.wr-lightbox__arrow--right::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 4.6L10 3.2l8.8 8.8-8.8 8.8-1.4-1.4L16 12z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 4.6L10 3.2l8.8 8.8-8.8 8.8-1.4-1.4L16 12z"/></svg>');
}