/* HAI VU PIANO ACADEMY — VIEWPORT FIT V20
   Goal: 14-inch laptop reading comfort without a "dropped-down" first screen.
   Scope is only pages explicitly marked hv20-viewport-fit.
*/

body.hv20-viewport-fit{
  --hv20-top-safe: 0px;
}

/* Keep the institutional header, but remove unnecessary vertical bulk. */
body.hv20-viewport-fit .header{
  min-height:76px!important;
}
body.hv20-viewport-fit .header > .wrap,
body.hv20-viewport-fit .header .wrap{
  padding-top:10px!important;
  padding-bottom:10px!important;
}
body.hv20-viewport-fit .header .brand img{
  max-height:54px!important;
  width:auto!important;
}

/* One canonical secondary library navigation row only. */
body.hv20-viewport-fit .hv14-tabs-wrap{
  min-height:0!important;
}
body.hv20-viewport-fit .hv14-tabs{
  min-height:48px!important;
  align-items:flex-end!important;
}
body.hv20-viewport-fit .hv14-tabs a{
  min-height:48px!important;
  font-size:14px!important;
}

/* Eliminate empty wrappers left by historical patches. */
body.hv20-viewport-fit .library-tabs:empty,
body.hv20-viewport-fit .subnav:empty,
body.hv20-viewport-fit .secondary-nav:empty,
body.hv20-viewport-fit .tabs-wrap:empty,
body.hv20-viewport-fit .hv14-tabs-wrap:empty{
  display:none!important;
}

/* First screen rhythm: no artificial tall spacer before the first meaningful content. */
body.hv20-viewport-fit main > section:first-child{
  min-height:0!important;
  height:auto!important;
}
body.hv20-viewport-fit .hero,
body.hv20-viewport-fit .hero-section,
body.hv20-viewport-fit .library-hero,
body.hv20-viewport-fit .hv15-hero,
body.hv20-viewport-fit .hv19-hero,
body.hv20-viewport-fit .hvp2-hero,
body.hv20-viewport-fit .hv14-ear-hero{
  padding-top:52px!important;
  padding-bottom:44px!important;
}

/* Article pages: title/context and first reading block should arrive sooner. */
body.hv20-viewport-fit .hv15-article-hero,
body.hv20-viewport-fit .hv19-article-hero{
  padding-top:44px!important;
  padding-bottom:32px!important;
}
body.hv20-viewport-fit .hv15-breadcrumb,
body.hv20-viewport-fit .hv19-breadcrumb{
  margin-bottom:18px!important;
}
body.hv20-viewport-fit .hv15-article-layout,
body.hv20-viewport-fit .hv19-article-layout{
  padding-top:40px!important;
}
body.hv20-viewport-fit .hv15-copy section,
body.hv20-viewport-fit .hv19-copy section{
  margin-bottom:36px!important;
  padding-bottom:36px!important;
}

/* Generic academic sections: keep the same premium spacing, but avoid 120px+ empty bands. */
body.hv20-viewport-fit main section{
  scroll-margin-top:118px;
}
body.hv20-viewport-fit main > section + section{
  margin-top:0;
}

/* 14-inch / short desktop viewport: fit the opening composition in one screen more often. */
@media (min-width: 980px) and (max-height: 920px){
  body.hv20-viewport-fit .header{
    min-height:70px!important;
  }
  body.hv20-viewport-fit .header > .wrap,
  body.hv20-viewport-fit .header .wrap{
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
  body.hv20-viewport-fit .header .brand img{
    max-height:48px!important;
  }

  body.hv20-viewport-fit .hv14-tabs,
  body.hv20-viewport-fit .hv14-tabs a{
    min-height:44px!important;
  }

  body.hv20-viewport-fit .hero,
  body.hv20-viewport-fit .hero-section,
  body.hv20-viewport-fit .library-hero,
  body.hv20-viewport-fit .hv15-hero,
  body.hv20-viewport-fit .hv19-hero,
  body.hv20-viewport-fit .hvp2-hero,
  body.hv20-viewport-fit .hv14-ear-hero{
    padding-top:38px!important;
    padding-bottom:34px!important;
  }

  body.hv20-viewport-fit .hv15-article-hero,
  body.hv20-viewport-fit .hv19-article-hero{
    padding-top:30px!important;
    padding-bottom:24px!important;
  }
  body.hv20-viewport-fit .hv15-article-hero h1,
  body.hv20-viewport-fit .hv19-article-hero h1{
    font-size:clamp(38px,3.4vw,46px)!important;
    line-height:1.08!important;
  }
  body.hv20-viewport-fit .hv15-article-layout,
  body.hv20-viewport-fit .hv19-article-layout{
    padding-top:30px!important;
  }

  /* Library opening page from the screenshot: prevent the hero from falling too low. */
  body.hv20-viewport-fit.hv-library main > section:first-child,
  body.hv20-viewport-fit main.hv-library > section:first-child{
    padding-top:38px!important;
    padding-bottom:36px!important;
  }

  /* A restrained heading scale for short laptop screens — no "billboard" effect. */
  body.hv20-viewport-fit .hero h1,
  body.hv20-viewport-fit .library-hero h1{
    font-size:clamp(42px,4vw,50px)!important;
    line-height:1.08!important;
  }
}

/* Mobile keeps breathing room; the fix is primarily for laptop/desktop height. */
@media (max-width: 760px){
  body.hv20-viewport-fit .header{
    min-height:unset!important;
  }
  body.hv20-viewport-fit .hero,
  body.hv20-viewport-fit .hero-section,
  body.hv20-viewport-fit .library-hero,
  body.hv20-viewport-fit .hv15-hero,
  body.hv20-viewport-fit .hv19-hero,
  body.hv20-viewport-fit .hvp2-hero,
  body.hv20-viewport-fit .hv14-ear-hero{
    padding-top:42px!important;
    padding-bottom:38px!important;
  }
}