/* LIGHTBOX (assets/js/lightbox.js): the image over a dark backdrop, up to 90% of the screen height, light gold behind
   transparent parts. White close button top right; arrows at the sides in galleries (phones swipe instead). */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .7); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: none; }
.lightbox-open { overflow: hidden; } /* the page doesn't scroll behind it */
.lightbox img { width: auto; height: auto; max-width: calc(100% - 140px); max-height: 90%; background-color: var(--accent-light); }
.lightbox button { position: absolute; padding: 10px; border: 0; background: none; color: var(--white); font-size: 40px; line-height: 1; cursor: pointer; }
.lightbox button:is(:hover, :focus-visible) { background: none; color: var(--accent); }
.lightbox-close { top: 10px; right: 15px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 15px; }
.lightbox-next { right: 15px; }
.lightbox.single :is(.lightbox-prev, .lightbox-next) { display: none; }
@media (max-width: 768px) {
	.lightbox img { max-width: calc(100% - 20px); }
	.lightbox :is(.lightbox-prev, .lightbox-next) { display: none; }
}