/* ═══ PORTFOLIO / PROJECTS ═══ */
.port-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.port-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  transition: var(--t);
}
.port-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-3);
  border-color: var(--teal-md);
}
.port-banner {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  position: relative;
  overflow: hidden;
}
.port-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.04) 100%);
}
/* Banner color variants */
.pb1 { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); }
.pb2 { background: linear-gradient(135deg, #E3F2FD 0%, #90CAF9 100%); }
.pb3 { background: linear-gradient(135deg, #FFF3E0 0%, #FFCC80 100%); }
.pb4 { background: linear-gradient(135deg, #FCE4EC 0%, #F48FB1 100%); }
.pb5 { background: linear-gradient(135deg, #EDE7F6 0%, #CE93D8 100%); }
.pb6 { background: linear-gradient(135deg, #E0F2F1 0%, #80CBC4 100%); }

.port-body    { padding: 22px; }
.port-tags    { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.port-tag {
  height: 23px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--body);
  border: 1px solid var(--border);
}
.port-body h3 { font-size: 15.5px; font-weight: 700; line-height: 1.4; margin-bottom: 9px; }
.port-body p  { font-size: 13.5px; color: var(--body); line-height: 1.75; margin-bottom: 14px; }
.port-mets    { display: flex; gap: 16px; padding-top: 14px; border-top: 1px solid var(--bg-2); flex-wrap: wrap; }
.p-met-v      { font-family: 'Playfair Display', sans-serif; font-size: 19px; font-weight: 800; color: var(--teal); }
.p-met-k      { font-size: 11px; color: var(--muted); margin-top: 2px; font-weight: 500; }
.port-read    { font-size: 13px; font-weight: 600; color: var(--teal); display: flex; align-items: center; gap: 5px; margin-top: 12px; }

@media (max-width: 960px) { .port-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .port-grid { grid-template-columns: 1fr; } }