/* ============================================================
   KLUBDEASPIRERS — Gallery Page
   ============================================================ */
.gallery-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
.filter-btn { padding:9px 22px; border-radius:50px; border:2px solid var(--light-grey); background:var(--white); font-family:var(--font-body); font-size:0.85rem; font-weight:600; color:var(--text-light); cursor:pointer; transition:var(--transition); }
.filter-btn:hover  { border-color:var(--blue); color:var(--blue); }
.filter-btn.active { background:var(--blue); border-color:var(--blue); color:var(--white); }

.albums-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:40px; }

.album-card { border-radius:var(--radius-lg); overflow:hidden; background:var(--white); box-shadow:var(--shadow); cursor:pointer; transition:var(--transition); }
.album-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }

.album-cover { position:relative; width:100%; height:220px; overflow:hidden; }
.album-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; }
.album-card:hover .album-cover img { transform:scale(1.05); }

.album-ph { display:none; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:center; gap:10px; position:absolute; inset:0; }
.album-ph i    { font-size:2.4rem; opacity:0.7; color:#fff; }
.album-ph span { font-size:0.9rem; font-weight:600; color:#fff; }

.album-hover { position:absolute; inset:0; background:rgba(13,21,48,0.65); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; opacity:0; transition:var(--transition); color:#fff; }
.album-card:hover .album-hover { opacity:1; }
.album-hover i    { font-size:2rem; color:var(--gold); }
.album-hover span { font-size:0.88rem; font-weight:600; }

.gp-blue { background:linear-gradient(135deg,#112880,#2550CC); }
.gp-red  { background:linear-gradient(135deg,#B81818,#E02020); }
.gp-gold { background:linear-gradient(135deg,#D4A800,#F5C200); }
.gp-dark { background:linear-gradient(135deg,#0D1530,#1a2a5e); }

.album-info { padding:16px 18px; border-top:1px solid var(--light-grey); }
.album-info h4 { font-size:0.98rem; font-weight:700; color:var(--dark); margin-bottom:8px; }
.album-meta { display:flex; gap:16px; font-size:0.78rem; color:var(--mid-grey); }
.album-meta i { margin-right:4px; }

.gallery-upload-cta { display:flex; align-items:center; gap:20px; background:var(--off-white); border-radius:var(--radius-lg); padding:28px 32px; border:2px dashed var(--light-grey); flex-wrap:wrap; }
.gallery-upload-cta i    { font-size:2rem; color:var(--mid-grey); flex-shrink:0; }
.gallery-upload-cta h4   { font-size:1rem; margin-bottom:4px; }
.gallery-upload-cta p    { font-size:0.86rem; color:var(--text-light); }
.gallery-upload-cta .btn { margin-left:auto; flex-shrink:0; }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.lightbox.open { opacity:1; pointer-events:all; }
.lightbox-backdrop { position:absolute; inset:0; background:rgba(10,15,35,0.94); }
.lightbox-content { position:relative; z-index:1; width:92%; max-width:860px; display:flex; flex-direction:column; gap:14px; }
.lightbox-header { display:flex; align-items:center; gap:12px; }
.lightbox-title   { font-family:var(--font-display); font-size:1rem; font-weight:600; color:#fff; flex:1; }
.lightbox-counter { font-size:0.8rem; color:rgba(255,255,255,0.5); flex-shrink:0; }
.lightbox-close { background:rgba(255,255,255,0.1); border:none; color:#fff; width:34px; height:34px; border-radius:50%; font-size:0.95rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transition); flex-shrink:0; }
.lightbox-close:hover { background:var(--red); }
.lightbox-img-wrap { width:100%; border-radius:var(--radius-lg); overflow:hidden; background:rgba(255,255,255,0.05); min-height:300px; display:flex; align-items:center; justify-content:center; position:relative; }
.lightbox-img-wrap img { width:100%; max-height:70vh; object-fit:contain; display:block; }
.lightbox-spinner { position:absolute; font-size:1.5rem; color:var(--gold); display:none; }
.lightbox-img-wrap.loading .lightbox-spinner { display:block; }
.lightbox-img-wrap.loading img { opacity:0.2; }
.lightbox-nav { display:flex; justify-content:center; gap:16px; }
.lightbox-prev, .lightbox-next { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:#fff; width:44px; height:44px; border-radius:50%; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.lightbox-prev:hover, .lightbox-next:hover { background:var(--blue); border-color:var(--blue); }

@media (max-width:900px) { .albums-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) {
  .albums-grid { grid-template-columns:1fr; }
  .gallery-upload-cta { flex-direction:column; text-align:center; }
  .gallery-upload-cta .btn { margin-left:0; }
  .lightbox-img-wrap img { max-height:55vh; }
}