/* ============================================================
   PROJECTS PAGE — pages/projects.css
   ============================================================ */

.projects-hero {
  padding-block: var(--section-pad);
  border-bottom: var(--border-thin);
  background: var(--color-bg-2);
}

.projects-hero .label  { display: block; margin-bottom: var(--space-3); }
.projects-hero h1      { margin-bottom: var(--space-4); }
.projects-hero p       { font-size: var(--text-md); max-width: 52ch; }

.projects-listing {
  padding-block: var(--section-pad);
  background: var(--color-bg);
}

.projects-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}

.project-card[data-category] {
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.project-card.is-hidden { display: none; }

.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-20) 0;
  color: var(--color-ink-3);
  display: none;
}
.no-results.is-visible { display: block; }

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