/* ===== Media: filters, albums, gallery ===== */

.media-filters { margin: 10px 0 14px; }

.albums-grid {
  display:grid; gap:18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){ .albums-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .albums-grid { grid-template-columns: 1fr; } }

.album-card {
  border:1px solid #2c2c2c; border-radius:14px; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2));
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.album-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.7); }
.album-thumb { aspect-ratio: 4/3; background:#161616; display:grid; place-items:center; }
.album-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.album-meta { padding:10px 12px; }
.album-title { margin:0 0 4px; color:#fff; font-size:1.05rem; }

.gallery-grid {
  display:grid; gap:10px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){ .gallery-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .gallery-grid { grid-template-columns: 1fr; } }
.g-item { position:relative; border-radius:12px; overflow:hidden; border:1px solid #2c2c2c; background:#121212; }
.g-item img { width:100%; height:100%; object-fit:cover; display:block; }

.g-video { display:grid; place-items:center; cursor:pointer; }
.g-video .v-thumb { width:100%; aspect-ratio:16/9; display:grid; place-items:center; background:#0f0f0f; }
.g-video .v-thumb span { font-size:48px; line-height:1; color:#fff; opacity:0.8; }

.lightbox[hidden] { display:none !important; }
.lightbox {
  position:fixed; inset:0; z-index: 1000; display:grid; place-items:center;
  background: rgba(0,0,0,0.85);
}
.lb-stage { max-width: 92vw; max-height: 82vh; display:grid; place-items:center; }
.lb-stage img, .lb-stage iframe {
  max-width: 92vw; max-height: 82vh; border:0; border-radius: 12px;
}
.lb-caption { color:#ddd; margin-top: 10px; text-align:center; min-height: 22px; }
.lb-close, .lb-prev, .lb-next {
  position: absolute; top: 20px; background: rgba(255,255,255,0.12);
  color:#fff; border:1px solid #444; border-radius:10px; padding:6px 10px; cursor:pointer;
}
.lb-close { right: 20px; font-size: 22px; }
.lb-prev  { left: 20px; top: 50%; transform: translateY(-50%); font-size: 26px; }
.lb-next  { right: 20px; top: 50%; transform: translateY(-50%); font-size: 26px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.22); }