:root{
  --sgag-gap: 16px;
  --sgag-radius: 16px;
  --sgag-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.sgag-grid{
  display:grid;
  gap:var(--sgag-gap);
}

.sgag-grid.sgag-cols-1{grid-template-columns: 1fr;}
.sgag-grid.sgag-cols-2{grid-template-columns: repeat(2, 1fr);}
.sgag-grid.sgag-cols-3{grid-template-columns: repeat(3, 1fr);}
.sgag-grid.sgag-cols-4{grid-template-columns: repeat(4, 1fr);}
.sgag-grid.sgag-cols-5{grid-template-columns: repeat(5, 1fr);}

@media (max-width: 1024px){
  .sgag-grid{grid-template-columns: repeat(2, 1fr) !important;}
}
@media (max-width: 640px){
  .sgag-grid{grid-template-columns: 1fr !important;}
}

.sgag-album{
  cursor:pointer;
  border-radius:var(--sgag-radius);
  overflow:hidden;
  background:#111;
  color:#fff;
  box-shadow:var(--sgag-shadow);
  transform: translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease;
  outline:none;
}
.sgag-album:focus{
  box-shadow:0 0 0 3px #2563eb, var(--sgag-shadow);
}
.sgag-album:hover{ transform: translateY(-4px); }

.sgag-album-cover{ position:relative; aspect-ratio: 16/10; background:#222; }
.sgag-album-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.sgag-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55) 60%);
  opacity:0; transition:opacity .3s ease;
}
.sgag-album:hover .sgag-overlay{ opacity:1; }

.sgag-view{
  padding:10px 14px;
  background:#fff; color:#111;
  border-radius:999px;
  font-size:.9rem; font-weight:600;
  transform: translateY(8px);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--sgag-shadow);
}
.sgag-album:hover .sgag-view{ transform: translateY(0); }

.sgag-album-title{
  padding:10px 12px 14px;
  font-weight:600;
  line-height:1.4;
  color:#111;
  background:#fff;
}

#sgag-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  z-index: 999999;
  padding: 24px;
}
#sgag-lightbox.sgag-hidden{ display:none; }
#sgag-lightbox .sgag-image{
  max-width: min(1200px, 94vw);
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: var(--sgag-shadow);
}
#sgag-lightbox .sgag-caption{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  color:#fff; font-weight:600; letter-spacing:.3px;
}
#sgag-lightbox .sgag-close,
#sgag-lightbox .sgag-prev,
#sgag-lightbox .sgag-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#fff; color:#111; border:none;
  padding:10px 14px; border-radius:999px; cursor:pointer;
  box-shadow: var(--sgag-shadow);
  font-size:18px; line-height:1;
}
#sgag-lightbox .sgag-close{ top:24px; right:24px; transform:none; font-size:28px; }
#sgag-lightbox .sgag-prev{ left:24px; }
#sgag-lightbox .sgag-next{ right:24px; }
#sgag-lightbox .sgag-dots{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px;
}
#sgag-lightbox .sgag-dot{
  width:10px; height:10px; border-radius:50%;
  border:none; background:#777; cursor:pointer;
}
#sgag-lightbox .sgag-dot.active{ background:#fff; }