/* ==========================================================================
   Work page (works.html) — and the page heading shared with project.html
   On top of layout/site-ui.css (the site-wide design language: page dark,
   no grid lines, no decorative lines, sentence-case headings, tabs, footer).
   ========================================================================== */

/* ------------------------------------------------------------ Page heading
   Breadcrumbs · title (display-lg, sentence case, first line in the muted
   grey) · intro (mono) at the right, bottoms aligned — the homepage's
   section heads at page-title size. */

.page-hero {
  position: relative;
  z-index: 1;
  padding-top: 168px;
  padding-bottom: 40px;
}

.page-hero__grid {
  align-items: end;
}

.page-hero__title {
  grid-column: 1 / span 3;
}

/* sentence case (layout/site-ui.css): room for descenders (display-lg sets 0.8) */
.site-ui .page-hero__title {
  line-height: 0.9;
}

.page-hero__title .t-muted {
  color: var(--c-muted);
}

.page-hero__copy {
  grid-column: 4 / span 1;
  max-width: 340px;                /* 300px text + 20px padding each side */
  justify-self: end;
}

.page-hero .breadcrumbs {
  margin-bottom: 26px;
}

.works-head {
  padding-top: 110px;              /* header bar → breadcrumbs: 110px desktop · 90px tablet · 70px phone (as Project Detail) */
  padding-bottom: 0;
}

/* ---------------------------------------------------------- Category tabs
   One wrapping row of tabs (layout/site-ui.css › tabs), 6px apart as the
   homepage labels, 40px under the heading. */

.works-cats {
  position: relative;
  z-index: 1;
}

.works-cats__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 40px var(--col-pad) 0;
}

/* Work page only: the tabs one step larger than the 14px labels — the
   body-lg size (16px) with roomier padding (12px × 16px); same mono type,
   stroke, colours and states (layout/site-ui.css › tabs) */
.works-cats .tab {
  padding: 12px 16px;
  font-size: var(--fs-body-lg);
}

/* --------------------------------------------------------------- Projects
   The staggered card grid, 90px below the tabs — the homepage's space
   between a section head and its cards (.section-head › padding-bottom). */

.works-list {
  position: relative;
  z-index: 1;
  margin-top: 90px;
}

.works-page .project-card {
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out);
}

@media (max-width: 1199px) {
  .page-hero { padding-top: 120px; }
  .works-head { padding-top: 90px; }
  .page-hero__title { grid-column: 1 / -1; }
  .page-hero__copy { grid-column: 1 / -1; justify-self: start; margin-top: 30px; }
}

@media (max-width: 809px) {
  .works-head { padding-top: 70px; }   /* phones: the breadcrumbs 70px under the header bar */
  .works-cats__row { padding-top: 30px; }
  .works-list { margin-top: 60px; }
  /* phones: the tabs at the label size (14px, 7px × 14px — layout/site-ui.css),
     so the eight wrap onto fewer rows (was 16px, 12px × 16px: 7 rows) */
  .works-cats .tab { padding: 7px 14px; font-size: var(--fs-mono-md); }
}