/* ---- Featured project cards with hover detail ---- */

.pgrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px;
    margin:10px 0 40px;
}

.pcard{
    position:relative;
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(70,63,58,.10);
    transition:transform .25s ease, box-shadow .25s ease;
}
.pcard:hover,
.pcard:focus-within{
    transform:translateY(-4px);
    box-shadow:0 10px 26px rgba(70,63,58,.20);
}

.pcard a.pcard-hit{
    display:block;
    color:inherit;
    text-decoration:none;
}

.pcard-media{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#eef3f6;
}
.pcard-media > img.pcard-main{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}
.pcard:hover .pcard-main,
.pcard:focus-within .pcard-main{ transform:scale(1.05); }

/* sliding detail panel */
.pcard-detail{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:18px;
    background:linear-gradient(to top, rgba(28,38,44,.96) 55%, rgba(28,38,44,.72) 80%, rgba(28,38,44,0) 100%);
    opacity:0;
    transform:translateY(14px);
    transition:opacity .3s ease, transform .3s ease;
}
.pcard:hover .pcard-detail,
.pcard:focus-within .pcard-detail{
    opacity:1;
    transform:none;
}

.pcard-detail p{
    color:#eef3f6;
    font-size:.90rem;
    line-height:1.5;
    margin:0 0 12px;
}

.pcard-strip{
    display:flex;
    gap:7px;
}
.pcard-strip img{
    width:54px;
    height:42px;
    object-fit:cover;
    border-radius:4px;
    border:1px solid rgba(238,243,246,.45);
    background:#fff;
}

.pcard-body{ padding:15px 18px 18px; }
.pcard-body h3{
    margin:0 0 6px;
    font-size:1.06rem;
    line-height:1.3;
    color:#463f3a;
}
.pcard-tags{
    font-size:.78rem;
    letter-spacing:.02em;
    color:#7d8a92;
}
.pcard-more{
    display:inline-block;
    margin-top:9px;
    font-size:.80rem;
    font-weight:600;
    color:#e63946;
}

/* small image row used inside experience entries */
.exp-shots{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:14px;
}
.exp-shots img{
    width:130px;
    height:98px;
    object-fit:cover;
    border-radius:6px;
    box-shadow:0 1px 5px rgba(70,63,58,.16);
}

@media (max-width:820px){
    .pgrid{ grid-template-columns:1fr; gap:20px; }
    /* no hover on touch: keep the detail visible but compact */
    .pcard-detail{
        opacity:1;
        transform:none;
        background:linear-gradient(to top, rgba(28,38,44,.94) 60%, rgba(28,38,44,0) 100%);
        justify-content:flex-end;
    }
    .pcard-detail p{
        font-size:.85rem;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .exp-shots img{ width:104px; height:78px; }
}

@media (prefers-reduced-motion:reduce){
    .pcard, .pcard-main, .pcard-detail{ transition:none; }
    .pcard:hover{ transform:none; }
    .pcard:hover .pcard-main{ transform:none; }
}