@charset "UTF-8";

.card-body {
  color: var(--basiskleureen); /* uit database */
}

.banner-card {
  position: relative;
  height: 0;
  padding-top: 50%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}

.banner-card .banner-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.banner-card .banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
}

.banner-card .banner-icon {
  margin: 0;
}

.banner-card .banner-title {
  margin-bottom: 0.5rem;
}

.banner-card .banner-text {
  margin: 0;
}

.banner-card .btn1,
.banner-card .btn2 {
  margin: 0;
}

.project-card {
  position: relative;
  overflow: visible;
}

@media (min-width: 768px) {
  .project-thumb {
    transform: translateY(clamp(-16px, -3.5vw, -80px)); /* steek boven uit */
  }
}

.project-img {
  border: 4px solid #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.project-card:hover .project-img {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
}

.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0; /* achter alle kaart-inhoud */
  border-radius: inherit;
  background-image: var(--card-bg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto; /* altijd in de breedte zichtbaar */
  opacity: 0.1;
  pointer-events: none;
}

/* Zorg dat inhoud er duidelijk boven ligt */
.project-card > .row,
.project-card .card-body {
  position: relative;
  z-index: 1;
}

/* Projectcard: footer-gradient van 3 → 4 blenden bij hover */
.project-card .gradient3 {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* Overlay met gradient4 die we infaden */
.project-card .gradient3::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: linear-gradient(90deg, #0f4c64 0%, #cc00cc 100%);
}

/* Zorg dat icon/inhoud boven de overlay blijven */
.project-card .gradient3 > * {
  position: relative;
  z-index: 2;
}

/* Hover/focus activeert de blend */
.project-card:hover .gradient3::before,
.project-card:focus-within .gradient3::before {
  opacity: 1;
}

/* Optioneel: klein pijltje-animatie */
.project-card .gradient3 .bi {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.project-card:hover .gradient3 .bi,
.project-card:focus-within .gradient3 .bi {
  transform: translateX(8px);
  opacity: 0.95;
}