/* Systemen layout (tokens, top bar, chips, motion and Lenis live in base.css). One section per group, cards in rows of equal height,
   the links on the bottom edge of every card. Status colour: gold for live, white for in aanbouw, ghost for gepland. */
body { padding-block: 0 96px; }
.wrap { max-width: 1160px; margin: 0 auto; }

.head { display: grid; gap: 14px; padding: 52px 4px 8px; justify-items: start; }
h1 { font: 500 clamp(32px, 4.6vw, 52px)/1.14 var(--display); font-stretch: 118%; letter-spacing: -0.01em; margin: 0; text-wrap: balance; max-width: 18ch; background: var(--head-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font: 400 16px/1.6 var(--body); color: var(--ink-2); margin: 0; max-width: 64ch; text-wrap: pretty; }
.counts { display: flex; flex-wrap: wrap; gap: 6px; }

#sys-groups { display: grid; gap: 56px; margin-top: 48px; }
.sys-group { display: grid; gap: 18px; }
.sys-head { display: grid; gap: 6px; max-width: 70ch; padding: 0 4px; }
.sys-head h2 { margin: 0; font: 500 clamp(22px, 2.4vw, 28px)/1.2 var(--display); font-stretch: 118%; color: var(--ink); text-wrap: balance; }
.desc { margin: 0; font: 400 14.5px/1.55 var(--body); color: var(--ink-2); text-wrap: pretty; }

.sys-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: stretch; }
.sys-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border-radius: var(--r-card); background: var(--card); border: 0.5px solid var(--line); }
.sys-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sys-top h3 { margin: 0; font: 500 19px/1.25 var(--display); font-stretch: 118%; color: var(--ink); text-wrap: balance; min-width: 0; }
.sys-top .chip { flex: none; white-space: nowrap; }
.nw { white-space: nowrap; }
.sys-src { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 500 13px/1.45 var(--body); color: var(--ink-2); }
.sys-links { margin-top: auto; padding-top: 12px; border-top: 0.5px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 8px; }
.sys-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 50px; background: var(--pill); border: 0.5px solid var(--pill-line); color: var(--ink); text-decoration: none; font: 500 13px/1 var(--body); white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.sys-link small { font: 500 11.5px/1 var(--body); color: var(--ink-3); transition: color 0.15s; }
.sys-link svg { color: var(--ink-3); transition: color 0.15s; }
.sys-link:hover { background: var(--gold-tint); border-color: var(--gold-line); color: var(--gold); }
.sys-link:hover small, .sys-link:hover svg { color: var(--gold); }

.chip.st-live { background: var(--gold-tint); border-color: var(--gold-line); color: var(--gold); }
.chip.st-bouw { background: var(--pill); border-color: var(--pill-line); color: var(--ink); }
.chip.st-gepland { background: transparent; border-color: var(--line); color: var(--ink-2); border-style: dashed; }

.sys-note { margin: 48px 4px 0; font: 400 12.5px/1.5 var(--body); color: var(--ink-3); }
.loading { margin: 32px 4px; color: var(--ink-3); }

@media (max-width: 640px) {
  .sys-grid { grid-template-columns: minmax(0, 1fr); }
  #sys-groups { gap: 44px; margin-top: 36px; }
}