/* ===========================================================================
   maatwerk.css — alleen voor events-maatwerk.html
   ---------------------------------------------------------------------------
   Deze pagina verkoopt niet met prijzen en lijstjes, maar met beeld en ritme.
   Daarom een eigen bestand: grote typografie, asymmetrische beeldvlakken en
   veel wit. Alle kleuren, maten en afstanden komen uit css/tokens.css.
   =========================================================================== */

/* ── Opening ─────────────────────────────────────────────────────────
   Een rustige, grote aanhef in plaats van een feitenbalk. */
.mw-opening {
  padding: clamp(56px, 9vw, 128px) 0 clamp(40px, 6vw, 88px);
}
.mw-opening__raster {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 900px) {
  .mw-opening__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.mw-opening__intro {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 0 var(--s-6);
}
.mw-opening__tekst { display: grid; gap: var(--s-4); max-width: 60ch; }
.mw-opening__tekst p { color: var(--c-text-soft); }
.mw-opening__slot {
  font-size: var(--t-lg);
  color: var(--c-text);
  margin-top: var(--s-2);
}
.mw-opening__beeld {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
}
.mw-opening__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Verhalende secties met een kop in de kantlijn ──────────────────── */
.mw-sectie { padding: clamp(48px, 7vw, 104px) 0; }
.mw-sectie--rust { background: var(--c-cream-soft); }
.mw-sectie--donker { background: var(--c-ink); color: var(--c-text-inv); }
.mw-sectie--donker .mw-kop__titel { color: var(--c-text-inv); }
.mw-sectie--donker p { color: var(--c-text-inv-soft); }

.mw-kop { max-width: 42ch; margin-bottom: clamp(32px, 4.5vw, 64px); }
.mw-kop__titel {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}
.mw-kop__onder {
  margin-top: var(--s-4);
  color: var(--c-text-soft);
  max-width: 52ch;
}

/* Twee kolommen: verhaal links, beeld rechts (of andersom) */
.mw-verhaal {
  display: grid;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .mw-verhaal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mw-verhaal--omgekeerd .mw-verhaal__beeld { order: -1; }
}
.mw-verhaal__tekst { display: grid; gap: var(--s-4); max-width: 56ch; }
.mw-verhaal__tekst p { color: var(--c-text-soft); }
.mw-verhaal__los {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.3;
  color: var(--c-text);
  margin: var(--s-2) 0;
}
.mw-sectie--donker .mw-verhaal__los { color: var(--c-text-inv); }
.mw-verhaal__beeld {
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: var(--r-md);
}
.mw-verhaal__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Drie onderwerpen onder elkaar, elk met een eigen beeld ─────────── */
.mw-lagen { display: grid; gap: clamp(40px, 6vw, 88px); }
.mw-laag {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}
@media (min-width: 820px) {
  .mw-laag { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .mw-laag:nth-child(even) .mw-laag__beeld { order: -1; }
}
.mw-laag__beeld {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--r-md);
}
.mw-laag__beeld img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease-out);
}
.mw-laag:hover .mw-laag__beeld img { transform: scale(1.03); }
.mw-laag__tekst { display: grid; gap: var(--s-3); max-width: 46ch; }
.mw-laag__titel {
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.mw-laag__tekst p { color: var(--c-text-soft); margin: 0; }

/* ── Beeldcollage ───────────────────────────────────────────────────── */
.mw-collage {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(36px, 5vw, 72px);
}
@media (min-width: 820px) {
  .mw-collage {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(120px, 13vw, 190px);
  }
  .mw-collage__vlak:nth-child(1) { grid-column: span 3; grid-row: span 2; }
  .mw-collage__vlak:nth-child(2) { grid-column: span 3; grid-row: span 1; }
  .mw-collage__vlak:nth-child(3) { grid-column: span 2; grid-row: span 1; }
  .mw-collage__vlak:nth-child(4) { grid-column: span 1; grid-row: span 1; }
  .mw-collage__vlak:nth-child(5) { grid-column: span 2; grid-row: span 2; }
  .mw-collage__vlak:nth-child(6) { grid-column: span 4; grid-row: span 2; }
}
.mw-collage__vlak {
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-cream-line);
  aspect-ratio: 4 / 3;
}
@media (min-width: 820px) { .mw-collage__vlak { aspect-ratio: auto; } }
.mw-collage__vlak img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease-out);
}
.mw-collage__vlak:hover img { transform: scale(1.04); }

/* ── Drie gelegenheden naast elkaar, met hairlines ──────────────────── */
.mw-gelegenheden {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}

/* ── Werkwijze: drie genummerde stappen ─────────────────────────────── */
.mw-stappen { display: grid; gap: clamp(32px, 4.5vw, 64px); counter-reset: stap; }
@media (min-width: 900px) { .mw-stappen { grid-template-columns: repeat(3, 1fr); } }
.mw-stap { display: grid; gap: var(--s-3); align-content: start; }
.mw-stap__nummer {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  line-height: 1;
  color: var(--c-brass-bright);
}
.mw-stap__titel {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  margin: 0;
}
.mw-stap p { margin: 0; }
.mw-stap__slot { color: var(--c-text-inv); }

/* ── Het woord van Simon ────────────────────────────────────────────── */
.mw-woord { padding: 0; }
.mw-woord__raster { display: grid; }
@media (min-width: 900px) {
  .mw-woord__raster { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: stretch; }
}
.mw-woord__beeld { position: relative; min-height: clamp(320px, 45vw, 620px); }
.mw-woord__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mw-woord__tekst {
  display: grid;
  align-content: center;
  gap: var(--s-5);
  padding: clamp(40px, 7vw, 104px) clamp(24px, 5vw, 88px);
  background: var(--c-cream-soft);
}
.mw-woord__citaat {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.9rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.mw-woord__naam { display: grid; gap: 2px; }
.mw-woord__naam strong { font-weight: 500; }
.mw-woord__naam span {
  font-size: var(--t-overline);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-mute);
}

/* ── Afsluiting ─────────────────────────────────────────────────────── */
.mw-slot { padding: clamp(56px, 8vw, 120px) 0; }
.mw-slot__inner { display: grid; gap: var(--s-5); max-width: 62ch; }
.mw-slot__titel {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
}
.mw-slot p { color: var(--c-text-soft); margin: 0; }
.mw-slot__nadruk { color: var(--c-text); font-size: var(--t-lg); }
.mw-slot__knop {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--s-3);
  padding: 16px 28px;
  border: 1px solid var(--c-brass);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--c-text);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.mw-slot__knop:hover { background: var(--c-brass); color: var(--c-ink); }
.mw-slot__knop:focus-visible { outline: 2px solid var(--c-brass); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .mw-laag__beeld img, .mw-collage__vlak img { transition: none; }
  .mw-laag:hover .mw-laag__beeld img, .mw-collage__vlak:hover img { transform: none; }
}