/* ==========================================================================
   Lightbox Styles
   ========================================================================== */

.lightbox {
    /* Initial State & Positioning */
    display: none; /* Hidden by default - JS will toggle this */
    position: fixed;
    z-index: 2000; /* Ensure it's on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrollbars on the overlay itself */
    background-color: var(--color-overlay, rgba(0, 0, 0, 0.85)); /* Use variable or fallback */

    /* Flexbox for Centering Content */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Transition for fade effect */
    opacity: 0;
    visibility: hidden; /* Use visibility for better accessibility */
    transition: opacity var(--transition-speed, 0.3s) var(--transition-ease, ease-in-out),
                visibility 0s linear var(--transition-speed, 0.3s); /* Delay visibility change */

    /* Allow closing by clicking overlay */
    cursor: pointer;
}

/* State when lightbox is active (add this class via JS) */
.lightbox.show {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition-speed, 0.3s) var(--transition-ease, ease-in-out),
                visibility 0s linear 0s; /* Make visible immediately */
}

/* The actual image */
.lightbox-content {
    display: block;
    margin: auto; /* Redundant with flex, but safe */
    max-width: 90vw; /* Max width relative to viewport */
    max-height: 85vh; /* Max height relative to viewport */
    object-fit: contain; /* Scale image while preserving aspect ratio */
    cursor: default; /* Default cursor over the image */

    /* Optional styling */
    border-radius: var(--border-radius, 0.25rem);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

    /* Add simple animation */
    animation: zoomIn 0.3s ease-out;
}

/* Caption Text */
.lightbox-caption {
    margin: var(--spacing-md, 1rem) auto 0 auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: var(--color-light, #f8f9fa); /* Light text on dark overlay */
    padding: var(--spacing-sm, 0.5rem) 0;
    font-size: 1.1rem;
    cursor: default; /* Default cursor over caption */
    line-height: 1.4;
}

/* Close Button */
.close-button {
    position: absolute;
    top: 15px;
    right: 35px;
    color: var(--color-white, #fff);
    font-size: 45px; /* Make it a bit larger */
    font-weight: bold;
    line-height: 1; /* Ensure consistent height */
    transition: color var(--transition-speed, 0.3s) var(--transition-ease, ease-in-out),
                transform var(--transition-speed, 0.3s) var(--transition-ease, ease-in-out);
    cursor: pointer;
    z-index: 2001; /* Above image/caption */
    padding: 0.25rem; /* Easier to click */
}

.close-button:hover,
.close-button:focus {
    color: var(--color-border, #dee2e6); /* Slightly dimmer on hover */
    text-decoration: none;
    transform: scale(1.1); /* Slight zoom effect */
    outline: none; /* Remove default focus outline if needed */
}

/* Simple Zoom Animation for the image */
@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Class added to body via JS when lightbox is open to prevent background scrolling */
body.lightbox-open {
    overflow: hidden;
}

/* Responsive Adjustments for Lightbox */
@media (max-width: 768px) {
    .lightbox-content {
        max-width: 92vw;
        max-height: 88vh;
    }

    .close-button {
        font-size: 35px;
        top: 10px;
        right: 20px;
    }

    .lightbox-caption {
        font-size: 1rem;
        width: 90%;
    }
}