/* static/css/parallax.mobile.css */
/* iOS/Android safe behavior with orientation fixes */

html, body, #snapper{ 
  overflow-x: hidden !important; 
  overflow-y: auto !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  -webkit-overflow-scrolling: touch !important;
}

#snapper{ 
  scroll-snap-type: y mandatory !important; 
  -webkit-overflow-scrolling: touch !important;
}

.scene{ 
  scroll-snap-align: start !important; 
  scroll-snap-stop: always !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  /* scene is one nav shorter than viewport on mobile too */
  min-height: calc(100svh - var(--top-nav-height)) !important;
  height: auto !important;
}


/* Force all layers to stay within viewport */
.scene .layers,
.scene .layer,
.scene .bg-grad {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translate3d(0,0,0);
}

/* Prevent any horizontal parallax from causing overflow */
.scene .layer[data-axis="x"]{ 
  transform: translate3d(0,0,0) !important; 
}

/* ADAPTIVE CONTENT THAT FITS VIEWPORT */
.hero-inner{
  margin-left: clamp(16px, 4vw, 28px);
  margin-right: clamp(16px, 4vw, 28px);
  padding: max(40px, 8vh) 0 max(20px, 4vh) !important;
  width: calc(100% - clamp(16px, 4vw, 28px) * 2) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: auto !important;
  height: auto !important;
}

/* ORIENTATION-SPECIFIC FIXES */
@media (max-width: 768px) and (orientation: portrait) {
  .scene {
    min-height: 100svh !important;
    height: 100svh !important;
  }
  
  .hero-inner {
    padding: 2rem 0 !important;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .scene {
    min-height: 100svh !important;
    height: auto !important;
  }
  
  .hero-inner {
    padding: 1.5rem 0 !important;
    width: calc(100% - 2rem) !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
}

/* SCALABLE TYPOGRAPHY THAT ADJUSTS TO VIEWPORT HEIGHT */
.hero-inner h1 {
  font-size: clamp(1.8rem, 6vh, 2.6rem) !important;
  line-height: 1.1 !important;
  margin-bottom: clamp(0.5rem, 2vh, 1rem) !important;
}

.hero-inner h2 {
  font-size: clamp(1.4rem, 5vh, 2.2rem) !important;
  line-height: 1.2 !important;
  margin-bottom: clamp(0.5rem, 2vh, 1rem) !important;
}

.hero-inner p {
  font-size: clamp(0.95rem, 2.5vh, 1.05rem) !important;
  line-height: 1.4 !important;
  margin-bottom: clamp(0.5rem, 1.5vh, 0.8rem) !important;
}

/* COMPACT LAYOUT FOR CONTENT-RICH SLIDES */
.hero-inner .pitch,
.hero-inner .cta-row {
  margin-top: clamp(0.5rem, 2vh, 1rem) !important;
}

.hero-inner .pitch li {
  font-size: clamp(0.85rem, 2vh, 0.95rem) !important;
  line-height: 1.3 !important;
  margin-bottom: clamp(0.3rem, 1vh, 0.5rem) !important;
}

/* Ensure content never overflows */
.hero-inner h1,
.hero-inner h2,
.hero-inner p,
.hero-inner div {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* Decoration layers always behind text */
.scene .layers,
.scene .layer,
.scene .bg-grad{ z-index: 0; }
.scene .hero-inner{ z-index: 10; position: relative; }

/* Nuclear option for any rogue elements */
.scene * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* SPECIFIC FIX FOR SLIDE 06 (CONTENT-RICH SLIDE) */
.scene[data-scene="growth"] .hero-inner {
  padding-top: max(30px, 6vh) !important;
  padding-bottom: max(15px, 3vh) !important;
}

.scene[data-scene="growth"] .pitch {
  margin: clamp(0.5rem, 1.5vh, 1rem) 0 !important;
  padding-left: 0 !important;
}

.scene[data-scene="growth"] .cta-row {
  margin-top: clamp(0.5rem, 2vh, 1rem) !important;
  gap: clamp(8px, 1.5vh, 12px) !important;
}

/* FIX BACKGROUND IMAGE CUTOFF ON LAST SLIDE */
.scene[data-scene="growth"] .bg-img {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 100% !important;
  height: 100% !important;
}

/* Ensure background layers extend fully on taller slides */
.scene .layer.bg-img {
  background-size: cover !important;
  background-position: center center !important;
  min-height: 100% !important;
  height: 100% !important;
}

/* Allow scenes to grow taller if needed but maintain snap */
.scene.tall-content {
  min-height: 100svh !important;
  height: auto !important;
}


/* INSTEAD, add this targeted fix: */
@media (max-width: 768px) and (orientation: portrait) {
  .scene[data-scene="growth"] {
    background-color: #f7f7f7 !important; /* Prevent white bar */
  }
}