/* Index page specific styles - removes section separations and animations */

/* Prevent horizontal overflow */
body.index-page {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Remove all section margins for seamless flow */
body.index-page section {
  margin: 0 !important;
}

/* Remove intro animations from sections */
body.index-page .animate-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Change global background to white */
body.index-page {
  background-color: #fff !important;
}

/* Remove weird shadows from elements */
body.index-page * {
  box-shadow: none !important;
}

/* Special hover effect for diensten cards */
body.index-page .dienst-kader:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 8px 32px rgba(0, 212, 170, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Cases grid layout - adaptive to content size */
body.index-page .cases-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 2rem !important;
  max-width: 1200px !important;
  margin: 2.5rem auto 2rem auto !important;
  align-items: start !important;
}

body.index-page .case-teaser-large {
  grid-row: 1 / 3 !important;
  grid-column: 1 !important;
}

body.index-page .case-teaser:not(.case-teaser-large) {
  grid-column: 2 !important;
}

/* Review styling */
body.index-page .review-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1rem;
}

body.index-page .rating {
  display: flex;
  gap: 2px;
}

body.index-page .star {
  color: #ffd700;
  font-size: 1.1rem;
}

/* Make case teasers adaptive to content */
body.index-page .case-teaser {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: auto !important;
}

body.index-page .case-teaser-large {
  justify-content: center !important;
  align-self: center !important;
}

/* Random circles background for cases section */
body.index-page #cases {
  position: relative;
  overflow: hidden;
}

body.index-page #cases::before {
  content: '';
  position: absolute;
  top: -50px;
  left: -30px;
  width: 120px;
  height: 120px;
  background: rgba(0, 212, 170, 0.1);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

body.index-page #cases::after {
  content: '';
  position: absolute;
  top: 50px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: rgba(0, 212, 170, 0.08);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

body.index-page .cases-content {
  position: relative;
  z-index: 1;
}

/* Additional circles using pseudo-elements on container */
body.index-page .cases-content::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 20%;
  width: 80px;
  height: 80px;
  background: rgba(0, 212, 170, 0.12);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

body.index-page .cases-content::after {
  content: '';
  position: absolute;
  bottom: -50px;
  right: 10%;
  width: 150px;
  height: 150px;
  background: rgba(0, 212, 170, 0.06);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

/* More circles using additional elements */
body.index-page .cases-grid::before {
  content: '';
  position: absolute;
  top: 100px;
  left: -20px;
  width: 60px;
  height: 60px;
  background: rgba(0, 212, 170, 0.15);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

body.index-page .cases-grid::after {
  content: '';
  position: absolute;
  top: 200px;
  right: -30px;
  width: 100px;
  height: 100px;
  background: rgba(0, 212, 170, 0.09);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

/* Additional floating circles */
body.index-page .case-teaser:nth-child(1)::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 70%;
  width: 40px;
  height: 40px;
  background: rgba(0, 212, 170, 0.11);
  border-radius: 50%;
  z-index: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

body.index-page .case-teaser:nth-child(2)::before {
  content: '';
  position: absolute;
  top: -35px;
  right: -10px;
  width: 70px;
  height: 70px;
  background: rgba(0, 212, 170, 0.07);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

body.index-page .case-teaser:nth-child(3)::before {
  content: '';
  position: absolute;
  bottom: -25px;
  left: -15px;
  width: 50px;
  height: 50px;
  background: rgba(0, 212, 170, 0.13);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

/* Additional floating bubble to the lower left */
body.index-page .case-teaser:nth-child(3)::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -25px;
  width: 90px;
  height: 90px;
  background: rgba(0, 212, 170, 0.1);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  animation: floatLeft 8s ease-in-out infinite;
}

/* Subtle floating animation for some circles */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes floatReverse {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes float45 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes floatMinus10 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes floatLeft {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
  }
  25% {
    transform: translateY(-8px) translateX(-5px);
  }
  50% {
    transform: translateY(-15px) translateX(0px);
  }
  75% {
    transform: translateY(-8px) translateX(5px);
  }
}

body.index-page #cases::before {
  animation: float 6s ease-in-out infinite;
}

body.index-page #cases::after {
  animation: floatReverse 8s ease-in-out infinite reverse;
}

body.index-page .cases-content::before {
  animation: float45 6s ease-in-out infinite;
}

body.index-page .cases-content::after {
  animation: floatMinus10 8s ease-in-out infinite reverse;
}

/* Specific section adjustments for index page */
body.index-page #diensten {
  padding: 4rem 0 0 0;
}

body.index-page #cases {
  padding: 4rem 0 0 0;
}

body.index-page #team {
  padding: 4rem 0 0 0;
}

body.index-page #vacatures {
  padding: 0;
}

body.index-page #contact {
  padding: 4rem 0;
}

/* Ensure wave separators work properly with no margins */
body.index-page .wave-separator {
  margin: 0;
}

/* Responsive adjustments for index page */
@media (max-width: 768px) {
  body.index-page #diensten,
  body.index-page #cases,
  body.index-page #team {
    padding: 3rem 0 0 0;
  }
  
  body.index-page #contact {
    padding: 3rem 0;
  }
  
  /* Force team grid to stack on mobile */
  body.index-page .team-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  
  /* Reduce decorative circles on mobile to prevent layout issues */
  body.index-page #cases::before,
  body.index-page #cases::after {
    display: none !important;
  }
  
  body.index-page .cases-content::before,
  body.index-page .cases-content::after,
  body.index-page .cases-grid::before,
  body.index-page .cases-grid::after {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* Stack cases grid on mobile */
  body.index-page .cases-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  
  body.index-page .case-teaser-large {
    grid-row: auto !important;
    grid-column: auto !important;
  }
  
  body.index-page .case-teaser:not(.case-teaser-large) {
    grid-column: auto !important;
  }
}

@media (max-width: 480px) {
  body.index-page #diensten,
  body.index-page #cases,
  body.index-page #team {
    padding: 2rem 0 0 0;
  }
  
  body.index-page #contact {
    padding: 2rem 0;
  }
  
  /* Ensure no horizontal scrolling on very small screens */
  body.index-page {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  
  body.index-page .container {
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
  }
  
  /* Make sure all grid elements stack properly */
  body.index-page .diensten-grid,
  body.index-page .cases-grid,
  body.index-page .vacatures-grid,
  body.index-page .team-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Force team members to stack */
  body.index-page .team-member {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  /* Hide decorative circles on very small screens to prevent layout issues */
  body.index-page #cases::before,
  body.index-page #cases::after,
  body.index-page .cases-content::before,
  body.index-page .cases-content::after,
  body.index-page .cases-grid::before,
  body.index-page .cases-grid::after,
  body.index-page .case-teaser::before,
  body.index-page .case-teaser::after {
    display: none !important;
  }
}