/* ==========================================================================
 * Demo Embed — styles for embedding the demo inside the hero section
 * and fullpage overlay mode.
 * ========================================================================== */

/* ---------- JS scroll-lock class (iOS scroll-through fix) ---------- 
html.demo-scroll-locked,
html.demo-scroll-locked body {
  overflow: hidden !important;
  height: 100%;
}

html.demo-scroll-locked body {
  position: fixed;
  width: 100%;
} */

/* ---------- Hero layout: title on top, demo below ---------- */
.hero--demo-layout {
  padding: 3.5rem 0 1.5rem;
}

.hero--demo-layout .hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-text--centered {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero--demo-layout .hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--gray-800) 0%, var(--primary-green-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hide title line break on desktop — title stays on one line */
.hero-title-break {
  display: none;
}

.hero--demo-layout .hero-description {
  font-size: 1.125rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.hero--demo-layout .hero-visual {
  width: 100%;
  position: relative;
}

/* ---------- Embedded demo inside hero ---------- */
.demo-section--embedded {
  padding: 0;
  min-height: auto;
}

.demo-section--embedded .demo-mockup {
  max-width: none;
  border-radius: 0.75rem;
}

/* Move variant switch to the left (normal flex flow, not absolute) */
.demo-section--embedded .demo-variant-switch {
  position: static;
  transform: none;
  margin-left: 8px;
}

/* ---------- Fullpage toggle button ---------- */
.demo-fullpage-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  background: var(--white);
  color: var(--gray-600);
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.demo-fullpage-toggle:hover {
  background: var(--gray-100);
  color: var(--gray-800);
  transform: scale(1.05);
}

/* ---------- Fullpage overlay mode ---------- */

/* Elevate the hero-content stacking context above header (z-index: 1000) */
.hero-content:has(#demo-embed-wrapper.demo-fullpage-active) {
  z-index: 10000;
}

#demo-embed-wrapper.demo-fullpage-active {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #1e293b;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
}

/* Fullpage toggle becomes a close button inside the title bar */
#demo-embed-wrapper.demo-fullpage-active .demo-fullpage-toggle {
  position: absolute;
  top: 6px;
  right: 12px;
  z-index: 10001;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-800);
  color: var(--white);
  border: none;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

#demo-embed-wrapper.demo-fullpage-active .demo-fullpage-toggle:hover {
  background: var(--gray-700);
  color: var(--white);
}

/* Fullpage section fills screen */
#demo-embed-wrapper.demo-fullpage-active .demo-section--embedded {
  flex: 1;
  min-height: 0; /* prevent min-height: auto from overflowing the 100vh wrapper */
  display: flex;
  align-items: stretch;
}

/* Desktop mockup fills available space */
#demo-embed-wrapper.demo-fullpage-active .demo-mockup--desktop {
  max-width: none;
  width: 100%;
  min-height: 0; /* prevent min-height: auto from overflowing wrapper */
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

#demo-embed-wrapper.demo-fullpage-active .demo-mockup__body {
  flex: 1;
  min-height: 0; /* critical: lets flex size this item, giving the inner grid a definite height so 1fr resolves correctly and scroll containers work */
  overflow: hidden;
}

/* Mobile mockup fills in fullpage (only when not hidden by JS) */
#demo-embed-wrapper.demo-fullpage-active .demo-mockup--mobile:not([hidden]) {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#demo-embed-wrapper.demo-fullpage-active .demo-phone {
  max-width: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#demo-embed-wrapper.demo-fullpage-active .demo-phone__body {
  flex: 1;
  height: auto;
}

/* ---------- Mobile "See Demo" CTA button ---------- */
.demo-mobile-cta {
  display: none;
  padding: 2.5rem 0;
}

