/* 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; }
}

/* product photos: the stage invites a click, the full-screen photo zooms where it is clicked */
.stage.can-zoom img.p-photo { cursor: zoom-in; }
#lightbox .lb-stage { overflow: hidden; }
#lightbox .lb-stage img { cursor: zoom-in; transition: transform .35s var(--ease); }
#lightbox .lb-stage img.zoomed { transform: scale(2.2); cursor: zoom-out; }

/* full-screen variant for product photos */
#lightbox.lb-full { padding: 0; background: rgb(6 5 8 / .96); }
#lightbox.lb-full .lb-modal { width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; padding: 0; background: transparent; border: 0; box-shadow: none; display: grid; }
#lightbox.lb-full #lightbox-body, #lightbox.lb-full .lb-figure { height: 100%; }
#lightbox.lb-full .lb-figure { grid-template-rows: 1fr auto; gap: 0; }
#lightbox.lb-full .lb-stage { border-radius: 0; background: transparent; min-height: 0; }
#lightbox.lb-full .lb-stage img, #lightbox.lb-full .lb-stage video { max-height: calc(100dvh - 72px); max-width: 100vw; }
#lightbox.lb-full figcaption { padding: 14px 20px 18px; color: rgb(251 236 210 / .7); justify-content: center; }
#lightbox.lb-full figcaption b { color: #fbecd2; }
#lightbox.lb-full .modal-x { position: fixed; top: 14px; right: 14px; z-index: 3; background: rgb(14 11 18 / .7); color: #fff; }