/* ==========================================
   PROJECTS SECTION
========================================== */

.projects{

    background:#111827;

    position:relative;

    overflow:hidden;

}

/* ==========================================
   PROJECT GRID
========================================== */

.projects-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:30px;

}

/* ==========================================
   PROJECT CARD
========================================== */

.project-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:all .35s ease;

    overflow:hidden;

    min-height:380px;

}

/* ==========================================
   FEATURED PROJECT
========================================== */

.project-card.featured{

    border:2px solid var(--primary);

    background:linear-gradient(
        180deg,
        rgba(255,153,0,.08),
        var(--surface)
    );

}

/* ==========================================
   TOP BORDER
========================================== */

.project-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--primary);

    transform:scaleX(0);

    transition:.35s;

}

.project-card:hover::before{

    transform:scaleX(1);

}

/* ==========================================
   PROJECT STATUS
========================================== */

.project-status{

    display:inline-block;

    align-self:flex-start;

    padding:8px 14px;

    margin-bottom:20px;

    border-radius:50px;

    font-size:.85rem;

    font-weight:600;

    background:rgba(34,197,94,.15);

    color:#22C55E;

}

.project-status.future{

    background:rgba(245,158,11,.15);

    color:#F59E0B;

}

/* ==========================================
   TITLE
========================================== */

.project-card h3{

    color:white;

    margin-bottom:18px;

    font-size:1.5rem;

}

/* ==========================================
   DESCRIPTION
========================================== */

.project-card p{

    color:var(--text-secondary);

    margin-bottom:25px;

    line-height:1.8;

}

/* ==========================================
   TECH STACK
========================================== */

.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:30px;

}

.tech-stack span{

    background:var(--surface-light);

    color:var(--text);

    padding:8px 14px;

    border-radius:50px;

    font-size:.85rem;

    transition:.3s;

}

.tech-stack span:hover{

    background:var(--primary);

    color:white;

}

/* ==========================================
   BUTTONS
========================================== */

.project-links{

    display:flex;

    gap:15px;

    margin-top:auto;

    flex-wrap:wrap;

}

/* ==========================================
   HOVER
========================================== */

.project-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(255,153,0,.15);

    border-color:var(--primary);

}

/* ==========================================
   GLOW
========================================== */

.project-card::after{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:rgba(255,153,0,.08);

    border-radius:50%;

    filter:blur(80px);

    right:-120px;

    bottom:-120px;

    opacity:0;

    transition:.4s;

}

.project-card:hover::after{

    opacity:1;

}

/* ==========================================
   BACKGROUND EFFECT
========================================== */

.projects::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:rgba(255,153,0,.05);

    border-radius:50%;

    filter:blur(120px);

    top:-150px;

    right:-180px;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:768px){

    .projects-grid{

        grid-template-columns:1fr;

    }

    .project-links{

        flex-direction:column;

    }

    .project-links .btn{

        width:100%;

    }

}