/* Work (archive-project.php): filter and the offset project grid */

.work { padding-block-end: var(--section); }

.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: clamp(2rem, 4vw, 3.5rem); }
.filter__btn {
  min-block-size: 2.75rem;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: none;
  font-weight: 500;
  cursor: pointer;
}
.filter__btn:hover { border-color: var(--ink); }
.filter__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* Without JavaScript every project is already listed, so the filter is not shown. */
html:not(.js) .filter { display: none; }

/* Twelve columns. Cards repeat a four-step rhythm: wide, narrow and dropped, narrow, wide and dropped. */
.work__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 6.5rem) var(--gap); align-items: start; }
.work-card { grid-column: span 6; }
.work-card__link { display: block; text-decoration: none; }
.work-card__media { aspect-ratio: 16 / 10; }
.work-card__title { margin-block-start: 1rem; font-family: var(--font-display); font-stretch: 125%; font-weight: 560; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.1; }
.work-card__meta { margin-block-start: 0.25rem; color: var(--ink-2); }
.work__empty { padding-block: 3rem; color: var(--ink-2); }

@media (min-width: 56.25rem) {
  /* "of :not([hidden])" keeps the rhythm intact when the filter hides cards. */
  .work-card:nth-child(4n + 1 of :not([hidden])) { grid-column: 1 / span 7; }
  .work-card:nth-child(4n + 2 of :not([hidden])) { grid-column: 9 / span 4; margin-block-start: clamp(4rem, 9vw, 9rem); }
  .work-card:nth-child(4n + 3 of :not([hidden])) { grid-column: 1 / span 5; }
  .work-card:nth-child(4n + 4 of :not([hidden])) { grid-column: 6 / span 7; margin-block-start: clamp(4rem, 9vw, 9rem); }
  .work-card:nth-child(4n + 2 of :not([hidden])) .work-card__media,
  .work-card:nth-child(4n + 3 of :not([hidden])) .work-card__media { aspect-ratio: 4 / 5; }
}
@media (max-width: 56.24rem) {
  .work-card { grid-column: 1 / -1; }
  .work-card:nth-child(even of :not([hidden])) .work-card__media { aspect-ratio: 4 / 5; }
}

/* While the filter rearranges the grid, only the photos move; the page itself does not fade. */
.is-filtering::view-transition-old(root), .is-filtering::view-transition-new(root) { animation: none; }