/* ==========================================================================
   PROJECTS — the page-override layer for /projecten and /projecten/{slug}.
   Loads after tokens.css and site.css (VISUAL-SYSTEM §11 layer order), and
   touches nothing outside .page-projects and .page-case: the catalogue, the
   gallery and the collection pages share .sk-grid and must keep the placement
   they have.

   WHAT THIS FILE IS FOR. Delivered work is the first brand pillar (BRAND.md
   §10) and it was being rendered as three identical rectangles in a row —
   which DESIGN.md §5.2 rule 2 calls the single most recognisable AI tell and
   forbids outright. Everything below is composition: unequal widths, unequal
   offsets, one lead frame at a different scale from the rest.

   Rules this file is written against, and which a review should check it on:
     - never three or more equal-width cards in a row (§5.2 rule 2)
     - adjacent sections never share a pattern (§5.2 rule 1)
     - every irregular composition resolves to one predictable column on
       mobile, with no horizontal overflow at 320px (§5.3)
     - no gold text on the light canvas: bronze here is --accent-line on rules
       and marks only, never a word (DESIGN.md §2.1)
     - focus is never removed; the ring is inherited from tokens.css §focus
     - all motion is <= 300ms and yields to prefers-reduced-motion
   ========================================================================== */

/* ==========================================================================
   1 · INDEX — the tally rail
   Three counted figures on a hairline. Not cards: the band under it is a grid
   of cards, and two adjacent sections may not share a pattern. The figures are
   deliberately off-centre — the rail starts at the container edge and stops
   short of the right, so the negative space sits on one side (§5.2 rule 6).
   ========================================================================== */

.page-projects .pj-tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 12rem));
  gap: var(--s5) var(--s8);
  margin: var(--s8) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--accent-line);
}

.page-projects .pj-tally__cell { display: flex; flex-direction: column-reverse; }

.page-projects .pj-tally__value {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 4cqw, 3.5rem);
  line-height: 1;
  color: var(--text);
}

/* column-reverse puts the value above the label, so the gap between them is the
   label's PHYSICAL top margin — margin-bottom here would sit under the label,
   which is why the label was touching the numeral's baseline. */
.page-projects .pj-tally__label {
  margin: var(--s3) 0 0;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

/* ==========================================================================
   2 · INDEX — the filter rail
   The per-tab tally is a mark, not a word to read: it is aria-hidden in the
   partial and set in --muted here, because the count line under the rail says
   the same number in a sentence.
   ========================================================================== */

.page-projects .sk-filters__tally { margin-left: var(--s2); color: var(--muted); font-size: var(--t-xs); }
.page-projects .sk-filters__tab[aria-current="true"] .sk-filters__tally { color: inherit; }

/* ==========================================================================
   3 · INDEX — the staggered project grid
   Twelve columns, a cycle of four. The lead frame is wider and taller than
   anything after it, which is where the scale contrast comes from in a
   near-neutral palette (§1 principle 4).

     n+1  cols 1-8   the lead, no offset
     n+2  cols 8-13  narrower, dropped
     n+3  cols 2-7   narrower still, indented off the left edge
     n+4  cols 7-13  medium, dropped

   Auto-placement resolves this to two rows per cycle with no explicit row
   lines, so a portfolio of any length lays out without the template knowing
   how many projects there are.
   ========================================================================== */

.page-projects .sk-grid--stagger {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s7);
  row-gap: var(--s9);
  align-items: start;
}

.page-projects .sk-grid--stagger > * { min-width: 0; }

.page-projects .sk-grid--stagger > :nth-child(4n + 1) { grid-column: 1 / 8; }
.page-projects .sk-grid--stagger > :nth-child(4n + 2) { grid-column: 8 / 13; padding-top: var(--s10); }
.page-projects .sk-grid--stagger > :nth-child(4n + 3) { grid-column: 2 / 7; }
.page-projects .sk-grid--stagger > :nth-child(4n + 4) { grid-column: 7 / 13; padding-top: var(--s10); }

/* The lead project is the LCP candidate and the only card at this scale.
   A 3:2 installation frame (§5.4) rather than the catalogue's 1.1 square:
   a room needs the horizontal. */
