/* SnapSale Homepage Hero Decorative Elements
 * Geïnspireerd door NVM.nl design patronen
 *
 * Deze CSS voegt een moderne, lichtblauwe gradient cirkel toe
 * als decoratief achtergrond element in de hero section.
 */

/* Hero section wrapper voor relative positioning */
.hero-wrapper {
  position: relative;
  overflow: hidden; /* Voorkom dat decoratieve elementen buiten container komen */
  isolation: isolate; /* Nieuwe stacking context voor z-index */
}

/* Lichtblauwe cirkel - SOLID kleur, gecentreerd met content */
.hero-wrapper::before {
  content: '';
  position: absolute;
  /* Positioneer relatief aan gecentreerde content (max-w-7xl = 1280px) */
  left: 50%; /* Start vanaf midden van viewport */
  margin-left: calc(-640px - 300px); /* Trek helft van max-w-7xl (640px) af + offset (300px naar links) */
  top: 80px; /* Vaste afstand vanaf top */
  width: 650px;
  height: 650px;
  background: #A8D8EA; /* Licht sky blue - solid kleur, geen gradient */
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4; /* Genoeg om zichtbaar te zijn maar niet te dominant */
}

/* Tweede decoratieve cirkel - rechts onder voor balans */
.hero-wrapper::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -15%;
  width: 45%;
  height: 60%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.08) 0%,    /* Subtiele witte glow */
    rgba(255, 255, 255, 0.04) 40%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: pulse-glow 10s ease-in-out infinite reverse;
}

/* Zorg dat content boven decoratieve elementen verschijnt */
.hero-content {
  position: relative;
  z-index: 1;
}

/* Subtiele pulserende animatie voor levend effect */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.05);
  }
}

/* Responsive aanpassingen */
@media (max-width: 768px) {
  /* Kleinere cirkels op mobiel */
  .hero-wrapper::before {
    width: 70%;
    height: 50%;
    top: -10%;
    left: -20%;
  }

  .hero-wrapper::after {
    width: 60%;
    height: 40%;
    bottom: -15%;
    right: -20%;
  }
}

/* Extra: Gradient overlay voor meer diepte (optioneel) */
.hero-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(29, 107, 171, 0.1) 0%,
    transparent 50%,
    rgba(242, 121, 38, 0.05) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ========================================
   HERO CARD + CAROUSEL LAYOUT (NVM-style)
   ======================================== */

/* Desktop: Side-by-side layout - Card LINKS, Carousel RECHTS zoals NVM */
.hero-showcase {
  display: flex;
  align-items: center; /* Verticaal gecentreerd */
  gap: 0; /* Geen gap - we willen overlap */
  position: relative;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* Tekst Card - COMPACT zoals NVM (50% van foto hoogte) */
.hero-card {
  background: white;
  border-radius: 1.5rem;
  padding: 1.75rem 1.5rem; /* Compacter padding */
  box-shadow:
    0 20px 50px -12px rgba(0, 0, 0, 0.25),
    0 10px 20px -8px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 10;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  /* Desktop: COMPACT card met overlap */
  flex-shrink: 0;
  width: 360px; /* Smaller */
  max-height: 400px; /* Beperk hoogte tot ~50% van foto */
  margin-right: -3rem; /* Overlap OVER de foto rechts */
}

/* Subtiele hover effect voor interactiviteit */
.hero-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 25px 60px -12px rgba(0, 0, 0, 0.3),
    0 15px 25px -8px rgba(0, 0, 0, 0.2);
}

/* Card header styling - COMPACTER */
.hero-card h2 {
  color: #1D6BAB;
  font-size: 1.75rem; /* Smaller */
  font-weight: 700;
  margin-bottom: 0.75rem; /* Minder ruimte */
  line-height: 1.2;
}

/* Card body text - COMPACTER */
.hero-card p {
  color: #374151; /* gray-700 */
  font-size: 1rem; /* Smaller */
  line-height: 1.6;
  margin-bottom: 1rem; /* Minder ruimte */
}

/* Bullet points styling - COMPACTER */
.hero-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0; /* Minder ruimte */
}

.hero-card ul li {
  color: #374151;
  font-size: 0.95rem; /* Smaller */
  line-height: 1.5;
  margin-bottom: 0.5rem; /* Minder ruimte */
  padding-left: 1.75rem;
  position: relative;
}

.hero-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #10B981; /* green-500 */
  font-weight: 700;
  font-size: 1.25rem;
}

