/* ==========================================================================
   Layout: containers, secties, grids, pagina-hero, prose
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--max-width-narrow); }
.container--wide { max-width: var(--max-width-wide); }

main { display: block; }
body:not(.has-hero) main { padding-top: 0; }

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--soft { background: var(--color-bg-soft); }
.section--elevated { background: var(--color-bg-elevated); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }
.section--border { border-top: 1px solid var(--color-border); }
/* Papier: dezelfde componenten, maar donkere inkt op licht papier. Kleuren worden via de tokens
   omgezet, zodat kaarten, links en koppen vanzelf meekleuren. */
.section--paper {
  --color-bg: var(--paper-bg);
  --color-bg-elevated: var(--paper-surface);
  --color-surface: var(--paper-bg-deep);
  --color-surface-hover: var(--paper-surface);
  --color-text: var(--paper-ink);
  --color-text-strong: var(--paper-ink-strong);
  --color-muted: var(--paper-muted);
  --color-muted-strong: var(--paper-muted);
  --color-gold: var(--paper-accent);
  --color-gold-soft: var(--paper-accent-strong);
  --color-brass: rgba(132, 96, 31, 0.55);
  --color-border: rgba(91, 66, 30, 0.2);
  --color-border-strong: rgba(91, 66, 30, 0.42);
  --color-border-subtle: rgba(43, 33, 24, 0.1);
  --color-focus: var(--paper-accent-strong);
  --shadow: 0 14px 30px rgba(60, 40, 15, 0.14);
  color-scheme: light;
  color: var(--color-text);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 252, 244, 0.55), transparent 60%),
    var(--paper-bg);
}
.section--paper-deep { background: var(--paper-bg-deep); }
.section--paper + .section--paper { border-top: 1px solid var(--color-border); }

.stack > * + * { margin-top: var(--space-md); }
.stack--sm > * + * { margin-top: var(--space-xs); }
.stack--lg > * + * { margin-top: var(--space-lg); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.grid {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .grid--2, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid { gap: var(--space-lg); }
}

.split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
/* Formulier naast een infokolom: beide beginnen bovenaan, anders zakt de korte kolom. */
.split--top { align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
  .split--reverse > :first-child { order: 2; }
}

.page-hero {
  position: relative;
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-xl);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(199, 122, 47, 0.18), transparent 60%),
    linear-gradient(180deg, var(--color-bg-soft), var(--color-bg));
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.45;
}
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 12, 10, 0.94) 0%, rgba(14, 12, 10, 0.6) 60%, rgba(14, 12, 10, 0.8) 100%);
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 48rem;
}
.page-hero h1 { margin-top: var(--space-sm); font-size: clamp(2.4rem, 1.7rem + 2.6vw, 4.2rem); }
.page-hero .lead { margin-top: var(--space-md); }
.page-hero__actions { margin-top: var(--space-lg); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.breadcrumb a { color: var(--color-muted-strong); display: inline-block; padding-block: 0.3rem; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-border-strong); }

.prose {
  max-width: 68ch;
  font-size: var(--text-md);
}
.prose h2, .prose h3 { margin-top: var(--space-lg); }
.prose ul, .prose ol { padding-left: 1.25em; margin-bottom: var(--space-md); }
.prose li + li { margin-top: var(--space-2xs); }
.prose blockquote {
  margin: var(--space-lg) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-gold);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-parchment);
}
.prose img { border-radius: var(--radius); margin: var(--space-lg) 0; }
.prose a { text-decoration: underline; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0; font-size: var(--text-base); }
.prose th, .prose td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-border); text-align: left; }

.table-wrap { overflow-x: auto; }

.text-center { text-align: center; }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.hide-mobile { display: none; }
@media (min-width: 1024px) {
  .hide-mobile { display: initial; }
  .hide-desktop { display: none; }
}

.section--partner h2 { font-size: var(--text-xl); }

.nowrap { white-space: nowrap; }
.mx-auto { margin-inline: auto; }
.actions--center { justify-content: center; }
.address-plain { font-style: normal; }