/* Mobile layout fixes — prevents horizontal scroll + improves mobile UX */

/* Global: prevent any element from causing horizontal scroll */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Ensure all main containers stay within viewport */
body > * {
  max-width: 100%;
}

/* Images never overflow */
img, video, svg, iframe {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  /* Preloader — must stay within viewport */
  .preloader,
  .preloader__ring,
  .preloader__rings {
    max-width: 100vw;
    overflow: hidden;
  }
  .preloader__ring {
    width: min(480px, 90vw) !important;
    height: min(480px, 90vw) !important;
  }

  /* Marquee — confine scrolling track within viewport */
  .marquee,
  .marquee__inner,
  [class*="marquee"] {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
  .marquee__track {
    will-change: transform;
  }

  /* Sections — clip any outgrowth (exclude nav to avoid trapping fixed menu) */
  section, .section, main, header, footer {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Mobile fullscreen menu — must cover full viewport */
  .nav__mobile.open,
  .nav-v4__mobile.open,
  [class*="mobile"][class*="open"] {
    height: calc(100vh - 65px) !important;
    min-height: calc(100dvh - 65px) !important;
    overflow-y: auto !important;
    justify-content: center !important;
  }

  /* Container padding so content never touches edges */
  .container, .wrap, .wrapper, [class*="container"] {
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
  }

  /* Headlines sizing */
  h1 { font-size: clamp(2rem, 9vw, 3rem) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(1.65rem, 6.5vw, 2.5rem) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(1.2rem, 4.5vw, 1.6rem) !important; }

  /* Buttons: full-width for primary CTA on small screens */
  .btn, button.btn, a.btn, .cta, [class*="btn-primary"] {
    max-width: 100%;
  }

  /* Grid fallback: stack columns on mobile */
  [class*="grid-cols"], [class*="col-"] {
    grid-template-columns: 1fr !important;
  }

  /* Tables — scrollable container */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Cards have edge-to-edge breathing room */
  .card, .service-card, .testimonial, .benefit {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Hide any wide decorative elements that cause overflow */
  [class*="decoration"], [class*="shape-"], [class*="blur-circle"] {
    max-width: 100vw;
    overflow: hidden;
  }

  /* Nav on mobile — ensure inner wraps */
  .nav__inner, .nav-v4__inner {
    max-width: 100vw !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box;
  }

  /* Chat widget — stay within viewport */
  #bauvia-chat-widget,
  .bauvia-chat,
  [class*="chat-widget"] {
    max-width: calc(100vw - 2rem) !important;
    right: 1rem !important;
  }
}

/* Extra-narrow (iPhone SE etc.) */
@media (max-width: 380px) {
  body { font-size: 0.95rem; }
  h1 { font-size: 1.85rem !important; }
  .container, .wrap, .wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}