/* Media block, gallery: the large view over the page (js/pb-media-lightbox.js, TKT-3628).
   Plain CSS beside the compiled app.min.css, loaded only where the Media block is. */
.pb-media .gallery-grid a.lightbox-link { display: block; cursor: zoom-in; }
.pb-media .gallery-grid a.lightbox-link:focus-visible { outline: 3px solid #F11436; outline-offset: 3px; }

.ntg-lightbox-open, .ntg-lightbox-open body { overflow: hidden; }

.ntg-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(32, 49, 66, .94); }
.ntg-lightbox[hidden] { display: none; }

.ntg-lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 64px 72px; box-sizing: border-box; }
.ntg-lightbox__figure img { max-width: 100%; max-height: calc(100% - 2.5em); width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.ntg-lightbox__figure figcaption { color: #fefefe; margin-top: .75em; text-align: center; font-size: 1rem; }

.ntg-lightbox button { position: absolute; border: 0; background: transparent; color: #fefefe; cursor: pointer; line-height: 1; padding: 0; width: 56px; height: 56px; font-size: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color .2s; }
.ntg-lightbox button:hover { background: rgba(254, 254, 254, .12); }
.ntg-lightbox button:focus-visible { outline: 3px solid #F11436; outline-offset: 2px; }
.ntg-lightbox button[hidden] { display: none; }
.ntg-lightbox__close { top: 12px; right: 12px; font-size: 40px; }
.ntg-lightbox__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.ntg-lightbox__next { right: 8px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .ntg-lightbox__figure { padding: 56px 12px; }
  .ntg-lightbox__prev, .ntg-lightbox__next { top: auto; bottom: 8px; transform: none; }
}