/* Base styles */
[x-cloak] { display: none !important; }

body {
    font-family: 'Roboto', 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Masonry grid for album image thumbnails (same as owner) */
.masonry-grid {
    column-count: 2;
    column-gap: 8px;
}

@media (min-width: 768px) {
    .masonry-grid {
        column-count: 3;
        column-gap: 10px;
    }
}

@media (min-width: 1024px) {
    .masonry-grid {
        column-count: 4;
        column-gap: 12px;
    }
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 8px;
}

@media (min-width: 768px) {
    .masonry-item {
        margin-bottom: 10px;
    }
}

@media (min-width: 1024px) {
    .masonry-item {
        margin-bottom: 12px;
    }
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* Album content container */
.album-container {
    max-width: calc(1440px + 4rem);
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}