/* ===== NAV ARROWS (near modal, like Pexels) ===== */

.work-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.work-overlay.is-open { display: block; }

.work-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}

.work-overlay__content {
  position: relative;
  z-index: 2;
  width: min(960px, calc(100% - 120px));
  max-height: calc(100vh - 80px);
  margin: 40px auto;
  background: #fff;
  border-radius: 18px;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Стрелки: ставим рядом с окном, а не по краям экрана */
.overlay-prev,
.overlay-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;

  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 0;

  background: rgba(255,255,255,.92);
  color: #111;
  font-size: 30px;
  line-height: 54px;
  text-align: center;

  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  cursor: pointer;
}

/*
  “Магия”: центрируем стрелки рядом с контентом.
  Контент имеет margin auto, поэтому его левый край примерно:
  (50% - content_width/2). Мы ставим стрелку на этот край минус небольшой отступ.
  Упростим: позиционируем от 50% и сдвигаем на половину ширины контента + 22px.
*/
.overlay-prev{
  left: 50%;
  margin-left: calc(-1 * (min(960px, calc(100% - 120px)) / 2) - 45px);
}

.overlay-next{
  left: 50%;
  margin-left: calc((min(960px, calc(100% - 120px)) / 2) - 9px);
}

.overlay-prev:hover,
.overlay-next:hover{
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
}

.overlay-prev:disabled,
.overlay-next:disabled{
  opacity: .35;
  cursor: default;
  box-shadow: none;
}

@media (max-width: 768px){
  .work-overlay__content{
    width: calc(100% - 28px);
    margin: 14px auto;
    max-height: calc(100vh - 28px);
  }

  .overlay-prev,
  .overlay-next{
    width: 46px;
    height: 46px;
    font-size: 26px;
    line-height: 46px;
  }

  /* на мобиле делаем ближе к окну */
  .overlay-prev{
    margin-left: calc(-1 * ((calc(100% - 28px)) / 2) - 12px);
  }
  .overlay-next{
    margin-left: calc(((calc(100% - 28px)) / 2) - 26px);
  }
}