.page-projects .sk-grid--stagger > :first-child .sk-card__frame img { aspect-ratio: 3 / 2; }
.page-projects .sk-grid--stagger > :first-child .sk-card__title {
  font-size: var(--t-h2);
  /* Display leading is tight and editorial at this size; the card default is
     set for a one-line title and reads as double-spaced over two lines. */
  line-height: 1.05;
  max-width: 16ch;
}
.page-projects .sk-grid--stagger > :first-child .sk-card__desc { max-width: 52ch; font-size: var(--t-body); }

/* Everything after it keeps the room proportion too, so the portfolio reads as
   one set — consistency across the catalogue matters more than any individual
   crop (§5.4). */
.page-projects .sk-grid--stagger .sk-card__frame img { aspect-ratio: 3 / 2; }

/* The card foot: the "go" affordance and the frame count on one baseline,
   pushed apart. The count is a mark; the affordance is the action. */
.page-projects .sk-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s4);
}

.page-projects .sk-card__frames { white-space: nowrap; }

/* Six states on the card. Default, hover and active are the image and the
   rule; focus-visible is the ring from tokens.css, pulled out to the whole
   card rather than left on the inline text. A card is a link and has no
   disabled or loading state of its own — the grid's empty state below is what
   stands in for "nothing to show". */
.page-projects .sk-card:focus-visible { outline-offset: 6px; }
.page-projects .sk-card:active .sk-card__frame img { transform: scale(1.005); }

/* The empty state, designed rather than defaulted (CLAUDE.md 27). */
.page-projects .sk-grid__empty { font-size: var(--t-body); max-width: 54ch; }

/* ==========================================================================
   4 · CASE STUDY — the image series
   The lead frame stays full container (site.css .sk-case-frame). What follows
   is the rest of the photographs in an unequal pair: 7 / 5, the narrow one
   dropped. Never a row of matching frames, and never three.
   ========================================================================== */

.page-case .pj-series__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}

.page-case .pj-series__head > p { margin: 0; }

.page-case .pj-series__rest {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: var(--s7);
  row-gap: var(--s8);
  align-items: start;
  margin-top: var(--s8);
}

.page-case .pj-series__rest > * { min-width: 0; }

/* Alternate which side carries the offset, so a series of four does not read
   as two identical rows. */
.page-case .pj-series__figure:nth-child(even) { padding-top: var(--s8); }
.page-case .pj-series__figure:nth-child(4n + 3) { grid-column: 2; }
.page-case .pj-series__figure:nth-child(4n) { grid-column: 1; padding-top: 0; }

.page-case .pj-series__figure { margin: 0; }
.page-case .pj-series__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--canvas-sink);
}

.page-case .pj-series__figure .sk-case-frame__cap { margin-top: var(--s4); }

/* ==========================================================================
   5 · MOBILE — the contract (§5.3)
   Every irregular composition above becomes one predictable column. The drama
   on a phone is carried by scale and imagery, never by layout, and no
   experiment may cost usability.
   ========================================================================== */

@media (max-width: 900px) {
  .page-projects .sk-grid--stagger { grid-template-columns: 1fr; row-gap: var(--s8); }
  .page-projects .sk-grid--stagger > :nth-child(4n + 1),
  .page-projects .sk-grid--stagger > :nth-child(4n + 2),
  .page-projects .sk-grid--stagger > :nth-child(4n + 3),
  .page-projects .sk-grid--stagger > :nth-child(4n + 4) {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  .page-projects .pj-tally { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  .page-projects .pj-tally__value { font-size: clamp(1.75rem, 7cqw, 2.5rem); }

  .page-case .pj-series__rest { grid-template-columns: 1fr; row-gap: var(--s6); margin-top: var(--s6); }
  .page-case .pj-series__figure:nth-child(even),
  .page-case .pj-series__figure:nth-child(4n) { padding-top: 0; }
  .page-case .pj-series__figure:nth-child(4n + 3),
  .page-case .pj-series__figure:nth-child(4n) { grid-column: 1; }
}

/* 320px: three tally figures do not fit on one line at any honest type size. */
@media (max-width: 420px) {
  .page-projects .pj-tally { grid-template-columns: 1fr 1fr; }
  .page-projects .sk-card__foot { flex-wrap: wrap; }
}

/* ==========================================================================
   6 · MOTION
   tokens.css already disables non-essential motion globally under
   prefers-reduced-motion. This is the belt: the one transform this file adds
   is switched off explicitly rather than inherited by assumption.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .page-projects .sk-card:active .sk-card__frame img { transform: none; }
}