/* =========================================================
   PORTFOLIO PAGE — COMPLUS MEDIA
========================================================= */

.portfolio-page{
    padding:150px 0 80px;
    background:
        radial-gradient(circle at 82% 18%, rgba(233,165,20,.06), transparent 25%),
        #f7f8fa;
    min-height:100vh;
}

.portfolio-intro{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
}

.portfolio-eyebrow{
    margin:0 0 16px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--gold);
    font-size:12px;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.portfolio-eyebrow span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--gold);
}

.portfolio-intro h1{
    margin:0;
    color:#101827;
    font-size:clamp(48px,6vw,78px);
    line-height:.98;
    letter-spacing:-3px;
}

.portfolio-intro h1 strong{
    display:inline-block;
    color:var(--gold);
    font-weight:800;
}

.portfolio-lead{
    max-width:590px;
    margin:24px 0 0;
    color:#5d6672;
    font-size:15px;
    line-height:1.75;
}

.portfolio-total{
    min-width:210px;
    padding-bottom:18px;
    display:flex;
    align-items:center;
    gap:14px;
}

.portfolio-total strong{
    color:var(--gold);
    font-size:58px;
    line-height:1;
}

.portfolio-total span{
    color:#4d5663;
    font-size:11px;
    font-weight:800;
    line-height:1.45;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.portfolio-filter-bar{
    margin:46px 0 28px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.portfolio-filter-button{
    min-height:42px;
    padding:0 20px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1px solid #e0e4e9;
    border-radius:999px;
    color:#313945;
    background:#fff;
    font-size:12px;
    font-weight:700;
    transition:.25s ease;
}

.portfolio-filter-button span{
    min-width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--gold);
    background:#fff3ea;
    font-size:10px;
}

.portfolio-filter-button:hover,
.portfolio-filter-button.active{
    color:#fff;
    border-color:#0b1015;
    background:#0b1015;
    transform:translateY(-2px);
}

.portfolio-filter-button.active span{
    background:#f26a16;
    color:#fff;
}

.portfolio-page-item{
    transition:opacity .28s ease, transform .28s ease;
}

.portfolio-page-item.is-hidden{
    display:none;
}

.portfolio-project-card{
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid #e2e6ea;
    border-radius:15px;
    background:#fff;
    box-shadow:0 14px 35px rgba(15,23,42,.07);
    transition:.3s ease;
}

.portfolio-project-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 48px rgba(15,23,42,.13);
}

.portfolio-browser-bar{
    min-height:40px;
    padding:0 13px;
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:1px solid #edf0f3;
    background:#fbfcfd;
}

.portfolio-browser-dots{
    display:flex;
    gap:5px;
}

.portfolio-browser-dots span{
    width:7px;
    height:7px;
    border-radius:50%;
}

.portfolio-browser-dots span:nth-child(1){background:#ff6258}
.portfolio-browser-dots span:nth-child(2){background:#ffbd2e}
.portfolio-browser-dots span:nth-child(3){background:#28c840}

.portfolio-browser-address{
    flex:1;
    overflow:hidden;
    padding:6px 12px;
    border:1px solid #e6e9ec;
    border-radius:999px;
    color:#7a8490;
    background:#fff;
    font-size:9px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.portfolio-browser-address i{
    margin-right:6px;
    color:#32a852;
}

.portfolio-project-image{
    position:relative;
    height:240px;
    overflow:hidden;
    background:#0b1116;
}

.portfolio-project-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.portfolio-project-card:hover .portfolio-project-image img{
    transform:scale(1.045);
}

.portfolio-image-category{
    position:absolute;
    left:14px;
    bottom:14px;
    padding:7px 11px;
    border-radius:999px;
    color:#fff;
    background:rgba(7,11,15,.82);
    backdrop-filter:blur(8px);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
}

.portfolio-project-body{
    flex:1;
    padding:20px 18px 12px;
}

.portfolio-project-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    color:#69727e;
    font-size:10px;
}

.portfolio-project-meta span:first-child{
    color:var(--gold);
    font-weight:800;
}

.portfolio-project-body h2{
    margin:10px 0 10px;
    color:#121821;
    font-size:21px;
    line-height:1.25;
}

.portfolio-project-body p{
    margin:0;
    color:#5e6773;
    font-size:13px;
    line-height:1.7;
}

.portfolio-project-footer{
    min-height:72px;
    padding:15px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border-top:1px solid #eceff2;
}

.portfolio-project-result{
    display:flex;
    align-items:center;
    gap:10px;
}

.portfolio-project-result strong{
    color:#f26a16;
    font-size:21px;
    line-height:1;
}

.portfolio-project-result span{
    color:#68717c;
    font-size:10px;
    line-height:1.4;
}

.portfolio-project-link{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:#0b1015;
    transition:.25s ease;
}

.portfolio-project-link:hover{
    color:#111;
    background:var(--gold);
    transform:rotate(8deg);
}

.portfolio-empty-state{
    margin-top:30px;
    padding:35px;
    border:1px dashed #d5dbe1;
    border-radius:14px;
    color:#68717c;
    background:#fff;
    text-align:center;
}

.portfolio-bottom-action{
    margin-top:36px;
    text-align:center;
}

.portfolio-contact-button{
    min-height:48px;
    padding:0 28px;
    display:inline-flex;
    align-items:center;
    gap:14px;
    border:1px solid #f26a16;
    border-radius:12px;
    color:#f26a16;
    background:#fff;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    transition:.25s ease;
}

.portfolio-contact-button:hover{
    color:#fff;
    background:#f26a16;
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(242,106,22,.20);
}

@media(max-width:991px){
    .portfolio-page{
        padding-top:125px;
    }

    .portfolio-intro{
        align-items:flex-start;
        flex-direction:column;
    }

    .portfolio-total{
        padding-bottom:0;
    }
}

@media(max-width:767px){
    .portfolio-page{
        padding:110px 0 60px;
    }

    .portfolio-intro h1{
        font-size:50px;
        letter-spacing:-2px;
    }

    .portfolio-filter-bar{
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:8px;
        scrollbar-width:none;
    }

    .portfolio-filter-bar::-webkit-scrollbar{
        display:none;
    }

    .portfolio-filter-button{
        flex:0 0 auto;
    }

    .portfolio-project-image{
        height:230px;
    }
}

@media(max-width:480px){
    .portfolio-intro h1{
        font-size:40px;
    }

    .portfolio-total strong{
        font-size:48px;
    }

    .portfolio-project-body h2{
        font-size:19px;
    }
}