/* Mobile-friendly styles for portfolio */
@media (max-width: 767px) {
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .grid {
    gap: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Fix minimum widths for cards */
  .min-w-\[300px\], 
  .min-w-\[400px\], 
  .w-\[600px\] {
    min-width: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Adjust card heights */
  .h-64, .h-48 {
    height: auto !important;
    min-height: 12rem !important;
  }
  
  /* Fix overflow issues */
  .overflow-hidden {
    overflow: visible !important;
  }
  
  /* Improve scrolling in horizontal containers */
  .snap-x.overflow-x-auto {
    padding-bottom: 1rem !important;
    scroll-padding-left: 1rem !important;
    scroll-padding-right: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
  }
  
  /* Make carousel items stack vertically on mobile */
  .snap-x.overflow-x-auto > * {
    scroll-snap-align: unset !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
  }
  
  /* Ensure images and videos fit within containers */
  img, video {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  
  /* Ensure proper spacing between grid items */
  .grid-cols-1 > * {
    margin-bottom: 1.5rem !important;
  }
  
  /* Fix for any fixed positioning that might cause issues */
  .fixed {
    position: absolute !important;
  }
  
  /* Target specific sections for mobile adjustments */
  [id="projects"], [id="achievements"], [id="certificates"] {
    width: 100% !important;
    overflow: hidden !important;
    padding: 1rem 0 !important;
  }
  
  /* Adjust flex layouts for mobile */
  .flex {
    flex-wrap: wrap !important;
  }
}

/* Specific fixes for very small screens */
@media (max-width: 380px) {
  .section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  .text-4xl, .text-3xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }
}

/* Custom height variable for mobile Safari */
.mobile-view {
  height: calc(var(--vh, 1vh) * 100) !important;
}