/* ===============================
   Responsive Overrides for TOPO project
   - Hide Lottie on mobile
   - Make JS-animated elements fit on small screens
   - Keep desktop behavior intact
   =============================== */

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* Stop pulsing CTA */
  .pulse-cta::before,
  .pulse-cta::after { animation: none !important; }
  /* Turn off long transitions */
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media (min-width: 1201px) {
  #lottie {
    top: 48%;
    left: 50%;
  }
}


@media (max-width: 1200px) {
  #lottie {
    top: 45%;
    left: 60%;
  }
}

/* Mobile-first fixes */
@media (max-width: 768px) {

  /* 1) Remove Lottie canvases on mobile */
  #lottie {
    display: none !important;
    visibility: hidden !important;
  }

  .home-hero-image-container {
    display: none;
  }

  .home-hero {
    margin-top: 0;
    justify-content: flex-start;
  }

  .placeholder_hero {
    height: 10vh;                     /* was 10vh, now matches index.css change */
  }

  .hero {
    height: auto !important;                     /* was 100vh, now fits content */
    padding-top: 40px;
    padding-bottom: 40px;
    align-items: stretch;
  }

  .hero-background-image-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -2 !important;
  }

  /* 2) Replace Lottie hero with the timeline ("How it works") */
  #how-it-works {
    display: block !important;       /* product/product.css sets this to none by default */
  }

  /* 3) Ensure cards that rely on IntersectionObserver are visible */
  .problem-card {
    opacity: 1 !important;           /* was 0 initially until .in-view gets added */
    transform: none !important;
  }

  /* 5) Timeline layout guards (in case base CSS misses something) */
  .timeline-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .timeline-step {
    width: 100% !important;
    height: auto;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    text-align: center !important;
    display: flex !important;
    align-items:  center !important;
  }
  .timeline-number {
    margin: 0 !important;
    min-width: 50px !important;
  }

  .timeline-content {
    text-align: left !important;
    margin-left: 16px !important;
  }

  /* 6) General container paddings on small screens */
  .hero,
  .product-container,
  .benefits,
  .features,
  .problems,
  .contact,
  .partners {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 7) Headings wrap */
  h1, h2, h3 {
    word-break: normal;
    overflow-wrap: anywhere;
  }

    /* Make the inner containers flow naturally */
  .home-hero-image-container,
  .home-hero-video-container {
    position: static !important;
    height: auto !important;
    padding: 0 16px !important;
  }

  /* The big demo image/video shouldn't force huge height */
  .home-hero-image,
  .home-hero-video {
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }

  /* Ensure timeline sits below hero content, not over it */
  #how-it-works {
    position: static !important;
    margin-top: 24px !important;
    z-index: 1 !important;
    padding: 0 !important;
  }

  /* Remove any negative stacking contexts in hero */
  .hero,
  .home-hero,
  .home-hero-content {
    z-index: auto !important;
  }

  /* The background container should not cover content */
  .hero-background-image-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -2 !important;
  }

  /* Optional: neutralize the placeholder to avoid double spacing */
  .placeholder_hero { height: 0 !important; }

  .page-container {
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* Extra small tweaks */
@media (max-width: 480px) {
  .pulse-cta { --btn-size: 100px; }


}

/* Navbar mobile fixes */
.navbar {
  padding: 12px 8px;
}

.logo img {
  height: 26px;
}

.nav-container {
  padding: 6px 12px;
}

/* ============================
   Product Page – Mobile Styles
   (scoped auf #product)
   ============================ */
@media (max-width: 768px) {

  /* Hero auf natürliche Höhe bringen (ohne globale .page-hero anzutasten) */
  #product .page-hero {
    height: auto !important;
    padding-top: 40px;         /* Platz für fixed Navbar */
    padding-bottom: 24px;
    align-items: flex-start;   /* Text nach oben statt mittig */
    overflow: visible;         /* Anim/Media dürfen nicht abschneiden */
  }

  /* Spezifische Produkt-Hero-Feinschliff */
  #product .product-page-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 32px;       /* kleiner als Desktop */
    gap: 16px;
  }

  /* Lottie mobil ausblenden (nur Produktseite) */
  /* #product #product-page-lottie {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
  } */

  /* Typo/Zeilenlänge im Hero */
  #product .product-page-hero .hero-content {
    max-width: none;           /* volle Breite auf Mobile */
    text-align: left;
  }

  #product .product-page-hero .section-heading {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -0.2px;
    margin-bottom: 12px;
  }

  #product .product-page-hero p {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 20px;
  }

  /* Buttons im Hero (nur auf der Produktseite) */
  #product .product-page-hero .page-hero-btn,
  #product .product-page-hero .page-hero-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 44px;          /* bessere Touch-Targets */
    padding: 10px 16px;
    margin-left: 0;            /* Stack ohne seitlichen Versatz */
  }

  #product .product-page-hero .page-hero-btn + .page-hero-btn,
  #product .product-page-hero .page-hero-btn + .page-hero-btn-outline,
  #product .product-page-hero .page-hero-btn-outline + .page-hero-btn {
    margin-top: 10px;          /* untereinander statt nebeneinander */
  }

  /* Falls in deinen Styles irgendwo overflow: hidden sitzt */
  #product .product-page-hero * {
    max-width: 100%;
  }
}


/* Laptop – soft overlap */
@media (max-width:1440px){
  .tk-hero{padding-bottom:8rem}
  .tk-tiles{position:absolute;bottom:-.75rem;left:50%;transform:translateX(-50%)}
  .tk-tiles__wrapper{gap:1rem}
  .tk-tile{min-width:170px;padding:1.25rem}
}

/* Tablet – no overlap + rail scroll */
@media (max-width:1024px){
  .tk-hero{padding-bottom:0;flex-direction:column}
  .tk-hero__content{padding:2rem;text-align:center}
  .tk-hero__title{font-size:2.5rem}
  .tk-hero__image{min-height:50vh}
  .tk-tiles{position:static;transform:none;margin:1.5rem auto 0}
  .tk-tiles__wrapper{flex-direction:row;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:1rem;padding:.75rem 1rem}
  .tk-tile{min-width:240px}
}

@media (max-width: 375px) {
  .tk-hero__title{font-size: 30px;}
  .tk-hero__buttons{margin-top: 0;}
  .tk-hero__content{align-items: center;}
  .tk-hero__subtitle{text-align: center;}
}