.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

@media (max-width: 1100px){
  .portfolio-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px){
  .portfolio-grid{ grid-template-columns:1fr; }
}

.portfolio-card{
  display:block;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,0.03);
  text-decoration:none;
  color:inherit;
  transition:transform 120ms ease, border-color 120ms ease;
}

.portfolio-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.16);
}

.portfolio-cover{
  height:140px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.portfolio-cover.placeholder,
.portfolio-hero.placeholder{
  background:linear-gradient(135deg, rgba(14,38,88,0.85), rgba(15,23,42,0.85));
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.85);
  font-weight:800;
  letter-spacing:0.2em;
}

.portfolio-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.portfolio-title{
  font-weight:800;
  font-size:1.05rem;
  line-height:1.25;
}

.portfolio-summary{
  font-size:0.95rem;
  line-height:1.4;
}

.portfolio-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.portfolio-metrics .chip{
  font-size:0.85rem;
}

.portfolio-detail-card{
  overflow:hidden;
}

.portfolio-hero{
  height:220px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.portfolio-detail-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.portfolio-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.portfolio-review{
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:14px;
}

.portfolio-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.pager-inline{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}