/* ============================================================
   МикМ — полноэкранный просмотр фотографий (новости)
   Все правила с префиксом .lb — вне просмотрщика ничего не трогают.
   Подключается точечно на /news и /news/{slug}.
   ============================================================ */

/* Кликабельная картинка. Класс вешает lightbox.js: если скрипт не загрузился,
   курсор-лупа не обманывает пользователя обещанием, что фото откроется. */
.lb-zoomable{ cursor:zoom-in; }
.lb-zoomable:focus-visible{
  outline:3px solid var(--green-bright);
  outline-offset:3px;
}

/* Фон страницы под просмотрщиком не скроллим. Ширину полосы прокрутки
   компенсируем переменной --lb-sbw, иначе вёрстка дёргается при открытии. */
html.lb-open{ overflow:hidden; }
html.lb-open body{ overflow:hidden; padding-right:var(--lb-sbw,0px); }

/* ---------- Каркас ---------- */
.lb{
  position:fixed;
  inset:0;
  /* Выше шапки (80), модалки помощника (150) и куки-плашки (300). */
  z-index:400;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .22s var(--ease);
}
.lb[hidden]{ display:none !important; }
.lb.is-open{ opacity:1; }
.lb *{ -webkit-tap-highlight-color:transparent; }

.lb__backdrop{
  position:absolute;
  inset:0;
  background:rgba(6,9,34,.93);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* ---------- Сцена с картинкой ---------- */
/* touch-action:none — жесты (щипок, панорама) считаем сами, иначе браузер
   перехватывает их и уводит зум страницы. */
.lb__stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  touch-action:none;
  overscroll-behavior:contain;
}
.lb__img{
  max-width:min(94vw, 1600px);
  /* svh — на телефоне адресная строка не режет нижний край фото. */
  max-height:calc(100svh - 168px);
  width:auto;
  height:auto;
  border-radius:var(--radius-s);
  box-shadow:0 40px 110px -40px rgba(0,0,0,.9);
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform;
  transform-origin:center center;
}
.lb__img.is-anim{ transition:transform .26s var(--ease); }
.lb.is-zoomed .lb__img{ cursor:grab; }
.lb.is-grabbing .lb__img{ cursor:grabbing; }

/* Пока файл не догрузился, показываем «дышащее» пятно вместо пустоты. */
.lb__spinner{
  position:absolute;
  width:38px;
  height:38px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:var(--green-bright);
  animation:lb-spin .9s linear infinite;
  pointer-events:none;
}
.lb:not(.is-loading) .lb__spinner{ display:none; }
@keyframes lb-spin{ to{ transform:rotate(360deg); } }

/* ---------- Панели ---------- */
.lb__top{
  position:absolute;
  z-index:3;
  top:calc(env(safe-area-inset-top,0px) + 16px);
  left:clamp(12px,3vw,26px);
  right:clamp(12px,3vw,26px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  pointer-events:none;
}
.lb__top > *{ pointer-events:auto; }

.lb__count{
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  color:#fff;
  padding:10px 16px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(10,14,54,.56);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.lb__count[hidden]{ display:none; }
/* Счётчика может не быть (одно фото) — крестик всё равно держим справа. */
.lb__close{ margin-left:auto; }

/* Кнопки повторяют круглые кнопки галереи в карточке новости. */
.lb__btn{
  width:46px;
  height:46px;
  flex:none;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(10,14,54,.56);
  color:#fff;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.lb__btn:hover{ background:rgba(21,193,114,.82); border-color:transparent; }
.lb__btn:active{ transform:scale(.94); }
.lb__btn:focus-visible{ outline:3px solid var(--green-bright); outline-offset:3px; }
.lb__btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; }

.lb__nav{
  position:absolute;
  z-index:3;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
}
.lb__nav:active{ transform:translateY(-50%) scale(.94); }
.lb__nav--prev{ left:clamp(10px,2.4vw,28px); }
.lb__nav--next{ right:clamp(10px,2.4vw,28px); }
.lb__nav[hidden]{ display:none; }

.lb__caption{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  transform:translateX(-50%);
  max-width:min(760px, calc(100vw - 32px));
  margin:0;
  padding:11px 18px;
  border-radius:var(--radius-s);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,14,54,.56);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.45;
  color:rgba(255,255,255,.9);
  text-align:center;
}
.lb__caption[hidden]{ display:none; }

/* Подсказка по управлению — только первые секунды и только на мыши. */
.lb__hint{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  transform:translateX(-50%);
  font-family:var(--font-display);
  font-weight:600;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  white-space:nowrap;
  pointer-events:none;
  animation:lb-hint 4.5s var(--ease) forwards;
}
.lb__hint[hidden]{ display:none; }
@keyframes lb-hint{ 0%,62%{ opacity:1 } 100%{ opacity:0 } }

/* Когда есть подпись, подсказку поднимаем над ней. */
.lb.has-caption .lb__hint{ bottom:calc(env(safe-area-inset-bottom,0px) + 74px); }

/* ---------- Телефон ---------- */
@media (max-width:640px){
  .lb__img{ max-width:100vw; max-height:calc(100svh - 132px); border-radius:0; }
  /* Стрелки на тач-экране лишние: там свайпы, а кнопки закрывают само фото. */
  .lb__nav{ display:none; }
  .lb__btn{ width:42px; height:42px; }
  .lb__caption{ font-size:14px; padding:9px 14px; }
}

/* ---------- Уважаем системную настройку «меньше движения» ---------- */
@media (prefers-reduced-motion:reduce){
  .lb,
  .lb__img,
  .lb__btn{ transition:none !important; }
  .lb__img.is-anim{ transition:none !important; }
  .lb__spinner{ animation:none; }
  .lb__hint{ animation:none; opacity:1; }
}