/* ============================================================
   /work/, page-local styles (loaded after css/main.css)
   Covers only the filter row and case grid; everything else on
   this page is main.css components.
   ============================================================ */

/* Filters are progressive enhancement: without JS the buttons would do
   nothing, so the whole toolbar (and its status line) stays hidden and
   the full grid simply shows. */
.no-js .work-filters,
.no-js .work-hub__status { display:none; }

.work-hub h2 { max-width:26ch; margin-bottom:var(--s-6); }

/* ---------- Filter row (chips reuse .router__chip from main.css) ---------- */

.work-filters {
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-5) var(--s-8);
  margin-bottom:var(--s-5);
}
.work-filters__group { border:none; }
.work-filters__group legend { text-transform:uppercase; color:var(--muted); margin-bottom:var(--s-3); }
.work-filters__options { display:flex; flex-wrap:wrap; gap:var(--s-2); }

.work-hub__status { color:var(--muted); margin-bottom:var(--s-6); }

/* ---------- Case grid (cards reuse .card from main.css) ---------- */

.work-hub__grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s-5);
  margin-bottom:var(--s-6);
}
/* .card sets display:flex, which would defeat the UA [hidden] rule, restate it explicitly so JS filtering actually hides cards */
.work-case[hidden] { display:none; }

.work-case__visual {
  aspect-ratio:3 / 2;
  /* V3: --ivory is a light TEXT colour now. Glass, like .work-row__visual. */
  background:var(--paper);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  display:flex; align-items:flex-end;
  padding:var(--s-4);
  margin-bottom:var(--s-4);
}
.work-case__visual .mono { color:var(--muted); }
.work-case__tags { text-transform:uppercase; color:var(--muted); margin-bottom:var(--s-3); }
.work-case__client { color:var(--muted); margin:calc(-1 * var(--s-2)) 0 var(--s-4); }
.work-case__lines { margin-bottom:var(--s-4); }
.work-case__lines > div { display:flex; gap:var(--s-3); padding:var(--s-2) 0; border-top:1px solid var(--border-light); }
.work-case__lines dt { text-transform:uppercase; color:var(--muted); min-width:72px; padding-top:2px; }
.work-case__lines dd { color:var(--muted); }
/* margin-top:auto pins the era line to the card base across unequal heights */
.work-case__attribution { color:var(--muted); font-style:normal; margin-top:auto; padding-top:var(--s-3); }

.work-hub__empty { color:var(--muted); margin-bottom:var(--s-6); }
.work-hub__note { color:var(--muted); max-width:var(--text-max); }

@media (max-width:960px) {
  .work-hub__grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:720px) {
  .work-hub__grid { grid-template-columns:1fr; }
  .work-filters { flex-direction:column; gap:var(--s-5); }
}