/* Base gallery layout */
.sg-gallery{--sg-gap:12px;--sg-columns:3;display:grid;grid-template-columns:repeat(var(--sg-columns),minmax(0,1fr));gap:var(--sg-gap)}
.sg-gallery .sg-item{position:relative;overflow:hidden;border-radius:10px;background:#f6f7f9}
.sg-gallery .sg-img{width:100%;height:100%;object-fit:cover;display:block}
.sg-gallery .sg-caption{font-size:.9rem;color:#555;padding:6px}

/* Mobile responsiveness: adjust columns */
@media (max-width: 768px){
  .sg-gallery{--sg-columns:2}
}
@media (max-width: 480px){
  .sg-gallery{--sg-columns:1}
}

/* Masonry */
.sg-masonry{column-gap:var(--sg-gap);display:block}
.sg-masonry .sg-item{break-inside:avoid;margin:0 0 var(--sg-gap) 0}

/* Slider */
.sg-slider{display:block;overflow:auto;scroll-snap-type:x mandatory;white-space:nowrap}
.sg-slider .sg-item{display:inline-block;width:80%;max-width:720px;margin-right:var(--sg-gap);scroll-snap-align:center}

/* LIGHTBOX */
.sg-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:99999;padding:16px}
.sg-lightbox.open{display:flex}
.sg-lb-content{position:relative;max-width:95vw;max-height:90vh;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.sg-lb-img{max-width:95vw;max-height:85vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.sg-lb-caption{position:absolute;left:0;right:0;bottom:10px;color:#fff;text-align:center;font-size:14px;line-height:1.4;padding:8px 16px;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.6) 100%);border-radius:0 0 8px 8px}
.sg-lb-close,.sg-lb-prev,.sg-lb-next{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);border-radius:999px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:28px;line-height:1;user-select:none}
.sg-lb-close{top:10px;right:10px}
.sg-lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.sg-lb-next{right:10px;top:50%;transform:translateY(-50%)}
.sg-lb-close:focus,.sg-lb-prev:focus,.sg-lb-next:focus{outline:2px solid #fff;outline-offset:2px}

/* Larger touch targets on mobile */
@media (max-width: 768px){
  .sg-lb-close,.sg-lb-prev,.sg-lb-next{width:54px;height:54px;font-size:32px}
}