/* ============================================
   PORTFOLIO PAGE
   ============================================ */
.portfolio-hero {
  padding: calc(var(--header-h) + var(--sp-9)) 0 var(--sp-7);
  text-align: center;
}
.portfolio-hero h1 { font-size: clamp(40px, 7vw, 80px); margin: var(--sp-4) 0 var(--sp-4); }
.portfolio-hero p { color: var(--text-muted); max-width: 600px; margin: 0 auto; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}
.filter-bar button {
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid rgba(245, 230, 211, 0.16);
  color: var(--text-muted);
  background: rgba(30, 58, 95, 0.4);
  transition: all var(--t-fast);
}
.filter-bar button:hover { color: var(--cream-100); border-color: var(--orange-500); }
.filter-bar button.active {
  background: var(--gradient-cta);
  color: var(--text-on-orange);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 1000px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .portfolio-grid { grid-template-columns: 1fr; } }

.portfolio-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-elevated);
  border: 1px solid rgba(245, 230, 211, 0.08);
  transition: all var(--t-med) var(--ease-out);
}
.portfolio-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-glow);
  border-color: var(--orange-500);
}

.portfolio-thumb {
  aspect-ratio: 4/3;
  display: block;
  position: relative;
  overflow: hidden;
}
.portfolio-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,25,41,.6) 0%, transparent 50%);
}
.ph-1 { background: linear-gradient(135deg, #1e3a5f 0%, #ff8c42 70%, #ff6b35 100%); }
.ph-2 { background: linear-gradient(135deg, #0f2942 0%, #4a90e2 60%, #6ba6e8 100%); }
.ph-3 { background: linear-gradient(135deg, #f5e6d3 0%, #ff8c42 60%, #ff6b35 100%); }
.ph-4 { background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 100%); }
.ph-5 { background: linear-gradient(135deg, #1e3a5f 0%, #4a90e2 100%); }
.ph-6 { background: linear-gradient(135deg, #0f2942 0%, #ff8c42 100%); }
.ph-7 { background: linear-gradient(135deg, #4a90e2 0%, #f5e6d3 100%); }
.ph-8 { background: linear-gradient(135deg, #ff6b35 0%, #1e3a5f 100%); }
.ph-9 { background: linear-gradient(135deg, #2f6fc0 0%, #0f2942 100%); }
.ph-10 { background: linear-gradient(135deg, #f5e6d3 0%, #6ba6e8 100%); }
.ph-11 { background: linear-gradient(135deg, #4a90e2 0%, #ff8c42 100%); }
.ph-12 { background: linear-gradient(135deg, #ff8c42 0%, #1e3a5f 70%, #0f2942 100%); }

.portfolio-thumb .preview-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.8);
  opacity: 0;
  z-index: 5;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--gradient-cta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-orange);
  transition: all var(--t-med) var(--ease-out);
  box-shadow: var(--shadow-glow);
}
.portfolio-card:hover .preview-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.portfolio-meta {
  padding: var(--sp-4) var(--sp-5);
}
.portfolio-meta h4 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.portfolio-meta .tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ===== Lightbox ===== */
#portfolio-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5, 13, 24, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med);
}
#portfolio-lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox {
  background: var(--bg-elevated);
  border-radius: var(--r-lg);
  border: 1px solid rgba(245, 230, 211, 0.1);
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  animation: modal-in var(--t-med) var(--ease-out);
  position: relative;
}
@media (max-width: 700px) { .lightbox { grid-template-columns: 1fr; } }
.lightbox-preview { aspect-ratio: 1.2/1; min-height: 280px; }
.lightbox-info { padding: var(--sp-6); display: flex; flex-direction: column; }
.lightbox-info h3 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.lightbox-info p { color: var(--cream-200); margin-bottom: var(--sp-4); }
.lightbox-info .tech-row {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tech-row .chip {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(30, 58, 95, 0.6);
  border: 1px solid rgba(245, 230, 211, 0.14);
  font-size: var(--fs-xs);
  color: var(--cream-200);
  font-weight: 600;
}
.lightbox-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(10,25,41,0.6);
  color: var(--cream-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: all var(--t-fast);
}
.lightbox-close:hover { background: var(--orange-500); color: var(--text-on-orange); }