/* ==========================================================================
   COLLECTION PAGE — /collecties/{slug}
   Page-override layer (VISUAL-SYSTEM §11, layer 6): loads after tokens.css and
   site.css and adds nothing to them. Scoped to .page-collection so none of it
   can reach another page.

   THE ONE THING TO UNDERSTAND HERE IS .col-stagger.
   DESIGN.md §5.2 rule 2 forbids a row of three or more equal-width cards; the
   correction in VISUAL-SYSTEM §3.5 narrows that to editorial and marketing
   bands and permits the catalogue index its three-up grid. This page is
   neither: it sits directly under an editorial band and carries a price on
   every card. So it takes the `stagger` pattern instead (§5.1) — two tracks of
   UNEQUAL width, alternating, with the narrow one dropped by a fixed offset.
   No two cells in a row are the same width, and no row lines up with the one
   above it.

   On mobile every offset goes to zero and the tracks collapse to one column
   (§5.3, the mobile contract). The drama there is the imagery, not the layout.

   No gold text anywhere below: --accent-line is used for a 1px rule and a
   focus ring and never for a word (DESIGN.md §2.1 — bronze on the light
   canvas measures 2.6:1). Nothing here imitates Halil's mark-making: no
   texture, no brush edge, no torn paper. Square corners, one hairline, space.
   ========================================================================== */

/* ---------- breadcrumb ---------- */
.page-collection .col-crumbs { padding-top: var(--s5); }
.page-collection .col-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s3);
  list-style: none; margin: 0; padding: 0; font-size: var(--t-xs); color: var(--muted); }
.page-collection .col-crumbs li + li::before { content: "/"; margin-right: var(--s3);
  color: var(--line-strong); }
.page-collection .col-crumbs a { color: var(--muted); border-bottom: 1px solid transparent; }
.page-collection .col-crumbs a:hover { color: var(--text); border-bottom-color: var(--line-strong); }
.page-collection .col-crumbs [aria-current="page"] { color: var(--text); }

/* ---------- band 2 · intro, 7 / 5 ---------- */
.page-collection .col-intro { display: grid; grid-template-columns: 7fr 5fr;
  gap: var(--s8); align-items: start; }
.page-collection .col-intro > * { min-width: 0; }

.page-collection .col-facts { margin: 0; padding-left: var(--s7);
  border-left: 1px solid var(--line); }
.page-collection .col-facts > div { padding-block: var(--s4);
  border-bottom: 1px solid var(--line); }
.page-collection .col-facts > div:last-child { border-bottom: 0; }
.page-collection .col-facts dt { font-size: var(--t-label); text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); margin-bottom: var(--s1); }
.page-collection .col-facts dd { margin: 0; font-size: var(--t-lg); color: var(--text); }

/* ---------- band 3 · the works, staggered ---------- */
.page-collection .col-stagger { list-style: none; margin: var(--s7) 0 0; padding: 0;
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--s8) var(--s6);
  align-items: start; }
.page-collection .col-stagger > * { min-width: 0; }

/* The offset. Every narrow cell drops, so the two tracks never form a row.
   `nth-child(even)` matches the narrow ones because the controller alternates
   wide-first; both halves of that pairing are deliberate. */
.page-collection .col-stagger__cell:nth-child(even) { margin-top: var(--s10); }
.page-collection .col-stagger__cell--wide .col-work__frame img { aspect-ratio: 4 / 3; }
.page-collection .col-stagger__cell:not(.col-stagger__cell--wide) .col-work__frame img {
  aspect-ratio: 4 / 5; }

.page-collection .col-work { display: block; }
.page-collection .col-work__frame { display: block; overflow: hidden;
  background: var(--canvas-sink); }
.page-collection .col-work__frame img { width: 100%; height: auto; object-fit: cover;
  transition: transform 500ms var(--ease); }
/* The only hover: the image scales inside a fixed frame. Nothing lifts,
   nothing shadows, nothing tints (DESIGN.md §6, artwork card). */
.page-collection .col-work:hover .col-work__frame img { transform: scale(1.02); }

.page-collection .col-work__meta { display: flex; justify-content: space-between;
  align-items: baseline; gap: var(--s4); margin-top: var(--s4); }
.page-collection .col-work__size { color: var(--muted); }
/* Tabular figures, so prices align down the column (DESIGN.md §3). */
.page-collection .col-work__price { font-variant-numeric: tabular-nums;
  font-size: var(--t-sm); color: var(--text); white-space: nowrap; }
.page-collection .col-work__unit { color: var(--muted); }
.page-collection .col-work__title { font-family: var(--f-display); font-size: var(--t-h3);
  margin: var(--s2) 0 0; font-weight: 400; }

/* Focus is never removed and is never only a colour change. The global ring in
   tokens.css applies; this only gives it something to sit around. */
.page-collection .col-work:focus-visible { outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  .page-collection .col-work__frame img { transition: none; }
  .page-collection .col-work:hover .col-work__frame img { transform: none; }
}

/* ---------- the mobile contract (DESIGN.md §5.3) ---------- */
@media (max-width: 900px) {
  .page-collection .col-intro { grid-template-columns: 1fr; gap: var(--s7); }
  .page-collection .col-facts { padding-left: 0; border-left: 0;
    border-top: 1px solid var(--line); padding-top: var(--s4); }

  .page-collection .col-stagger { grid-template-columns: 1fr; gap: var(--s7); }
  /* Every offset to zero: the irregular desktop composition resolves to a
     simple, predictable column. */
  .page-collection .col-stagger__cell:nth-child(even) { margin-top: 0; }
  .page-collection .col-stagger__cell--wide .col-work__frame img,
  .page-collection .col-stagger__cell:not(.col-stagger__cell--wide) .col-work__frame img {
    aspect-ratio: 4 / 3; }
}