/* =========================================================
   98-gallery-hero-thumbs.css
   Gutenberg/Spectra gallery with class: gallery-hero-thumbs
   ========================================================= */

/* ---------- Theme variables (edit here) ---------- */
.gallery-hero-thumbs{
  /* HERO sizing */
  --ght-hero-h-desktop: 420px;
  --ght-hero-h-tablet:  420px;
  --ght-hero-h-mobile:  320px;

  /* HERO visuals */
  --ght-hero-radius: 14px;
  --ght-hero-border: 1px solid rgba(0,0,0,.08);
  --ght-hero-shadow: 0 8px 30px rgba(0,0,0,.05);

  /* Thumbs */
  --ght-thumb-radius: 10px;
  --ght-thumb-gap: 5px;
  --ght-thumb-cols: 5;
  --ght-active-color: #2a7bd6;

  /* Thumbs arrows */
  --ght-arrow-size: 18px;
  --ght-arrow-bg: rgba(0,0,0,.38);
  --ght-arrow-bg-hover: rgba(0,0,0,.34);
  --ght-arrow-color: #fff;

  /* Horizontal scrollbar (thumbs row) */
  --ght-scrollbar-h: 4px;
  --ght-scrollbar-track: rgba(0,0,0,.06);
  --ght-scrollbar-thumb: rgba(0,0,0,.22);
  --ght-scrollbar-thumb-hover: rgba(0,0,0,.32);
  --ght-hero-bg: transparent;
}

.wp-block-gallery.gallery-hero-thumbs,
.gallery-hero-thumbs.wp-block-gallery,
.gallery-hero-thumbs{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* centers hero + thumbs as a group */
}

/* ---------- HERO ---------- */
.gallery-hero-thumbs .ght-hero{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: var(--ght-hero-radius);
  border: var(--ght-hero-border);
  box-shadow: var(--ght-hero-shadow);
  overflow: hidden;
  background: var(--ght-hero-bg);
}

.gallery-hero-thumbs .ght-hero-img{
  width: 100% !important;
  height: var(--ght-hero-h-desktop) !important;
  max-width: 100% !important;

  object-fit: cover  !important; /* без обрезки (cover = с обрезкой) */
  display: block;

  cursor: zoom-in;
  -webkit-user-drag: none;
  user-select: none;
}

/* responsive hero heights */
@media (max-width: 1024px){
  .gallery-hero-thumbs .ght-hero-img{ height: var(--ght-hero-h-tablet) !important; }
}
@media (max-width: 640px){
  .gallery-hero-thumbs .ght-hero-img{ height: var(--ght-hero-h-mobile) !important; }
}

/* ---------- THUMBS + ARROWS ---------- */
.gallery-hero-thumbs .ght-thumbs-wrap{
  position: relative;
  width: 100%;
  margin-top: 10px;
}

.gallery-hero-thumbs .ght-thumbs{
  display: flex;
  gap: var(--ght-thumb-gap);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scroll-behavior: auto !important;
  gap: var(--ght-thumb-gap);
  cursor: grab;
}
.gallery-hero-thumbs .ght-thumbs.is-dragging{ cursor: grabbing; }

.gallery-hero-thumbs .ght-thumb{
  flex: 0 0 calc((100% - (var(--ght-thumb-gap) * (var(--ght-thumb-cols) - 1))) / var(--ght-thumb-cols));
  max-width: calc((100% - (var(--ght-thumb-gap) * (var(--ght-thumb-cols) - 1))) / var(--ght-thumb-cols));
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.gallery-hero-thumbs .ght-thumb img{
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;

  border-radius: var(--ght-thumb-radius);
  opacity: .85;
  border: 2px solid transparent;

  -webkit-user-drag: none;
  user-select: none;
}
.gallery-hero-thumbs .ght-thumb.is-active img{
  opacity: 1;
  border-color: var(--ght-active-color);
}

/* arrows */
.gallery-hero-thumbs .ght-thumbs-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--ght-arrow-size);
  height: var(--ght-arrow-size);
  border-radius: 999px;
  border: 0;
  background: var(--ght-arrow-bg);
  color: var(--ght-arrow-color);
  font-size: 14x;
  cursor: pointer;
  z-index: 3;
  display: grid;
  place-items: center;
}
.gallery-hero-thumbs .ght-thumbs-arrow:hover{ background: var(--ght-arrow-bg-hover); }

