/* ==========================================================================
   SPARSKEY — CONTENT AND UTILITY PAGES, PLACEMENT LAYER
   Loads after tokens.css, site.css and services.css, and only on the pages
   that need it: the nine thin content pages, /zoeken, /account and
   /winkelmand.

   Layer 6 of VISUAL-SYSTEM §11: PLACEMENT ONLY. No token is redefined here
   and no component is restyled — every rule below places existing components
   on a grid, or sizes a measure. The collapse uses @container queries against
   .sk, exactly as tokens.css and services.css do, so these pages break at the
   same widths as the rest of the site rather than at their own.

   Nothing here introduces a colour. Gold/bronze stays where the tokens put it
   (CLAUDE.md brand rules 17 and 18) and every ground is a --canvas variant.
   ========================================================================== */

/* ==========================================================================
   A0 · THE QUIET HERO — components/hero.php, .sk-hero--quiet
   The page head of a page whose job is a form, a table or a result list:
   /winkelmand, /zoeken, /account, the four support pages and the legal page.

   It exists because the alternative was worse in both directions. Those eight
   pages used to render the same neutral 340px frame that the four commercial
   pages rendered, so twelve pages opened identically and none of them opened
   with artwork. Giving all twelve a photograph would have put a wall above
   every form on the site, which CLAUDE.md brand rule 22 rules out: quiet
   belongs in controls, prices, forms and tables. So the four commercial pages
   took real photographs and these eight took type.

   Everything below is an UNDO of a rule that only holds when there is a
   photograph under the text. .sk-hero sets the on-dark palette because it
   normally sits on an image; with no image that palette is ivory on ivory.
   This file loads last, so each rule here wins on order at equal specificity
   rather than by being made heavier.
   ========================================================================== */

/* FOCAL POINT OF A PHOTOGRAPHIC HERO. The band is about 3.8:1 and the archive
   is 3:2, so `cover` discards roughly a third of every frame and the default
   middle third is not always the third that carries the subject. These two
   modifiers move the kept band without re-cropping the file, which is what
   DESIGN.md §5.4 asks for: change the framing, never the artwork. */
.svc-hero--low .sk-hero__img { object-position: 50% 74%; }
.svc-hero--high .sk-hero__img { object-position: 50% 22%; }

.sk-hero--quiet { height: auto; min-height: 0; color: var(--text); overflow: visible; }

/* The band is the page ground, so its measure and rhythm come from padding,
   not from a 340px box. */
.svc-hero.sk-hero--quiet { min-height: 0; }
.svc-hero.sk-hero--quiet .sk-hero__body { padding: 0 0 var(--s7); }

/* One short bronze rule, the same mark .sk-rule--accent makes elsewhere: 44px
   of a non-text colour, which is what --accent-line is for and nowhere near
   the 5% ceiling (CLAUDE.md brand rules 17 and 18). */
.sk-hero--quiet .sk-hero__body::before { content: ""; display: block;
  width: 44px; height: 2px; background: var(--accent-line); margin-bottom: var(--s5); }

/* The on-canvas bronze, 5.0:1 — never --accent-line, which is 2.6:1 as text. */
.sk-hero--quiet .sk-eyebrow { color: var(--accent-text); }
.sk-hero--quiet .sk-lead { color: var(--muted); max-width: 56ch; }
.sk-hero--quiet .sk-meta { color: var(--muted); }
.sk-hero--quiet .sk-hero-title em, .sk-hero--quiet .sk-h1 em, .sk-hero--quiet .sk-h2 em {
  color: var(--accent-text); }

/* FOCUS IS NEVER LOST (CLAUDE.md quality rule 26). tokens.css switches the
   ring to ivory inside .sk-hero because the ring is normally over artwork;
   over the canvas that is an invisible ring, so it goes back to bronze. */
.sk .sk-hero--quiet :focus-visible { outline-color: var(--accent-line); }

/* Ghost buttons in a quiet head are on the canvas, not on artwork. */
.sk-hero--quiet .sk-btn--ghost { border-color: var(--line-strong); color: var(--text); }
.sk-hero--quiet .sk-btn--ghost:hover { border-color: var(--ink); }
.sk-hero--quiet .sk-link { color: var(--accent-text); border-bottom-color: var(--accent-line); }


