/* Shared portfolio card UI used on portfolio and city pages */
.portfolio-wrapper{max-width:1400px;margin:0 auto;padding:2.5rem 1.25rem;}
.portfolio-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
@media (min-width:768px){.portfolio-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){.portfolio-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1280px){.portfolio-grid{grid-template-columns:repeat(4,1fr);} }

.p-card{background:#ffffff;border:none;border-radius:1.25rem;overflow:hidden;position:relative;display:flex;flex-direction:column;cursor:pointer;transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);box-shadow:0 4px 20px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.04);transform:translateY(0);} 
.p-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px rgba(59,130,246,.15), 0 10px 25px rgba(0,0,0,.1);} 

.p-shot{position:relative;height:260px;overflow:hidden;background:#0f172a;border-bottom:1px solid rgba(226,232,240,.4);} 
.p-shot img{width:100%;height:auto;min-height:100%;display:block;transform:translateY(0);transition:transform .55s ease;filter:none!important;-webkit-filter:none!important;background:#ffffff;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;} 

.p-info{padding:1.5rem;display:flex;flex-direction:column;gap:.8rem;background:#ffffff;flex:1;}
.p-title{font-size:1.1rem;font-weight:700;line-height:1.4;color:#1e293b;margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.p-meta{font-size:.75rem;letter-spacing:.06em;font-weight:600;text-transform:uppercase;color:#3b82f6;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem;}
.p-meta i{font-size:.9rem;opacity:.8;}

.p-tech{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;}
.p-tech span{background:linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);border:1px solid #e2e8f0;font-size:.7rem;padding:.4rem .8rem;border-radius:.5rem;color:#64748b;font-weight:600;letter-spacing:.02em;transition:all .3s ease;}
.p-card:hover .p-tech span{background:linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);color:#3b82f6;border-color:#93c5fd;}

.p-card:before{content:"🖱️ Hover to preview";position:absolute;left:1rem;top:1rem;background:rgba(59,130,246,.95);backdrop-filter:blur(8px);color:white;font-size:.7rem;padding:.5rem .8rem;border-radius:.75rem;opacity:0;transform:translateY(-8px) scale(.9);transition:all .4s ease;pointer-events:none;font-weight:600;z-index:10;box-shadow:0 4px 12px rgba(59,130,246,.3);} 
.p-card:hover:before{opacity:1;transform:translateY(0) scale(1);} 

.p-card:after{content:"👁️ Click to view full";position:absolute;right:1rem;bottom:1rem;background:rgba(16,185,129,.95);backdrop-filter:blur(8px);color:white;font-size:.7rem;padding:.5rem .8rem;border-radius:.75rem;opacity:0;transform:translateY(8px) scale(.9);transition:all .4s ease .1s;pointer-events:none;font-weight:600;z-index:10;box-shadow:0 4px 12px rgba(16,185,129,.3);} 
.p-card:hover:after{opacity:1;transform:translateY(0) scale(1);} 

#pf-modal{position:fixed;inset:0;background:#0f172acc;backdrop-filter:blur(6px);z-index:9999;overflow:auto;padding:0;animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
#pf-modal .inner{width:100%;max-width:none;margin:0;}
.modal-img-wrap{margin:0 auto;max-width:1920px;padding:4rem 3rem 5rem;box-sizing:border-box;}
.modal-img-wrap img{width:100%;height:auto;display:block;object-fit:contain;background:#ffffff;filter:none!important;-webkit-filter:none!important;image-rendering:auto;mix-blend-mode:normal;}
.m-close{position:fixed;top:2rem;right:2rem;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border:none;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:1.2rem;cursor:pointer;box-shadow:0 8px 25px rgba(0,0,0,.15);transition:all .3s ease;z-index:10000;}
.m-close:hover{background:rgba(239,68,68,.95);color:white;transform:scale(1.1);} 

.p-shot img[src=""]{background:linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}