/* Gallery lightbox (website/js/gallery.js). A file of its own because the
   static host lets browsers keep default.css for 30 days under the same URL. */

/* above the left-edge rails (z-index 1000) */
.gallery-lightbox {
  --bs-modal-zindex: 2000;
}

body:has(.gallery-lightbox.show) .modal-backdrop {
  --bs-backdrop-zindex: 1990;
  /* the old site's overlay: white arrows and the caption stay legible */
  --bs-backdrop-opacity: 0.8;
}

/* a click beside the photo lands on .modal, which closes it */
.gallery-lightbox .modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  pointer-events: none;
}

/* table + caption: the caption row is exactly as wide as the photo */
.gallery-lightbox-figure {
  display: table;
  margin: 0;
  pointer-events: auto;
}

.gallery-lightbox-stage {
  position: relative;
}

.gallery-lightbox-stage img {
  display: block;
  max-width: 90vw;
  max-height: calc(90vh - 40px);
}

.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  top: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s;
}

.gallery-lightbox-prev:hover,
.gallery-lightbox-prev:focus-visible,
.gallery-lightbox-next:hover,
.gallery-lightbox-next:focus-visible {
  opacity: 1;
  outline: none;
}

/* Lightbox2's split: the left third goes back, the rest forward */
.gallery-lightbox-prev {
  left: 0;
  width: 34%;
}

.gallery-lightbox-next {
  right: 0;
  width: 66%;
}

.gallery-lightbox-prev svg,
.gallery-lightbox-next svg {
  position: absolute;
  top: 48%;
  width: 50px;
  height: 45px;
  transform: translateY(-50%);
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.7));
}

.gallery-lightbox-prev svg { left: 0; }
.gallery-lightbox-next svg { right: 0; }

.gallery-lightbox-data {
  display: table-caption;
  caption-side: bottom;
}

.gallery-lightbox-data::after {
  content: "";
  display: table;
  clear: both;
}

/* where the old site printed "Image 9 of 19" */
.gallery-lightbox-caption {
  float: left;
  width: calc(100% - 46px);
  padding: 9px 4px 0;
  color: #ccc;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
}

.gallery-lightbox-close {
  float: right;
  width: 30px;
  height: 30px;
  margin-top: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-close:focus-visible {
  opacity: 1;
}

.gallery-lightbox-close svg {
  width: 27px;
  height: 27px;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* no hover on touch screens: keep the arrows in sight */
@media (hover: none) {
  .gallery-lightbox-prev,
  .gallery-lightbox-next {
    opacity: 0.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-lightbox-prev,
  .gallery-lightbox-next,
  .gallery-lightbox-close {
    transition: none;
  }
}