/* ===========================================================================
   The projects page — every building the company has, on one wall.

   The wall is a grid of tiles: media in a box, a gap around it, the name on
   its floor, and the state of the building in its top corner. Nothing is
   drawn round the edge of a tile — the picture's own edge and the gap are
   the frame. Ten buildings are visible at once rather than three.
   =========================================================================== */

/* --- The filter bar ------------------------------------------------------
   Three words and the site's own sliding rule — no pills, no chevrons. It
   sits in the flow directly under the header rather than floating over the
   wall, because the wall now begins with a gap instead of a photograph.   */

.wall-head {
  padding: clamp(1.5rem, 4vw, 3rem) var(--frame) clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-step) clamp(1.5rem, 3vw, 3rem);
}

.filters {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.filter {
  position: relative;
  background: none;
  border: 0;
  padding-block: 0.35em;
  cursor: pointer;
  font-weight: 400;
  font-size: var(--fs-key);
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t) var(--ease-hover);
}

.filter::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 100%;
  inset-inline-end: 0;
  height: 2px;
  background: var(--brand);
  transition: inset-inline-start var(--t) var(--ease-hover);
}

.filter:hover { color: var(--paper); }
.filter[aria-pressed='true'] { color: var(--paper); }
.filter[aria-pressed='true']::after,
.filter:hover::after { inset-inline-start: 0; }

.filter__count {
  color: var(--muted);
  font-size: 0.85em;
  margin-inline-start: 0.4em;
}

/* --- The wall ------------------------------------------------------------ */

.wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--frame);
  padding: 0 var(--frame) clamp(3rem, 7vw, 6rem);
}

.wall > .tile { grid-column: span 12; }

@media (min-width: 640px) {
  .wall > .tile { grid-column: span 6; }
}

@media (min-width: 1100px) {
  .wall > .tile { grid-column: span 4; }
}

/* Nothing left after a filter. It should read as an answer, not a fault. */
.wall__empty {
  grid-column: 1 / -1;
  padding: clamp(3rem, 8vw, 6rem) 0;
  text-align: center;
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-key);
}

/* --- The tag -------------------------------------------------------------
   Where Anduril prints nothing and MIKA prints a line drawing, this prints
   the one thing a visitor actually wants to know about a building.        */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 400;
  font-size: var(--fs-key);
  white-space: nowrap;
  color: var(--paper);
}

.tag::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  background: currentColor;
}

.tag--live { color: var(--brand); }

/* --- The filter's beat ---------------------------------------------------
   The wall used to change between two frames, which is no change at all to
   watch. Now everything on it leaves together and the survivors arrive one
   after another. The stagger is carried on `--i`, written by site.js on
   every pass, and it is suppressed on the way out so the departure reads as
   one gesture rather than a second queue. */

.wall .tile {
  opacity: 1;
  transform: none;
  transition: opacity 340ms var(--ease), transform 340ms var(--ease);
  transition-delay: calc(var(--i, 0) * 34ms);
}

.wall[data-filtering='out'] .tile { transition-delay: 0ms; }

.wall .tile.is-out {
  opacity: 0;
  transform: translateY(14px);
}

@media (prefers-reduced-motion: reduce) {
  .wall .tile {
    transition: none;
    transition-delay: 0ms;
    opacity: 1;
    transform: none;
  }
}