/* Justified photo rows, replacing Photonic's script-driven mosaic. Each photo carries its
   aspect ratio in --ar, so growing in proportion to it gives every photo in a row the
   same height. */
.photonic-stream .archive-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
}
/* Soaks up the spare width so the last row isn't stretched. */
.photonic-stream .archive-gallery::after {
  content: "";
  flex-grow: 999999;
}
.photonic-stream .archive-gallery .photonic-thumb {
  display: block; /* Photonic hid photos until its script placed them */
  position: static;
  flex-grow: var(--ar);
  flex-basis: calc(var(--ar) * 170px);
  margin: 0;
  padding: 0;
}
.photonic-stream .archive-gallery .photonic-thumb a {
  display: block;
  padding: 0;
  overflow: hidden;
}
.photonic-stream .archive-gallery .photonic-thumb a img {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  transition: transform 0.3s;
}
.photonic-stream .archive-gallery .photonic-thumb a:hover img {
  transform: scale(1.05);
}

/* Lightbox */
.lb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000000; /* above the theme's back-to-top button (999999) */
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
}
.lb.lb-open {
  display: flex;
}
.lb img {
  max-width: calc(100vw - 120px);
  max-height: calc(100vh - 60px);
  object-fit: contain;
}
.lb button {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  font-size: 48px;
  line-height: 1;
  padding: 12px 18px;
  cursor: pointer;
  opacity: 0.7;
}
.lb button:hover {
  opacity: 1;
}
.lb-close {
  top: 0;
  right: 0;
}
.lb-prev {
  left: 0;
}
.lb-next {
  right: 0;
}
.lb-count {
  position: absolute;
  bottom: 12px;
  color: #ccc;
  font: 14px sans-serif;
}
@media (max-width: 600px) {
  .photonic-stream .archive-gallery .photonic-thumb {
    flex-basis: calc(var(--ar) * 100px);
  }
  .lb img {
    max-width: 100vw;
  }
  .lb-prev,
  .lb-next {
    display: none;
  }
}