/* ==========================================================
   galerija.css
   GALERIJA (img/galerija) — stabilna matrica 4xN (3:4 tile)
   Radi sa HTML strukturom:
   .tm-gallery-extended > a > figure.effect-honey.tm-gallery-item > img.img-fluid
   Firefox-friendly + Magnific Popup safe z-index
   ========================================================== */

/* -----------------------
   1) GRID LAYOUT
   ----------------------- */
.tm-gallery-extended{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* fiksno 4 na desktopu */
  gap: 20px;
  align-items: start;
}

/* Link kao grid item */
.tm-gallery-extended > a{
  display: block;
  text-decoration: none;
  outline: none;
}

/* -----------------------
   2) TILE (FIGURE) NORMALIZACIJA
   ----------------------- */

/* Ukloni default margin figure-a (često pravi "ispadanje") */
.tm-gallery-extended figure{
  margin: 0 !important;
}

/* Figure je tile: zaključan odnos 3:4 */
.tm-gallery-extended .tm-gallery-item{
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;       /* 900x1200 */
  border-radius: 12px;
  overflow: hidden;          /* da zoom/overlay ne ide van */
  position: relative;        /* za effect-honey pseudo-elemente */
  background: rgba(0,0,0,.04); /* fallback pozadina */
}

/* Ako effect-honey koristi pseudo-elemente, spreči da utiču na layout */
.tm-gallery-extended .tm-gallery-item::before,
.tm-gallery-extended .tm-gallery-item::after{
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
}

/* -----------------------
   3) SLIKE — UJEDNAČI DIMENZIJE
   ----------------------- */

/* Overwrite Bootstrap .img-fluid (height:auto) i ukloni baseline gap */
.tm-gallery-extended .tm-gallery-item img{
  width: 100%;
  height: 100% !important;  /* bitno: prepisuje .img-fluid */
  display: block;           /* uklanja 2-4px "gap" ispod slike */
  object-fit: cover;        /* popuni tile; ujednači i ako ratio varira */
  object-position: center;
  border-radius: 12px;
  transform: translateZ(0); /* malo glađe u FF/GPU */
  transition: transform .35s ease, filter .35s ease;
}

/* Hover efekat — bez lomljenja grid-a */
.tm-gallery-extended > a:hover .tm-gallery-item img{
  transform: scale(1.06);
  filter: brightness(1.03);
}

/* Fokus stanje za tastaturu */
.tm-gallery-extended > a:focus-visible .tm-gallery-item{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 4px;
}

/* -----------------------
   4) RESPONSIVE
   ----------------------- */
@media (max-width: 992px){
  .tm-gallery-extended{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 576px){
  .tm-gallery-extended{
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* -----------------------
   5) MAGNIFIC POPUP — UI I Z-INDEX
   ----------------------- */
.mfp-wrap, .mfp-bg{
  z-index: 99999;
}

.mfp-close, .mfp-arrow{
  opacity: 1 !important;
}

/* Veći click target */
.mfp-close{
  width: 52px;
  height: 52px;
  line-height: 52px;
  font-size: 40px;
}

/* (Opcionalno) Ako arrowi deluju mali, može i ovo:
.mfp-arrow{
  transform: scale(1.1);
}
*/