/*
 * "Fotos do trabalho" lightbox on the profile (single-professional.php,
 * assets/js/perfil.js). Loaded only when the profile has photos (Assets.php).
 * Phone first: at 390px the photo takes the full width, the arrows sit over
 * its sides and the counter below it; from 720px the arrows move outside.
 */
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(7,28,20,.95);display:none;
  place-items:center;padding:64px 12px 24px;overscroll-behavior:contain}
.lightbox.on{display:grid}
.lb-stage{margin:0;display:grid;justify-items:center;gap:12px;max-width:100%;touch-action:pan-y}
.lightbox img{display:block;max-width:min(920px,100%);max-height:calc(100dvh - 140px);
  width:auto;height:auto;border-radius:var(--r-md,12px);user-select:none;-webkit-user-drag:none}
.lb-count{color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;
  background:rgba(255,255,255,.12);padding:4px 12px;border-radius:999px}
.lb-count[hidden]{display:none}
.lightbox .close,.lb-nav{position:absolute;width:44px;height:44px;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.lightbox .close{top:12px;right:12px}
.lightbox .close svg,.lb-nav svg{width:22px;height:22px}
.lb-nav{top:50%;transform:translateY(-50%);background:rgba(7,28,20,.55)}
.lb-nav[hidden]{display:none}
.lb-prev{left:8px}
.lb-next{right:8px}
.lightbox .close:hover,.lb-nav:hover{background:rgba(255,255,255,.26)}
.lightbox .close:focus-visible,.lb-nav:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (min-width:720px){
  .lightbox{padding:72px 80px 32px}
  .lightbox .close{top:18px;right:18px}
  .lb-nav{width:52px;height:52px;background:rgba(255,255,255,.14)}
  .lb-prev{left:18px}
  .lb-next{right:18px}
}