/* Галерея автомобиля: вид один на все четыре оформления.

   🔴 Правило здесь одно на весь продукт, а палитра — у каждой темы своя:
   этот файл пользуется только переменными --photo-*, которые тема объявляет
   у себя из своих же цветов. Хардкода цвета тут нет ни одного.

   Вид взят из образца Astry (prototype_astra_a_huligan/gallery.*): стрелки
   поверх самого кадра, счётчик плашкой в углу, разворот во весь экран
   на тёмном фоне, полоса миниатюр внизу разворота.

   🔴 Чего в образце не было и что остаётся нашим: без JavaScript миниатюра
   ведёт на оригинал обычной ссылкой, а кадры за первой дюжиной свёрнуты
   в details ради трафика — миниатюра у нас это оригинал снимка. */

/* Стрелки и счётчик рисует скрипт: без него листать нечем, и обещать
   кнопку, которая ничего не делает, нельзя */
.photo-control {
  display: grid;
  place-items: center;
  position: absolute;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  color: var(--photo-control-ink);
  background: var(--photo-control-bg);
  cursor: pointer;
  z-index: 2;
}
.photo-control:hover { color: var(--photo-accent); }
.photo-control:focus-visible { outline: 3px solid var(--photo-accent); outline-offset: -4px; }
/* Стрелка стоит по краю САМОГО кадра, а не контейнера: у вертикального
   снимка иначе она висит в пустом поле сбоку */
.photo-prev, .photo-next { top: 50%; transform: translateY(-50%); }
.photo-prev { left: max(16px, calc((100% - var(--photo-width, 100%)) / 2 + 16px)); }
.photo-next { right: max(16px, calc((100% - var(--photo-width, 100%)) / 2 + 16px)); }
.photo-counter {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 8px 16px;
  color: var(--photo-control-ink);
  background: var(--photo-control-bg);
  font-size: .875rem;
  line-height: 1.25;
  pointer-events: none;
  z-index: 2;
}

/* Главный снимок открывает разворот: отдельной кнопки «Смотреть фото» нет */
.photo-openable { cursor: zoom-in; }

/* Разворот: нативное окно во весь экран. Фотография занимает всю высоту,
   белых полей и рамки нет — их владелец забраковал отдельно */
.photo-viewer {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--viewer-bg);
  color: var(--photo-control-ink);
  overflow: hidden;
}
.photo-viewer::backdrop { background: var(--viewer-bg); }
.photo-viewer[open] { display: flex; flex-direction: column; }
.viewer-stage { position: relative; display: grid; place-items: center; flex: 1; min-height: 0; width: 100%; }
/* Заглушка приходит с процентным отступом от темы: в развороте он не нужен,
   кадр и так вписан по размеру */
.viewer-photo { width: 100%; height: 100%; min-height: 0; padding: 0; object-fit: contain; background: var(--viewer-bg); }
.viewer-close { top: 16px; right: 16px; }
.viewer-counter { top: 16px; left: 16px; right: auto; bottom: auto; }
.viewer-strip { flex: 0 0 88px; display: flex; align-items: center; padding: 0 16px; background: var(--viewer-bg); }
.viewer-strip .viewer-thumbs {
  display: flex;
  gap: 8px;
  max-width: 1120px;
  margin: 0 auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 8px 0;
}
.viewer-thumb {
  flex: 0 0 88px;
  width: 88px;
  height: 64px;
  padding: 0;
  border: 2px solid var(--photo-control-bg);
  background: var(--photo-control-bg);
  cursor: pointer;
}
.viewer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.viewer-thumb[aria-pressed="true"] { border-color: var(--photo-accent); }
.viewer-thumb:focus-visible { outline: 3px solid var(--photo-accent); outline-offset: -4px; }
/* Пока открыт разворот, страница под ним не прокручивается */
.viewer-open { overflow: hidden; }

@media (max-width: 767px) {
  .photo-control { width: 48px; height: 48px; }
  .photo-prev { left: max(8px, calc((100% - var(--photo-width, 100%)) / 2 + 8px)); }
  .photo-next { right: max(8px, calc((100% - var(--photo-width, 100%)) / 2 + 8px)); }
  .photo-counter { right: 8px; bottom: 8px; }
  .viewer-counter { right: auto; bottom: auto; }
  .viewer-strip { padding-inline: 8px; }
  .viewer-thumb { flex-basis: 72px; width: 72px; height: 56px; }
}