/* Performance Optimizations */

/* Global fixes for image spacing issues */
img, iframe {
  vertical-align: top; /* Remove baseline space for inline images */
}

/* Additional fix for gif container spacing */
.behind-gif {
  /* Remove any potential spacing from flexbox */
  gap: 0 !important;
}

/* Ensure gif image has no spacing whatsoever */
.behind-gif img {
  /* Remove any browser default spacing */
  vertical-align: top !important;
  /* Force exact positioning */
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Remove default spacing on all video and image containers */
.video-placeholder img,
.behind-gif img,
.hero-video img,
.portofolio-item img {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Video placeholder styles - NO interference with original sizing */
.video-placeholder {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  /* Don't add any sizing properties - inherit completely from parent */
}

.video-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
  display: block; /* Remove any default spacing */
}

/* Ensure video placeholder never gets transformed or hidden */
.video-placeholder,
.video-placeholder.video-playing {
  transform: none !important;
  visibility: visible !important;
  display: block !important;
  /* Maintain original size properties */
  width: 100% !important;
  height: 100% !important;
  /* Remove any margin/padding that creates space */
  margin: 0 !important;
  padding: 0 !important;
}

/* Enhanced YouTube-style play button */
.video-placeholder .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 0, 0, 0.9); /* YouTube red */
  color: white;
  font-size: 0; /* Hide text, use pseudo-element for triangle */
  width: 68px;
  height: 48px;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  border: none;
  cursor: pointer;
  z-index: 10;
}

/* Create YouTube triangle play icon */
.video-placeholder .play-button::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 12px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 3px; /* Slight offset to center visually */
}

.video-placeholder:hover .play-button {
  background: rgba(255, 0, 0, 1);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Iframe should fill container without affecting container size */
.video-placeholder iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  border: none !important;
  outline: none !important;
  z-index: 1050 !important;
  background: #000 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  border-radius: inherit; /* Inherit border radius from parent */
}

/* Ensure iframe inherits parent's border radius */
.hero-video .video-placeholder iframe {
  border-radius: 10px !important;
  aspect-ratio: 16/9 !important;
  min-height: 300px !important;
  height: auto !important;
}

.portofolio-item .video-placeholder iframe {
  border-radius: 10px !important;
  height: 100% !important;
}

/* Force iframe to be visible in all conditions */
.video-placeholder.video-playing iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Fix behind section spacing issues */
.s-behind {
  overflow: hidden;
  /* Remove extra padding for mobile */
  padding-bottom: 100px; /* Maintain original padding */
  /* Remove any default margins that might cause spacing issues */
  margin: 0 !important;
}

/* Section header for behind should not have extra spacing */
.s-behind .section-header {
  margin-bottom: 2rem !important; /* Consistent spacing */
}

.behind-gif {
  margin: 3rem auto !important; /* Keep centered from original CSS */
  padding: 0 !important;
  line-height: 0; /* Remove line height that creates space */
  /* Use block display for consistency */
  display: block !important;
  position: relative !important;
  /* Remove any potential spacing from font properties */
  font-size: 0 !important;
  /* Ensure no extra spacing inside the container */
  overflow: hidden !important;
}