.gallery-hero-thumbs .ght-thumbs-arrow--prev{ left: -10px; }
.gallery-hero-thumbs .ght-thumbs-arrow--next{ right: -10px; }

@media (max-width: 700px){
  .gallery-hero-thumbs .ght-thumbs-arrow--prev{ left: 6px; }
  .gallery-hero-thumbs .ght-thumbs-arrow--next{ right: 6px; }
}

/* ---------- THUMBS SCROLLBAR (horizontal) ---------- */
/* Firefox */
.gallery-hero-thumbs .ght-thumbs{
  scrollbar-width: thin;
  scrollbar-color: var(--ght-scrollbar-thumb) var(--ght-scrollbar-track);
}

/* Chrome/Safari/Edge */
.gallery-hero-thumbs .ght-thumbs::-webkit-scrollbar{
  height: var(--ght-scrollbar-h);
}
.gallery-hero-thumbs .ght-thumbs::-webkit-scrollbar-track{
  background: var(--ght-scrollbar-track);
  border-radius: 999px;
}
.gallery-hero-thumbs .ght-thumbs::-webkit-scrollbar-thumb{
  background: var(--ght-scrollbar-thumb);
  border-radius: 999px;
}
.gallery-hero-thumbs .ght-thumbs::-webkit-scrollbar-thumb:hover{
  background: var(--ght-scrollbar-thumb-hover);
}

/* ---------- LIGHTBOX ---------- */
.ght-lightbox{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.86);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ght-lightbox.is-open{ display: flex; }

.ght-lightbox .ght-lb-stage{
  position: relative;
  width: 100%;
  max-width: min(1100px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ght-lightbox .ght-lb-img{
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  border-radius: 10px;
}

.ght-lightbox .ght-lb-close,
.ght-lightbox .ght-lb-prev,
.ght-lightbox .ght-lb-next{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  position: absolute;
}
.ght-lightbox .ght-lb-close{ top: -56px; right: 0; }
.ght-lightbox .ght-lb-prev{  left: -58px; top: 50%; transform: translateY(-50%); }
.ght-lightbox .ght-lb-next{  right: -58px; top: 50%; transform: translateY(-50%); }

@media (max-width: 900px){
  .ght-lightbox .ght-lb-prev{ left: 10px; }
  .ght-lightbox .ght-lb-next{ right: 10px; }
  .ght-lightbox .ght-lb-close{ top: 10px; }
}

/* ---------- HERO arrows (desktop + mobile) ---------- */
.gallery-hero-thumbs .ght-hero{
  position: relative;
  touch-action: pan-y; /* важно: разрешаем вертикальный скролл страницы, но даём нам ловить horizontal swipe */
}

.gallery-hero-thumbs .ght-hero-img{
  touch-action: pan-y;
}

/* hero arrows */
.gallery-hero-thumbs .ght-hero-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.18);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
    position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:999px; border:0;
  background:rgba(0,0,0,.18); color:#fff; font-size:26px;
  cursor:pointer; display:grid; place-items:center; z-index:5;

  opacity:0;
  pointer-events:none;              /* <-- КЛЮЧ: когда скрыты, не ловят мышь */
  transition:opacity .15s ease;
}

.gallery-hero-thumbs .ght-hero-arrow--prev{ left: 12px; }
.gallery-hero-thumbs .ght-hero-arrow--next{ right: 12px; }

@media (hover:hover){
  .gallery-hero-thumbs .ght-hero:hover .ght-hero-arrow{
    opacity: 1;
    pointer-events: auto;
  }
}

/* на мобиле показываем всегда (удобно) */
@media (max-width: 900px){
  .gallery-hero-thumbs .ght-hero-arrow{
    opacity: 1;
    pointer-events: auto;
    background: rgba(0,0,0,.22);
  }
}

.gallery-hero-thumbs .ght-hero{ touch-action: pan-y; }
.gallery-hero-thumbs .ght-hero-img{ touch-action: pan-y; }

.ght-lightbox .ght-lb-stage,
.ght-lightbox .ght-lb-img{
  touch-action: pan-y;
}