/* =========================================================================
   The renders on their own (ui/lightbox.js), and what is behind them

   Opened from the eye on a picture: the picture as large as the screen
   allows, the page's glass for the close button and the arrows. Behind it the page is still
   there, gone grey, dark and soft: the same backdrop for the floor plan's
   viewer (plan-viewer.js, plan.css).
   ========================================================================= */
:is(.lightbox, .plan-viewer)::backdrop {
  background: rgb(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(0.15) brightness(0.55);
  backdrop-filter: blur(18px) saturate(0.15) brightness(0.55);
}

/* the page holds still under it */
.has-lightbox {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--c-ink);
  background: transparent;
  overscroll-behavior: contain;
}

.lightbox__figure {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  margin: 0;
  padding:
    calc(4.5rem + var(--safe-top))
    calc(var(--gutter) + 3.5rem + var(--safe-right))
    calc(3rem + var(--safe-bottom))
    calc(var(--gutter) + 3.5rem + var(--safe-left));
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100svh - 9rem - var(--safe-top) - var(--safe-bottom));
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.9);
  opacity: 0;
  scale: 0.985;
  transition: opacity 0.35s ease, scale 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox__img.is-in {
  opacity: 1;
  scale: 1;
}

.lightbox__btn {
  position: absolute;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--c-ink);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 50%;
  background: var(--glass-frost), rgb(8 12 16 / 0.4);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-edge);
  cursor: pointer;
}

.lightbox__btn[hidden] {
  display: none;
}

.lightbox__btn:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

.lightbox__btn svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__close {
  top: calc(var(--space-5) + var(--safe-top));
  right: calc(var(--gutter) + var(--safe-right));
}

.lightbox__prev,
.lightbox__next {
  top: 50%;
  translate: 0 -50%;
}

.lightbox__prev {
  left: calc(var(--gutter) + var(--safe-left));
}

.lightbox__next {
  right: calc(var(--gutter) + var(--safe-right));
}

/* A phone: the picture the screen's width, the arrows under it beside
   the description, the swipe doing their work */
@media (max-width: 47.99rem) {
  .lightbox__figure {
    padding:
      calc(4.5rem + var(--safe-top))
      calc(2.5vw + var(--safe-right))
      calc(6rem + var(--safe-bottom))
      calc(2.5vw + var(--safe-left));
  }

  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: calc(var(--space-6) + var(--safe-bottom));
    translate: none;
  }

  .lightbox__prev {
    left: calc(50% - 3.5rem);
  }

  .lightbox__next {
    right: calc(50% - 3.5rem);
  }
}

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