/* =====================================================================
   Bloop: work page only (loaded after site.css)
   ===================================================================== */

/* Intro: headline + lead on the left, filter on the right (wraps below on small screens) */
.work-intro { margin-bottom: var(--space-10); }
.work-intro__text { --stack-gap: 0; } /* h1 → lead spacing comes from site.css */

/* Filter: on phones the pill row fills the width so all five options fit without scrolling */
@media (max-width: 480px) {
  .work-filter { display: flex; width: 100%; }
  .work-filter .tabs__btn { flex: 1 1 auto; padding: 0 10px; }
}

.work-empty { margin-top: var(--space-6); color: var(--text-muted); }

/* Case copy (brief / what we made / how it landed) */
.work-case__parts { display: grid; gap: var(--space-4); margin: 0; }
.work-case__parts dt { color: var(--pink-900); }
.work-case__parts dd { margin: var(--space-1) 0 0; }

/* Without JS the card link jumps to its project, and the case copy shows under the card */
.work-case { margin-top: var(--space-4); }
html:not(.js) .work-grid > li:target > .work-case[hidden] {
  display: block !important;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface-card); border: var(--border-thin) solid var(--border-default);
}

/* Dialog extras */
.work-dialog__note {
  display: flex; align-items: center; gap: var(--space-2);
  padding-top: var(--space-3); border-top: var(--border-thin) solid var(--border-subtle);
  font-size: var(--text-sm); color: var(--text-subtle); --icon-size: 16px;
}

/* Closing nudge */
.work-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.work-next__text { --stack-gap: var(--space-3); max-width: 36em; }
@media (max-width: 480px) {
  .work-next .btn { width: 100%; }
}

/* Sub-filters row for Applied AI and Social Media */
.work-subfilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-card);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--radius-pill);
  width: fit-content;
}

.work-subfilters .tag {
  font-size: 12px;
  cursor: pointer;
  background: var(--cream-100);
  border: var(--border-thin) solid var(--border-default);
  transition: all var(--dur-fast);
}

.work-subfilters .tag:hover {
  background: var(--cream-200);
}

.work-subfilters .tag[aria-pressed="true"] {
  background: var(--ink-900);
  color: var(--cream-50);
  border-color: var(--ink-900);
}