:root{
  --gallery-accent: #0d6efd;
  --gallery-bg: #ffffff;
  --gallery-side-bg: #f7fbff;
  --gallery-gap: 16px;
}

.gallery-filters{display:flex;gap:8px;flex-wrap:nowrap;align-items:center}
.gallery-filters .filter-btn{background:transparent;border:1px solid rgba(13,110,253,0.12);padding:8px 12px;border-radius:8px;color:var(--gallery-accent);cursor:pointer;transition:all .18s;}
.gallery-filters .filter-btn:hover{background:rgba(13,110,253,0.06)}
.gallery-filters .filter-btn.active{background:var(--gallery-accent);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(13,110,253,0.12)}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gallery-gap);align-items:start}
.gallery-item{position:relative;overflow:hidden;border-radius:12px;background:var(--gallery-bg);box-shadow:0 6px 18px rgba(16,24,40,0.04);transition:transform .28s,opacity .28s}
.gallery-item img{width:100%;height:200px;object-fit:cover;display:block;transition:transform .45s;border-radius:12px 12px 0 0}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-item .caption{position:relative;left:auto;bottom:auto;width:100%;padding:6px 10px;background:var(--gallery-bg);color:rgba(16,24,40,0.92);font-weight:600;font-size:0.85rem;border-top:1px solid rgba(13,110,253,0.06);border-radius:0 0 12px 12px}

.gallery-item.hidden{opacity:0;transform:scale(.98);pointer-events:none;display:none}

/* Side layout for larger screens */
@media (min-width:992px){
  /* Keep filters as a single horizontal row on large screens too */
  .gallery-filters{flex-direction:row;align-items:center;padding:10px 6px;background:transparent;border-radius:8px;border:0;box-shadow:none;width:auto}
  .gallery-grid{margin-left:0}
  .gallery-filters .filter-btn{width:auto;text-align:center}
}

/* Mobile slide-up animation */
.slide-up{transform:translateY(18px);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.2,1),opacity .45s}
.slide-up.in-view{transform:none;opacity:1}

/* Small tweaks */
.gallery-filters{font-size:0.95rem}
.gallery-filters .filter-btn:focus{outline:3px solid rgba(13,110,253,0.14)}

/* Mobile: compact horizontal tabs */
@media (max-width:767px){
  .gallery-filters{
    flex-direction:row;
    align-items:center;
    gap:8px;
    padding:8px 6px;
    font-size:0.85rem;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-bottom:12px;
  }
  .gallery-filters::-webkit-scrollbar{display:none}
  .gallery-filters .filter-btn{padding:6px 10px;border-radius:999px;white-space:nowrap;flex:0 0 auto}
  .gallery-grid{margin-left:0}

  /* Reduce visible tabs on very small screens to keep UI compact */
  .gallery-filters .filter-btn[data-filter="events"],
  .gallery-filters .filter-btn[data-filter="admin"],
  .gallery-filters .filter-btn[data-filter="library"]{
    display:none;
  }
}