/* HUMENAI HAB 0.7.2 — screen-fit for internal pages.
 * Each major section becomes a viewport-height spread.
 * Natural vertical scroll when content overflows. */

:root{
  --screen-min:100dvh;
  --screen-pad-top:clamp(70px,10vh,110px);
  --screen-pad-bottom:clamp(40px,6vh,80px);
}

/* Internal pages with .h-section sections (projects, ecosystem, sol, luna) */
.h-section{
  min-height:var(--screen-min);
  padding:var(--screen-pad-top) 0 var(--screen-pad-bottom);
  position:relative;
  display:flex;
  flex-direction:column;
}
.h-section > .index{
  position:sticky;
  top:0;
  z-index:2;
}
.h-section > *{
  max-width:min(1440px,calc(100% - 40px));
  margin-inline:auto;
  width:100%;
}

/* Inner hero for lab-top pages — fixed to first screen */
.lab-inner-hero{
  min-height:clamp(260px,38dvh,380px)!important;
  max-height:clamp(260px,38dvh,380px)!important;
  flex:none!important;
  margin:0 auto clamp(10px,2vh,20px)!important;
}

/* Shell sections for control/laboratory — each section as a spread */
.shell > section{
  margin-top:clamp(20px,3vw,36px);
}
.shell .integration-links{
  margin:12px auto 20px!important;
}
.shell .eyebrow{
  margin-top:clamp(16px,2.5vw,28px);
}
.shell h1{
  margin-top:clamp(8px,1.5vh,16px);
}
.shell .workspace,
.shell .subsystems,
.shell .tools,
.shell .laboratory-route,
.shell .crystal-process,
.shell .laboratory-intro,
.shell .subsystems,
.shell .tools{
  margin-top:clamp(24px,4vw,44px);
}

/* Ensure no overlapping on tall content */
.shell{
  overflow-x:hidden;
  overflow-wrap:break-word;
}
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Short desktop — reduce screen heights */
@media(min-width:1000px) and (max-height:770px){
  :root{
    --screen-min:100dvh;
    --screen-pad-top:clamp(55px,8vh,80px);
    --screen-pad-bottom:clamp(30px,5vh,55px);
  }
  .lab-inner-hero{
    min-height:clamp(220px,34dvh,290px)!important;
    max-height:clamp(220px,34dvh,290px)!important;
  }
}

/* Tablet — stack sections, reduce min-height */
@media(max-width:900px){
  :root{
    --screen-min:auto;
    --screen-pad-top:clamp(40px,7vh,70px);
    --screen-pad-bottom:clamp(24px,4vh,48px);
  }
  .h-section{
    min-height:auto;
    border-bottom:1px solid var(--line,rgba(255,255,255,.06));
  }
  .lab-inner-hero{
    min-height:clamp(200px,32dvh,280px)!important;
    max-height:none!important;
  }
}

/* Mobile — compact sections */
@media(max-width:620px){
  :root{
    --screen-pad-top:clamp(30px,6vh,50px);
    --screen-pad-bottom:clamp(20px,3vh,36px);
  }
  .h-section{padding:var(--screen-pad-top) 0 var(--screen-pad-bottom)}
  .lab-inner-hero{
    min-height:auto!important;
    max-height:none!important;
    margin:10px auto!important;
  }
}

/* Prevent horizontal overflow everywhere */
html{overflow-x:clip}
body{min-width:0;overflow-x:hidden}
img,svg,canvas,iframe{max-width:100%}