/* --- HOME - FEATURED WORKS LAYOUT --- */

.home-featured {
    background-color: #070707;
    /* FIX: Vertical padding only. Side padding is now handled by .container-lock 
       Order corrected: 40px min, 80px max */
    padding: clamp(40px, 12vw, 80px) 0;
}

.featured-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: clamp(60px, 8vw, 100px);
}

.home-featured .section-title {
    font-family: 'Gotham Ultra', sans-serif;
    font-size: 24px;
    font-style: italic;
    color: #FFFFFF;
}

.featured-desc {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.6;
    color: #777777;
    max-width: 480px; /* Prevents text from stretching */
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Space for invisible cards to not overlap */
    gap: 80px 60px; 
    margin-bottom: var(--section-spacing-cta);
}

.featured-footer {
    display: flex;
    justify-content: center;
    padding-bottom: 40px;
}

/* --- TEXT REVEAL ANIMAtion STRUCTURE --- */

/* 1. The Mask: Acts as a window to hide text */
.line-mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.1em; 
}

/* 2. The Line: Name MUST match your script.js call */
.featured-text-line {
    display: block;
    will-change: transform;
    /* Sets the hidden state: pushed down 115% */
    transform: translateY(115%);
}

/* =========================================
   MOBILE RESPONSIVENESS 
   ========================================= */

/* --- HOME-FEATURED.CSS MOBILE REFINEMENT --- */

@media screen and (max-width: 768px) {
    /* 1. THE MARGIN LINE: Sets the boundary for everything */
    .container-lock {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important; /* Forces vertical flow */
    }

    /* 2. THE STACK: Forces description BELOW the title */
    #work .featured-header {
        display: block !important; /* Overrides desktop flex side-by-side */
        width: 100% !important;
    }

    .featured-desc {
        width: 100% !important;
        max-width: 100% !important; /* Shatters the desktop 480px limit */
        margin-top: 20px !important;
        font-size: 18px !important;
        line-height: 1.6;
    }

    /* 1. Ensure the grid allows cards to 'leak' to the edges */
    .projects-grid {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        overflow: visible !important; /* CRITICAL: Allows negative margins to work */
    }

    /* 2. THE CARD: Negative margins touch screen edges; Padding aligns content */
    .project-card {
        display: block !important;
        margin-left: -20px !important;  /* Breaks out to left edge */
        margin-right: -20px !important; /* Breaks out to right edge */
        padding: 20px !important;       /* Pushes image/text back into the 20px margin */
        width: auto !important;         /* Allows flex-stretch to work with negative margins */
        background-color: transparent !important;
        border-radius: 16px !important; /* Matches your rounded overlay request */
        overflow: hidden !important;    /* Clips the gray box to rounded corners */
        transition: background-color 0.2s ease;
    }

    /* 3. THE IMAGE: Now stretches exactly between the 20px margins */
    .card-image-wrapper {
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important; /* Inner rounding for the image */
        overflow: hidden !important;
        margin-bottom: 20px !important;
    }

    .card-image-wrapper img {
        width: 100% !important;
        display: block !important;
        object-fit: cover;
    }

    /* 4. THE OVERLAY: Touching the ends of the screen */
    .project-card:active {
        background-color: rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important; /* Maintains rounding even at screen edges */
    }

    /* 5. TEXT WRAPPING & ELLIPSIS */
    .card-title {
        /* User liked the ellipsis, so we keep the nowrap here */
        white-space: nowrap !important; 
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 20px !important;
        margin-top: 15px !important;
    }

    .card-meta {
        /* Meta text SHOULD wrap so it doesn't go off-screen */
        white-space: normal !important; 
        font-size: 16px !important;
        line-height: 1.5;
        opacity: 0.5;
    }
} /* ONE closing brace only to keep the media query active */