/* ==========================================
   Модалка оригиналов картинок (контент записи)
   Разметку создаёт js/image-lightbox.js,
   ассеты подключает Module/PostContent/ImageLightbox.
   ========================================== */

/* Пока модалка открыта, страница под ней не скроллится. */
.ds-lightbox-open { overflow: hidden; }

.ds-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-lightbox[hidden] { display: none; }

.ds-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.85);
}

.ds-lightbox__frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
  width: min(calc(100vw - 160px), 1100px);
  height: calc(100vh - 48px);
  max-width: calc(100vw - 160px);
  max-height: 100vh;
  margin: 0;
  padding: var(--ds-space-6) 0;
}

.ds-lightbox__image {
  display: block;
  max-width: 100%;
  /* Место под подпись «N из M»: иначе на узком экране она ложится на фото. */
  max-height: calc(100vh - 160px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--ds-bg-raised);
  border-radius: var(--ds-radius-sm);
}

/* Слайды лежат стопкой и переключаются атрибутом hidden: кадр не «прыгает»
   между картинками разного размера, а неактивные не занимают места. */
.ds-lightbox__image[hidden] { display: none; }

/* --- Лоадер на время загрузки оригинала --- */

.ds-lightbox__loader {
  position: absolute;
  z-index: 1;              /* поверх картинки, в т.ч. поверх alt-текста */
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid rgb(195 195 195 / 0.25);
  border-top-color: var(--ds-text-link);
  border-radius: 50%;
  animation: ds-lightbox-spin .8s linear infinite;
  pointer-events: none;
}

.ds-lightbox__loader[hidden] { display: none; }

@keyframes ds-lightbox-spin {
  to { transform: rotate(360deg); }
}

/* Лоадер не должен наезжать на стрелки на узком экране. */
@media (max-width: 640px) {
  .ds-lightbox__loader { top: calc(50% - 24px); }
}

.ds-lightbox__caption {
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-sm);
}

.ds-lightbox__caption:empty { display: none; }

/* --- Ошибка загрузки оригинала --- */

.ds-lightbox__error { display: none; }

/* Ошибка гасит лоадер: иначе на битой ссылке он висел бы вечно и модалка
   выглядела бы зависшей. */
.ds-lightbox--failed .ds-lightbox__loader { display: none; }

.ds-lightbox--failed .ds-lightbox__error {
  display: block;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-bg-raised);
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-sm);
  border-radius: var(--ds-radius-sm);
  text-align: center;
}

/* --- Кнопки: крестик и стрелки --- */

.ds-lightbox__close,
.ds-lightbox__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(64 64 64 / 0.9);
  color: var(--ds-text-primary);
  font-size: var(--ds-font-size-lg);
  line-height: 1;
  cursor: pointer;
  transition: background var(--ds-transition), color var(--ds-transition);
}

.ds-lightbox__close:hover,
.ds-lightbox__nav:hover {
  background: var(--ds-bg-accent);
  color: var(--ds-text-white);
}

.ds-lightbox__close:focus-visible,
.ds-lightbox__nav:focus-visible {
  outline: 2px solid var(--ds-text-link);
  outline-offset: 2px;
}

.ds-lightbox__close {
  top: var(--ds-space-4);
  right: var(--ds-space-4);
}

.ds-lightbox__nav {
  top: 50%;
  margin-top: -20px;
}

.ds-lightbox__nav--prev { left: var(--ds-space-4); }
.ds-lightbox__nav--next { right: var(--ds-space-4); }

/* --- Адаптив --- */

@media (max-width: 640px) {
  /* На узком экране стрелки уходят под картинку панелью, а не по бокам:
     места по краям нет, и они наезжают на само изображение. */
  .ds-lightbox__frame {
    /* gap отбивает подпись от картинки, а не даёт ей лечь поверх:
       по умолчанию флекс центрирует детей и счётчик наезжал на фото. */
    gap: var(--ds-space-2);
    max-width: calc(100vw - 24px);
    max-height: 100vh;
    padding: 56px 0 64px;
  }

  .ds-lightbox__image { max-height: calc(100vh - 190px); }

  .ds-lightbox__nav {
    top: auto;
    bottom: var(--ds-space-4);
    margin-top: 0;
  }

  .ds-lightbox__nav--prev { left: calc(50% - 52px); }
  .ds-lightbox__nav--next { right: calc(50% - 52px); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-lightbox__close,
  .ds-lightbox__nav { transition: none; }

  /* Вращение убираем, но факт загрузки должен читаться — пульсируем. */
  .ds-lightbox__loader {
    border-width: 0;
    background: var(--ds-text-link);
    animation: ds-lightbox-pulse 1.2s ease-in-out infinite;
  }

  @keyframes ds-lightbox-pulse {
    0%, 100% { opacity: .25; }
    50%      { opacity: 1; }
  }
}