/* ==========================================================================
   NagpurDSVS — Gallery & Lightbox Styles
   ========================================================================== */

/* ============================================================
   ALBUM ARCHIVE — hover-reveal cards
   ============================================================ */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 24px;
}
.album-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: block;
    aspect-ratio: 4/3;
    background: var(--color-cream-dark);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.album-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
.album-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.album-card:hover img { transform: scale(1.06); }
.album-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(92,18,32,0.88) 0%, transparent 60%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 20px;
    opacity: 0; transition: opacity 0.3s ease;
}
.album-card:hover .album-card__overlay { opacity: 1; }
.album-card__title { color: #fff; font-family: var(--font-heading); font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.album-card__count { color: rgba(255,255,255,0.75); font-size: 12px; margin: 0; }
.album-card__placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--color-cream-dark), var(--color-border));
    display: flex; align-items: center; justify-content: center;
}
.album-card__placeholder svg { opacity: 0.3; }

/* ============================================================
   MASONRY PHOTO GRID (inside single album)
   ============================================================ */
.dsvs-gallery {
    columns: 3;
    column-gap: 12px;
    margin-top: 24px;
}
@media (max-width: 900px) { .dsvs-gallery { columns: 2; } }
@media (max-width: 560px) { .dsvs-gallery { columns: 1; } }

.dsvs-gallery__item {
    break-inside: avoid;
    display: block;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}
.dsvs-gallery__item img {
    width: 100%; display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.dsvs-gallery__item:hover img {
    transform: scale(1.03);
    filter: brightness(0.85);
}
.dsvs-gallery__item::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(122,31,43,0);
    transition: background 0.3s ease;
    pointer-events: none;
}
.dsvs-gallery__item:hover::after {
    background: rgba(122,31,43,0.15);
}
.dsvs-gallery__zoom {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0; transition: all 0.25s ease;
    background: rgba(255,255,255,0.9);
    border-radius: 50%; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.dsvs-gallery__item:hover .dsvs-gallery__zoom {
    opacity: 1; transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
#dsvs-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}
#dsvs-lightbox.is-open {
    opacity: 1; pointer-events: all;
}
.lb-backdrop {
    position: absolute; inset: 0;
    background: rgba(10,3,5,0.94);
    backdrop-filter: blur(4px);
}
.lb-stage {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 100%; height: 100%;
    padding: 60px 80px 80px;
    box-sizing: border-box;
}
.lb-img-wrap {
    position: relative;
    max-width: 100%; max-height: 80vh;
    display: flex; align-items: center; justify-content: center;
}
.lb-img {
    max-width: 100%; max-height: 80vh;
    border-radius: var(--radius-sm);
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    transition: opacity 0.2s ease;
    object-fit: contain;
}
.lb-loader {
    position: absolute;
    width: 36px; height: 36px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: var(--color-gold-light);
    border-radius: 50%;
    animation: lb-spin 0.7s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }

.lb-close {
    position: absolute; top: 20px; right: 24px;
    background: rgba(255,255,255,0.12); border: none;
    color: #fff; font-size: 28px; line-height: 1;
    width: 44px; height: 44px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.lb-close:hover { background: rgba(255,255,255,0.25); }

.lb-prev, .lb-next {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1); border: none;
    color: #fff; font-size: 48px; line-height: 1;
    width: 56px; height: 56px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
    z-index: 2;
}
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.25); }

.lb-info { margin-top: 16px; text-align: center; }
.lb-caption { color: rgba(255,255,255,0.85); font-size: 14px; margin: 0 0 4px; }
.album-grid--home { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.album-grid--home .album-card { aspect-ratio: 1/1; }

@media (max-width: 600px) {
    .lb-stage { padding: 60px 16px 70px; }
    .lb-prev { left: 4px; }
    .lb-next { right: 4px; }
    .lb-prev, .lb-next { width: 44px; height: 44px; font-size: 36px; }
}