/* ---------- Mobile viewport: show CTA, hide embedded demo ---------- */
/* Foldable phones (Samsung Z Fold unfolded landscape ≈832–841px) */
@media (pointer: coarse) and (max-width: 884px) and (min-width: 769px) {
  .hero-title-break {
    display: block;
  }

  .demo-mobile-cta {
    display: flex;
    justify-content: center;
  }

  #demo-embed-wrapper:not(.demo-fullpage-active) {
    display: none;
  }

  html:has(#demo-embed-wrapper.demo-fullpage-active),
  body:has(#demo-embed-wrapper.demo-fullpage-active) {
    overflow: hidden !important;
    height: 100%;
  }

  body:has(#demo-embed-wrapper.demo-fullpage-active) {
    position: fixed;
    width: 100%;
  }

  body:has(#demo-embed-wrapper.demo-fullpage-active) .header {
    display: none;
  }

  .hero-content:has(#demo-embed-wrapper.demo-fullpage-active) {
    z-index: 10000;
  }

  #demo-embed-wrapper.demo-fullpage-active {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #1e293b;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #demo-embed-wrapper.demo-fullpage-active .demo-section--embedded {
    flex: 1;
    display: flex;
    align-items: stretch;
  }

  #demo-embed-wrapper.demo-fullpage-active .demo-mockup--mobile {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  #demo-embed-wrapper.demo-fullpage-active .demo-phone {
    max-width: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  #demo-embed-wrapper.demo-fullpage-active .demo-phone__statusbar {
    display: none;
  }

  #demo-embed-wrapper.demo-fullpage-active .demo-phone__body {
    flex: 1;
    height: auto;
  }

  #demo-embed-wrapper.demo-fullpage-active .demo-fullpage-toggle {
    display: none;
  }

  /* Show the phone toolbar (close + A/B) in fullscreen mode */
  #demo-embed-wrapper.demo-fullpage-active .demo-phone__toolbar {
    display: flex;
  }

  #demo-embed-wrapper:not(.demo-fullpage-active) .demo-fullpage-toggle {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Show title line break on mobile — two lines */
  .hero-title-break {
    display: block;
  }

  /* Show the "See Demo" button on mobile */
  .demo-mobile-cta {
    display: flex;
    justify-content: center;
  }

  /* Hide embedded demo on mobile — launched via CTA instead */
  #demo-embed-wrapper:not(.demo-fullpage-active) {
    display: none;
  }

  /* Lock scroll on html+body when fullscreen demo is active (iOS fix) */
  html:has(#demo-embed-wrapper.demo-fullpage-active),
  body:has(#demo-embed-wrapper.demo-fullpage-active) {
    overflow: hidden !important;
    height: 100%;
  }

  body:has(#demo-embed-wrapper.demo-fullpage-active) {
    position: fixed;
    width: 100%;
  }

  /* Hide header when fullscreen demo is active */
  body:has(#demo-embed-wrapper.demo-fullpage-active) .header {
    display: none;
  }

  /* Elevate stacking context when fullscreen demo is active */
  .hero-content:has(#demo-embed-wrapper.demo-fullpage-active) {
    z-index: 10000;
  }

  #demo-embed-wrapper.demo-fullpage-active {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #1e293b;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #demo-embed-wrapper.demo-fullpage-active .demo-section--embedded {
    flex: 1;
    display: flex;
    align-items: stretch;
  }

  #demo-embed-wrapper.demo-fullpage-active .demo-mockup--mobile {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  #demo-embed-wrapper.demo-fullpage-active .demo-phone {
    max-width: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Remove phone status bar on real mobile (battery/signal is real) */
  #demo-embed-wrapper.demo-fullpage-active .demo-phone__statusbar {
    display: none;
  }

  #demo-embed-wrapper.demo-fullpage-active .demo-phone__body {
    flex: 1;
    height: auto;
  }

  /* Show close button in fullscreen mode on mobile — hidden, replaced by toolbar close */
  #demo-embed-wrapper.demo-fullpage-active .demo-fullpage-toggle {
    display: none;
  }

  /* Show the phone toolbar (close + A/B) in fullscreen mode */
  #demo-embed-wrapper.demo-fullpage-active .demo-phone__toolbar {
    display: flex;
  }

  /* Hide fullpage toggle when NOT in fullscreen on mobile */
  #demo-embed-wrapper:not(.demo-fullpage-active) .demo-fullpage-toggle {
    display: none;
  }
}