/* Lightbox - replaces Fancybox. A file of its own, so custom.css stays free.

   Three rows: the image area (takes the remaining space), the control
   bar, the thumbnails. The two lower ones have a fixed height, so the
   arrows stand in the same place for every image. */
#ot-lightbox { display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.88); }
#ot-lightbox.open { display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 46px 0 18px; box-sizing: border-box; }

#ot-lightbox .frame { flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center; }
/* block, not flex: as a flex item the image would take its width from
   its natural size and only the height would be capped - the aspect
   ratio is then not recomputed and margins appear. The height is
   limited through --unten instead of a percentage: against a flex item
   a percentage does not resolve reliably. The script sets --unten from
   the actual height of the bar and the thumbnails, which can also wrap
   onto two rows. */
#ot-lightbox { --unten: 160px; }
#ot-lightbox .stage { position: relative; display: block; min-height: 0;
  max-width: 94vw; }
#ot-lightbox img { max-width: 94vw; max-height: calc(100vh - var(--unten));
  width: auto; height: auto; display: block; background: #fff; cursor: pointer;
  box-shadow: 0 0 25px rgba(0,0,0,.8); }

/* Close sits above the top right corner of the image - at the image but
   outside it, so it covers no pixel of it. Above rather than beside,
   because there is no room at the side on narrow screens. That it did
   not react before was not down to its position: it and the stage were
   both positioned and both without a z-index, and then the later
   element in the DOM wins. */
#ot-lightbox .close { position: absolute; bottom: 100%; right: 0; z-index: 5;
  margin: 0 0 6px 0; width: 38px; height: 38px; font-size: 24px;
  background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.35);
  color: #fff; cursor: pointer; border-radius: 50%; line-height: 1;
  padding: 0; }
#ot-lightbox .close:hover { background: #000; }

/* Caption on the image. The screenshots have a black bar at the bottom,
   meant for exactly that - as with Fancybox before. */
#ot-lightbox .bar { position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font: bold 14px/1.25 Arial, Helvetica, sans-serif;
  padding: 6px 12px 10px; text-align: center;
  text-shadow: 0 1px 3px #000; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55)); }
/* If the screenshot has a black bar of its own, its measured height is
   set and the text is centred in it. Gradient and padding are then
   dropped - the bar is black already and is not to be tinted on top. */
#ot-lightbox.balken .bar { padding: 0 12px; background: none;
  text-shadow: none; }
/* .anker has no height; its bottom edge therefore lies on the baseline
   and gives it to the script in pixels. .wort carries the measured
   shift - inline-block, because transform has no effect on plain
   inline elements. */
#ot-lightbox .anker { display: inline-block; width: 0; height: 0; }
#ot-lightbox .wort { display: inline-block; }
#ot-lightbox.nocap .bar { display: none; }

/* Control bar: fixed height, centred. So the arrows stand in the same
   place for every image, also in their distance from the middle. */
#ot-lightbox .controls { flex: 0 0 auto; height: 52px; margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 22px; }
#ot-lightbox .prev, #ot-lightbox .next { width: 52px; height: 52px;
  font-size: 26px; background: rgba(0,0,0,.55); border: 0; color: #fff;
  cursor: pointer; border-radius: 50%; line-height: 1; }
#ot-lightbox .prev:hover, #ot-lightbox .next:hover { background: #000; }
#ot-lightbox .cnt { min-width: 84px; text-align: center; color: #fff;
  font: bold 14px/1 Arial, Helvetica, sans-serif; }

/* Thumbnails, to jump straight to an image */
#ot-lightbox .strip { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center; max-width: 88vw; margin-top: 12px; }
#ot-lightbox .strip img { width: 62px; height: 42px; object-fit: cover;
  opacity: .45; box-shadow: none; border: 2px solid transparent; }
#ot-lightbox .strip img.on, #ot-lightbox .strip img:hover { opacity: 1;
  border-color: #fff; }
#ot-lightbox.single .controls, #ot-lightbox.single .strip { display: none; }

@media (max-width: 700px) {
  #ot-lightbox .close { margin: 0 0 4px 0; width: 34px; height: 34px; }
  #ot-lightbox .controls { height: 46px; gap: 14px; margin-top: 8px; }
  #ot-lightbox .prev, #ot-lightbox .next { width: 46px; height: 46px; }
  #ot-lightbox .strip img { width: 46px; height: 32px; }
}