/* Certificate lightbox: large photo or video on a neutral stage with caption and arrow navigation. */

.lb-modal { width: min(1080px, calc(100vw - 32px)); padding: 18px; }
.lb-figure { margin: 0; display: grid; gap: 12px; }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 240px; border-radius: 14px; background: #f4f1ea; overflow: hidden; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: min(74vh, 900px); object-fit: contain; display: block; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgb(14 11 18 / .65); color: #fff; border-color: transparent; }
.lb-nav:hover { background: rgb(14 11 18 / .85); }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-figure figcaption { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 14px; color: var(--muted); padding-right: 40px; }
.lb-figure figcaption b { color: var(--text); font-family: var(--font-display); font-size: 18px; }
.lb-count { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .lb-modal { padding: 12px; }
  .lb-stage { min-height: 180px; }
}