/* Project category filter chips */
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-chip {
  font-family: inherit;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 8px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
  background: color-mix(in srgb, var(--surface0) 50%, transparent);
  color: var(--subtext0);
  border: 1px solid var(--surface1);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .filter-chip:hover {
    color: var(--text);
    border-color: var(--surface2);
  }
}

.filter-chip[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--surface2);
  background: color-mix(in srgb, var(--surface0) 80%, transparent);
}

.filter-chip[aria-pressed="true"][data-category="security"] { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 15%, transparent); }
.filter-chip[aria-pressed="true"][data-category="ai"] { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 40%, transparent); background: color-mix(in srgb, var(--yellow) 15%, transparent); }
.filter-chip[aria-pressed="true"][data-category="ml"] { color: var(--mauve); border-color: color-mix(in srgb, var(--mauve) 40%, transparent); background: color-mix(in srgb, var(--mauve) 15%, transparent); }
.filter-chip[aria-pressed="true"][data-category="eng"] { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 15%, transparent); }
.filter-chip[aria-pressed="true"][data-category="tools"] { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 40%, transparent); background: color-mix(in srgb, var(--teal) 15%, transparent); }
.filter-chip[aria-pressed="true"][data-category="lang"] { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, transparent); background: color-mix(in srgb, var(--blue) 15%, transparent); }

.project-entry.filtered-out {
  display: none;
}

/* Projects - collapsible groups */
.project-group-header {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  cursor: pointer;
  user-select: none;
  color: var(--blue);
  font-weight: 600;
}

/* Gated so a tap does not leave the control stuck in its hovered,
   transformed state until the next tap elsewhere on the page. */
@media (hover: hover) {
  .project-group-header:hover {
    color: var(--lavender);
  }
}

.project-group-header .chevron {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.project-group-header.open .chevron {
  transform: rotate(90deg);
}

.project-group-header .hint {
  color: var(--overlay0);
  font-size: 0.75rem;
  font-weight: 400;
}

.project-group {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.project-group.open {
  grid-template-rows: 1fr;
}

.project-group-inner {
  overflow: hidden;
}

/* Two projects per row. Each entry is a short card (name, grade, one or two
   lines of description, tags), so stacking them full width left ~400px empty
   beside every one of the twenty and made the section twice as long as it
   needed to be. The column becomes the measure, which puts the description at
   about 58 characters instead of the 72ch cap it had. */
@media (min-width: 900px) {
  .project-group-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    /* Default `stretch`, deliberately not `start`: every card in a row takes
       the height of the tallest one, so the two cards beside each other end
       flush instead of one finishing short. */
  }

  /* The filter bar is the first child of the grid, so without this it becomes
     an ordinary cell: the chips wrap inside half the width and the first
     project card jumps up beside them. It is a control for the whole grid, so
     it spans the whole grid, on its own row above the cards. */
  .project-filters { grid-column: 1 / -1; }

  /* The grid owns the vertical rhythm now; the per-card margin would add to
     the row gap and reappear as uneven spacing. */
  .project-entry {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  .project-desc { max-width: none; }

  /* This is what puts the tag rows on a shared baseline: the slack created by
     the taller neighbour goes above the tags, so they sit at the bottom of the
     card instead of wherever the description happened to stop.

     `.project-entry .project-tags`, not `.project-tags`: the base rule sets
     margin-top: 8px and lives LATER in this file, so at equal specificity it
     won and the auto margin silently did nothing. */
  .project-entry .project-tags {
    margin-top: auto;
    padding-top: 10px;
  }
}

.project-entry {
  margin-bottom: 16px;
  padding: 12px 16px;
}

.project-name {
  color: var(--mauve);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-name .icon {
  color: var(--mauve);
}

.project-name a {
  color: var(--mauve);
}

.project-name a:hover {
  color: var(--pink);
}

.project-meta {
  color: var(--overlay1);
  font-size: 0.82rem;
  margin: 4px 0;
}

.project-grade {
  color: var(--green);
  font-weight: 600;
}

.project-desc {
  color: var(--subtext0);
  font-size: 0.9rem;
  margin-top: 4px;
  max-width: 72ch;
}

.project-tags {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.project-tag {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

@media (hover: hover) {
  .project-tag:hover {
    background: color-mix(in srgb, var(--blue) 20%, transparent);
    border-color: color-mix(in srgb, var(--blue) 40%, transparent);
    transform: translateY(-1px);
  }
}

.project-tag[data-category="security"] {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 20%, transparent);
}

.project-tag[data-category="ml"] {
  background: color-mix(in srgb, var(--mauve) 10%, transparent);
  color: var(--mauve);
  border-color: color-mix(in srgb, var(--mauve) 20%, transparent);
}

.project-tag[data-category="tools"] {
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 20%, transparent);
}

.project-tag[data-category="eng"] {
  background: color-mix(in srgb, var(--green) 10%, transparent);
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 20%, transparent);
}

.project-tag[data-category="ai"] {
  background: color-mix(in srgb, var(--yellow) 10%, transparent);
  color: var(--yellow);
  border-color: color-mix(in srgb, var(--yellow) 20%, transparent);
}