/* Integration fixes for the Claude Design export — kept separate from the
   design's own tokens.css / mobile.css so they can be reviewed or removed
   on their own. */

/* The desktop canvas is 1720px wide (min-width on #site). Between the mobile
   breakpoint (900px) and 1720px it is scaled down proportionally instead of
   scrolling sideways; --site-zoom is set by the inline script in <head>. */
#site{zoom:var(--site-zoom,1)}

/* Mobile: single-line headlines (white-space:nowrap) must wrap, otherwise
   they are clipped at phone widths. */
@media (max-width:900px){
  #site h1{white-space:normal!important}
}

/* ---------------------------------------------------------------------
   AIES demo embeds on phones and small tablets (desktop is unaffected:
   everything below lives in max-width media queries).

   The demo (aies-demo.html) sizes itself from its own frame width:
   - frame < 700px   → its own mobile layout (machine list, scrolls inside)
   - frame ≥ 700px   → the desktop stage, at least 1200px wide, scaled down,
                        i.e. height ≈ 860/1200 × width
   The embedding iframes use the desktop ratio 1440:860, which is too low
   for both cases on small screens. The frames get the height the demo
   actually needs; the demo itself is not scaled a second time.
   --------------------------------------------------------------------- */
@media (max-width:900px){
  /* 700–900px: desktop stage at 1200px logical width */
  #site iframe[data-hero-demo],
  #site iframe[data-ops-demo]{aspect-ratio:1200/860!important}

  /* Homepage industry picker: compact 3 × 3 instead of nine full-width tiles */
  #site section [data-hero-picker]{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;flex-basis:100%!important}

  /* Demo fullscreen (product page and homepage): the close button sits at the
     bottom so it does not cover the demo header (logo, language switch) */
  [data-demo-shell] > button{top:auto!important;bottom:calc(16px + env(safe-area-inset-bottom))!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important}
}

/* Below ~750px viewport the frames are narrower than 700px, so the demo shows
   its mobile layout: fixed preview height, the demo scrolls inside. */
@media (max-width:749px){
  #site iframe[data-hero-demo],
  #site iframe[data-ops-demo]{aspect-ratio:auto!important;height:min(620px,calc(100vh - 140px))!important;height:min(620px,calc(100svh - 140px))!important}
}

/* Demo fullscreen (shell switched to position:fixed), portrait:
   the frame fills the screen again, no preview height / ratio from above.
   (Landscape keeps the ratio-limited, centred frame.) */
@media (max-width:900px) and (orientation:portrait){
  #site [data-demo-shell][style*="fixed"] > iframe[data-ops-demo],
  #site [data-demo-shell][style*="fixed"] > iframe[data-hero-demo]{aspect-ratio:auto!important;width:100%!important;height:100%!important;max-width:100%!important}
}