/* Imagem em modal (static/js/lightbox.js + templates/_lightbox.html) */
.lightbox { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 48px 56px; background: rgba(0, 0, 0, .8); }
/* limites em vh/vw: dentro do grid, 100% de altura não resolve e a imagem passava da tela */
.lightbox img { width: auto; height: auto; max-width: calc(100vw - 112px); max-height: calc(100vh - 96px); object-fit: contain; border: 0; border-radius: 8px; }
@media (max-width: 767px) { .lightbox { padding: 48px 8px; } .lightbox img { max-width: calc(100vw - 16px); } }
.lightbox-close, .lightbox-nav { border: 0; box-shadow: none; cursor: pointer; }
.lightbox-close { position: absolute; top: 12px; right: 12px; padding: 6px; background: transparent; color: #fff; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 28px; line-height: 40px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-count { position: absolute; bottom: 16px; color: #fff; font: 400 14px/20px var(--font); }