/* Enlarge button on article images */
.image-lightbox-trigger { position: relative; }
.image-lightbox-trigger > img { cursor: zoom-in; }
.image-lightbox__open { position: absolute; top: .75rem; right: .75rem; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 20, 41, .7); color: #fff; font-size: .9375rem; cursor: pointer; opacity: 0; transform: scale(.9); transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease; backdrop-filter: blur(4px); }
.image-lightbox-trigger:hover .image-lightbox__open,
.image-lightbox__open:focus-visible { opacity: 1; transform: none; }
.image-lightbox__open:hover { background: rgba(15, 20, 41, .9); }
.image-lightbox__open:focus-visible { outline: 3px solid #fcd000; outline-offset: 2px; }
@media (hover: none) { .image-lightbox__open { opacity: 1; transform: none; } }

/* Viewer */
html.image-lightbox-open { overflow: hidden; }
.image-lightbox { box-sizing: border-box; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 4rem 5rem 3rem; border: 0; background: transparent; color: #fff; overflow: hidden; }
.image-lightbox[open] { display: flex; align-items: center; justify-content: center; animation: image-lightbox-in 200ms ease; }
.image-lightbox::backdrop { background: rgba(8, 12, 27, .92); backdrop-filter: blur(6px); }
.image-lightbox__figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 100%; height: 100%; margin: 0; }
.image-lightbox__image { display: block; max-width: 100%; max-height: calc(100% - 5rem); width: auto; height: auto; object-fit: contain; border-radius: .5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.image-lightbox__caption { max-width: 48rem; color: #cfd5de; font-size: .875rem; line-height: 1.55; text-align: center; }
.image-lightbox__caption :is(strong, b) { color: #fff; font-weight: 600; }
.image-lightbox__caption a { color: inherit; text-decoration: underline; }
.image-lightbox__close,
.image-lightbox__nav { position: absolute; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.125rem; cursor: pointer; transition: background-color 150ms ease; }
.image-lightbox__close:hover,
.image-lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.image-lightbox__close:focus-visible,
.image-lightbox__nav:focus-visible { outline: 3px solid #fcd000; outline-offset: 2px; }
.image-lightbox__close { top: 1rem; right: 1rem; }
.image-lightbox__nav { top: 50%; transform: translateY(-50%); }
.image-lightbox__nav--prev { left: 1rem; }
.image-lightbox__nav--next { right: 1rem; }
.image-lightbox__nav[hidden] { display: none; }
.image-lightbox__count { position: absolute; top: 1.6rem; left: 1.25rem; margin: 0; color: #aab3c0; font-size: .8125rem; }
@keyframes image-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
  .image-lightbox { padding: 3.75rem 1rem 1.5rem; }
  .image-lightbox__nav { top: auto; bottom: 1rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .image-lightbox[open], .image-lightbox__open { animation: none; transition: none; }
}
