/*
 * Scroll Overlap Effects - Shared Styles
 * Inspired by bravepeople.co
 * Used for individual package detail pages
 */

/* Container for overlapping sections */
.overlap-container {
  position: relative;
}

/* Each category section that will overlap */
.overlap-category {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  color: #000;
}

/* Sticky positioning for overlap effect */
.overlap-category.sticky-section {
  position: sticky;
  top: 0;
}

/* Content wrapper inside each section */
.category-content {
  max-width: 1200px;
  width: 100%;
  padding: 2rem 2rem;
}

/* Wave container - prevent layout shift */
.wave-container {
  height: 48px; /* Max bar height */
  align-items: center;
}

/* Wave bars - use transform instead of height to prevent layout shift */
.wave-bar {
  transform-origin: center;
  will-change: transform;
}

/* Mobile responsiveness - disable overlap effect on small screens */
@media (max-width: 768px) {
  .overlap-category {
    min-height: auto;
    position: relative !important; /* Override sticky */
    padding: 2rem 1rem;
  }

  .category-content {
    padding: 1.5rem 1rem;
  }

  .wave-container {
    height: 32px; /* Smaller wave on mobile */
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .overlap-category {
    min-height: 40vh; /* Shorter sections on tablet */
  }

  .category-content {
    padding: 1.5rem 2rem;
  }
}

/* Category titles */
.category-title {
  transition: color 0.3s ease;
}

/* Category icons */
.category-icon {
  transition: color 0.3s ease;
}

/* Feature tags */
.feature-tags span {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Performance optimizations */
.overlap-category {
  will-change: background, color;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}