/* ════════════════════════════════════════════════════════════
   projects.css — Modern Depth Card Design
   ════════════════════════════════════════════════════════════ */

#projects {
  background: var(--bg);
  color: var(--text);
}

#projects .label {
  color: var(--accent);
}

#projects .heading {
  color: var(--text);
}

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--space-l);
}

.proj-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--space-m);
  overflow: hidden;
  transition: transform var(--ease-out), border-color var(--ease-out), box-shadow var(--ease-out);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 28px oklch(0% 0 0% / 8%);
}

.proj-card:hover {
  transform: translateY(-8px);
  border-color: oklch(from var(--accent) l c h / 28%);
  box-shadow: 0 14px 38px oklch(0% 0 0% / 14%);
}

.proj-thumb {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--bg-soft);
}

.proj-thumb-num {
  position: absolute;
  top: var(--space-m);
  right: var(--space-l);
  font-family: var(--font-mono);
  font-size: var(--step-4);
  color: oklch(from var(--text) l c h / 12%);
  pointer-events: none;
}

.proj-thumb-tag {
  position: absolute;
  bottom: var(--space-m);
  left: var(--space-l);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-muted);
}

.proj-body {
  padding: var(--space-l);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.proj-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  margin-bottom: var(--space-s);
  color: var(--text);
}

.proj-desc {
  font-family: var(--font-display);
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: var(--space-l);
}

.proj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-bottom: var(--space-xl);
}

.chip {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  padding: 2px 8px;
  border-radius: 4px;
  background: oklch(from var(--accent) l c h / 8%);
  color: var(--text-soft);
  border: 1px solid oklch(from var(--accent) l c h / 16%);
}

.proj-link {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  transition: opacity var(--ease-out);
}

.proj-link:hover {
  opacity: 0.8;
}

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