/*
  works-fix.css
  Small mobile override to force the HERO (YouTube) carousel to expand vertically
  and participate in the page's natural scroll (instead of being clipped to 100vh).

  Usage:
  1) Save this file as css/works-fix.css and include it AFTER your existing works.css:
     <link rel="stylesheet" href="css/works.css">
     <link rel="stylesheet" href="css/works-fix.css">

  2) Clear cache or hard reload on iPhone to test.

  This file purposely only contains focused overrides (uses !important) so it
  won't affect desktop carousel behaviour. If you prefer, merge these rules
  at the bottom of your existing works.css instead of loading a separate file.
*/

/* ===== HERO MOBILE OVERRIDES ===== */
@media only screen and (max-width: 768px) {
  /* Let the main scroll container behave normally on small screens */
  .scroll-container {
    height: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
  }

  /* Let the hero/carousel grow with its content (no 100vh clipping) */
  section#hero,
  #hero .carousel-container,
  [data-section="hero"] .carousel-container,
  #hero .carousel-wrapper,
  [data-section="hero"] .carousel-track {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    transform: none !important;
    scroll-snap-align: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Stack YouTube items vertically and make them full width */
  [data-section="hero"] .carousel-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  [data-section="hero"] .carousel-item.youtube-item {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Ensure thumbnail images scale correctly */
  [data-section="hero"] .video-thumbnail,
  [data-section="hero"] .thumbnail-wrapper {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    
  }

  /* Hide hero arrows on small screens just in case */
  #hero .carousel-container .arrow,
  [data-section="hero"] .arrow {
    display: none !important;
  }
}

/* Extra-safe small-screen override for very narrow phones */
@media only screen and (max-width: 420px) {
  [data-section="hero"] .carousel-track {
    gap: 14px !important;
  }
  [data-section="hero"] .carousel-item.youtube-item {
    min-height: 180px !important;
  }
}

/* End of fixes */


/* Additional full-bleed overrides to remove LEFT gap on very narrow phones
   - Appended after the previous rules to be extra-specific
   - This targets safe-area and 100vw centering issues that can cause a left black strip
*/
@media only screen and (max-width: 768px) {
  /* reset any translateX centering that can cause offset */
  [data-section="hero"] .carousel-container,
  [data-section="hero"] .carousel-wrapper {

    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    position: relative;
    left: 0 !important;              /* reset */
    transform: none !important;      /* reset */
  }
}

  



  /* make each youtube item truly full-bleed (account for safe-area) */
  [data-section="hero"] .carousel-item.youtube-item {
    width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* ensure thumbnails/iframes cover the whole item to avoid black bars */
  [data-section="hero"] .thumbnail-wrapper,
  [data-section="hero"] .video-thumbnail,
  [data-section="hero"] iframe {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  /* remove any inner left padding that may come from page-level wrappers */
  .scroll-container,
  body,
  html {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

/* Modal General Styles */
#videoModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; /* Use vh for full screen */
  background: rgba(0, 0, 0, 0.95); /* Semi-transparent overlay */
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden; /* Prevent scroll/overflow */
}

#videoModal.active {
  display: flex;
}

.modal-content-wrapper {
  position: relative;
  width: 90%; /* Flexible, not fixed */
  max-width: 1200px; /* Cap for desktop */
  max-height: 90vh; /* Prevent overflowing screen */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Close button (assuming you have one) */
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  font-size: 30px;
  cursor: pointer;
  z-index: 100;
}

/* Video/Iframe Fitting */
.modal-content-wrapper iframe,
.modal-content-wrapper video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Fit fully without cropping */
  border: none;
  display: block;
}

/* Aspect Ratio Classes (applied via JS based on video type) */
.aspect-16-9 {
  aspect-ratio: 16 / 9 !important;
}

.aspect-9-16 {
  aspect-ratio: 9 / 16 !important;
}

/* ===== LOCAL VIDEO CAROUSEL FIXES ===== */
/* ===== LOCAL VIDEO CAROUSEL HEIGHT FIX ===== */
@media only screen and (max-width: 768px) {
  /* Ensure the case studies section has proper height */
  section#case-studies {
    min-height: 75vh !important;
    height: auto !important;
    padding: 20px 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  /* Critical: Set fixed height for carousel container */
  [data-section="case"] .carousel-container {
    width: 100vw !important;
    height: 70vh !important; /* Fixed height */
    min-height: 400px !important; /* Minimum height for small screens */
    max-height: 600px !important; /* Maximum height for larger phones */
    padding: 0 !important;
    margin: 20px 0 !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #000 !important; /* Fallback background */
  }

  [data-section="case"] .carousel-wrapper {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Ensure track takes full height */
  [data-section="case"] .carousel-track {
    width: max-content !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
  }

  /* Each slide must be exactly 100vw with full height */
  [data-section="case"] .carousel-item {
    width: 100vw !important;
    flex: 0 0 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    aspect-ratio: unset !important;
    background: #000 !important; /* Ensure black background */
  }

  /* Ensure thumbnails/videos fill the entire slide */
  [data-section="case"] .thumbnail-wrapper {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    background: #000 !important;
  }

  [data-section="case"] .video-thumbnail {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    background: #000 !important;
    display: block !important;
  }

  /* Make sure videos are visible */
  [data-section="case"] video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background: #000 !important;
    display: block !important;
  }

  /* Hide default arrows */
  [data-section="case"] .arrow {
    display: none !important;
  }

  /* Ensure Swiper container is visible */
  [data-section="case"] .swiper-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    background: #000 !important;
  }

  [data-section="case"] .swiper-wrapper {
    height: 100% !important;
  }

  [data-section="case"] .swiper-slide {
    width: 100vw !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    position: relative !important;
    background: #000 !important;
  }
}

/* Desktop styles - ensure they don't interfere */
@media (min-width: 769px) {
  [data-section="case"] .carousel-container {
    height: 65vh !important; /* Different height for desktop */
  }
}

/* Ensure Swiper doesn't interfere with desktop */
@media (min-width: 769px) {
  [data-section="case"] .swiper-container {
    display: none !important;
  }
}
/* Fix for iOS video scroll blocking */
@media only screen and (max-width: 768px) {
  /* Add pointer-events control for video containers */
  [data-section="case"] .carousel-container {
    pointer-events: auto !important;
  }
  
  [data-section="case"] .carousel-item.local-video-item {
    pointer-events: auto !important;
  }
  
  /* Allow touch events on video wrapper but not on video itself for scroll */
  [data-section="case"] .thumbnail-wrapper {
    pointer-events: auto !important;
  }
  
  /* Prevent video from blocking scroll - only allow play/pause */
  [data-section="case"] video {
    pointer-events: none !important;
    touch-action: pan-y !important;
  }
  
  /* But allow play button overlay to be clickable */
  [data-section="case"] .play-button-overlay {
    pointer-events: auto !important;
    z-index: 20 !important;
  }
  
  /* Ensure the carousel track allows scrolling */
  [data-section="case"] .carousel-track {
    touch-action: pan-y !important;
  }
}