.oj-portfolio-grid{

    display:grid;

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

    gap:30px;

    margin-top:30px;

}

.oj-portfolio-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.oj-portfolio-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

}

.oj-portfolio-content{

    padding:24px;

}

.oj-card-actions{

    display:flex;

    gap:12px;

    margin-top:20px;

}

.oj-card-actions button{

    flex:1;

    border:none;

    border-radius:10px;

    padding:12px;

    cursor:pointer;

}

.oj-edit-portfolio{

    background:#f3f4f6;

}

.oj-delete-portfolio{

    background:#dc3545;

    color:#fff;

}

#oj-portfolio-preview img{

    width:100%;

    margin-top:15px;

    border-radius:12px;

}

/*=========================================
Portfolio Modal
=========================================*/

.oj-modal{

    position:fixed;

    top:0;

    left:0;

    right:0;

    bottom:0;

    display:none;

    align-items:center;

    justify-content:center;

    padding:40px;

    background:rgba(15,23,42,.65);

    backdrop-filter:blur(4px);

    z-index:9999999;

}

.oj-modal.show{

    display:flex;

}

.oj-modal-box{

    width:720px;

    max-width:100%;

    max-height:calc(100vh - 80px);

    overflow-y:auto;

    background:#fff;

    border-radius:22px;

    padding:35px;

    box-shadow:0 30px 80px rgba(0,0,0,.25);

}

.oj-modal-box h2{

    margin-bottom:25px;

}

.oj-modal-box label{

    display:block;

    margin:18px 0 8px;

    font-weight:600;

}

.oj-modal-box input[type="text"],
.oj-modal-box textarea{

    width:100%;

    border:1px solid #ddd;

    border-radius:10px;

    padding:14px;

}

.oj-modal-box textarea{

    min-height:140px;

    resize:vertical;

}

.oj-modal-actions{

    display:flex;

    justify-content:flex-end;

    gap:15px;

    margin-top:30px;

}