.behind-gif img {
  width: 100% !important;
  height: 100% !important; /* Fill container completely */
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important; /* Fill the container completely */
  border-radius: 10px !important; /* Maintain original border radius */
  /* Remove any spacing that could appear around the image */
  border: none !important;
  outline: none !important;
  /* Use absolute positioning for perfect fit */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* When video is playing, NEVER change container dimensions */
.video-placeholder.video-playing {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1040 !important;
  /* Force container to maintain original dimensions */
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  opacity: 1 !important;
  /* Ensure display and visibility are maintained */
  display: block !important;
  visibility: visible !important;
}

/* Specific fixes for different containers */
.hero-video .video-placeholder.video-playing {
  /* Hero video should maintain aspect ratio and height */
  width: 100% !important;
  height: auto !important;
  min-height: 300px !important;
  aspect-ratio: 16/9 !important;
  position: relative !important;
  overflow: hidden !important;
}

.portofolio-item .video-placeholder.video-playing {
  /* Portfolio items have fixed dimensions: 424px x 239px */
  width: 100% !important;
  height: 100% !important;
}

/* Critical overrides - prevent any styling changes to original containers */
.hero-video,
.portofolio-item {
  /* Never allow optimizations to change original container sizes */
  box-sizing: border-box !important;
}

/* Ensure original CSS sizing is preserved for hero */
.hero-video {
  width: 70% !important; /* From original CSS */
  height: auto !important; /* From original CSS */
  /* Remove fixed min-height and aspect-ratio for desktop */
}

/* Ensure original CSS sizing is preserved for portfolio */
.portofolio-item {
  width: 424px !important; /* From original CSS */
  height: 239px !important; /* From original CSS */
}

/* Hero video placeholder should be flexible */
.hero-video .video-placeholder {
  width: 100% !important;
  height: 100% !important;
  /* Remove fixed sizing - let it be natural */
}

/* Force hero video to never collapse but be flexible */
.hero-video .video-placeholder,
.hero-video .video-placeholder.video-playing {
  /* Remove fixed constraints for better responsiveness */
  flex-shrink: 0 !important;
}

/* Hero video iframe should maintain aspect ratio naturally */
.hero-video .video-placeholder iframe {
  aspect-ratio: 16/9 !important;
  /* Remove fixed min-height - let it be responsive */
}

/* Responsive adjustments - Play button AND mobile video fixes */
@media (max-width: 768px) {
  .video-placeholder .play-button {
    width: 56px;
    height: 40px;
  }
  
  .video-placeholder .play-button::after {
    border-left: 10px solid white;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
  }
  
  /* Fix hero video for mobile - remove fixed aspect ratio */
  .hero-video {
    width: 95% !important; /* From original mobile CSS */
    min-height: auto !important; /* Remove fixed minimum height */
    aspect-ratio: auto !important; /* Remove fixed aspect ratio */
    margin: 0 auto !important; /* Center the video */
    padding: 0 !important; /* Remove padding */
  }
  
  .hero-video .video-placeholder {
    min-height: auto !important; /* Remove fixed minimum height */
    aspect-ratio: auto !important; /* Let it be natural */
    height: auto !important;
    margin: 0 !important; /* Remove margin */
    padding: 0 !important; /* Remove padding */
    display: block !important;
  }
  
  .hero-video .video-placeholder img {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .hero-video .video-placeholder iframe {
    min-height: auto !important; /* Remove fixed minimum height */
    aspect-ratio: 16/9 !important; /* Keep iframe ratio but flexible */
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Fix gif section spacing - CRITICAL FIX FOR INTERNAL SPACING */
  .s-behind {
    padding-bottom: 50px !important; /* Match original mobile padding */
    /* Remove any extra margins that could cause space */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Ensure no extra spacing around section */
    padding-top: 0 !important;
  }
  
  /* Fix section transitions - remove spacing between sections */
  .s-behind + .s-curriculum {
    margin-top: 0 !important;
    padding-top: 50px !important;
  }
  
  .behind-gif {
    width: 80% !important; /* Match original mobile width */
    height: 421px !important; /* Match original mobile height */
    margin: 2rem auto !important; /* Match original mobile margin */
    padding: 0 !important;
    /* Force centering but NO flex gap */
    display: block !important; /* Change to block to eliminate flex spacing */
    position: relative !important;
    /* Remove any spacing issues */
    line-height: 0 !important;
    font-size: 0 !important; /* Remove font-size spacing */
    /* Ensure no extra height */
    min-height: auto !important;
    overflow: hidden !important; /* Prevent any overflow spacing */
  }
  
  .behind-gif img {
    width: 100% !important;
    height: 100% !important; /* Fill the container completely */
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important; /* Fill container completely */
    border-radius: 10px !important;
    border: none !important;
    outline: none !important;
    /* Absolute positioning to eliminate any spacing */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
}

@media (max-width: 480px) {
  .video-placeholder .play-button {
    width: 48px;
    height: 34px;
  }
  
  .video-placeholder .play-button::after {
    border-left: 8px solid white;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
  
  /* Even more flexible for small mobile */
  .hero-video {
    width: 100% !important;
    min-height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  .hero-video .video-placeholder {
    min-height: auto !important;
    aspect-ratio: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .hero-video .video-placeholder img {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .hero-video .video-placeholder iframe {
    min-height: auto !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Fix gif section spacing for small mobile */
  .s-behind {
    padding-bottom: 50px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Ensure tight spacing between sections on small mobile */
  .s-behind + .s-curriculum {
    margin-top: 0 !important;
    padding-top: 30px !important;
  }
  
  .behind-gif {
    width: 80% !important; /* Match original mobile width */
    height: 221px !important; /* Match original small mobile height */
    margin: 2rem auto !important; /* Match original mobile margin */
    padding: 0 !important;
    /* Use block positioning to eliminate flex spacing */
    display: block !important;
    position: relative !important;
    line-height: 0 !important;
    font-size: 0 !important;
    min-height: auto !important;
    overflow: hidden !important; /* Prevent spacing from overflow */
  }
  
  .behind-gif img {
    width: 100% !important;
    height: 100% !important; /* Fill container completely */
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important; /* Fill container completely, no gaps */
    border-radius: 10px !important;
    border: none !important;
    outline: none !important;
    /* Remove any possible spacing from image properties */
    max-width: none !important;
    max-height: none !important;
    /* Absolute positioning to eliminate spacing */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
}

/* Lazy loading animation */
.video-placeholder.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Optimize images */
img[loading="lazy"] {
  transition: opacity 0.3s ease;
}

img[loading="lazy"]:not([src]) {
  opacity: 0;
}

/* Add lazy loading to all mentor images via CSS */
.mentor-image,
.initiator-image {
  transition: opacity 0.3s ease;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .video-placeholder,
  .video-placeholder .play-button,
  img[loading="lazy"],
  .mentor-image,
  .initiator-image {
    transition: none;
  }
  
  .video-placeholder:hover {
    transform: none;
  }
  
  .video-placeholder:hover .play-button {
    transform: translate(-50%, -50%);
  }
}

/* Optimized swiper containers */
.swiper-container:not(.swiper-initialized) {
  overflow: hidden;
}

.swiper-container:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

.swiper-container:not(.swiper-initialized) .swiper-slide {
  flex-shrink: 0;
  width: 33.333%;
  margin-right: 15px;
}

@media (max-width: 768px) {
  .swiper-container:not(.swiper-initialized) .swiper-slide {
    width: 50%;
  }
}

@media (max-width: 480px) {
  .swiper-container:not(.swiper-initialized) .swiper-slide {
    width: 100%;
  }
}