/* ==========================================================================
   A · THE THIN CONTENT PAGES — frontend/content_page.php
   ========================================================================== */

/* Visually hidden, still announced. Local rather than borrowed from another
   page-scoped stylesheet: a utility that lives under a page scope is a utility that
   disappears when that page is refactored. */
.pg-vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* A single editorial column reads at a measure, not at 1520px. */
.pg-single .sk-editorial { max-width: 68ch; }

/* Heading column beside a specification table. Deliberately not 1fr 1fr: the
   table carries the weight and the heading is the label for it. */
.pg-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s8); align-items: start; }
.pg-split > * { min-width: 0; }
.pg-split .sk-editorial { max-width: 44ch; }
.pg-split__panel { min-width: 0; }
.pg-split__note { margin-top: var(--s6); }

/* Heading column beside the disclosure list. */
.pg-acc { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s8); align-items: start; }
.pg-acc > * { min-width: 0; }
.pg-acc .sk-editorial { max-width: 44ch; }
.pg-acc__list { min-width: 0; border-top: 1px solid var(--line); }

/* ==========================================================================
   B · /zoeken — .page-search
   A results page is a LIST, not a grid: results are heterogeneous — a werk, a
   project, an article — and a card grid would claim they are comparable
   (VISUAL-SYSTEM §3.5 keeps the grid for catalogue contexts).
   ========================================================================== */

/* The form is the page's primary control, so it sits in the hero's shadow at
   full measure rather than in a rail. */
.page-search .sr-form { max-width: 62ch; }
.page-search .sr-row { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.page-search .sr-row > .fm-field { flex: 1 1 22ch; min-width: 0; }
.page-search .sr-row > .sk-btn { flex: 0 0 auto; }
.page-search .sr-form .fm-hint { margin-top: var(--s3); }
/* The scope line is a sentence, so it is set as a note rather than as a label:
   the uppercase tracking of .sk-meta is for two or three words, not for one. */
.page-search .sr-scope { margin-top: var(--s4); font-size: var(--t-xs);
  color: var(--muted); line-height: 1.5; max-width: 62ch; }

/* The tally line above the results. */
.page-search .sr-tally { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  align-items: baseline; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }

.page-search .sr-group + .sr-group { margin-top: var(--s9); }
.page-search .sr-group__head { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: baseline; padding-bottom: var(--s4); border-bottom: 1px solid var(--line-strong); }

.page-search .sr-list { margin-top: 0; }
.page-search .sr-item { display: grid; grid-template-columns: 116px 1fr; gap: var(--s5);
  align-items: start; padding-block: var(--s5); border-bottom: 1px solid var(--line); }
.page-search .sr-item > * { min-width: 0; }
/* A row with nothing to show does not reserve a column for it. A project or an
   article carries no image the search layer knows about, and an empty 116px
   well beside its title reads as a failed load rather than as a decision. */
.page-search .sr-item--text { grid-template-columns: 1fr; }
.page-search .sr-item__frame { display: block; overflow: hidden; background: var(--canvas-sink); }
.page-search .sr-item__frame img { width: 100%; height: auto; aspect-ratio: 1.1;
  object-fit: cover; display: block; }
.page-search .sr-item__body-wrap { display: block; min-width: 0; }
.page-search .sr-item__t { display: block; font-family: var(--f-display);
  font-size: var(--t-h3); line-height: 1.15; }
.page-search .sr-item__t a { color: var(--text); }
.page-search .sr-item__t a:hover { color: var(--accent-text); }
.page-search .sr-item__meta { display: block; margin-top: var(--s2); }
.page-search .sr-item__body { display: block; margin-top: var(--s3); max-width: 72ch; color: var(--muted);
  font-size: var(--t-sm); line-height: 1.6; }

/* THE EMPTY STATE IS DESIGNED, NOT DEFAULTED (UX-SPEC §12, FR-206): what was
   searched, why nothing matched, and the routes back in. */
.pg-empty { background: var(--canvas-sink); padding: var(--s8) var(--s7); max-width: 76ch; }
.pg-empty__t { margin-bottom: var(--s4); }
.pg-empty p + p { margin-top: var(--s3); }
.pg-empty .sk-actions { margin-top: var(--s6); }
.pg-empty__suggest { margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--line); }
.pg-empty__suggest ul { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s3); }

