/* Custom CSS for complex UI/Animations - ADDED AFTER TAILWIND BASE */

/* 1. Header & Navigation */
.admin-badge {
    @apply text-xs font-bold px-2 py-0.5 rounded-full bg-red-600 text-white shadow;
}

/* 2. Gallery Grid - Adaptive Columns (Mobile-First) */
.gallery-grid {
    /* Base: 1 column on smallest screens, growing up to 5 */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Min 180px wide card */
    gap: 1rem;
    padding: 1rem;
}

@media (min-width: 640px) { /* sm */
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (min-width: 1024px) { /* lg */
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* 3. Card/Thumbnail Styles (Hover & Fade-In) */
.gallery-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, opacity 0.5s ease-in;
    transform: translateY(10px); /* Initial position for fade-in */
    opacity: 0;
    cursor: pointer;
    will-change: transform, opacity;
}

.gallery-card.loaded {
    transform: translateY(0);
    opacity: 1;
}

.gallery-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* 4. Lightbox Overlay & Animation */
.lightbox {
    @apply fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-95 backdrop-blur-sm transition-opacity duration-300 ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content {
    max-height: 90vh;
    max-width: 90vw;
}

/* 5. Upload Drop Zone */
#upload-dropzone.drag-over {
    @apply border-blue-500 bg-blue-50 border-4;
}