/* ==================================================
   PORTFOLIO PAGE
   NETPROG.CH
================================================== */


/* ==================================================
   RESET
================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}


/* ==================================================
   SECTIONS
================================================== */

.portfolio-hero,
.portfolio-projects,
.portfolio-cta{

    padding:110px 0;

}

.portfolio-projects{

    background:#f8fafc;

}

.portfolio-cta{

    background:#ffffff;

}


/* ==================================================
   HERO
================================================== */

.portfolio-hero{

    padding:140px 0 120px;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fafc 100%
    );

}

.portfolio-hero .container{

    max-width:900px;

    text-align:center;

}

.portfolio-hero h1{

    margin:28px 0;

    font-size:clamp(3rem,6vw,5rem);

    line-height:1.08;

}

.portfolio-hero p{

    max-width:760px;

    margin:0 auto;

    font-size:1.2rem;

    line-height:1.9;

    color:var(--text-light);

}


/* ==================================================
   SECTION HEADING
================================================== */

.section-heading{

    max-width:860px;

    margin:0 auto 70px;

    text-align:center;

}

.section-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:var(--accent-color);

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.section-heading h2{

    margin-bottom:24px;

    font-size:clamp(2.4rem,5vw,4rem);

    line-height:1.15;

}

.section-heading p{

    max-width:760px;

    margin:0 auto;

    font-size:1.2rem;

    line-height:1.9;

    color:var(--text-light);

}


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

.portfolio-grid{

    display:grid;

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

    gap:42px;

    align-items:stretch;

}


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

.portfolio-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#ffffff;

    border-radius:28px;

    border:1px solid rgba(15,23,42,.08);

    box-shadow:0 20px 50px rgba(15,23,42,.06);

    transition:.35s ease;

}

.portfolio-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 80px rgba(15,23,42,.12);

}


/* ==================================================
   IMAGE
================================================== */

.portfolio-image{

    aspect-ratio:16/10;

    overflow:hidden;

    background:#eef2f7;

}

.portfolio-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .45s ease;

}

.portfolio-card:hover .portfolio-image img{

    transform:scale(1.05);

}


/* ==================================================
   CONTENT
================================================== */

.portfolio-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:34px;

}

.portfolio-category{

    display:inline-block;

    margin-bottom:14px;

    color:var(--accent-color);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.portfolio-content h3{

    margin-bottom:18px;

    font-size:2rem;

    line-height:1.2;

}

.portfolio-content p{

    flex:1;

    margin-bottom:30px;

    line-height:1.9;

    color:var(--text-light);

}


/* ==================================================
   TAGS
================================================== */

.portfolio-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:auto;

}

.portfolio-tags span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    background:#eef2f7;

    border-radius:999px;

    font-size:.9rem;

    font-weight:600;

    transition:.3s ease;

}

.portfolio-tags span:hover{

    background:var(--accent-color);

    color:#ffffff;

}


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

.portfolio-card:hover .portfolio-category{

    color:var(--accent-hover);

}

.portfolio-card:hover h3{

    color:var(--accent-color);

}


/* ==================================================
   CTA
================================================== */

.portfolio-cta{

    text-align:center;

    background:linear-gradient(
        180deg,
        #f8fafc 0%,
        #ffffff 100%
    );

}

.portfolio-cta .container{

    max-width:900px;

}

.portfolio-cta h2{

    margin:26px 0;

    font-size:clamp(2.5rem,5vw,4.2rem);

    line-height:1.15;

}

.portfolio-cta p{

    max-width:760px;

    margin:0 auto 46px;

    font-size:1.2rem;

    line-height:1.9;

    color:var(--text-light);

}

.portfolio-cta .btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

}


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

@media (max-width:991px){

    .portfolio-grid{

        grid-template-columns:1fr;

    }

}


@media (max-width:768px){

    .portfolio-hero,
    .portfolio-projects,
    .portfolio-cta{

        padding:80px 0;

    }

    .portfolio-hero{

        padding:110px 0 90px;

    }

    .portfolio-hero h1{

        font-size:2.7rem;

    }

    .section-heading{

        margin-bottom:50px;

    }

    .section-heading h2{

        font-size:2.4rem;

    }

    .section-heading p,
    .portfolio-hero p{

        font-size:1.05rem;

    }

    .portfolio-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .portfolio-card{

        border-radius:22px;

    }

    .portfolio-content{

        padding:26px;

    }

    .portfolio-content h3{

        font-size:1.7rem;

    }

    .portfolio-content p{

        font-size:1rem;

    }

    .portfolio-tags{

        gap:10px;

    }

    .portfolio-tags span{

        padding:9px 15px;

        font-size:.85rem;

    }

    .portfolio-cta h2{

        font-size:2.2rem;

    }

    .portfolio-cta p{

        font-size:1.05rem;

    }

}


@media (max-width:480px){

    .portfolio-grid{

        grid-template-columns:minmax(0,1fr);

    }

    .portfolio-content{

        padding:22px;

    }

    .portfolio-content h3{

        font-size:1.5rem;

    }

    .portfolio-tags span{

        font-size:.8rem;

        padding:8px 14px;

    }

}