/* GrowCub Website - Main Stylesheet */

/* This file is referenced in index.php but currently contains minimal styles */
/* Most styling is done via Tailwind CSS utility classes and inline styles */

/* Global resets and base styles can be added here as needed */

/* Blog Collage Grid Styles */
.blog-collage-grid {
   display: grid;
   grid-auto-rows: auto;
}

/* YouTube Slider Styles */
.youtube-slider-container {
   position: relative;
   overflow: hidden;
   padding: 0 60px;
}

.youtube-slider-track {
   display: flex;
   will-change: transform;
}

.youtube-slide {
   transition: transform 0.3s ease;
}

/* Responsive adjustments for slider */
@media (max-width: 640px) {
   .youtube-slider-container {
      padding: 0 40px;
   }
}

/* Smooth scrolling for events grid */
@media (max-width: 1024px) {
   .youtube-slider-container {
      overflow-x: auto;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
   }
   
   .youtube-slider-container::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
   }
}


/* Hero Section Height Styles */
.hero-section-full-height {
   /* On mobile, use auto height to fit content */
   height: auto;
   min-height: calc(100vh + 80px);
}

@media (min-width: 1024px) {
   .hero-section-full-height {
      height: calc(100vh + 96px);
      min-height: calc(100vh + 96px);
   }
}

/* Hero Mobile Padding - Calculated to clear header */
.hero-mobile-padding {
   padding-top: 0;
}

@media (max-width: 1023px) {
   .hero-mobile-padding {
      /* Header height calculation:
       * Logo: 4rem (64px) + Top padding: 0.75rem (12px) + Bottom padding: 0.75rem (12px) = 88px
       * Main has -mt-20 (-80px), so we need: 88px (header) + 80px (negative margin offset) = 168px
       * Adding extra 80px for safe spacing = 248px
       */
      padding-top: 248px;
   }
}

@media (min-width: 640px) and (max-width: 1023px) {
   .hero-mobile-padding {
      /* Slightly larger header on small tablets + extra spacing */
      padding-top: 252px;
   }
}

@media (min-width: 1024px) {
   .hero-mobile-padding {
      padding-top: 0;
   }
}

/* Lion Cub Mirror Effect & Static Styles */
.lion-mirror {
   transform: scaleX(-1);
   transition: transform 0.3s ease;
}

/* Lion Cub Container */
#lion-cub-container {
   transition: transform 0.3s ease;
   position: relative;
   overflow: visible;
   margin: 0 auto;
}



/* Hero section second column - prevent overflow on mobile */
@media (max-width: 1023px) {
   /* Ensure the hero section container allows overflow for animations */
   #home .container {
      overflow-x: hidden;
   }
}

/* Simple hover scale effect - combines mirror and scale */
.lion-cub-static:hover {
   transform: scaleX(-1) scale(1.1);
}

/* Skill Icons Orbit Animation */
.skill-orbit-container {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   --orbit-radius: 100px;
   overflow: visible;
}

/* Circular Ring Connecting Icons */
.skill-orbit-ring {
   width: calc(var(--orbit-radius) * 2);
   height: calc(var(--orbit-radius) * 2);
   border: 2px solid rgba(243, 140, 61, 0.3);
   border-radius: 50%;
   pointer-events: none;
   z-index: 1;
}

.skill-orbit {
   top: 50%;
   left: 50%;
   transform-origin: center center;
   --orbit-radius: 100px;
   z-index: 5;
}

.skill-icon {
   transition: transform 0.3s ease;
   transform: translate(-50%, -50%);
   position: relative;
   z-index: 5;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.skill-icon:hover {
   transform: translate(-50%, -50%) scale(1.2);
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

/* Circular Orbit Animation */
@keyframes orbit {
   0% {
      transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg);
   }

   100% {
      transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg);
   }
}

/* Position each icon at different starting angles (60 degrees apart for 6 icons) */
.skill-orbit-1 {
   animation: orbit 20s linear infinite;
}

