/* ==================================================
HERO BASE
================================================== */

.hero {
  position: relative;
  z-index: 1;

  width: 100%;
  height: clamp(350px, 60vh, 700px);
  overflow: hidden;

  margin-bottom: var(--space-6); /* 👈 ruimte onder hero */
}

/* afbeelding */
.hero img {
  width: 100%;
  height: fit-content;
  object-fit: cover;
  object-position: 50% 35%;
}


/* ==================================================
FULL WIDTH (ALLEEN HOMEPAGE)
================================================== */

.home .hero {
  width: 100vw;
  max-width: 100vw;

  /* 👇 DEZE IS DE MAGIC FIX */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}


/* ==================================================
OVERLAY
================================================== */

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  pointer-events: none;
}


/* ==================================================
MOBILE
================================================== */

@media (max-width: 768px) {

  .hero {
    height: fit-content;
    min-height: 210px;
  }

.home .hero {
  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

}