/* The lightbox (assets/js/app/lightbox.js): an entry's image as large as the window allows, on a dark
   layer, × top right, arrows on both sides of a gallery, caption bottom left and count bottom centre
   like under the gallery image. A modal layer (modal.js) on <body>, outside the scaled page:
   sizes here are real window pixels. */

/* the expand buttons next to the figure of a text and under the image of a gallery */
button.expand-btn { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.expand-btn img { display: block; width: 14px; height: 14px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.expand-btn:hover img, .expand-btn:focus-visible img { transform: scale(1.25); }

.lightbox {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: rgba(55, 55, 55, .96); color: #fff; overflow: hidden;
  touch-action: pinch-zoom;   /* a horizontal swipe turns the image instead of being taken by the browser as a pan */
  --lb-x: 72px; --lb-top: 64px; --lb-bottom: 72px;   /* room for the buttons and the caption around the image */
}
.lightbox { animation: lightbox-in .3s ease both; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox-stage { position: absolute; inset: var(--lb-top) var(--lb-x) var(--lb-bottom); display: flex; align-items: center; justify-content: center; }
.lightbox-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); transition: opacity .18s ease, transform .18s ease; }
.lightbox-image.swap { opacity: 0; transform: scale(.985); }

.lightbox-btn { position: absolute; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; cursor: pointer; }
.lightbox-btn img { display: block; width: 24px; height: 24px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.lightbox-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.lightbox-close { right: 14px; top: 10px; }
.lightbox-close:hover img { transform: rotate(90deg) scale(1.1); }
.lightbox-prev, .lightbox-next { top: 50%; margin-top: -22px; }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
.lightbox-prev img, .lightbox-next img { filter: invert(1); }   /* the black arrow, white */
.lightbox-prev img { transform: rotate(180deg); }
.lightbox-prev:hover img { transform: rotate(180deg) translateX(3px); }
.lightbox-next:hover img { transform: translateX(3px); }

.lightbox-caption, .lightbox-count { position: absolute; bottom: 22px; font-size: 12px; line-height: normal; }
.lightbox-caption { left: var(--lb-x); width: min(400px, calc(100% - 2 * var(--lb-x))); }
.lightbox-caption p { margin: 0; }
.lightbox-count { left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* phone: narrower margins, the caption makes room for the count underneath it */
@media (max-width: 640px) {
  .lightbox { --lb-x: 16px; --lb-top: 56px; --lb-bottom: 88px; }
  .lightbox-prev, .lightbox-next { background: rgba(55, 55, 55, .55); border-radius: 50%; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-caption { bottom: 36px; width: calc(100% - 2 * var(--lb-x)); }
  .lightbox-count { bottom: 16px; }
}