/* --- WORKS GRID COMPONENT (STICKY PARALLAX) --- */

.works-container {
    position: relative;
    width: 100%;
    /* No fixed height; height is determined by content inside */
    border-bottom: 1px dashed var(--border-color);
}

/* THE STICKY BANNER LAYER
   - Scrolls into view naturally.
   - Sticks to top: 0 when it hits the top of the viewport.
   - Stays there until the container ends.
*/
.works-sticky-banner {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    
    /* Full viewport height so it fills the screen when stuck */
    height: 100vh; 
    
    /* Sit behind the grid */
    z-index: 1; 
    
    /* Flexbox to center the image */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.works-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Corrected Path: Goes up one level from 'components' to root, then 'img' */
    background-image: url('../img/crashing_waves.jpg');
    background-size: cover;
    background-position: center;
}

/* THE GRID LAYER
   - Sits naturally after the banner in DOM flow.
   - Has a higher z-index to slide OVER the sticky banner.
*/
.works-grid {
    position: relative;
    z-index: 5; /* Higher than banner (1) */
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    
    /* Add a top border to start the grid visually */
    border-top: 1px dashed var(--border-color);
    
    /* Optional: Negative margin if you want the grid to overlap earlier. 
       Currently, it starts exactly after the 100vh image, so you see 
       the full image first, then scroll grid over it. */
}

/* STANDARD CELLS (Solid Background) */
.works-cell {
    /* CRITICAL: Solid background hides the image as it scrolls up */
    background-color: var(--bg-color);
    
    padding: 40px;
    border-right: 1px dashed var(--border-color);
    border-bottom: 1px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 450px; 
}

/* EMPTY CELLS (Transparent Windows) */
.works-cell.empty {
    /* CRITICAL: Transparent background reveals the sticky image behind */
    background-color: transparent !important;
}

/* Formatting fixes */
.works-cell:nth-child(3n) { border-right: none; }
.works-grid > .works-cell:nth-last-child(-n+3) { border-bottom: none; }

/* Placeholder Styling */
.works-placeholder-image {
    width: 100%;
    height: 250px;
    background-color: var(--placeholder-bg);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-color);
    text-transform: uppercase;
    font-size: 12px;
}