/* Section: projects_grid (EXALCO-Erga "Projects grid"). Cards: components/project-card.css; grid: .ex-grid--3. */

.ex-section.ex-projects-grid {
  padding-top: clamp(28px, 3.2vw, 48px);
  scroll-margin-top: var(--ex-scroll-offset);
}
.ex-projects-grid__title { margin: 0 0 24px; }

.ex-projects-grid__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(14px, 2vw, 28px);
  margin: 0 0 28px;
}
.ex-projects-grid__filter { flex: none; }
.ex-projects-grid__filter .ex-field__label { color: var(--ex-ink); }
.ex-projects-grid__filter .ex-select { width: 100%; }

.ex-projects-grid__list { margin: 0; padding: 0; list-style: none; }
.ex-projects-grid__item { display: flex; min-width: 0; }
.ex-projects-grid__item[hidden] { display: none; }
/* Cards fade in when a filter shows them (mockup: fadeIn .25s). JS only removes/sets [hidden]. */
.js .ex-projects-grid__item { animation: ex-projects-grid-fade .25s ease both; }

.ex-projects-grid__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 0 0;
}
.ex-projects-grid__empty[hidden] { display: none; }

@keyframes ex-projects-grid-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 899px) {
  .ex-projects-grid__filter { flex: 1 1 220px; }
}

@media (max-width: 599px) {
  .ex-projects-grid__filters { flex-direction: column; align-items: stretch; }
  .ex-projects-grid__filter { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .ex-projects-grid__item { animation: none; }
}