/* ============================================================================
   PROJECTS SECTION
   ============================================================================ */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.project-card:hover {
  box-shadow: light-dark(0 0.125rem 0.75rem rgba(0,0,0,0.08), 0 0.125rem 0.75rem rgba(0,0,0,0.3));
}

.project-image {
  inline-size: 100%;
  block-size: 200px;
  background: var(--surface-light);
  overflow: hidden;
}

.project-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.project-content {
  padding: 1.5rem;
}

.project-content h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-end: 0.5rem;
}

.project-content p {
  color: var(--secondary);
  margin-block-end: 1rem;
  font-size: 0.8125rem;
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 1rem;
}

.tech-tag {
  background: var(--code);
  color: var(--surface);
  padding: 0.25rem 0.75rem;
  border-radius: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.project-detail-tech .tech-tag {
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  font-weight: 500;
}

.project-links {
  display: flex;
  gap: 0.75rem;
}

.project-links a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8125rem;
  transition: color 0.2s;
}

.project-links a:hover {
  color: var(--hover);
}