/* Mobile Responsive Fixes for TYTEN Landing Page
 * Fixes overlapping elements and glitchy behavior on mobile devices
 * Created: February 2026
 */

/* ===== BASE MOBILE FIXES ===== */

/* Prevent horizontal overflow on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Fix elements that have fixed widths causing overflow */
@media (max-width: 767px) {
  
  /* ===== HERO SECTION FIXES ===== */
  
  /* Scale down large hero text */
  [class*="text-[80px]"],
  [class*="text-\[80px\]"] {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
  
  [class*="text-[120px]"],
  [class*="text-\[120px\]"] {
    font-size: 48px !important;
    line-height: 1.05 !important;
  }
  
  /* Fix elements with fixed pixel widths */
  [class*="w-[600px]"],
  [class*="w-[710"],
  [class*="w-[1200px]"],
  [class*="w-[1280px]"],
  [class*="w-[1920px]"],
  [class*="w-[1736px]"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Fix max-width containers */
  [class*="max-w-[900px]"],
  [class*="max-w-[936px]"],
  [class*="max-w-[1280px]"],
  [class*="max-w-[1368px]"],
  [class*="max-w-[1440px]"],
  [class*="max-w-[1441px]"],
  [class*="max-w-[1600px]"] {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* ===== FIXED HEIGHT ELEMENTS ===== */
  
  /* Allow height to be auto for better mobile flow */
  [class*="h-[6276px]"],
  [class*="h-[1920px]"],
  [class*="h-[1000px]"] {
    height: auto !important;
    min-height: auto !important;
  }
  
  /* ===== ABSOLUTE POSITIONED ELEMENTS ===== */
  
  /* Hide or reposition decorative background elements that cause overlap */
  [class*="blur-[152px]"],
  [class*="blur-[100px]"] {
    opacity: 0.3 !important;
    transform: scale(0.5) !important;
    pointer-events: none !important;
  }
  
  /* Fix absolutely positioned elements with extreme negative values */
  [class*="left-[-950px]"],
  [class*="left-[-1000px]"],
  [class*="left-[-1200px]"],
  [class*="right-[-886px]"],
  [class*="right-[-1200px]"],
  [class*="-left-[1525px]"],
  [class*="-left-[1621px]"],
  [class*="-left-[1775px]"] {
    display: none !important;
  }
  
  /* Fix elements with fixed top positions that cause vertical overlap */
  [class*="top-[1800px]"],
  [class*="top-[1900px]"],
  [class*="top-[2800px]"],
  [class*="top-[3200px]"],
  [class*="top-[10550px]"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
  
  /* ===== SPACING FIXES ===== */
  
  /* Reduce excessive margins on mobile */
  [class*="mb-[480px]"] {
    margin-bottom: 80px !important;
  }
  
  [class*="mb-[160px]"] {
    margin-bottom: 60px !important;
  }
  
  [class*="mb-[120px]"] {
    margin-bottom: 48px !important;
  }
  
  [class*="pt-[120px]"] {
    padding-top: 60px !important;
  }
  
  [class*="pb-32"] {
    padding-bottom: 48px !important;
  }
  
  /* Fix top margin for main content */
  [class*="mt-[86px]"] {
    margin-top: 60px !important;
  }
  
  /* ===== GRID AND FLEX LAYOUTS ===== */
  
  /* Force single column on mobile */
  .grid-cols-2,
  [class*="grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }
  
  .grid-cols-3,
  [class*="grid-cols-3"],
  .lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* ===== FLEX DIRECTION FIXES ===== */
  
  /* Ensure flex containers stack vertically */
  .lg\:flex-row,
  .lg\:flex-row-reverse {
    flex-direction: column !important;
  }
  
  /* ===== GAP FIXES ===== */
  
  /* Reduce large gaps on mobile */
  [class*="gap-[360px]"],
  [class*="lg:gap-[360px]"] {
    gap: 40px !important;
  }
  
  [class*="gap-[60px]"],
  [class*="gap-[80px]"] {
    gap: 32px !important;
  }
  
  [class*="gap-32"],
  [class*="md:gap-32"] {
    gap: 40px !important;
  }
  
  /* ===== TEXT SIZE ADJUSTMENTS ===== */
  
  [class*="text-[32px]"] {
    font-size: 24px !important;
  }
  
  [class*="text-[28px]"] {
    font-size: 22px !important;
  }
  
  [class*="text-[24px]"] {
    font-size: 20px !important;
  }
  
  [class*="text-[22px]"] {
    font-size: 18px !important;
  }
  
  /* ===== PADDING ADJUSTMENTS ===== */
  
  [class*="p-[60"] {
    padding: 24px !important;
  }
  
  [class*="px-[32px]"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  [class*="py-[80px]"],
  [class*="py-[100px]"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* ===== IMAGE FIXES ===== */
  
  /* Ensure images don't overflow */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Fix aspect ratio containers */
  [class*="aspect-[745/534]"] {
    aspect-ratio: auto !important;
    width: 100% !important;
  }
  
  /* ===== NAVIGATION FIXES ===== */
  
  /* Fix header navigation on mobile */
  header nav,
  [class*="fixed"][class*="top-0"] nav {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  /* Reduce nav item spacing */
  header nav a,
  [class*="fixed"][class*="top-0"] nav a {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }
  
  /* ===== BUTTON FIXES ===== */
  
  /* Ensure buttons are touchable */
  button, 
  [role="button"],
  a[class*="bg-"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* ===== CARD/SECTION FIXES ===== */
  
  /* Fix cards that have fixed heights */
  [class*="h-[400px]"],
  [class*="h-[600px]"] {
    height: auto !important;
    min-height: 200px !important;
  }
  
  /* Fix card padding */
  [class*="p-8"],
  [class*="p-12"] {
    padding: 16px !important;
  }
  
  /* ===== DECORATIVE ELEMENT FIXES ===== */
  
  /* Scale down large decorative elements */
  [class*="size-[114"],
  [class*="size-[143"] {
    width: 80% !important;
    height: auto !important;
  }
  
  /* ===== SPECIFIC COMPONENT FIXES ===== */
  
  /* Feature cards - ensure they stack properly */
  [class*="md:grid-cols-2"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  /* Testimonial/Quote sections */
  [class*="max-w-[638px]"],
  [class*="max-w-[641px]"],
  [class*="max-w-[682px]"] {
    max-width: 100% !important;
    padding: 0 16px !important;
  }
  
  /* ===== Z-INDEX MANAGEMENT ===== */
  
  /* Ensure content is above decorative elements */
  [class*="z-50"],
  [class*="z-30"],
  [class*="z-10"] {
    z-index: 10 !important;
  }
  
  /* Push decorative blurs further back */
  [class*="blur"][class*="absolute"] {
    z-index: -1 !important;
  }
}

/* ===== SMALL PHONE FIXES (iPhone SE, etc.) ===== */
@media (max-width: 375px) {
  
  [class*="text-[80px]"],
  [class*="text-\[80px\]"] {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
  
  [class*="text-[120px]"],
  [class*="text-\[120px\]"] {
    font-size: 36px !important;
  }
  
  [class*="text-[32px]"] {
    font-size: 20px !important;
  }
  
  [class*="text-[28px]"] {
    font-size: 18px !important;
  }
  
  [class*="text-[24px]"] {
    font-size: 16px !important;
  }
  
  /* Tighter padding on very small screens */
  [class*="px-4"],
  [class*="px-6"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* Smaller gaps */
  [class*="gap-8"],
  [class*="gap-6"] {
    gap: 16px !important;
  }
}

/* ===== TABLET PORTRAIT FIXES ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  
  /* Allow 2-column grid on tablets */
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Reduce extreme widths */
  [class*="w-[1200px]"],
  [class*="w-[1280px]"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Better text sizing for tablets */
  [class*="text-[80px]"] {
    font-size: 56px !important;
  }
  
  [class*="text-[120px]"] {
    font-size: 80px !important;
  }
}

/* ===== LANDSCAPE MODE FIXES ===== */
@media (max-width: 896px) and (orientation: landscape) {
  
  /* Reduce vertical spacing in landscape */
  [class*="py-[80px]"],
  [class*="py-[100px]"] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  
  [class*="mb-[160px]"],
  [class*="mb-[120px]"] {
    margin-bottom: 40px !important;
  }
  
  /* Allow side-by-side layout in landscape when space permits */
  @media (min-width: 667px) {
    .lg\:flex-row {
      flex-direction: row !important;
    }
    
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
}

/* ===== SAFE AREA INSETS (iPhone X and later) ===== */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  
  /* Fix bottom navigation/footer for notched phones */
  footer,
  [class*="fixed"][class*="bottom-0"] {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}

/* ===== TOUCH AND INTERACTION IMPROVEMENTS ===== */

/* Larger touch targets */
@media (pointer: coarse) {
  a, button, [role="button"], input, select, textarea {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Prevent text selection on interactive elements */
  button, [role="button"] {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ===== REDUCE MOTION FOR ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== PREVENT TEXT OVERFLOW ===== */
h1, h2, h3, h4, h5, h6, p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ===== FIX HORIZONTAL SCROLL ISSUES ===== */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Hide horizontal scrollbar but keep functionality */
.overflow-x-auto::-webkit-scrollbar {
  height: 4px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

/* ===== QUOTE/TESTIMONIAL SECTION FIXES ===== */

/* Quote section container */
[data-quote-section] {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* Mobile quote fixes */
@media (max-width: 767px) {
  [data-quote-section] {
    flex-direction: column !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
}