/* ===== Hilbert Image Gallery — Porsche-style ===== */

.hhig{
  --hhig-ratio: 16/9;
  --hhig-height: auto;
  --hhig-radius: 12px;

  /* Dots */
  --dot-gap: 10px;
  --dot-size: 8px;
  --dot-length: 22px;

  /* Thumbs */
  --thumb-gap: 10px;
  --hhig-thumb-ar: 16/9;
  --thumb-h: 84px;
  --thumb-h-portrait: 80px;

  width: 100%;
  max-width: var(--hhig-max, none); /* <-- если var не задана, лимита нет */
  margin: 0 auto;
  color: var(--hhig-fg, #1d1d1d);
}

.hhig.is-dark{
  --hhig-fg: #fff;
  --dot-passive: rgba(255,255,255,.38);
  --dot-active: #fff;
  --thumb-border: rgba(255,255,255,.20);
  --thumb-border-active: #fff;
  --stage-bg: #0e0e12;
}
.hhig.is-light{
  --hhig-fg: #1d1d1d;
  --dot-passive: rgba(0,0,0,.28);
  --dot-active: #1d1d1d;
  --thumb-border: rgba(0,0,0,.16);
  --thumb-border-active: #1d1d1d;
  --stage-bg: #f3f3f3;
}

/* orientation modifiers */
.hhig.is-portrait{ --hhig-thumb-ar: 9/16; --thumb-h: var(--thumb-h-portrait); }
.hhig.is-landscape{ --hhig-thumb-ar: 16/9; }

/* ----- Stage ----- */
.hhig__stage{
  position: relative;
  border-radius: var(--hhig-radius);
  overflow: hidden;
  background: var(--stage-bg);
  height: var(--hhig-height);
  aspect-ratio: var(--hhig-ratio);
  user-select: none;
  width: 100%;
}
.hhig__track{
  display: flex;
  height: 100%;
  transform: translate3d(0,0,0);
  transition: transform 360ms cubic-bezier(.22,.61,.36,1);
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}
.hhig__stage:active .hhig__track{ cursor: grabbing; }

.hhig__slide{
  flex: 0 0 100%;   /* вместо min-width — фикс ширина колонки */
  height: 100%;
  position: relative;
  overflow: hidden;
}
.hhig__slide img{
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  background: #000;
  transform: translateZ(0);
}

/* ----- Arrows (optional) ----- */
.hhig__arrow{
  position: absolute; top: 50%;
  width: 42px;
  margin-top: -21px;
  padding: 0px;
  border: 0; border-radius: 999px;
/*  background: rgba(0,0,0,.35); */
  color: #fff; cursor: pointer;
/*  backdrop-filter: blur(4px); */
}
.hhig__arrow.is-prev{ left: 10px; }
.hhig__arrow.is-next{ right: 10px; }
.hhig__arrow:before{
  content: ""; display: block; width: 12px; height: 12px; margin: 15px auto;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.hhig__arrow.is-prev:before{ transform: rotate(-135deg); }

/* ----- Porsche dots ----- */
.hhig__dots{
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: var(--dot-gap);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0);
}
.hhig__dot{
  -webkit-tap-highlight-color: transparent;
  appearance: none; border: 0; padding: 0; margin: 0;
  width: var(--dot-size); height: var(--dot-size);
  background: var(--dot-passive);
  border-radius: 999px; cursor: pointer;
  transition: width .22s ease, background-color .22s ease, opacity .22s ease;
  opacity: .9;
}
.hhig__dot.is-active{
  width: var(--dot-length);
  background: var(--dot-active);
  opacity: 1;
}
.hhig__dot:focus-visible{ outline: 2px solid var(--dot-active); outline-offset: 2px; }

/* ----- Thumbs row ----- */
.hhig__thumbs{
  display: flex; gap: var(--thumb-gap);
  margin-top: 12px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.hhig__thumbs::-webkit-scrollbar{ height: 8px; }
.hhig__thumbs::-webkit-scrollbar-thumb{ background: rgba(127,127,127,.3); border-radius: 8px; }

/* универсальная модель: ширину даёт aspect-ratio от заданной высоты */
.hhig__thumb{
  flex: 0 0 auto;
  height: var(--thumb-h);
  aspect-ratio: var(--hhig-thumb-ar);
  width: auto;                           /* вычисляется из высоты и AR */
  max-width: 160px;
  min-width: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--thumb-border);
  background: #0b0b0e;
  opacity: .8;
  transform: translateZ(0);
  scroll-snap-align: start;
  cursor: pointer;
  padding: 0px 0px;
  transition: border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.hhig__thumb.is-active{
  border-color: var(--thumb-border-active);
  opacity: 1;
  transform: translateY(-1px);
}
.hhig__thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Адаптив */
@media (max-width: 999.98px){
  .hhig{ --hhig-radius: 12px; }
  .hhig__dots{ bottom: 10px; }
  .hhig.is-portrait{ --thumb-h-portrait: 104px; } /* чуть ниже на мобильных */
}

/* Центруем полосу превьюшек относительно главной картинки */
.hhig__thumbs {
  display: flex;
  justify-content: center;              /* центрируем по горизонтали */
  align-items: center;
  gap: 8px;                             /* можешь подправить под свой шаг */
  max-width: var(--hhig-max, 100%);     /* та же ширина, что и у stage */
  margin-left: auto;
  margin-right: auto;
}

/* На всякий случай: картинка внутри thumb по центру */
.hhig__thumb img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center center;
}