/* Лайтбокс: картина справа / подпись слева на десктопе, сверху / снизу на телефоне */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1000;
}
.lightbox.is-open { display: flex; }
/* Картина и подпись — одна группа по центру: отступ между ними всегда одинаковый (gap),
   какой бы узкой ни была картина. Размер картины ограничен от экрана (vw/vh), а не от
   ширины панели — иначе узкая картина центрируется в панели и от подписи отрывается. */
.lightbox__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px 44px;
  gap: 16px;
}
.lightbox__image-pane { flex: none; }
.lightbox__image-pane img {
  display: block;
  max-width: calc(100vw - 88px);
  max-height: calc(100vh - 180px);
  max-height: calc(100dvh - 180px);
  object-fit: contain;
}
.lightbox__caption {
  border: 1px solid #fff;
  color: #fff;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.lightbox__button {
  position: fixed;
  z-index: 1001;
  padding: 8px;
  border: none;
  background: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close { top: 12px; right: 20px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }

@media (min-width: 783px) {
  /* padding 72px по бокам — зона стрелок, ни подпись, ни картина туда не заезжают */
  .lightbox__content { flex-direction: row; padding: 16px 72px; gap: 24px; }
  .lightbox__image-pane { order: 2; }
  .lightbox__image-pane img {
    max-width: calc(100vw - 144px - 220px - 24px);
    max-height: calc(100vh - 32px);
  }
  .lightbox__caption-pane { order: 1; flex: none; }
  .lightbox__caption { max-width: 220px; text-align: left; }
}