/* ─────────────────────────────────────────────────────────────────────────
   projects.css
   Auto-fill responsive card grid for showcasing individual projects.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Grid ────────────────────────────────────────────────────────────────── */

.projects-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   24px;
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.project-card {
  border:      1px solid var(--border);
  background:  var(--surface);
  padding:     28px;
  position:    relative;
  transition:  border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  /* Scroll-reveal start state (toggled by scrollReveal.js) */
  opacity:     0;
  transform:   translateY(20px);
}
.project-card.visible {
  opacity:   1;
  transform: translateY(0);
}
.project-card:hover {
  border-color: var(--glow);
  box-shadow:   0 0 30px rgba(0, 212, 255, 0.1),
                inset 0 0 30px rgba(0, 212, 255, 0.03);
  transform:    translateY(-4px);
}

/* Coloured top-bar that appears on hover */
.project-card::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, var(--glow), var(--glow3));
  opacity:    0;
  transition: opacity 0.3s;
}
.project-card:hover::before {
  opacity: 1;
}

/* ── Card header row ─────────────────────────────────────────────────────── */

.project-top {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   20px;
}

.project-icon {
  font-size: 1.4rem;
  filter:    drop-shadow(0 0 8px var(--glow));
}

.project-links {
  display: flex;
  gap:     12px;
}
.project-links a {
  color:          var(--muted);
  font-size:      0.75rem;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition:     color 0.2s;
}
.project-links a:hover {
  color: var(--glow);
}

/* ── Card body ───────────────────────────────────────────────────────────── */

.project-name {
  font-family:    var(--font-display);
  font-size:      0.95rem;
  font-weight:    700;
  color:          #fff;
  margin-bottom:  10px;
  letter-spacing: 0.05em;
}

.project-desc {
  font-size:     0.82rem;
  color:         var(--muted);
  line-height:   1.7;
  margin-bottom: 20px;
}

/* ── Tech stack tags ─────────────────────────────────────────────────────── */

.project-techs {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

.project-tech {
  font-size:      0.68rem;
  color:          var(--green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Dot separator between tags */
.project-tech:not(:last-child)::after {
  content: ' · ';
  color:   var(--border);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

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