/* ==========================================================================
   work.css: /work/ index and the case-study pages (package I).
   Tokens only (tokens.css); no hex values. Built on A's card, band, badge
   and prose classes.
   ========================================================================== */

/* ---- /work/ index: filter ---- */
.work-filter {
  display: grid;
  gap: var(--space-4) var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .work-filter { grid-template-columns: minmax(0, 15rem) minmax(0, 17rem) minmax(0, 1fr); }
}
.work-filter__field { min-width: 0; }
.work-filter__field .form-label { display: block; }
.work-filter__count {
  margin: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}
.work-filter__clear { min-height: 44px; font-size: var(--fs-small); }
@media (min-width: 768px) {
  .work-filter__clear { grid-column: 3; justify-self: start; margin-top: calc(var(--space-4) * -1); }
}

/* ---- /work/ index: the grid (a list of A's cards) ---- */
.work-grid { list-style: none; margin: 0; padding: 0; }
.work-grid__item { display: flex; min-width: 0; }
.work-grid__item > .card { width: 100%; height: 100%; }
.work-card__status { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.work-empty { margin: var(--space-5) 0 0; }
.work-empty .link-button { min-height: 44px; }

/* ---- Case study: intro (what we built + facts) ---- */
.case-intro__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 992px) {
  .case-intro__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-8); }
}
.case-intro__main > h2 { font-size: var(--fs-h2); line-height: 1.08; margin-bottom: var(--space-5); }
.case-intro__main > * + h2 { margin-top: var(--space-7); }

.case-facts { padding: var(--space-5); }
@media (min-width: 992px) { .case-facts { padding: var(--space-6); } }
.case-facts__list { margin: 0; }
.case-facts__row { padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.case-facts__row:first-child { border-top: 0; padding-top: 0; }
.case-facts__row:last-child { padding-bottom: 0; }
.case-facts__row dt { color: var(--color-text-muted); margin-bottom: var(--space-2); }
.case-facts__row dd { margin: 0; color: var(--color-text-heading); }
.case-facts__services { margin: 0; }
.case-facts__services > li:last-child { margin-bottom: 0; }
.case-facts__status { display: flex; flex-direction: column; gap: var(--space-2); }
.case-facts__state { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.case-facts__for { font-size: var(--fs-small); color: var(--color-text); }

/* ---- Case study: the illustration or screen ---- */
.case-media .slot { margin: 0 auto; }
.case-media--4x5 .slot { max-width: 480px; }
.case-media--4x3 .slot { max-width: 880px; }
.case-media--16x10 .slot { max-width: 960px; }
.case-media .slot figcaption { display: flex; align-items: baseline; gap: var(--space-2); }

/* ---- Case study: results ---- */
.case-results__list { margin-bottom: 0; }
.case-results__list .figure-source { max-width: 28ch; }

/* ---- Print: case studies print as plain documents ---- */
@media print {
  .page-case-study .cta-band, .page-work .cta-band, .page-work .work-filter { display: none !important; }
}