/* ==========================================================================
   LEECOI — Projects (/projects/)
   ==========================================================================

   Twenty project cards, each with a brief and a deliverables list. The job is
   to keep a long grid scannable: consistent card anatomy, the track slug in the
   same place every time, and deliverables aligned to a common baseline so the
   eye can run down the column.
   ========================================================================== */

/* ==========================================================================
   FILTER
   --------------------------------------------------------------------------
   A toggle group, not a tab set. Tabs imply panels that swap; this filters one
   list in place, which is a different promise and takes different semantics.
   ========================================================================== */

.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);

  margin-block-end: var(--space-xl);
  padding-block-end: var(--space-lg);
  border-block-end: 1px solid var(--line);
}

.filter__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.filter__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);

  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);

  font-size: var(--step-small);
  font-weight: var(--weight-medium);
  color: var(--muted);

  transition:
    color var(--dur-fast) var(--ease-ui),
    border-color var(--dur-fast) var(--ease-ui),
    background-color var(--dur-fast) var(--ease-ui);
}

.filter__button:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* The pressed state hangs off aria-pressed, so it cannot be styled without also
   being announced. Same rule the active nav item follows. */
.filter__button[aria-pressed='true'] {
  color: var(--ink);
  border-color: var(--accent-strong);
  background-color: var(--accent-wash);
}

.filter__count {
  font-size: 0.6875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.filter__button[aria-pressed='true'] .filter__count {
  color: var(--accent-strong);
}

.filter__status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.filter__empty {
  padding-block: var(--space-2xl);
  text-align: center;
  color: var(--muted);
}

/* ==========================================================================
   PROJECT CARDS
   ========================================================================== */

.projects-grid {
  align-items: stretch;
}

.project-item {
  display: grid;
}

.project-card {
  block-size: 100%;
  gap: var(--space-sm);
}

.project-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-block-end: var(--space-2xs);
}

/* The track slug, set as a slug. It is the identifier the syllabus and the URL
   both use, so it is shown as data rather than prettified into a title. */
.project-card__track {
  font-size: 0.75rem;
  color: var(--link);
  letter-spacing: 0.02em;
}

/* Pushed to the bottom so deliverable lists align across a row regardless of
   how long each brief runs. */
.project-card__outputs {
  margin-block-start: auto;
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--line);
}

.project-card__label {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  line-height: var(--step-micro-lh);
  letter-spacing: var(--step-micro-ls);
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: var(--space-xs);
}

.project-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);

  padding-inline-start: var(--space-lg);
  list-style: disc outside;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--muted);
}

.project-card__list > li::marker {
  color: var(--accent-strong);
}