/*
 * SB Events - Lightbox (frontend)
 * Kept separate from frontend.css so it can load even when base CSS is disabled.
 */

.sb-events-lightbox{
  position:fixed;
  inset:0;
  z-index:999999;
  background:rgba(0,0,0,.88);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.sb-events-lightbox.is-open{
  display:flex;
}

.sb-events-lightbox__figure{
  margin:0;
  max-width:100%;
  max-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.sb-events-lightbox__img{
  max-width:90vw;
  max-height:80vh;
  width:auto;
  height:auto;
  display:block;
}

.sb-events-lightbox__caption{
  color:#fff;
  font-size:.95em;
  opacity:.92;
  text-align:center;
  max-width:90vw;
}

.sb-events-lightbox__close{
  position:absolute;
  top:12px;
  right:14px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  padding:6px 10px;
}

.sb-events-lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#fff;
  font-size:44px;
  line-height:1;
  cursor:pointer;
  padding:10px 12px;
  opacity:.9;
}

.sb-events-lightbox__nav:hover,
.sb-events-lightbox__close:hover{
  opacity:1;
}

.sb-events-lightbox__prev{ left:8px; }
.sb-events-lightbox__next{ right:8px; }

html.sb-events-lightbox-open,
body.sb-events-lightbox-open{
  overflow:hidden;
}

@media (max-width: 600px){
  .sb-events-lightbox{ padding:16px; }
  .sb-events-lightbox__img{ max-height:75vh; }
  .sb-events-lightbox__nav{ font-size:38px; }
}