/* ─── Recognition award list — mirrors Team page layout ─────────── */

/*
  Pattern matches .team-list / .team-member in about.css:
  flex column, per-row CSS grid, padding: 28px 0, same font as .member-name.
  Three columns use fixed widths for project and year so they align
  across all rows (same reason .team-member uses a fixed 300px left col).
*/

.rec-entries {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.rec-entry {
  display: grid;
  grid-template-columns: 1fr 240px 52px;
  column-gap: 32px;
  align-items: start;
  padding: 28px 0;
}

/* All three columns — same family, size, weight as .member-name */
.rec-name,
.rec-project,
.rec-year {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.4;
}

.rec-name {
  color: #0a0a0a;
}

.rec-project {
  color: rgba(0, 0, 0, 0.38);
}

.rec-year {
  color: rgba(0, 0, 0, 0.38);
}

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

@media (max-width: 900px) {
  .rec-entry {
    grid-template-columns: 1fr 200px 52px;
    column-gap: 24px;
  }
}

@media (max-width: 640px) {
  .rec-entry {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 20px 0;
  }

  .rec-year {
    color: rgba(0, 0, 0, 0.38);
  }
}