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

body, html {
    height: 100%;
    overflow: hidden; /* Ensure no scrollbars appear */
    /* overscroll-behavior: none; Prevent overscroll effects */

}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

strong {
    font-weight: 600; /* Apply font-weight globally to all <strong> elements */
}

/* Site Header */
.site-header {
    position: fixed;
    top: 2vh;
    left: 8vw;
    width: 100%;
    background-color: transparent;
    z-index: 1000;
    padding: 0px;
    text-align: left;
}

.site-header-link {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color from parent */
}

.site-title {
    font-size: clamp(40px, 10vh, 10vh);
    font-weight: 550;
    color: #222;
    margin: 0;
    letter-spacing: 4px;
}

/* Site Footer */
.site-footer {
    position: fixed;
    bottom: 8vh;
    left: 8vw;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 0px;
    z-index: 1000;
}

.footer-section {
    margin-right: 20px;
    font-weight: bold;
    font-size: 15px;
    color: #333;
}

.footer-link {
    text-decoration: none;
}

.footer-link.active .footer-section {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-section:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Archive Section */
.archive-section {
    background-color: #ededed;
    height: 100vh;
    /* overflow: hidden; /* Disable scrollbars within the archive section */
}

.archive-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.archive-image {
    max-width: 100%;
    transition: transform 0.3s ease;
}

.archive-image:hover {
    transform: scale(1.00);
}

/* Gallery Container */
.gallery-container {
    display: grid; /* Ensure the container is a grid */
    grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
    gap: 35px; /* Space between items */
    height: calc(100vh - 16vh - 15px - 12vh);
    width: 77vw;
    overflow-y: auto; /* Enable vertical scrolling */
    position: absolute; /* Positioning context */
    top: 16vh;
    left: 8vw;
    padding-top: 5px; /* Add extra space at the top */
    scroll-snap-type: y mandatory; /* Enable vertical scroll snapping */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}

.gallery-item-container {
    position: relative; /* Positioning context for the description */
    scroll-snap-align: start; /* Snap items to the start of the container */
}

.gallery-item-container .image-description {
    display: none; /* Ensure descriptions are hidden by default */
}

.gallery-item-container:hover .image-description {
    display: grid; /* Show description when hovering over the container */
}

.gallery-item-container.landscape-wide {
    grid-column: span 2; /* Allow the container to span two columns */
}

.gallery-item-container.landscape-wide .image-description {
    position: absolute; /* Ensure consistent positioning */
    bottom: 0; /* Align with other descriptions */
    width: 100%; /* Match the container width */
    height: 100%; /* Adjust height dynamically */
    line-height: 1.4; /* Line height for better readability */
    padding: 3px; /* Standard padding */
    text-align:center; /* Center-align the text */
    box-sizing: border-box; /* Include padding in width calculation */
    flex-direction: column-reverse; /* Start content from the bottom */
    justify-content: flex-start; /* Align content to the bottom */
}

.gallery-item {
    height: calc(34vh - 17.5px); /* Calculate height dynamically */
    object-fit: cover;
    transition: transform 0.1s ease;
    position: relative; /* Enable positioning context for overlay and description */
    cursor: pointer; /* Indicate clickable images */
    outline: none; /* Remove default focus outline */
}

/* .gallery-item.clicked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 1;  
} */

.gallery-item:focus + .image-description {
    display: grid; /* Show the description when the image is focused (clicked) */
}

.image-description {
    display: none; /* Ensure descriptions are hidden by default */
    font-family: 'Courier Prime', monospace; /* Use Courier Prime as the font */
    font-size: 12px; /* Default font size */
    font-weight:500;
    line-height: 1.4; /* Line height for better readability */
    color: #333; /* Text color */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent black background */
    position: absolute;
    bottom: 3%;
    left: 0;
    width: 100%;
    height: 97%;
    max-height: 100%;
    padding: 50% 3px;
    z-index: 2; /* Ensure description is above the overlay */
    text-align:center; /* Center-align the text */
    box-sizing: border-box; /* Include padding in width calculation */
    flex-direction: column-reverse; /* Start content from the bottom */
    justify-content: flex-start; /* Align content to the bottom */
}

.gallery-item.portrait {
    grid-column: span 1; /* Occupies one column */
    width: 100%;
    aspect-ratio: auto; /* Portrait aspect ratio */
    background-color:#f5f5f5;
}

.gallery-item.landscape {
    grid-column: span 2; /* Ensure it spans two columns */
    grid-row: auto; /* Allow it to take up space in the grid */
    width: 100%;
    aspect-ratio: auto; /* Landscape aspect ratio */
    background-color:#f5f5f5;
}


/* Hide scrollbars for WebKit-based browsers */
::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbars for Firefox */
html {
    scrollbar-width: none;
}

@media (max-width: 768px) {
    .gallery-container {
        grid-template-columns: repeat(3, 1fr); /* Set 3 columns for phones */
        height: calc(100vh - 16vh - 15px - 12vh); /* Adjust height for phones */
        gap: 15px; /* Reduce gap size between elements */
    }

    .gallery-item {
        height: auto; /* Allow items to adjust height dynamically */
    }

    .gallery-item.portrait,
    .gallery-item.landscape {
        height: 25vh; /* Enforce consistent height for all items */
    }

    .gallery-item-container:hover .image-description {
        display: none; /* Show description when hovering over the container */
    }

    .gallery-item:focus + .image-description,
    .gallery-item.clicked + .image-description {
        display: grid; /* Show the description when the image is clicked or focused */
    }
    .gallery-item.clicked::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.6);
        z-index: 1;  
    }
}