/* izGaraže v0.5.1 — gallery cleanup */

.gallery{
  width:100%;
  margin:0 0 24px;
}

.gallery-main{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  max-height:620px;
  overflow:hidden;
  border-radius:16px;
  background:#17191c;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:zoom-in;
}

.gallery-main img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

.gallery-thumbs{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}

.gallery-thumb{
  appearance:none;
  padding:0;
  border:2px solid transparent;
  border-radius:10px;
  overflow:hidden;
  background:#e9ecef;
  aspect-ratio:4/3;
  cursor:pointer;
  opacity:.78;
  transition:opacity .15s ease,border-color .15s ease,transform .15s ease;
}

.gallery-thumb:hover{
  opacity:1;
  transform:translateY(-1px);
}

.gallery-thumb.active{
  opacity:1;
  border-color:#ff5a1f;
}

.gallery-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Fullscreen pregled */
.izg-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.94);
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px 76px;
}

.izg-lightbox.open{
  display:flex;
}

.izg-lightbox-image{
  max-width:100%;
  max-height:calc(100vh - 56px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
}

.izg-lightbox-close,
.izg-lightbox-prev,
.izg-lightbox-next{
  position:absolute;
  border:0;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease;
}

.izg-lightbox-close:hover,
.izg-lightbox-prev:hover,
.izg-lightbox-next:hover{
  background:rgba(255,255,255,.22);
}

.izg-lightbox-close{
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:50%;
  font-size:28px;
}

.izg-lightbox-prev,
.izg-lightbox-next{
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:64px;
  border-radius:12px;
  font-size:34px;
}

.izg-lightbox-prev{left:16px}
.izg-lightbox-next{right:16px}

body.izg-no-scroll{
  overflow:hidden;
}

@media(max-width:800px){
  .gallery-main{
    border-radius:12px;
    max-height:none;
  }

  .gallery-thumbs{
    display:flex;
    overflow-x:auto;
    gap:7px;
    padding-bottom:4px;
    scrollbar-width:thin;
  }

  .gallery-thumb{
    flex:0 0 92px;
  }

  .izg-lightbox{
    padding:56px 12px 24px;
  }

  .izg-lightbox-prev,
  .izg-lightbox-next{
    width:42px;
    height:58px;
  }

  .izg-lightbox-prev{left:6px}
  .izg-lightbox-next{right:6px}
}