/* Photo pop-up (lightbox). Opened by asset/js/lightbox.js for any link with data-lightbox="group". */
.ctg-lb { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center;
  background: rgba(7, 10, 20, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; }
.ctg-lb.is-open { display: flex; }
.ctg-lb.is-visible { opacity: 1; }
/* while open: no page scroll, and a sideways swipe must flip photos, not trigger the browser's "back" gesture */
html.ctg-lb-open, html.ctg-lb-open body { overflow: hidden; overscroll-behavior: none; }
.ctg-lb { touch-action: pan-y pinch-zoom; overscroll-behavior: none; }

.ctg-lb__figure { margin: 0; padding: 64px 0 20px; display: flex; flex-direction: column; align-items: center; max-width: 100vw; max-height: 100vh; box-sizing: border-box; }
.ctg-lb__stage { position: relative; display: flex; align-items: center; justify-content: center; min-width: 160px; min-height: 120px; }
.ctg-lb__img { display: block; max-width: 92vw; max-height: calc(100vh - 210px); width: auto; height: auto; border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55); background: #111827; opacity: 0; transform: scale(.98); transition: opacity .25s ease, transform .25s ease; }
.ctg-lb__img.is-loaded { opacity: 1; transform: none; }
.ctg-lb__spinner { position: absolute; width: 38px; height: 38px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: ctg-lb-spin .8s linear infinite; }
.ctg-lb__spinner[hidden] { display: none; }
.ctg-lb__error { position: absolute; color: #fca5a5; font-size: .9rem; }
.ctg-lb__error[hidden] { display: none; }
@keyframes ctg-lb-spin { to { transform: rotate(360deg); } }

.ctg-lb__caption { margin-top: 14px; max-width: min(92vw, 720px); max-height: 20vh; overflow-y: auto; text-align: center; color: #e5e7eb; }
.ctg-lb__title { margin: 0; font-size: 1.125rem; font-weight: 600; color: #fff; line-height: 1.35; }
.ctg-lb__text { margin: 6px 0 0; font-size: .9rem; line-height: 1.55; color: #cbd5e1; }
.ctg-lb__meta { margin: 8px 0 0; font-size: .8rem; color: #93c5fd; }
.ctg-lb__title:empty, .ctg-lb__text:empty, .ctg-lb__meta:empty { display: none; }

.ctg-lb__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 9999px;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background .15s ease; }
.ctg-lb__btn:hover { background: rgba(255, 255, 255, .26); }
.ctg-lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ctg-lb__btn svg { width: 22px; height: 22px; }
.ctg-lb__close { top: 14px; right: 14px; }
.ctg-lb__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.ctg-lb__next { right: 14px; top: 50%; transform: translateY(-50%); }
.ctg-lb__count { position: absolute; top: 24px; left: 20px; font-size: .85rem; color: #cbd5e1; letter-spacing: .02em; }
.ctg-lb--single .ctg-lb__prev, .ctg-lb--single .ctg-lb__next, .ctg-lb--single .ctg-lb__count { display: none; }

@media (max-width: 640px) {
  .ctg-lb__figure { padding-top: 60px; }
  .ctg-lb__img { max-width: 100vw; border-radius: 0; max-height: calc(100vh - 230px); }
  .ctg-lb__btn { width: 40px; height: 40px; }
  .ctg-lb__prev { left: 8px; top: auto; bottom: 18px; transform: none; }
  .ctg-lb__next { right: 8px; top: auto; bottom: 18px; transform: none; }
  .ctg-lb__caption { padding: 0 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .ctg-lb, .ctg-lb__img { transition: none; }
  .ctg-lb__spinner { animation-duration: 2s; }
}