/*
 * Просмотр картинок поста во всплывающем окне (static/site/js/gallery.js) —
 * общий для витрины (страница канала и публикации) и админки (пост, лента
 * канала): нажатие на картинку сетки открывает её крупно, стрелки листают.
 * Цвета заданы явно, без переменных вёрстки: в админке их нет.
 * Положение окна задано явно (position/inset/translate): у Unfold общее правило
 * для любого <dialog> — `position: relative; top: 50%; left: 50%; translate:
 * -50% -50%` под свои маленькие окна. Без перекрытия наше окно в админке
 * уезжало к верхнему краю, а сдвиг (translate) делал окно опорой для кнопок с
 * position: fixed — стрелки вставали не по краям экрана, крестик пропадал.
 */
.dt-lightbox { position: fixed; inset: 0; translate: none; width: min(96vw, 1400px); max-width: none; height: 96vh; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 16px; background: transparent; box-shadow: none; color: #fff; overflow: visible; }
.dt-lightbox::backdrop { background: rgba(8, 10, 18, .88); }
.dt-lightbox__figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: center; justify-items: center; width: 100%; height: 100%; margin: 0; }
.dt-lightbox__figure img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
/* Под картинкой — номер и (у скриншотов документации) подпись рисунка: длинная подпись переносится по центру */
.dt-lightbox__counter { max-width: 90ch; padding: 10px 0 0; color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.4; text-align: center; }
.dt-lightbox__close, .dt-lightbox__arrow { position: fixed; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.dt-lightbox__close:hover, .dt-lightbox__arrow:hover { background: rgba(255,255,255,.28); }
.dt-lightbox__close { top: 16px; right: 16px; }
.dt-lightbox__arrow { top: 50%; transform: translateY(-50%); }
.dt-lightbox__arrow--prev { left: 16px; }
.dt-lightbox__arrow--next { right: 16px; }
.dt-lightbox--single .dt-lightbox__arrow { display: none; }
@media (max-width: 680px) { .dt-lightbox__arrow { width: 38px; height: 38px; font-size: 26px; } }