/* Project card (user/shared/partials/project_card.html): cover with category tag, title row with the round arrow button.
   Pages that show cards (projects overview, landing page) load this file through their page_css block and
   set the cover height of their grid. */
.pcard{display:block}
.pcard .ph{height:400px}
.pcard .ph img{transition:transform .6s ease}
.pcard:hover .ph img{transform:scale(1.04)}
/* Dark background, so the label stays readable on bright photos */
.pcard .tag{position:absolute;top:16px;left:16px;z-index:2;color:#fff;background:rgba(13,19,32,.72);padding:6px 10px;border-radius:4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pcard .row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px}
.pcard h3{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em}
.pcard p{font-size:13.5px;color:var(--muted);margin-top:4px}
.pcard:hover .circle-btn{background:var(--btn-bg);color:var(--btn-fg)}
.pcard .yr{font-size:12px;color:var(--muted);margin-top:8px}

@media (max-width:600px){
  .pcard .ph{height:250px}
}
@media (prefers-reduced-motion:reduce){
  .pcard .ph img{transition:none}
}