/* ==========================================================================
   Case study grid
   ==========================================================================
   Filters and the results grid. Ported from case-study-grid.tsx.

   Filters are a single quiet row, not a bank of dropdowns. With six projects
   they barely earn their place; they are here because the roadmap plans more.
   Options come from the data so they cannot drift from it.
   ========================================================================== */

.case-grid { display: flex; flex-direction: column; gap: 2.5rem; }
.case-grid__controls { display: flex; flex-direction: column; gap: 1rem; }

.case-grid__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.case-grid__row-label {
  margin-right: 0.25rem;
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: var(--muted-foreground);
}

/* White when selected, not brand. The grid only ever renders inside the dark
   "Tous les projets" band, where a blue selection competed with the blue
   affordance disc on the cards. Same caveat as the sunken card: these are
   mode-blind primitives, so a light-mode use of this grid needs them
   revisited. */
.case-pill {
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface);
  padding-inline: 0.875rem;
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: var(--muted-foreground);
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.case-pill:hover { border-color: var(--border-strong); color: var(--foreground); }

.case-pill[aria-pressed="true"] {
  border-color: var(--color-neutral-0);
  background-color: var(--color-neutral-0);
  color: var(--color-neutral-900);
}

.case-pill:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .case-pill { transition: none; } }

/* "sur N" rather than a verb, so the line stays grammatical at 0 and at 1. */
.case-grid__count {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--text-body-sm-weight);
  color: var(--muted-foreground);
}

.case-grid__results { display: flex; flex-direction: column; gap: 1.5rem; }

.case-grid__cards { display: grid; gap: 1.5rem; }

@media (min-width: 768px) { .case-grid__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .case-grid__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.case-grid__cards > [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Sunken card, for the dark band.

   A card at --surface (dark mode's lighter-than-background token) sits ABOVE
   the page, which is the usual card relationship. The reference the main
   designer supplied recedes the card BELOW it instead: no stroke, definition
   coming only from that darkness and the cover image.

   Hover takes the card all the way to white, not one step lighter. Rather than
   overriding a colour on every line inside it, the hover re-points the semantic
   tokens for the subtree: the children already read --foreground,
   --muted-foreground and so on, and custom properties inherit, so they all
   invert together. The values are the ramp primitives the light theme itself is
   built from, not new colours.
   -------------------------------------------------------------------------- */
.case-card--sunken {
  border: 0;
  background-color: var(--color-neutral-1000);
}

a.case-card--sunken:hover {
  background-color: var(--color-neutral-0);
  --foreground: var(--color-neutral-900);
  --muted-foreground: var(--color-neutral-600);
  --background-muted: var(--color-neutral-100);
  --border-subtle: var(--color-neutral-100);
}