/* =====================================================
   Project Showcase — tabbed gallery
   ===================================================== */

.showcase-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.showcase-tab {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  color: var(--on-surface-muted);
}
.showcase-tab:hover { border-color: var(--primary); color: var(--primary); }
.showcase-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

.showcase-panel { display: none; }
.showcase-panel.is-active { display: block; }

.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.showcase-item {
  aspect-ratio: 4/3; border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--border); background: var(--background);
}
.showcase-item img { width: 100%; height: 100%; object-fit: cover; }

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