.ijpg-gallery{
  --ijpg-cols-desktop: 4;
  --ijpg-cols-tablet: 3;
  --ijpg-cols-mobile: 2;
  --ijpg-gap: 12px;
  --ijpg-radius: 0px;
  --ijpg-ratio: 1/1;

  display:grid;
  grid-template-columns: repeat(var(--ijpg-cols-desktop), minmax(0, 1fr));
  gap: var(--ijpg-gap);
}

@media (max-width: 980px){
  .ijpg-gallery{ grid-template-columns: repeat(var(--ijpg-cols-tablet), minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .ijpg-gallery{ grid-template-columns: repeat(var(--ijpg-cols-mobile), minmax(0, 1fr)); }
}

.ijpg-item{
  border-radius: var(--ijpg-radius);
  overflow:hidden;
}

.ijpg-img{
  width:100%;
  height:auto;
  display:block;
}

.ijpg-gallery.ijpg-crop .ijpg-media{
  position:relative;
  width:100%;
  aspect-ratio: var(--ijpg-ratio);
  overflow:hidden;
}
.ijpg-gallery.ijpg-crop .ijpg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}



/* Masonry: ignore crop wrapper; use natural image height */
.ijpg-gallery.ijpg-layout-masonry .ijpg-media{
  position:static;
  width:100%;
  aspect-ratio:auto;
  overflow:visible;
}
.ijpg-gallery.ijpg-layout-masonry .ijpg-img{
  position:static;
  width:100%;
  height:auto;
  object-fit:initial;
}
.ijpg-link{ display:block; line-height:0; }


.ijpg-gallery.ijpg-layout-masonry.ijpg-crop .ijpg-img{
  height:auto;
  object-fit: initial;
}


/* Hover Effects */
.ijpg-hover-zoom .ijpg-img{transition:transform .35s ease;}
.ijpg-hover-zoom .ijpg-item:hover .ijpg-img{transform:scale(1.08);}

.ijpg-hover-fade .ijpg-img{transition:opacity .3s ease;}
.ijpg-hover-fade .ijpg-item:hover .ijpg-img{opacity:.75;}

.ijpg-hover-lift .ijpg-item{transition:transform .25s ease, box-shadow .25s ease;}
.ijpg-hover-lift .ijpg-item:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}


/* Hover Effects */
.ijpg-gallery .ijpg-item{ position:relative; }

.ijpg-hover-zoom .ijpg-img{transition:transform .35s ease;}
.ijpg-hover-zoom .ijpg-item:hover .ijpg-img{transform:scale(1.08);}

.ijpg-hover-fade .ijpg-img{transition:opacity .3s ease;}
.ijpg-hover-fade .ijpg-item:hover .ijpg-img{opacity:.75;}

.ijpg-hover-lift .ijpg-item{transition:transform .25s ease, box-shadow .25s ease;}
.ijpg-hover-lift .ijpg-item:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

.ijpg-hover-grayscale .ijpg-img{transition:filter .35s ease;}
.ijpg-hover-grayscale .ijpg-item:hover .ijpg-img{filter:grayscale(100%);}

.ijpg-hover-blur .ijpg-img{transition:filter .35s ease, transform .35s ease;}
.ijpg-hover-blur .ijpg-item:hover .ijpg-img{filter:blur(2px); transform:scale(1.03);}

.ijpg-hover-overlay .ijpg-link, .ijpg-hover-overlay .ijpg-item{display:block;}
.ijpg-hover-overlay .ijpg-item:after{
  content: '';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.ijpg-hover-overlay .ijpg-item:before{
  content: 'Bekijk';
  position:absolute;
  left:12px;
  bottom:10px;
  color:#fff;
  font-size:14px;
  font-weight:600;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.ijpg-hover-overlay .ijpg-item:hover:after{opacity:1;}
.ijpg-hover-overlay .ijpg-item:hover:before{opacity:1; transform:translateY(0);}

.ijpg-hover-tilt .ijpg-item{
  transform-style:preserve-3d;
  transition:transform .25s ease, box-shadow .25s ease;
}
.ijpg-hover-tilt .ijpg-item:hover{
  transform:perspective(900px) rotateX(4deg) rotateY(-4deg) translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.ijpg-hover-parallax .ijpg-item{ overflow:hidden; }
.ijpg-hover-parallax .ijpg-img{transition:transform .45s ease;}
.ijpg-hover-parallax .ijpg-item:hover .ijpg-img{transform:scale(1.12) translateY(-6px);}


.ijpg-gallery.ijpg-layout-masonry .ijpg-link{display:block;}
.ijpg-gallery.ijpg-layout-masonry .ijpg-img{display:block;}
.ijpg-gallery.ijpg-layout-masonry .ijpg-item{margin:0; padding:0;}


/* Masonry layout (absolute positioning; no gaps, stable after load/lazy) */
.ijpg-gallery.ijpg-layout-masonry{
  position:relative;
  display:block;
  width:100%;
}

.ijpg-gallery.ijpg-layout-masonry .ijpg-item{
  position:absolute;
  margin:0;
  padding:0;
  width: var(--ijpg-masonry-colw, 300px);
}

.ijpg-gallery.ijpg-layout-masonry .ijpg-link{display:block;}
.ijpg-gallery.ijpg-layout-masonry .ijpg-img{display:block; width:100%; height:auto;}

/* Crop doesn't apply in masonry */
.ijpg-gallery.ijpg-layout-masonry.ijpg-crop .ijpg-item{ aspect-ratio:auto; }
.ijpg-gallery.ijpg-layout-masonry.ijpg-crop .ijpg-img{ height:auto; object-fit:initial; }




/* Pager */
.ijpg-pager{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin:18px 0 0 0;
}
.ijpg-pager-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:8px;
  background:#fff;
  color:#111;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.ijpg-pager-btn[aria-disabled="true"]{
  opacity:.45;
  pointer-events:none;
}
.ijpg-pager-info{
  font-size:14px;
  font-weight:600;
  color:#111;
}


/* Pager (1 2 3 ...) styled via CSS variables from shortcode */
.ijpg-pager{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin:18px 0 0 0;
}

.ijpg-pager .ijpg-page{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--ijpg-pager-size, 38px);
  height:var(--ijpg-pager-size, 38px);
  padding:0 12px;
  border-radius:var(--ijpg-pager-radius, 10px);
  background:var(--ijpg-pager-bg, #ffffff);
  color:var(--ijpg-pager-text, #111111);
  text-decoration:none !important;
  font-weight:700;
  font-size:var(--ijpg-pager-font, 14px);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}

.ijpg-pager .ijpg-page:hover{
  filter:brightness(0.98);
}

.ijpg-pager .ijpg-page.is-active{
  background:var(--ijpg-pager-active-bg, #F9921F);
  color:var(--ijpg-pager-active-text, #ffffff);
  border-color:rgba(0,0,0,.06);
}

.ijpg-pager .ijpg-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:var(--ijpg-pager-size, 38px);
  color:var(--ijpg-pager-text, #111111);
  opacity:.7;
  font-weight:700;
}

.ijpg-media{display:block;}

/* Extra robustness against theme image rules */
.ijpg-gallery img.ijpg-img{
  max-width:100%;
  height:auto;
}