/* Lightbox2: фиксируем оверлей и контейнер по viewport (без прыжков скролла,
   без "пустого места сверху" на длинных страницах) и центрируем содержимое.
   Стили применяются только когда lightbox реально открыт — lightbox.js при
   `disableScrolling: true` добавляет на body класс `lb-disable-scrolling`.
   Размеры картинки задаёт сам плагин через опции lightbox.option ниже. */
body.lb-disable-scrolling .lightboxOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100000 !important;
}
body.lb-disable-scrolling #lightbox.lightbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: max(16px, 4vh) 0 0 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /* Не center: иначе при появлении/скрытии полосы подписи весь блок
       пересчитывает середину и картинка прыгает вверх/вниз. */
    justify-content: flex-start !important;
    text-align: center !important;
    z-index: 100001 !important;
    pointer-events: none;
}
body.lb-disable-scrolling #lightbox.lightbox .lb-outerContainer,
body.lb-disable-scrolling #lightbox.lightbox .lb-dataContainer {
    pointer-events: auto;
    margin: 0 auto !important;
    flex-shrink: 0;
}

/* Полоса подписи ВСЕГДА в потоке: lightbox2 на changeImage делает
   .lb-dataContainer.hide(), из‑за чего картинка прыгает по вертикали
   (flex-center), а потом fadeIn возвращает текст и сдвигает фото вверх.
   !important перебивает inline display:none от jQuery .hide(). */
#lightbox .lb-dataContainer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 56px !important;
    height: 56px !important;
    max-height: 56px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding-top: 8px !important;
}
#lightbox .lb-data .lb-details {
    line-height: 1.25;
    min-height: 40px;
}
#lightbox .lb-data .lb-caption {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.25em;
    max-height: 2.5em;
    min-height: 1.25em;
    font-size: 13px;
    font-weight: 700;
    opacity: 1 !important;
}
#lightbox .lb-data .lb-number {
    display: block !important;
    padding-bottom: 0 !important;
    margin-top: 2px;
    opacity: 1 !important;
}

/* ===========================================================================
   Плавная смена картинок в лайтбоксе.

   1) `transition` на .lb-outerContainer — мягкое изменение размера контейнера
      между картинками разного аспект-рейтио (плагин меняет width/height
      через jQuery .animate, transition его не перекрывает, но добавляет
      аккуратное easing на сам контейнер на случай ручных изменений).
   2) `.lb-slide-enter` — keyframes-анимация slide+fade, навешивается из JS
      на <img.lb-image> при КАЖДОЙ смене картинки (next/prev).
      Анимация перезапускается удалением класса → reflow → добавлением.
   =========================================================================== */
#lightbox .lb-outerContainer{
    transition: width 350ms cubic-bezier(.25,.46,.45,.94),
                height 350ms cubic-bezier(.25,.46,.45,.94);
}
#lightbox .lb-image{
    will-change: transform, opacity;
}
#lightbox .lb-image.lb-slide-enter{
    animation: lb-slide-enter 500ms cubic-bezier(.25,.46,.45,.94);
}
@keyframes lb-slide-enter{
    from{ opacity: 0; transform: translateX(40px); }
    to  { opacity: 1; transform: translateX(0); }
}
/* На случай предпочтения «без анимаций» — отключаем slide */
@media (prefers-reduced-motion: reduce){
    #lightbox .lb-outerContainer{ transition: none; }
    #lightbox .lb-image.lb-slide-enter{ animation: none; }
}