/* ============================================================
   Kanghe Lyu site — projects.css v3
   Projects grid with floating icons and hover glow.
   ============================================================ */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
  width: 100%;
}

.project-icon {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 8px rgba(168, 230, 230, 0.2));
  animation: float 4s ease-in-out infinite;
}
.project:nth-child(2) .project-icon { animation-delay: -1.3s; }
.project:nth-child(3) .project-icon { animation-delay: -2.6s; }
.project:nth-child(4) .project-icon { animation-delay: -3.4s; }
.project:nth-child(5) .project-icon { animation-delay: -0.7s; }

.project-title {
  position: relative;
  z-index: 1;
  font-size: 1.12rem;
  color: var(--paper);
  margin-bottom: 10px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.project-desc {
  position: relative;
  z-index: 1;
  color: var(--subtle);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 18px;
}

@media (max-width: 760px) {
  .projects-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.project-icon img {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(11, 122, 102, 0.35);
}