/* Global Dark Diagonal Background */
body {
    background-color: #0a0a0e;
    background-image: repeating-linear-gradient(
        -45deg,
        #1c1d24,
        #1c1d24 1px,
        #0a0a0e 1px,
        #0a0a0e 8px
    );
    color: #ffffff;
}

/* Thumbnail Shadows & Hover Effects */
.thumbnail-card {
    background-color: #050508;
    border: 8px solid #292a34; 
    border-radius: 1.75rem; 
    /* NEW: A deep, persistent black shadow */
    box-shadow: 0 12px 24px -8px rgba(83, 82, 82, 0.9), 0 4px 8px -4px rgba(83, 82, 82, 0.9);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.thumbnail-card:hover {
    transform: translateY(-4px);
    border-color: #3f404d; 
    /* UPDATED: A larger, softer shadow to simulate the card lifting up */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 1), 0 10px 20px -8px rgba(0, 0, 0, 0.8);
}

/* Base styles for lightbox images */
.slide-image {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    /* NEW: Tiny white margin */
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 4px; /* Softens the sharp corners slightly */

    /* Soft shadow tightly wrapping the photo inside the lightbox */
    filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 1));
}

.lightbox-btn {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 9999px;
    width: 2.5rem; /* 40px */
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: color 0.2s, background-color 0.2s;
}

.lightbox-btn:hover {
    color: #d1d5db; /* Tailwind gray-300 */
    background-color: rgba(0, 0, 0, 0.7);
}