/* CTA Button in card - COMPACTER */
.hero-card .cta-button {
  display: inline-block;
  background-color: #F27926;
  color: white;
  font-weight: 600;
  font-size: 1rem; /* Smaller */
  padding: 0.875rem 2rem; /* Compacter */
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(242, 121, 38, 0.3);
  margin-top: 0.75rem; /* Minder ruimte */
}

.hero-card .cta-button:hover {
  background-color: #E06815;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(242, 121, 38, 0.4);
}

/* Carousel container - neemt resterende ruimte */
.hero-carousel {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2);
  flex-grow: 1; /* Neemt alle overgebleven ruimte */
  margin-top: 0; /* Begint hoger dan card (foto ligt onder card baseline) */
}

/* Verberg carousel indicators (puntjes) EN hint op homepage */
.hero-carousel .carousel-indicator,
.hero-carousel .carousel-hint,
.hero-carousel .flex.justify-center {
  display: none !important;
}

/* Badge/label op carousel - ONDERAAN zodat niet botst met Voor/Na */
.hero-badge {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  background: white;
  color: #1D6BAB;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 20;
}

/* ========================================
   RESPONSIVE: MOBILE LAYOUT
   ======================================== */

/* Tablet: Vergelijkbaar met desktop maar iets smaller */
@media (max-width: 1024px) {
  .hero-showcase {
    gap: 1.5rem;
  }

  .hero-card {
    width: 340px; /* Smaller card op tablet */
    padding: 1.75rem 1.5rem;
  }

  .hero-card h2 {
    font-size: 1.6rem;
  }
}

/* Mobile: Carousel BOVEN, card ERONDER - ZELFDE BREEDTE zoals NVM */
@media (max-width: 768px) {
  /* Cirkel op mobiel: smaller en beter gepositioneerd */
  .hero-wrapper::before {
    width: 400px;
    height: 400px;
    left: 50%;
    margin-left: -250px; /* Centreer en verschuif iets naar links */
    top: 100px;
  }

  .hero-showcase {
    display: flex;
    flex-direction: column; /* Verticale stack */
    margin: 2rem 1rem; /* Uniforme zijmarges */
  }

  /* Carousel: EERST in volgorde (boven card) */
  .hero-carousel {
    order: 1; /* Carousel eerst tonen */
    width: 100%;
    min-height: 350px; /* Zorg dat carousel zichtbaar is */
    margin: 0; /* Geen extra marges - gebruikt parent margins */
    border-radius: 1.5rem; /* Alle hoeken rond - foto ligt op card */
    box-shadow: none; /* Shadow komt van card container */
    position: relative;
    z-index: 2; /* Boven card, zodat ronde onderkant zichtbaar is */
  }

  /* Force carousel inner container zichtbaar EN rounded */
  .hero-carousel .before-after-carousel,
  .hero-carousel .before-after-carousel > div:first-child {
    height: 350px !important; /* Forceer height op mobiel */
    border-radius: 1.5rem !important; /* Alle hoeken rond */
    overflow: hidden !important; /* Clip images aan randen */
  }

  /* Badge op mobiel: binnen carousel foto container */
  .hero-carousel .hero-badge {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    top: auto; /* Reset eventuele top value */
  }

  /* Card: TWEEDE in volgorde (onder carousel), overlapt IN de foto */
  .hero-card {
    order: 2; /* Card tweede tonen */
    width: 100%; /* Volledige breedte - ZELFDE als carousel */
    margin: -3rem 0 0 0; /* Overlap naar boven, geen zijmarges */
    padding: 2rem 1.5rem;
    border-radius: 0 0 1.5rem 1.5rem; /* Alleen bottom rounded */
    position: relative;
    z-index: 1; /* Onder carousel, zodat carousel ronde onderkant zichtbaar blijft */

    /* Sterke shadow voor diepte - HELE element */
    box-shadow:
      0 25px 50px -12px rgba(0, 0, 0, 0.35),
      0 15px 25px -8px rgba(0, 0, 0, 0.25);
  }

  .hero-card h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .hero-card p {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .hero-card ul li {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .hero-card .cta-button {
    font-size: 1rem;
    padding: 0.875rem 2rem;
    width: 100%; /* Full-width button op mobiel */
    text-align: center;
  }

  /* Badge kleinere op mobiel */
  .hero-badge {
    top: 1rem;
    right: 1rem;
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }
}

/* Extra small mobiel */
@media (max-width: 480px) {
  .hero-showcase {
    margin: 1.5rem 0.75rem;
  }

  .hero-card {
    margin-top: -2.5rem; /* Iets minder overlap op klein scherm */
    padding: 1.5rem 1.25rem;
  }

  .hero-card h2 {
    font-size: 1.35rem;
  }
}