/* ruimte voor sticky header bij ankernavigatie */
#wat-ik-maak { scroll-margin-top: 96px; }

:root{
  --accent-a:#a21caf; /* paars */
  --accent-b:#10b981; /* mint */
}

.section-watikmaak{
  background:#fff;
  padding:4rem 1.5rem;
}
.section-watikmaak .container{
  max-width: 1120px;
  margin: 0 auto;
}
.section-watikmaak .kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  text-transform:uppercase; font-weight:600; font-size:.85rem; color:#6b7280;
}
.section-watikmaak .kicker .dash{
  width:24px; height:4px; border-radius:999px;
  background: linear-gradient(90deg,var(--accent-a),var(--accent-b));
}
.section-watikmaak h2{
  margin:.75rem 0 0; font-size:clamp(1.8rem,2.5vw,2.5rem);
  font-weight:800; color:#111827; letter-spacing:-0.02em;
}
.section-watikmaak .lead{
  margin:.75rem 0 2rem; color:#4b5563; font-size:1.1rem;
}

.wim-grid{
  display:grid; gap:1.5rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .wim-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .wim-grid{ grid-template-columns:1fr 1fr 1fr; } }

.wim-card{
  border:1px solid #f3f4f6; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .2s ease;
}
.wim-card:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.07); }

.wim-media{
  position:relative; width:100%;
  aspect-ratio:16/10; /* vaste verhouding */
  overflow:hidden;
}
.wim-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1); transition:transform .3s ease;
}
.wim-card:hover .wim-media img{ transform:scale(1.03); }
.wim-media:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,.2), transparent);
}

.wim-body{ padding:1.25rem; }
.wim-kicker{
  display:flex; align-items:center; gap:.5rem; color:#6b7280; font-weight:600; font-size:.9rem;
}
.wim-kicker .badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:999px;
  background: linear-gradient(135deg,var(--accent-a),var(--accent-b)); color:#fff; font-size:.9rem;
}

.wim-title{ margin:.3rem 0 0; font-size:1.15rem; font-weight:700; color:#111827; }
.wim-desc{ margin:.35rem 0 0; color:#4b5563; }

.wim-list{ margin:.75rem 0 0; padding:0; list-style:none; }
.wim-list li{ display:flex; gap:.5rem; color:#4b5563; font-size:.92rem; }
.wim-list li .dot{
  margin-top:.45rem; width:6px; height:6px; border-radius:999px; background:var(--accent-b); flex:0 0 auto;
}

.wim-cta{ margin-top:1rem; display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.wim-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#111827; color:#fff; font-weight:700; border-radius:12px; padding:.5rem .75rem; font-size:.9rem;
  text-decoration:none;
}
.wim-link{
  color:#0f766e; font-weight:700; font-size:.92rem; text-decoration:none;
}
.wim-link:hover{ text-decoration:underline; }


:root{
  --accent-a:#a21caf; /* paars */
  --accent-b:#10b981; /* mint */
}

.section-watikmaak{
  background:#fff;
  padding:4rem 1.5rem;
}
.section-watikmaak .container{
  max-width: 1120px;
  margin: 0 auto;
}
.section-watikmaak .kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  text-transform:uppercase; font-weight:600; font-size:.85rem; color:#6b7280;
}
.section-watikmaak .kicker .dash{
  width:24px; height:4px; border-radius:999px;
  background: linear-gradient(90deg,var(--accent-a),var(--accent-b));
}
.section-watikmaak h2{
  margin:.75rem 0 0; font-size:clamp(1.8rem,2.5vw,2.5rem);
  font-weight:800; color:#111827; letter-spacing:-0.02em;
}
.section-watikmaak .lead{
  margin:.75rem 0 2rem; color:#4b5563; font-size:1.1rem;
}

.wim-grid{
  display:grid; gap:1.5rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .wim-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .wim-grid{ grid-template-columns:1fr 1fr 1fr; } }

.wim-card{
  border:1px solid #f3f4f6; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .2s ease;
}
.wim-card:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.07); }

.wim-media{
  position:relative; width:100%;
  aspect-ratio:16/10; /* vaste verhouding */
  overflow:hidden;
}
.wim-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1); transition:transform .3s ease;
}
.wim-card:hover .wim-media img{ transform:scale(1.03); }
.wim-media:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,.2), transparent);
}

.wim-body{ padding:1.25rem; }
.wim-kicker{
  display:flex; align-items:center; gap:.5rem; color:#6b7280; font-weight:600; font-size:.9rem;
}
.wim-kicker .badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:999px;
  background: linear-gradient(135deg,var(--accent-a),var(--accent-b)); color:#fff; font-size:.9rem;
}

.wim-title{ margin:.3rem 0 0; font-size:1.15rem; font-weight:700; color:#111827; }
.wim-desc{ margin:.35rem 0 0; color:#4b5563; }

.wim-list{ margin:.75rem 0 0; padding:0; list-style:none; }
.wim-list li{ display:flex; gap:.5rem; color:#4b5563; font-size:.92rem; }
.wim-list li .dot{
  margin-top:.45rem; width:6px; height:6px; border-radius:999px; background:var(--accent-b); flex:0 0 auto;
}

.wim-cta{ margin-top:1rem; display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.wim-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#111827; color:#fff; font-weight:700; border-radius:12px; padding:.5rem .75rem; font-size:.9rem;
  text-decoration:none;
}
.wim-link{
  color:#0f766e; font-weight:700; font-size:.92rem; text-decoration:none;
}
.wim-link:hover{ text-decoration:underline; }