/* Общие стили */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  text-align: center;
}

/* Галерея (flex-фоллбек) */
#middle {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  overflow: visible;
  box-sizing: border-box;
}

/* Карточки */
.itemBlock {
  display: flex;
  overflow: hidden;
  align-items: stretch;
  border: 1px solid gainsboro;
  padding: 20px;
  margin: 1px;
  flex: 0 0 auto; /* для старых Edge в режиме flex */
}

.item {
  display: block;
  flex-grow: 1;
  width: 125px;
  word-wrap: break-word;
  border: 1px solid black;
}

.itemImg {
  width: 125px;
  display: block;
  cursor: zoom-in;
}

#middle .itemName {
  display: block;
  text-align: center;
  border-top: 1px solid black;
  font: 16px Arial, serif;
  padding: 5px;
}

#middle .itemPos {
  display: block;
  text-align: center;
  border-bottom: 1px solid black;
  font: 16px Arial, serif;
  padding: 5px;
}

/* ===== Grid для галереи: равномерное заполнение строки без пустоты справа ===== */
@supports (display: grid) {
  #middle {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(167px, 1fr));
    column-gap: 2px;
    row-gap: 2px;
  }
  .itemBlock { margin: 0; padding: 20px; }
  .item      { width: 100%; }
  .itemImg   { width: 100%; height: auto; }
}

/* ===== Оверлей (слайдер) ===== */
#overlay {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;                 /* по умолчанию скрыт */
  cursor: zoom-out;              /* клик по фону — выход */
  z-index: 9999;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Показ слайдера и идеальное центрирование */
#overlay.open {
  display: grid;                 /* включаем видимость */
  place-items: center;           /* по центру и по вертикали, и по горизонтали */
}

/* Контейнер: одна колонка, ширину задаёт изображение.
   Масштабируем ВЕСЬ контент на 1.5×, центрирование из середины */
#overlay-content {
  --zoom: 1.5;

  display: inline-grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  align-items: start;

  transform: scale(var(--zoom));
  transform-origin: center center; /* центр масштабирования */
  max-width: calc(90vw / var(--zoom));

  cursor: default;
  pointer-events: auto;
}

/* Картинка в слайдере */
#overlay-img {
  display: block;

  /* размеры */
  max-width: 100%;
  max-height: calc(80vh / var(--zoom));

  /* оформление */
  background-color: rgba(30,30,30,1);
  border-radius: 12px;                         /* плавные углы */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);   /* мягкая тень */

  /* поведение */
  user-select: none;
  pointer-events: auto;
  cursor: default;
}

/* Номер и подпись: ширина = ширине картинки, переносятся по строкам.
   Базовый размер 20px, итоговый = 30px за счёт scale(1.5). */
#overlay-number,
#overlay-caption {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  color: #fff;
  text-align: center;
  font-family: Arial, sans-serif;
  margin: 8px 0;

  font-size: 20px;  /* итоговый ≈ 30px из-за transform родителя */

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  contain: inline-size;

  cursor: text;
  user-select: text;
}

/* Стрелки — у краёв окна, поверх контента */
.overlay-arrow {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  z-index: 10000;
}
.overlay-arrow img { width: 40px; height: auto; pointer-events: none; }
#overlay-prev { left: 0;  right: auto; }
#overlay-next { right: 0; left:  auto; }