.skill-orbit-2 {
   animation: orbit 20s linear infinite;
   animation-delay: -3.33s;
   /* 60 degrees = 1/6 of 20s */
}

.skill-orbit-3 {
   animation: orbit 20s linear infinite;
   animation-delay: -6.66s;
   /* 120 degrees = 2/6 of 20s */
}

.skill-orbit-4 {
   animation: orbit 20s linear infinite;
   animation-delay: -10s;
   /* 180 degrees = 3/6 of 20s */
}

.skill-orbit-5 {
   animation: orbit 20s linear infinite;
   animation-delay: -13.33s;
   /* 240 degrees = 4/6 of 20s */
}

.skill-orbit-6 {
   animation: orbit 20s linear infinite;
   animation-delay: -16.66s;
   /* 300 degrees = 5/6 of 20s */
}

/* Responsive orbit radius - increased for larger circle path */
/* Mobile: Larger radius for bigger circle */
@media (max-width: 640px) {
   .skill-orbit-container,
   .skill-orbit {
      --orbit-radius: 100px;
   }
   
   .skill-orbit-ring {
      border-width: 1.5px;
      opacity: 0.5;
   }
   
   #lion-cub-container {
      padding: 0.5rem;
   }
}

/* Small tablets */
@media (min-width: 641px) and (max-width: 767px) {
   .skill-orbit-container,
   .skill-orbit {
      --orbit-radius: 120px;
   }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
   .skill-orbit-container,
   .skill-orbit {
      --orbit-radius: 140px;
   }
}

/* Desktop */
@media (min-width: 1024px) {
   .skill-orbit-container,
   .skill-orbit {
      --orbit-radius: 160px;
   }
}

/* Large Desktop */
@media (min-width: 1280px) {
   .skill-orbit-container,
   .skill-orbit {
      --orbit-radius: 180px;
   }
}

/* Extra Large Desktop */
@media (min-width: 1536px) {
   .skill-orbit-container,
   .skill-orbit {
      --orbit-radius: 200px;
   }
}

/* Solution Layer Styles */
.lion-cub-solution {
   filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
   transition: transform 0.3s ease;
}

.lion-cub-solution:hover {
   transform: scale(1.1) rotate(5deg);
}

.value-group {
   opacity: 0;
   transform: translateY(30px);
}

#pillar-1-values,
#pillar-3-values,
#pillar-4-values,
#pillar-4-entrepreneur-values,
#pillar-5-values,
#pillar-6-values {
   transform: translateY(50px);
}

/* Blog Bento Grid Styles */
.blog-bento-grid {
   grid-auto-rows: 1fr;
}

.blog-bento-item {
   transition: border-color 0.25s ease;
   will-change: transform;
}

.blog-bento-item:hover {
   border-color: #fb923c; /* orange-400 */
}

.blog-bento-item.blog-expanded {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw !important;
   height: 100vh !important;
   border-radius: 0 !important;
   border: none !important;
   z-index: 50;
}

.blog-flip-overlay {
   display: none;
   overflow: hidden;
}

.blog-flip-overlay.active {
   display: block;
}

.blog-item-placeholder {
   visibility: hidden;
   pointer-events: none;
}

/* Testimonials Marquee - Consistent Spacing */
.testimonial-list {
   display: flex;
   flex-direction: column;
}

.testimonial-list > div {
   margin-bottom: 1rem; /* Consistent 1rem spacing below each testimonial */
}

.testimonial-list > div:last-child {
   margin-bottom: 1rem; /* Ensure last item also has spacing for seamless loop */
}

/* Spacer between original and cloned lists */
.testimonial-spacer {
   flex-shrink: 0;
}

/* Mobile Testimonials - Horizontal Scrolling (3 rows) */
.testimonial-mobile-container {
   position: relative;
   overflow: hidden;
   -webkit-overflow-scrolling: touch;
}

.testimonial-mobile-track {
   will-change: transform;
}

.testimonial-mobile-card {
   scroll-snap-align: start;
}