/* projects-list.css - PAGE LAYOUT ONLY */

html {
    /* FIX: Keeps the center point stable even when a scrollbar appears */
    scrollbar-gutter: stable;
}

.projects-list-section {
    background-color: #070707;
    padding: 100px 0;
    min-height: 100vh;
    /* Standard practice: prevents the -20px bleed from creating a horizontal scrollbar */
    overflow-x: hidden; 
}

/* --- PROJECTS HEADER --- */
.projects-header {
    margin-bottom: 60px;
}

.page-title {
    color: #FFF;
    font-family: "Gotham Ultra", sans-serif;
    font-size: 32px;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    text-transform: lowercase;
}

.page-title .bracket {
    color: #4945D1;
}

/* --- THE CLEAN GRID --- */
.projects-page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 60px Horizontal Gap: 20px(Bleed A) + 20px(Air) + 20px(Bleed B) */
    gap: 80px 60px; 
    width: 100%;
    align-items: start;
    margin-bottom: 160px;
}

.project-card.is-wide {
    grid-column: 1 / -1;
}

/* --- WIP / COMING SOON OVERLAY --- */

/* 1. Ensure the wrapper can contain an absolute overlay */
.project-card.is-wip .card-image-wrapper {
    position: relative;
}

/* 2. Create the dark semi-transparent overlay */
.project-card.is-wip .card-image-wrapper::after {
    content: "Coming soon"; /* Matches your mockup text */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark tint from mockup */
    
    /* Center the text */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Typography: Using a monospace feel to match the mockup */
    color: #FFFFFF;
    font-family: 'block craft', sans-serif;
    font-size: 28px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    
    /* Smooth transition for hover effects */
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* 3. Optional: Subtle hover state for WIP cards */
.project-card.is-wip:hover .card-image-wrapper::after {
    background-color: rgba(0, 0, 0, 0.7);
}

/* 4. Ensure the actual asset image is slightly blurred behind */
.project-card.is-wip .pc-asset {
    filter: blur(2px);
}

/* 2. MOBILE OVERRIDE (Only triggers on small screens) */
/* projects-list.css - DEFINITIVE MOBILE REFINEMENT */

@media screen and (max-width: 768px) {
    /* 1. THE CONTAINER: Sets the Red Line margins (20px) */
    .projects-list-section .container-lock {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. THE GRID: Switch from Desktop Grid to Mobile Flex Stack */
    .projects-page-grid {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 60px 0 !important; /* Only vertical gap between cards */
        overflow: visible !important; 
    }

    /* 3. THE CARD: Harvesting the Home-Featured logic */
    .project-card {
        display: block !important;
        /* THE BLEED: Pulls the background highlight to screen edges */
        margin-left: -20px !important;  
        margin-right: -20px !important; 
        /* THE BUFFER: Pushes content back into the 20px margin */
        padding: 20px !important;       
        width: auto !important;         
        background-color: transparent !important;
        position: relative;
    }

    /* 4. THE IMAGE: Hits the margins and stays at your 450px gallery height */
    .project-card .card-image-wrapper {
        width: 100% !important;
        height: 350px !important; 
        border-radius: 16px !important;
        overflow: hidden !important;
        margin-bottom: 20px !important; /* Ensures the gap around image is equal */
    }

    .pc-asset {
        width: 100% !important;
        height: 280px !important;
        object-fit: cover !important; /* Forces images to hit the margins */
    }

    /* Target both asset types: .pc-asset (visual) and .main-image (full) */
    .main-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Forces images to hit the margins */
    }

    /* 5. THE WIP OVERLAY: Centered with equal 20px gap on all sides */
    .project-card.is-wip .card-image-wrapper::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.85);
        border-radius: 16px;
        z-index: 5;
    }

    /* Reset 'is-wide' behavior for mobile to prevent extra width */
    .project-card.is-wide {
        width: auto !important;
    }
}