/* ==========================================================================
   gallery.css — the only styles main.css does not already provide for
   /gallery. Loaded after main.css, so it can rely on every :root token.

   Scope rule: if a rule here would be useful on a second page, it belongs in
   main.css instead. Everything else on the gallery (grid, cards, chips,
   empty state) reuses main.css classes unchanged.
   ========================================================================== */

/* ------------------------------------------------------------- filter bar */
/* The chips are <button> elements — filtered views must never become
   crawlable URLs. .chip supplies the shape and the per-type hue; these rules
   add only the button reset, the hit area, and the pressed state. */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-xs);
  padding: 0;
}

/* .filter-bar sets display:flex, which would otherwise beat the UA rule for
   the hidden attribute. */
.filter-bar[hidden] { display: none; }

.filter-chip {
  cursor: pointer;
  padding: 0.34rem 0.72rem;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition), background-color var(--transition),
    box-shadow var(--transition), color var(--transition);
}

.filter-chip:hover { border-color: currentColor; }

/* Pressed = the current filter. Colour comes from the .chip--* hue via
   currentColor, so a new object type needs no rule here. */
.filter-chip[aria-pressed='true'] {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 24%, transparent);
  box-shadow: inset 0 0 0 1px currentColor;
}

/* "All" has no object-type hue of its own; it takes the site accent. */
.filter-chip--all[aria-pressed='true'] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--accent);
}

/* ----------------------------------------------------------- result count */

.gallery-count {
  margin: 0 0 var(--space-sm);
  color: var(--text-dim);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  min-height: 1.4em;
}

/* --------------------------------------------------------------- fallback */
/* No color-mix support: keep the pressed state legible with a flat tint. */

@supports not (background: color-mix(in srgb, red 20%, transparent)) {
  .filter-chip[aria-pressed='true'] {
    background: rgba(146, 170, 214, 0.22);
  }
}