/* LIGHTBOX */

img.i { cursor: zoom-in; }

.lb {
  position: fixed;
  inset: 0;
  margin: -300px 0; /* stretch dark bg past top & bottom of screen */
  padding: 300px 0; /* keep stage & controls within the real viewport */
  z-index: 9999;
  display: none;
  background-color: rgb(0,0,0);
  touch-action: none;
  -webkit-user-select: none;
          user-select: none;
}

.lb.on { display: block; }

.lb-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
}

.lb.zoom .lb-stage { cursor: move; }

.lb-img {
  max-width: 100vw;
  max-height: 100vh;
  transform-origin: center center;
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
  image-rendering: auto;
}

/* CONTROLS */

.lb-btn,
.lb-c {
  background-color: transparent;
  font-family: "InterVariable", -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
  position: absolute;
  z-index: 1;
}

.lb-btn {
  color: rgba(255,255,255,1);

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  width: 4.4rem;
  height: 4.4rem;

  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
}

.lb-x { top: 1.6rem; right: 1.6rem; }
.lb-p { left: 1.6rem; top: 50%; margin-top: -2.2rem; }
.lb-n { right: 1.6rem; top: 50%; margin-top: -2.2rem; }

.lb-c {
  color: rgba(255,255,255,.62);

  bottom: 1.6rem;
  left: 0;
  right: 0;

  font-size: 1.3rem;
  line-height: 2rem;
  pointer-events: none;
  text-align: center;
}





/* IPHONE */

@media all and (max-width: 960px) {
  .lb-btn {
    width: 11vw;
    height: 11vw;
    font-size: 6vw;
  }
  .lb-x { top: 4vw; right: 4vw; }
  .lb-p { left: 3vw; margin-top: -5.5vw; }
  .lb-n { right: 3vw; margin-top: -5.5vw; }
  .lb-c { bottom: 4vw; font-size: 3.3vw; line-height: 5vw; }
}