/* --- General Reset & Layout --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Ensure space for mobile system bars */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* --- Gallery Grid / Masonry Layout --- */
/* Requirements: Left-aligned like words, images not scaled/squished */
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px; /* Space between images */
}

.gallery-item {
    /* Do not shrink the image to fit the line */
    flex-shrink: 0; 
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-block;
    line-height: 0; /* Removes extra space below image */
}

.gallery-item:hover {
    transform: scale(1.02);
    z-index: 1;
}

/* Requirements: Thin white border, shadow */
.gallery-item img {
    border: 1px solid white;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    display: block;
    /* Ensure intrinsic dimensions are respected */
    width: auto;
    height: auto;
    /* Max-width constraint for very large thumbnails on very small screens */
    max-width: 100vw; 
    max-height: 40vh; 
}

/* --- Modal / Lightbox Styles --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: var(--z-modal-backdrop);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Requirement: Background 95% black */
    background-color: rgba(0, 0, 0, 0.95);
    
    /* Animation */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.active {
    display: flex;
    opacity: 1;
}

/* Modal Layout Grid System */
.modal-layout {
    display: grid;
    width: 100%;
    height: 100%;
    
    /* Safe Area handling for system bars */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);
    /* Add extra bottom padding for device navigation bars */
    padding-bottom: env(safe-area-inset-bottom);
}

/* --- Layout 1: Landscape & Square (Default) --- */
/* Requirements: Nav Left/Right of Image */
.modal-layout {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas:
        "prev center next";
    align-items: center; /* Vertically center items */
}

.center-panel {
    grid-area: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    /* Padding ensures buttons don't touch image on small landscape screens */
    padding: 0 10px; 
}

.nav-btn.prev-btn { grid-area: prev; }
.nav-btn.next-btn { grid-area: next; }

/* --- Layout 2: Portrait (Media Query) --- */
/* Requirements: Nav Under Image */
@media screen and (orientation: portrait) {
    .modal-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "center center"
            "prev next";
        align-items: end; /* Push buttons to bottom of the layout area */
    }

    .center-panel {
        /* Adjust spacing for portrait */
        padding-bottom: 10px;
    }

    .nav-btn {
        /* Style buttons as full-width bars for better touch usage on mobile */
        width: 100%;
        height: 60px;
        border-radius: 0;
        margin: 0;
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2); /* Separator line */
        font-size: 1.5rem;
    }
}

/* --- Close Button --- */
/* Requirements: Top Right, Dark Background */
.close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: var(--z-modal-backdrop);

    background-color: rgba(0, 0, 0, 0.6);

    border-radius: 50%; /* circle */
    width: 44px;
    height: 44px;
    padding: 0;
    border: none; 

    /* Text appearance */
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    font-family: Arial, sans-serif;
   
    /* Centering */
    display: flex;
    align-items: center;
    justify-content: center;
   
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.close-btn:hover {
    background-color: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

/* --- Image Wrapper --- */
.modal-image-wrapper {
    flex: 1; /* Take available height in center panel */
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 100%; January 18th 2026 */
    /* January 18th 2026: max-width, max-height added: */
    max-width: calc(95vw - 130px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height: calc(95vh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom));

    overflow: hidden;
}

.modal-image {
    /* January 18th 2026: max-width, max-height added: */
    max-width: calc(95vw - 130px);
    max-height: calc(95vh - 60px);
/*
    max-width: 100%;
    max-height: 100%;
*/
    object-fit: contain;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    display: block;
}

/* --- Caption & Counter --- */
.caption-container {
    flex: 0 0 auto; /* Do not grow */
    margin-top: 15px;
    text-align: center;
    font-size: 1.1rem;
    padding: 0 10px;
    width: 100%;

    /* Single line requirement */
    /* white-space: nowrap;  January 18th 2026 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.counter {
    font-weight: bold;
    color: #aaa; /* Dark gray */
    margin-right: 2px; /* Small space before colon */
    font-size: 0.9rem;
    text-transform: uppercase;
}

.description {
    color: #eee; /* Light gray */
    font-weight: normal;

    /* January 18th 2026: rules added: */
    /* Enable automatic hyphenation */
    -webkit-hyphens: auto; /* Safari, Chrome (old), iOS */
    -ms-hyphens: auto;     /* Edge (old) */
    hyphens: auto;         /* Standard for modern browsers */

    /* Recommended settings */
    overflow-wrap: break-word; /* Emergency break for extremely long words */
}

/* --- Controls & Navigation Common Styles --- */
.nav-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    cursor: pointer;
    transition: background 0.3s;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Default size (applies to landscape/desktop) */
.nav-btn {
    font-size: 2rem;
    padding: 10px 20px;
    /* margin: 0 20px; January 18th 2026 */
    margin: 0;
    border-radius: 5px;
    min-width: 60px;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

.nav-btn:active {
    background: rgba(255, 255, 255, 0.6);
}

/* January 18th 2026: rule added: */
@media screen and (orientation: portrait) {
   .modal-image-wrapper {
        max-width: 95vw;
        max-height: calc(95vh - 130px);
   }
   .modal-image {
        max-width: 95vw;
        max-height: calc(95vh - 130px);
   }
}

/* Hide navigation buttons on very small screens if needed, 
   but since we have swipe, we keep them for discoverability. */
@media screen and (max-width: 600px) {
    /* Portrait styles handle most mobile layouts, 
       this acts as a fallback for specific tweaks */
    .gallery-item img {
        max-height: 30vh; 
    }
}