/* ==========================================================================
   GALLERY & PORTFOLIO STYLES
   Piece detail enhancements and lightbox-specific overrides
   ========================================================================== */

/* ==========================================================================
   PORTFOLIO GRID ENHANCEMENTS
   ========================================================================== */

.gallery {
    padding-top: calc(var(--nav-height) + 2rem);
}

.gallery .section__heading {
    margin-bottom: 1.5rem;
}

/* Filter scrollbar styling */
.gallery__filters::-webkit-scrollbar {
    height: 4px;
}

.gallery__filters::-webkit-scrollbar-track {
    background: transparent;
}

.gallery__filters::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* ==========================================================================
   PIECE DETAIL ENHANCEMENTS
   ========================================================================== */

/* Thumbnail scrollbar */
.piece-detail__thumbs::-webkit-scrollbar {
    height: 4px;
}

.piece-detail__thumbs::-webkit-scrollbar-track {
    background: transparent;
}

.piece-detail__thumbs::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* Hero image transition for thumbnail switching */
.piece-detail__hero-img {
    transition: opacity var(--transition-normal);
}

.piece-detail__hero-img.loading {
    opacity: 0.5;
}

/* Related pieces section */
.piece-detail__related .section__heading {
    font-size: 1.5rem;
}

/* ==========================================================================
   LIGHTBOX ENHANCEMENTS
   ========================================================================== */

/* Touch-friendly navigation areas */
@media (hover: none) and (pointer: coarse) {
    .lightbox__nav {
        opacity: 1;
        font-size: 2rem;
        padding: 2rem;
    }
}

/* Lightbox image fade transition */
.lightbox__img {
    transition: opacity 200ms ease;
}

.lightbox__img--fade {
    opacity: 0;
}

.lightbox__img.loading {
    opacity: 0.3;
}

/* ==========================================================================
   CATEGORY PAGE ENHANCEMENTS
   ========================================================================== */

.category-page {
    padding-top: 0;
}

/* ==========================================================================
   LAZY LOADING PLACEHOLDER
   Subtle shimmer gradient while images load
   ========================================================================== */

.piece-card__image,
.piece-detail__hero {
    background: linear-gradient(110deg, var(--bg-surface) 30%, var(--bg-elevated) 50%, var(--bg-surface) 70%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Stop shimmer once image has loaded */
.piece-card__image:has(img[src]),
.piece-detail__hero:has(img) {
    animation: none;
    background: var(--bg-surface);
}