/**
 * Voltina Hero Carousel Block
 *
 * Styling wordt centraal beheerd via het Voltina thema.
 * Dit bestand kan worden gebruikt voor blok-specifieke overrides indien nodig.
 */

/* Ensure full width - override WordPress constrained layout and global padding */
.voltina-hero-carousel {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override constrained layout for this block */
.is-layout-constrained > .voltina-hero-carousel,
.has-global-padding > .voltina-hero-carousel {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Description paragraph spacing */
.voltina-hero-carousel .space-y-4 > p {
  margin-bottom: 1rem;
}

.voltina-hero-carousel .space-y-4 > p:last-child {
  margin-bottom: 0;
}

/* Marquee animation */
@keyframes marquee-horizontally {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee-horizontally {
  animation: marquee-horizontally 40s linear infinite;
}


.animate-marquee-horizontally .grid {
    margin-bottom: 100px;
}

/* ================================
   Voltina Buttons – Hero Carousel
================================ */

/* Base button */
.voltina-hero-carousel a[class*="px-6"][class*="py-3"] {
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  padding: 0.95rem 1.35rem;
  text-decoration: none;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease;
}

/* Primary button */
.voltina-hero-carousel a.bg-background-alternative {
  background-color: #e6007e !important;
  border-color: rgba(230, 0, 126, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(230, 0, 126, 0.18);
}

.voltina-hero-carousel a.bg-background-alternative:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(230, 0, 126, 0.22);
}

/* Secondary button */
.voltina-hero-carousel a.bg-background-primary {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: #000000 !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
}

.voltina-hero-carousel a.bg-background-primary:hover {
  transform: translateY(-1px);
  border-color: rgba(230, 0, 126, 0.22) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}


@keyframes marquee-horizontally-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.voltina-hero-carousel .marquee-reverse {
  animation: marquee-horizontally-reverse 40s linear infinite; /* net andere snelheid = minder synchroon */
}