/* ============================================================
   LAUNCH MULE - MOBILE RESPONSIVENESS FIX
   Applied globally across all pages
   ============================================================ */

/* --- FEATURED-IN CAROUSEL: Seamless, gapless scrolling --- */
.featured-in-carousel {
  display: flex !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: fit-content;
  animation: scroll-featured-in 25s linear infinite;
}

.featured-in-carousel img {
  height: 40px !important;
  width: auto !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.featured-in-carousel:hover {
  animation-play-state: paused;
}

@keyframes scroll-featured-in {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

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

/* --- MOBILE MENU: Ensure it appears above ALL content --- */
.mobile-menu {
  z-index: 9999 !important;
}

.mobile-menu.active {
  display: block !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* --- IMAGES: Prevent any image from breaking layout --- */
img {
  max-width: 100%;
  height: auto;
}

/* --- NAV LOGO: Ensure background matches nav white --- */
nav a img {
  mix-blend-mode: multiply;
  background: #ffffff;
}

/* ============================================================
   MOBILE STYLES (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
  
  /* --- NAVIGATION --- */
  nav a img {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    /* Ensure logo background blends with nav white */
    mix-blend-mode: multiply;
    background: #ffffff !important;
  }
  
  nav .py-4 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Mobile menu top offset fix for smaller nav */
  .mobile-menu {
    top: 60px !important;
  }

  /* --- HERO SECTION --- */
  .hero-section {
    min-height: auto !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Fix whitespace-nowrap causing overflow on headings only */
  .hero-section h1 span,
  h1 .whitespace-nowrap,
  h1 span.block.whitespace-nowrap,
  h2 .whitespace-nowrap,
  h3 .whitespace-nowrap,
  section > div > h1 .whitespace-nowrap {
    white-space: normal !important;
    word-wrap: break-word;
  }
  
  /* Allow horizontal scrollable filter bars to work properly */
  .flex.gap-4.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .flex.gap-4.overflow-x-auto::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  /* Scale down hero heading on small screens */
  .hero-section h1,
  section h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  .hero-section p {
    font-size: 1rem !important;
  }

  /* Hero validation box */
  .hero-section .bg-white.rounded-2xl {
    padding: 1.25rem !important;
  }

  .hero-section .mt-12 {
    margin-top: 1.5rem !important;
  }

  /* --- SECTION HEADINGS --- */
  section h2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }

  /* Large text scaling */
  .text-5xl {
    font-size: 2rem !important;
  }
  
  .text-6xl {
    font-size: 2.25rem !important;
  }
  
  .text-7xl {
    font-size: 2.5rem !important;
  }

  .text-4xl {
    font-size: 1.75rem !important;
  }

  .text-3xl {
    font-size: 1.5rem !important;
  }

  .text-2xl {
    font-size: 1.25rem !important;
  }

  /* --- SECTION PADDING --- */
  .py-16 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* --- TESTIMONIAL CAROUSEL: KEY FIX --- */
  /* Testimonial cards: prevent over-shrinking, ensure readable on mobile */
  .testimonial-track {
    gap: 1rem !important;
  }

  .testimonial-track > div,
  .testimonial-scroll .testimonial-track > div {
    width: 88vw !important;
    min-width: 88vw !important;
    max-width: 88vw !important;
    padding: 1.25rem !important;
    flex-shrink: 0 !important;
    font-size: 1rem !important;
  }

  .testimonial-track > div p,
  .testimonial-scroll .testimonial-track > div p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  .testimonial-track > div img {
    width: 48px !important;
    height: 48px !important;
  }

  /* --- LOGO CAROUSELS: Keep logos visible and readable --- */
  .logo-track img,
  .logo-track-rtl img {
    height: 80px !important;
    min-height: 80px !important;
    min-width: 120px !important;
    object-fit: contain !important;
  }

  .logo-track,
  .logo-track-rtl {
    gap: 1.5rem !important;
  }

  /* Featured-in banner images - PREVENT SHRINKING */
  .logo-scroll .logo-track img,
  .logo-track.featured-in-carousel img,
  .featured-in-carousel img {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    min-width: 220px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  /* Business logo carousel - keep readable */
  .logo-scroll .logo-track-rtl img {
    height: 80px !important;
    min-height: 80px !important;
    max-height: none !important;
    min-width: 120px !important;
    object-fit: contain !important;
  }

  /* --- FEATURED IN IMAGE CAROUSEL --- */
  .carousel-image {
    height: 60px !important;
    min-height: 60px !important;
  }

  /* Featured-in-carousel specific */
  .featured-in-carousel {
    gap: 2rem !important;
  }

  .featured-in-carousel img {
    height: 60px !important;
    max-height: 60px !important;
    min-width: 220px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  /* --- PAGINATED CAROUSEL SLIDES (industry pages) --- */
  .carousel-container {
    overflow: visible !important;
    padding: 0 !important;
  }

  .carousel-slide {
    padding: 0 4px !important;
    min-width: 100% !important;
  }

  .carousel-slide > div,
  .carousel-slide .bg-white {
    padding: 1rem !important;
    font-size: 0.95rem !important;
  }

  .carousel-slide h3,
  .carousel-slide h4 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }

  .carousel-slide p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  /* Generic scrolling flex containers that act as carousels */
  .overflow-hidden > .flex[style*="animation"],
  .overflow-hidden > div[style*="animation"] {
    gap: 1.5rem !important;
  }

  .overflow-hidden > .flex[style*="animation"] > div,
  .overflow-hidden > div[style*="animation"] > div {
    flex-shrink: 0 !important;
    min-width: 280px !important;
  }

  /* Any flex-shrink-0 card inside overflow containers */
  .overflow-hidden .flex-shrink-0 {
    min-width: 280px !important;
  }

  /* General h-10 images in scrolling sections (featured-in banners) */
  section.overflow-hidden img.h-10,
  .overflow-hidden .h-10 {
    height: 56px !important;
    min-height: 56px !important;
    min-width: 180px !important;
    object-fit: contain !important;
  }

  /* --- STAT CARDS --- */
  .stat-card {
    padding: 1.25rem !important;
  }

  .stat-card .text-5xl {
    font-size: 2.5rem !important;
  }

  /* --- GRID LAYOUTS: Stack on mobile --- */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-1.md\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Two-column grid on mobile for stat cards */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Report pages: grid-cols-2 md:grid-cols-4 — keep 2 col but tighter */
  .grid.grid-cols-2.md\:grid-cols-4 {
    gap: 0.5rem !important;
  }
  
  .grid.grid-cols-2.md\:grid-cols-4 > div {
    padding: 0.75rem !important;
  }

  /* Calculator two-col grids */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* --- FORMS --- */
  form input,
  form select,
  form textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
  }

  form button {
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
  }

  /* --- PRICING CARDS --- */
  .pricing-card,
  [class*="border-green"] .p-8,
  section .bg-white.rounded-2xl.p-8 {
    padding: 1.25rem !important;
  }

  /* --- FEATURE CARDS --- */
  section .bg-white.rounded-xl.p-8 {
    padding: 1.25rem !important;
  }

  /* --- FOOTER --- */
  footer .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }

  footer .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* --- TABLES: Ensure scrollable on mobile --- */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- COMPARISON CHART TABLE --- */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* --- BUTTONS --- */
  .inline-block.px-12 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* CTA buttons */
  a[class*="px-12"],
  button[class*="px-12"] {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    font-size: 1.1rem !important;
  }

  /* --- BLOG / CONTENT PAGES --- */
  .max-w-4xl,
  .max-w-3xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Blog post content */
  article p,
  .prose p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  /* --- CALCULATOR PAGES --- */
  /* Result panels */
  .bg-gradient-to-br.rounded-xl.p-8,
  .bg-white.rounded-xl.p-8.shadow-lg {
    padding: 1rem !important;
  }

  /* Calculator inputs */
  input[type="number"],
  input[type="range"] {
    width: 100% !important;
  }

  /* --- INDUSTRY PAGES --- */
  /* Idea grid cards */
  .bg-white.rounded-xl.p-6 {
    padding: 1rem !important;
  }

  /* --- IDEAS PAGE --- */
  /* Search/filter bar - only wrap if not horizontally scrollable */
  .flex.gap-4:not(.overflow-x-auto) {
    flex-wrap: wrap;
  }

  /* Ensure horizontal scroll filter bars work correctly */
  .flex.gap-4.overflow-x-auto {
    flex-wrap: nowrap !important;
  }

  /* --- REPORT PAGES --- */
  .report-section,
  .bg-white.rounded-xl.p-6.shadow-md {
    padding: 1rem !important;
  }

  /* --- FAQ ACCORDIONS --- */
  details summary {
    font-size: 1rem !important;
    padding: 0.75rem !important;
  }

  details .p-6 {
    padding: 0.75rem !important;
  }

  /* --- DROPDOWN CONTENT (ensure not clipped) --- */
  .dropdown-content {
    min-width: 220px !important;
  }

  /* --- GAP REDUCTIONS on mobile --- */
  .gap-12 {
    gap: 1.5rem !important;
  }

  .gap-8 {
    gap: 1rem !important;
  }

  /* --- MAX-WIDTH containers --- */
  .max-w-6xl,
  .max-w-4xl,
  .max-w-3xl {
    max-width: 100% !important;
  }

  /* --- MISC OVERFLOW FIXES --- */
  section {
    overflow-x: hidden;
  }

  /* Fix any absolutely positioned elements from causing overflow */
  .relative {
    overflow: visible;
  }

  /* Horizontal scroll containers */
  .overflow-hidden {
    overflow: hidden !important;
  }
  /* --- PAGINATED CAROUSEL BUTTONS (industry-fintech, industry-food) --- */
  .carousel-button {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }

  .carousel-button.prev {
    left: 6px !important;
  }

  .carousel-button.next {
    right: 6px !important;
  }

  .carousel-slide {
    padding: 0 8px !important;
  }

  .carousel-dots {
    gap: 8px !important;
    margin-top: 16px !important;
  }

  .carousel-dot {
    width: 10px !important;
    height: 10px !important;
  }
}

/* ============================================================
   SMALL PHONE STYLES (max-width: 374px) — iPhone SE, etc.
   ============================================================ */
@media (max-width: 374px) {
  
  .hero-section h1,
  section h1 {
    font-size: 1.65rem !important;
  }

  section h2 {
    font-size: 1.4rem !important;
  }

  .text-5xl {
    font-size: 1.75rem !important;
  }

  /* Testimonial cards: slightly narrower but still readable */
  .testimonial-track > div,
  .testimonial-scroll .testimonial-track > div {
    width: 92vw !important;
    min-width: 92vw !important;
    max-width: 92vw !important;
    padding: 1rem !important;
  }

  .testimonial-track > div p,
  .testimonial-scroll .testimonial-track > div p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  /* Featured-in images on small phones */
  .featured-in-carousel img,
  .logo-track.featured-in-carousel img {
    height: 50px !important;
    min-height: 50px !important;
    min-width: 180px !important;
  }

  /* Footer: single column on very small screens */
  footer .grid {
    grid-template-columns: 1fr !important;
  }

  /* Stat cards: single column on very small screens */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   TABLET STYLES (768px - 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  
  .testimonial-track > div {
    width: 340px !important;
    min-width: 340px !important;
  }

  .logo-track img,
  .logo-track-rtl img {
    height: 72px !important;
  }
  
  /* Ensure hero text doesn't overflow on narrow tablets */
  .hero-section h1 span.whitespace-nowrap {
    white-space: normal !important;
  }
}