/* ==========================================================================
   C · /account — .page-account
   The signed-out state. No authentication exists, so the panel says so above
   the fields rather than after a failed attempt.
   ========================================================================== */

.page-account .ac-grid { display: grid; grid-template-columns: 6fr 5fr; gap: var(--s8);
  align-items: start; }
.page-account .ac-grid > * { min-width: 0; }
.page-account .ac-panel { background: var(--paper); padding: var(--s8) var(--s7); }
.page-account .ac-panel__t { margin-bottom: var(--s4); }
.page-account .ac-notice { margin-bottom: var(--s6); }
.page-account .ac-list { margin-top: var(--s5); }
.page-account .ac-list > li { display: grid; grid-template-columns: auto 1fr; gap: var(--s4);
  padding-block: var(--s4); border-top: 1px solid var(--line); }
.page-account .ac-list > li > * { min-width: 0; }
.page-account .ac-list__n { font-family: var(--f-display); font-size: var(--t-lg);
  color: var(--accent-text); font-variant-numeric: tabular-nums; }
.page-account .ac-list__t { display: block; font-weight: 500; }
.page-account .ac-list p { margin-top: var(--s1); font-size: var(--t-sm); color: var(--muted);
  line-height: 1.6; }

/* ==========================================================================
   D · /winkelmand — .page-basket
   ========================================================================== */

.page-basket .bk-steps { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.page-basket .bk-steps li[aria-current="step"] { color: var(--text); font-weight: 600; }
.page-basket .bk-steps + .fm-note { margin-top: var(--s3); max-width: 68ch; }
.page-basket .pg-empty { margin-top: var(--s7); }

/* ==========================================================================
   E · RESPONSIVE — the same two breakpoints the rest of the site uses.
   ========================================================================== */

@container screen (max-width: 900px) {
  .pg-split,
  .pg-acc { grid-template-columns: 1fr; gap: var(--s6); }
  .pg-acc__list { border-top: 0; }
  .page-account .ac-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .page-search .sr-item { grid-template-columns: 92px 1fr; gap: var(--s4); }
  .page-search .sr-item--text { grid-template-columns: 1fr; }
}

@container screen (max-width: 420px) {
  .pg-empty { padding: var(--s6) var(--s5); }
  .page-account .ac-panel { padding: var(--s6) var(--s5); }
  /* Below this width a thumbnail costs more than it tells: the title and the
     line under it are what a visitor reads on a result. */
  .page-search .sr-item { grid-template-columns: 1fr; gap: var(--s3); }
  .page-search .sr-item__frame { display: none; }
  /* The quiet head loses its bottom padding where vertical space is scarcest. */
  .svc-hero.sk-hero--quiet .sk-hero__body { padding-bottom: var(--s6); }
  .page-search .sr-row > .sk-btn { width: 100%; }
}

/* ==========================================================================
   PAYMENT — /betalen/{ulid}
   One narrow column. This page is opened by somebody with money in their
   hand and has exactly one job; everything else on it is a way to lose them.
   ========================================================================== */
.sk-pay { max-width: 34rem; }
.sk-pay__amount { font-family: var(--font-display, inherit); font-size: var(--t-h2);
  line-height: 1.1; margin: var(--s3) 0 var(--s4); }
.sk-pay__options { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 var(--s4); }
.sk-pay__options form { margin: 0; }
.sk-pay__note, .sk-pay__back { font-size: var(--t-sm); color: var(--muted); margin: 0 0 var(--s3); }
.sk-pay__error { border-left: 3px solid var(--accent-line); padding: var(--s3) var(--s4);
  background: var(--canvas-sink); margin: 0 0 var(--s5); }