/* =========================
   SYSTEM GALLERY CSS
   Grid / Masonry / Slider / Lightbox
   ========================= */

/* GRID */
.gallery-grid{
  display:grid!important;
  gap:18px!important;
}
.gallery-cols-3{
  grid-template-columns:repeat(3,1fr)!important;
}
.gallery-cols-4{
  grid-template-columns:repeat(4,1fr)!important;
}
.gallery-img{
  width:100%!important;
  height:220px!important;
  object-fit:cover!important;
  border-radius:20px!important;
  background:#e5e7eb!important;
  cursor:pointer!important;
  display:block!important;
}

/* MASONRY */
.gallery-masonry{
  column-gap:18px!important;
}
.gallery-masonry.gallery-cols-3{
  columns:3!important;
}
.gallery-masonry.gallery-cols-4{
  columns:4!important;
}
.gallery-masonry-img{
  width:100%!important;
  height:auto!important;
  border-radius:20px!important;
  margin:0!important;
  break-inside:avoid!important;
  cursor:pointer!important;
  background:#e5e7eb!important;
  display:block!important;
}

/* TILES / HOVER */
.gallery-tile{
  position:relative!important;
  overflow:hidden!important;
  border-radius:20px!important;
  margin:0!important;
}
.gallery-tile img{
  transition:transform .25s ease, filter .25s ease!important;
}
.gallery-tile:hover img{
  transform:scale(1.002)!important;
}
.gallery-tile:has(.gallery-overlay):hover img{
  transform:scale(1.04)!important;
  filter:brightness(.55)!important;
}
.gallery-overlay{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:flex-end!important;
  padding:18px!important;
  opacity:0!important;
  transform:translateY(8px)!important;
  transition:.25s ease!important;
  pointer-events:none!important;
  color:#fff!important;
}
.gallery-tile:hover .gallery-overlay{
  opacity:1!important;
  transform:none!important;
}
.gallery-overlay a{
  pointer-events:auto!important;
  color:#fff!important;
  text-decoration:none!important;
}
.gallery-overlay strong{
  display:block!important;
  font-size:18px!important;
  line-height:1.15!important;
  color:#fff!important;
}
.gallery-overlay span{
  display:block!important;
  margin-top:5px!important;
  font-size:14px!important;
  opacity:.86!important;
  color:#fff!important;
}
.gallery-tile-masonry{
  margin:0 0 18px!important;
  break-inside:avoid!important;
}

/* SLIDER */
.gallery-slider{
  position:relative!important;
  overflow:hidden!important;
  border-radius:24px!important;
  user-select:none!important;
  touch-action:pan-y!important;
}
.gallery-slider.is-dragging,
.gallery-slider.is-dragging *{
  cursor:grabbing!important;
}
.gallery-viewport{
  overflow:hidden!important;
  border-radius:24px!important;
}
.gallery-track{
  display:flex!important;
  gap:18px!important;
  transition:transform .35s ease!important;
  will-change:transform!important;
  cursor:grab!important;
}
.gallery-slide-card{
  position:relative!important;
  flex:0 0 calc((100% - (18px * (var(--per-view, 1) - 1))) / var(--per-view, 1))!important;
  min-width:0!important;
  border-radius:24px!important;
  overflow:hidden!important;
}
.gallery-slide{
  width:100%!important;
  height:var(--gallery-slider-height, 460px)!important;
  object-fit:cover!important;
  border-radius:24px!important;
  cursor:pointer!important;
  display:block!important;
}

/* SLIDER CAPTION */
.gallery-caption{
  position:absolute!important;
  left:14px!important;
  right:14px!important;
  bottom:14px!important;
  padding:14px!important;
  border-radius:18px!important;
  background:rgba(0,0,0,.62)!important;
  color:#fff!important;
  backdrop-filter:blur(10px)!important;
}
.gallery-caption a{
  color:#fff!important;
  text-decoration:none!important;
}
.gallery-caption strong{
  display:block!important;
  font-size:18px!important;
  line-height:1.15!important;
  color:#fff!important;
}
.gallery-caption span{
  display:block!important;
  margin-top:5px!important;
  font-size:14px!important;
  opacity:.86!important;
  color:#fff!important;
}

/* ARROWS */
.gallery-arrow {
    position: absolute !important;
   top: 50% !important; 
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #fff !important;
    color: #111827 !important;
    cursor: pointer !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18) !important;
    padding: 7px 5px 6px 6px !important;
}
.gallery-arrow[data-prev]{
  left:14px!important;
}
.gallery-arrow[data-next]{
  right:14px!important;
}

/* DOTS */
.gallery-dots{
  display:flex!important;
  justify-content:center!important;
  gap:8px!important;
  padding:16px 0 0!important;
}
.gallery-dot{
  width:9px!important;
  height:9px!important;
  border-radius:999px!important;
  border:0!important;
  background:#cbd5e1!important;
  cursor:pointer!important;
  padding:0!important;
  transition:.2s ease!important;
}
.gallery-dot.active{
  background:var(--primary, #0054FF)!important;
  width:24px!important;
}

/* LIGHTBOX */
.lightbox{
  position:fixed!important;
  inset:0!important;
  background:rgba(0,0,0,.9)!important;
  z-index:999999!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
}
.lightbox.active{
  display:flex!important;
}
.lightbox img{
  max-width:92vw!important;
  max-height:90vh!important;
  border-radius:18px!important;
  object-fit:contain!important;
}
.lightbox-close,
.lightbox-nav{
  position:absolute!important;
  border:0!important;
  background:#fff!important;
  color:#111!important;
  cursor:pointer!important;
  box-shadow:0 12px 36px rgba(0,0,0,.25)!important;
  padding:0!important;
}
.lightbox-close{
  top:20px!important;
  right:20px!important;
  width:44px!important;
  height:44px!important;
  border-radius:50%!important;
  font-size:28px!important;
}
.lightbox-nav{
  top:50%!important;
  transform:translateY(-50%)!important;
  width:52px!important;
  height:52px!important;
  border-radius:50%!important;
  font-size:36px!important;
  line-height:1!important;
}
.lightbox-prev{
  left:20px!important;
}
.lightbox-next{
  right:20px!important;
}

/* MOBILE */
@media(max-width:900px){
  .gallery-cols-3,
  .gallery-cols-4{
    grid-template-columns:1fr!important;
  }
  .gallery-masonry.gallery-cols-3,
  .gallery-masonry.gallery-cols-4{
    columns:1!important;
  }
  .gallery-track{
    gap:0!important;
  }
  .gallery-slide-card{
    flex-basis:100%!important;
  }
  .gallery-slide{
    height:min(var(--gallery-slider-height, 300px), 520px)!important;
  }
  .gallery-arrow{
    width:38px!important;
    height:38px!important;
    font-size:28px!important;
  }
  
}