/* Our Work — filter bar, outcome lines, and the 5-part case study. */

/* ---- Filters (industry + unit) ---- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--line);
}

.filter-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.filter {
  appearance: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: inherit;
  font: inherit;
  font-size: var(--text-sm);
  /* 44px touch target (docs/art-direction.md §2.12) */
  min-block-size: 44px;
  padding-inline: var(--space-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.filter:hover { border-color: var(--fg); }
.filter.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.filter:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.filter-count {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.55;
  margin-inline-start: auto;
}

.card[hidden] { display: none; }

/* ---- Outcome on the card ---- */
.card-outcome {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-block-start: var(--space-2);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Demo figures are labelled — they are invented until the owner supplies real data */
.demo-flag {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 0.4em;
  opacity: 0.6;
}

/* ---- 5-part case study ---- */
.casestudy {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  counter-reset: cs;
}

.cs-part {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--line);
}

.cs-part:last-child { border-block-end: 0; }

.cs-num {
  font-size: var(--text-sm);
  font-weight: 600;
  opacity: 0.4;
  font-variant-numeric: tabular-nums;
}

.cs-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 var(--space-2);
}

.cs-text {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  margin: 0;
  max-inline-size: 62ch;
}

/* The outcome is the part the study says we currently lack — give it weight */
.cs-outcome .cs-text { font-weight: 600; }
.cs-outcome .cs-label { opacity: 1; }

@media (max-width: 48rem) {
  .cs-part { grid-template-columns: 1fr; gap: var(--space-2); }
  .cs-text { font-size: var(--text-base); }
  .filter-count { margin-inline-start: 0; inline-size: 100%; }

  /* 3×2 card grid → horizontal snap scroll (docs/art-direction.md §2.11) */
  .page-inner .cards-grid {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-block-end: var(--space-3);
    scrollbar-width: thin;
  }
  .page-inner .cards-grid > .card { scroll-snap-align: start; }
}

/* ------------------------------------------------ Our Work index (V3.0) ---
   One row per project, artwork one side and the write-up the other. Rows
   alternate so the page does not read as five identical slabs. */

/* The rows carry their own rhythm (--space-7 each side), so the section must
   not add another --space-8 on top: that put 264px between the hero and the
   first project and the same again before the closing band. */
.wk-index { padding-block: 0; }

.wk-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-7);
}

.wk-row + .wk-row { border-block-start: 1px solid var(--line); }

.wk-media img {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

.wk-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.wk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.wk-sum {
  margin: var(--space-4) 0 0;
  color: rgb(5 50 37 / 0.78);
}

.wk-actions {
  display: flex;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

/* ---- Request for portfolio ---- */

/* No bottom padding: the newsletter band below is the same green and brings its
   own --space-8, so the two stacked to 320px of blank with no edge between them
   to justify it. */
.wk-portfolio { padding-block-end: 0; }

.wk-portfolio .container { text-align: center; }
.wk-portfolio .h-big { max-inline-size: 24ch; margin-inline: auto; }

.wk-portfolio-p {
  margin: var(--space-4) auto 0;
  max-inline-size: 62ch;
  color: rgb(250 247 242 / 0.78);
}

.wk-portfolio-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

@media (max-width: 60rem) {
  .wk-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding-block: var(--space-6);
  }
}

@media (max-width: 48rem) {
  /* Only the portfolio row actually holds two buttons, so it is the only one
     that needs them split evenly to stay off a second line. .wk-actions holds
     a single Contact link per card, where flex: 1 1 0 had nothing to share the
     row with and just stretched it across the whole card. It hugs its label
     here, the same as it already does on desktop. */
  .wk-actions .btn { white-space: nowrap; }
  .wk-portfolio-actions .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }
}