/* Work index page - eighteen projects, filterable by discipline. */

.work-index__head {
  padding-block: var(--space-8) var(--space-6);
}

.work-index__head h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-regular);
  max-width: 16ch;
}

/* ---------- Discipline filter ---------- */

/* Hidden until JS is confirmed present. A visitor without JS gets all eighteen
   projects and no controls, rather than a row of buttons that do nothing.
   Same `js-ready` mechanism as the reveal states - see ARCHITECTURE.md §8. */
.work-filter {
  display: none;
}

html.js-ready .work-filter {
  display: block;
  padding-block-end: var(--space-7);
  border-block-end: 1px solid var(--color-border);
  margin-block-end: var(--space-8);
}

.work-filter__label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
}

.work-filter__set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

/* Set in the mono like every other button on the site, with a hairline underline
   on the active one, which is how the primary nav marks "you are here". */
.work-filter__btn {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border: 0;
  border-block-end: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  transition: color var(--duration-short) var(--ease-default),
              border-color var(--duration-short) var(--ease-default);
}

.work-filter__btn:hover {
  color: var(--color-text);
}

.work-filter__btn[aria-pressed='true'] {
  color: var(--color-text);
  border-block-end-color: var(--color-accent);
}

.work-filter__count {
  font-size: 0.85em;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.work-filter__btn[aria-pressed='true'] .work-filter__count {
  color: var(--color-accent);
}

.work-filter__status {
  margin-block-start: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  min-height: 1.4em;
}

/* ---------- Grid ---------- */

/*
  An even image grid, side by side, with no text until you ask for it. Every tile is
  the same 4:5 window so the rows line up cleanly, and the words live on the picture:
  hover (or focus) dims the image and the tag and title rise into view in light type.

  Photographs fill their tile. Cutouts and logos (.work-card--contain) sit whole
  inside it on a slightly deeper sheet of the paper, since cropping a bottle or a wordmark would cut
  the very thing the tile is showing. A tile can set --tile-bg to match artwork that
  was drawn on its own ground (the QuantumCyte logo sits on white).

  The old --tall / --small / --drop classes are still in the markup and simply do
  nothing now; every card fills exactly one cell, so a filtered view never leaves a
  hole.
*/
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding-block-end: var(--space-10);
}

.work-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--tile-bg, var(--color-bg-raised));
  background-image: var(--texture-scan);
  background-size: var(--texture-scan-size);
  background-blend-mode: multiply;
  color: var(--color-ink-text);
  isolation: isolate;
}

/* A tile matched to artwork drawn on its own flat ground (the QuantumCyte logo on
   white) stays flat, so the picture's edge disappears into it. */
.work-card[style*="--tile-bg"] {
  background-image: none;
}

/* `hidden` only gets display:none from the UA sheet, which the display rule above
   outranks, so the filter needs this to actually hide a card. */
.work-card[hidden] {
  display: none;
}

.work-card__visual {
  position: absolute;
  inset: 0;
}

.work-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform var(--duration-slow, 700ms) var(--ease-default),
              filter var(--duration-medium) var(--ease-default);
}

.work-card--contain .work-card__visual {
  padding: 12%;
}

.work-card--contain .work-card__visual img {
  object-fit: contain;
}

/* The dimming layer: a flat darkening plus a deeper fall toward the bottom edge,
   where the words sit. */
.work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgb(12 12 11 / 0.55), rgb(12 12 11 / 0) 60%),
    rgb(12 12 11 / 0.38);
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-default);
  pointer-events: none;
}

.work-card__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-5);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duration-medium) var(--ease-default),
              transform var(--duration-medium) var(--ease-default);
}

.work-card__caption .tag {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--color-ink-text);
  opacity: 0.8;
}

.work-card__caption h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-ink-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.work-card__caption h2::after {
  content: '\2192';
}

.work-card:hover::after,
.work-card:focus-visible::after,
.work-card:hover .work-card__caption,
.work-card:focus-visible .work-card__caption {
  opacity: 1;
}

.work-card:hover .work-card__caption,
.work-card:focus-visible .work-card__caption {
  transform: none;
}

.work-card:hover .work-card__visual img,
.work-card:focus-visible .work-card__visual img {
  transform: scale(1.03);
}

.work-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .work-card__visual img,
  .work-card__caption {
    transition: opacity var(--duration-medium) var(--ease-default);
  }

  .work-card:hover .work-card__visual img,
  .work-card:focus-visible .work-card__visual img,
  .work-card__caption {
    transform: none;
  }
}

@media (max-width: 1000px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .work-grid {
    gap: var(--space-3);
  }

  .work-card__caption {
    padding: var(--space-4);
  }

  .work-filter__set {
    gap: var(--space-2) var(--space-4);
  }
}