/* ── FILTER PILLS ────────────────────────────────────────── */
.filters {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.pill {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border: 1px solid #222;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: #222;
  transition: background 0.12s, color 0.12s;
}

.pill.active,
.pill:hover {
  background: #222;
  color: #f5f4f0;
}

/* ── PROJECT GRID ────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4rem;
}

@media (max-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px)  { .grid { grid-template-columns: 1fr; gap: 1rem; } }

/* ── CARD ────────────────────────────────────────────────── */
.card { cursor: pointer; text-decoration: none; color: inherit; display: block; }

.card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1.5px solid #000;
  overflow: hidden;
  background: #2b6a8c;
  position: relative;
  transition: opacity 0.18s, transform 0.12s ease-out;
}

.card:nth-child(2)  .card-image { background: #1f5c7a; }
.card:nth-child(3)  .card-image { background: #3a7a9c; }
.card:nth-child(4)  .card-image { background: #245e6e; }
.card:nth-child(5)  .card-image { background: #2e7388; }
.card:nth-child(6)  .card-image { background: #1a4f6a; }
.card:nth-child(7)  .card-image { background: #336e84; }
.card:nth-child(8)  .card-image { background: #1e5870; }
.card:nth-child(9)  .card-image { background: #28647e; }

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-caption {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: #555;
  line-height: 1.5;
}

.card-caption .show-title {
  display: block;
  font-weight: 600;
  color: #111;
  font-size: 0.72rem;
}