/* 
 * iOS Safari Mobile Layout Fixes
 * Addresses text scaling, overflow, and card sizing issues specific to iOS Safari
 * Only applies to mobile viewports (max-width: 767px)
 */

/* Speed up Webflow scroll animations - start fully visible, near-instant animation */
html.w-mod-js:not(.w-mod-ix) [data-w-id] {
  opacity: 0.95 !important;
  transform: translate3d(0, 1px, 0) !important;
}

/* Near-instant animation duration */
[data-w-id] {
  transition-duration: 0.06s !important;
  transition-timing-function: ease-out !important;
}

@media screen and (max-width: 767px) {
  /* Prevent iOS Safari text auto-inflation/scaling - this is the primary fix */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Reduce section spacing on mobile */
  .section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .section.small {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Reduce margin utilities on mobile */
  .mg-bottom-40px {
    margin-bottom: 24px !important;
  }

  .mg-bottom-48px {
    margin-bottom: 28px !important;
  }

  .mg-bottom-56px {
    margin-bottom: 32px !important;
  }

  .mg-bottom-64px {
    margin-bottom: 36px !important;
  }

  .mg-bottom-32px {
    margin-bottom: 20px !important;
  }

  /* Reduce top margins */
  .mg-top-48px {
    margin-top: 28px !important;
  }

  .mg-top-56px {
    margin-top: 32px !important;
  }

  /* Ensure cards stay within viewport bounds */
  .card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* Grid containers must also respect viewport */
  .w-layout-grid,
  .grid-3-columns,
  .features-3-col-grid {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .card.feature-card-bg-gradient,
  .card.feature-card-bg-gradient.v2 {
    min-height: auto !important;
    height: auto !important;
    padding: 40px 24px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Remove the faded background pattern/image on mobile - keep just the gradient */
  .card.feature-card-bg-gradient {
    background-image: linear-gradient(135deg, #6ac9ff 4%, #819dff 51%, #a55dff 98%) !important;
  }

  .card.feature-card-bg-gradient.v2 {
    background-image: linear-gradient(135deg, #ffba6a 4%, #ff69de 98%) !important;
  }

  /* FIX: The feature-card-title is 80-140px by default - way too large for mobile */
  .card.feature-card-bg-gradient .feature-card-title,
  .card.feature-card-bg-gradient.v2 .feature-card-title {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.2em !important;
    letter-spacing: -0.02em !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  .card.feature-card-bg-gradient---v2,
  .card.feature-card-bg-gradient---v2.v2 {
    min-height: auto !important;
    height: auto !important;
  }

  .card.sticky-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .card.use-case-card,
  .card.use-case-card.top-right {
    min-height: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Text inside cards - ensure proper wrapping */
  .display-1,
  .display-1.text-center,
  .display-2,
  .display-3,
  .display-4 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* Responsive sizing for gradient card text */
  .card.feature-card-bg-gradient .display-3,
  .card.feature-card-bg-gradient.v2 .display-3 {
    font-size: clamp(18px, 4.5vw, 24px) !important;
    line-height: 1.35em !important;
    max-width: 100% !important;
  }

  /* Inner containers */
  .inner-container,
  .text-shadow-01 {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Tighten sticky card container spacing */
  .sticky-cards-container {
    gap: 24px !important;
  }

  .card-wrapper {
    margin-bottom: 24px !important;
  }
}

/* Fixes for smaller mobile screens (phones under 480px) */
@media screen and (max-width: 479px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Even tighter section spacing on phones */
  .section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .section.small {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* Gradient cards - balanced padding */
  .card.feature-card-bg-gradient,
  .card.feature-card-bg-gradient.v2 {
    padding: 32px 20px !important;
  }

  /* Feature card titles - even smaller on phones */
  .card.feature-card-bg-gradient .feature-card-title,
  .card.feature-card-bg-gradient.v2 .feature-card-title {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.15em !important;
  }

  /* Responsive text for gradient cards */
  .card.feature-card-bg-gradient .display-3,
  .card.feature-card-bg-gradient.v2 .display-3 {
    font-size: clamp(16px, 4vw, 20px) !important;
    line-height: 1.4em !important;
  }

  /* Keep cards vertically centered */
  .card.feature-card-bg-gradient,
  .card.feature-card-bg-gradient.v2,
  .card.feature-card-bg-gradient---v2 {
    justify-content: center !important;
    align-items: center !important;
  }

  /* Allow use case cards to size to content */
  .card.use-case-card,
  .card.use-case-card.top-right {
    min-height: auto !important;
    height: auto !important;
  }
}