/* WORKS SECTION */

/* Section Works Container */
.works {
    background: url('../assets/images/works/works-sectionbackground.webp') no-repeat center center;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh; /* Full viewport height */
    margin: 0; /* Remove external margin */
    padding: 0; /* Remove internal padding */
    box-sizing: border-box; /* Include padding and border in element's dimensions */
    overflow: hidden; /* Ensure no overflow occurs */
}

/* Grid Container */
.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default: 3 equal columns */
    grid-template-rows: repeat(4, auto); /* 3 rows for items, 1 row for pagination */
    gap: 0; /* No spacing between grid items */
    width: 80%;
    max-width: 1200px; /* Ensure grid doesn't grow beyond max width */
    margin: 0 auto; /* Center the grid */
    position: relative;
    z-index: 2; /* Stack grid above the background */
}

/* Individual Work Item */
.works-item {
    position: relative; /* Enables overlay positioning */
    background-color: transparent; /* Ensure transparency */
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.works-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the cell */
}

/* Title Label (Always visible on thumbnails) */
.title-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
    color: #fff;
    text-align: center;
    font-size: 1rem;
    padding: 5px 0;
    box-sizing: border-box; /* Include padding in dimensions */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Ensure text does not overflow */
    text-overflow: ellipsis; /* Display ellipsis for long text */
    pointer-events: none; /* Prevent hover interference */
}

/* Overlay Content (on hover) */
.thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out;
}

.works-item:hover .thumbnail-overlay {
    opacity: 1; /* Fully visible on hover */
}

/* Overlay Text Content */
.thumbnail-overlay .title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.thumbnail-overlay .medium,
.thumbnail-overlay .release-date {
    font-size: 1rem;
}

/* Pagination Buttons */
.pagination-button {
    aspect-ratio: 1; /* Keeps buttons square */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent; /* Transparent background */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pagination-button img {
    width: 70%;
    height: auto;
    object-fit: contain; /* Prevent distortion */
}

.pagination-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Specific Pagination Button Styles */
.pagination-button.prev img {
    content: url('../assets/images/works/previous.webp'); /* Use WebP image */
}

.pagination-button.next img {
    content: url('../assets/images/works/next.webp'); /* Use WebP image */
}

/* Empty Center Cell */
.works-empty {
    background: none; /* Ensure the cell remains visually empty */
    grid-column: span 1;
}

/* Show/Hide Previous Button */
.pagination-button.prev {
    visibility: hidden; /* Hide by default */
}

.show-prev .pagination-button.prev {
    visibility: visible; /* Show button when applicable */
}

/* Responsive Adjustments */

/* Medium Screens (Tablets) */
@media (max-width: 768px) {
    .works-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Auto-adjust columns */
    }

    .title-label {
        font-size: 0.9rem; /* Slightly smaller titles */
    }
}

/* Small Screens (Mobile) */
@media (max-width: 480px) {
    .works-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Fewer columns */
    }

    .title-label {
        font-size: 0.8rem; /* Smaller titles for mobile */
    }
}