/* =========================
   Voltina — Hero Collage
   (structure untouched)
   ========================= */

.voltina-hero-collage {
  position: relative;
  background: #fff;
  overflow: hidden;
}

/* Zorg dat content boven overlay blijft */
.voltina-hero-collage > .container {
  position: relative;
  z-index: 1;
}

/* Buttons: pill + Voltina primary/secondary */
.voltina-hero-collage a[class*="px-6"][class*="py-3"] {
  border-radius: 999px;
  font-family: "Mulish", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  line-height: 1;
  padding: 0.95rem 1.35rem;
  text-decoration: none; /* ✅ zoals je vroeg */
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
}

.voltina-hero-collage a[class*="px-6"][class*="py-3"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

.voltina-hero-collage a[class*="px-6"][class*="py-3"]:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* Primary (bg-background-alternative + text-text-alternative) */
.voltina-hero-collage a.bg-background-alternative {
  background-color: #e6007e !important;
  border-color: rgba(230, 0, 126, 0.40) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 40px rgba(230, 0, 126, 0.20);
}

.voltina-hero-collage a.bg-background-alternative:hover {
  box-shadow: 0 18px 46px rgba(230, 0, 126, 0.26);
}

/* Secondary (bg-background-primary + text-text-primary) */
.voltina-hero-collage a.bg-background-primary {
  background-color: #ffffff !important;
  border-color: rgba(230, 0, 126, 0.45) !important;
  color: #000000 !important;
}

.voltina-hero-collage a.bg-background-primary:hover {
  border-color: rgba(241, 135, 0, 0.55) !important;
  box-shadow: 0 16px 40px rgba(241, 135, 0, 0.16);
}

/* Focus ring in merk-kleur */
.voltina-hero-collage a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.22), 0 10px 26px rgba(0, 0, 0, 0.10);
}

/* Afbeeldingen: kaarten-look + depth */
.voltina-hero-collage img {
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Collage iets “spannender”: zachte rand-accenten per beeld */
.voltina-hero-collage .relative > div:nth-child(1) img {
  box-shadow: 0 18px 45px rgba(230, 0, 126, 0.14);
}

.voltina-hero-collage .relative > div:nth-child(2) img {
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18);
}

.voltina-hero-collage .relative > div:nth-child(3) img {
  box-shadow: 0 18px 45px rgba(241, 135, 0, 0.14);
}

/* Kleine polish voor overlap: voorkom dat randen “plakken” op mobiel */
@media (max-width: 767px) {
  .voltina-hero-collage .relative {
    min-height: 420px;
  }
  .voltina-hero-collage p {
    max-width: 100%;
  }
}