/* Project tiles: small, compact grid tucked under experiences */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

.project-tile {
  display: block;
  text-decoration: none;
  color: var(--text);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-section);
  transition: transform 0.15s, border-color 0.2s;
}

.project-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.tile-scene {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.tile-placeholder {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.tile-placeholder.lego {
  background: linear-gradient(135deg, #e74c3c 0%, #f39c12 50%, #2ecc71 100%);
}

.tile-placeholder.hangar {
  background: linear-gradient(180deg, #5dade2 0%, #85c1e9 40%, #7d8a6e 40%, #5d6d4e 100%);
}

.tile-placeholder.wave {
  background: linear-gradient(180deg, #1a1a4e 0%, #2e4482 40%, #3498db 70%, #1abc9c 100%);
}

.tile-placeholder.quantum {
  background: linear-gradient(135deg, #6c3483 0%, #2980b9 50%, #1abc9c 100%);
}

.tile-label {
  padding: 0.35rem 0.5rem;
  font-weight: 600;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive: 2 columns on mobile */
@media (max-width: 600px) {
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}