@charset "UTF-8";
/* PHOTO LIGHTBOX — the enlarged view behind a .photo-grid tile.
   Spec: documents/photo-gallery/DESIGN.md section 10.

   Separate from components/photo-grid.scss on purpose: the grid works on its
   own and the lightbox is an enhancement layered on top of it. Both back the
   same hhc/photo-grid library, so there is still one attachment point in
   hhc.theme.

   NO Z-INDEX ANYWHERE IN THIS FILE, and that is deliberate rather than an
   oversight. The dialog is opened with showModal(), which promotes it to the
   browser's top layer. It therefore paints above the mobile menu without
   competing with the z-index: 3000 at components/menu.scss:135. Adding a
   z-index here would do nothing about that and would invite someone to raise
   the menu's to match.

   Inside the dialog the controls sit above the photograph on DOCUMENT ORDER,
   not on a z-index: every child is absolutely positioned, so the last one in
   the markup wins. js/photo-lightbox.js emits the <img> first for exactly this
   reason and says so. If you reorder that markup, previous and next stop
   responding to taps. */
.photo-lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: transparent;
  overflow: hidden;
}
.photo-lightbox::backdrop {
  background: #1F1F1F;
}

/* ONE FIXED STAGE, AND EVERY PHOTOGRAPH IS FITTED INTO IT.
   Sizing each picture to itself instead was the first cut and it was wrong.
   A 16:9 frame is limited by the viewport's width and a 4:3 or 3:4 frame by its
   height, so the box moved on every step: measured at 1440x900 it swung 710px
   in width and 166px in height between the two, and at 390x844 the 16:9 opener
   came out 191px tall against 453px for a portrait. Stepping through the set
   felt like the interface resizing rather than the picture changing.

   Separately, a 4:3 photograph sat at its intrinsic 800x600 and never grew,
   because max-width alone cannot enlarge an image. So on a 1440 screen the
   featured 16:9 frames were 1284px wide and the ordinary ones 800px, which is
   the other half of what looked wrong.

   The stage never moves. Only the letterboxing inside it does, which is what a
   photograph of a different shape ought to look like.

   67px top and bottom is $space-3xl and it clears the close button (16px to
   60px) and the counter (12px to 31px). 24px at the sides lets the arrows
   overlay the picture's edge, the ordinary lightbox compromise, safe because
   they paint above it on document order. */
.photo-lightbox__stage {
  position: absolute;
  top: 4.188rem;
  bottom: 4.188rem;
  left: 0;
  right: 0;
}
@media (min-width: 800px) {
  .photo-lightbox__stage {
    left: 1.5rem;
    right: 1.5rem;
  }
}

.photo-lightbox__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  border-radius: 0.375rem;
}

.photo-lightbox__close,
.photo-lightbox__nav {
  position: absolute;
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.375rem;
  background: rgba(31, 31, 31, 0.55);
  color: #FFFFFF;
  cursor: pointer;
  line-height: 1;
}
.photo-lightbox__close:hover, .photo-lightbox__close:focus-visible,
.photo-lightbox__nav:hover,
.photo-lightbox__nav:focus-visible {
  background: #2A6E73;
}
.photo-lightbox__close:focus-visible,
.photo-lightbox__nav:focus-visible {
  outline: 0.125rem solid #2A6E73;
  outline-offset: 0.125rem;
}

.photo-lightbox__close {
  top: 1rem;
  right: 1rem;
  font-size: 1.75rem;
}

.photo-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(2rem, 1.826rem + 0.556vw, 2.313rem);
}

.photo-lightbox__nav--prev {
  left: 0.5rem;
}

.photo-lightbox__nav--next {
  right: 0.5rem;
}

.photo-lightbox__count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.75rem;
  margin: 0;
  text-align: center;
  color: #FFFFFF;
  font-size: 0.875rem;
}

@media (min-width: 800px) {
  .photo-lightbox__nav--prev {
    left: 1.75rem;
  }
  .photo-lightbox__nav--next {
    right: 1.75rem;
  }
}

/*# sourceMappingURL=photo-lightbox.css.map */