/*
  Final vertical rhythm system.
  Loaded after the visual polish layers so spacing remains predictable across
  every public page without changing the existing HTML structure.
*/

:root{
  --site-header-space:83px;
  --section-edge-space:clamp(62px,6.2vw,88px);
  --section-edge-space-compact:clamp(48px,4.8vw,68px);
  --section-edge-space-footer:clamp(84px,8vw,118px);
  --section-content-safe-bottom:clamp(108px,8vw,132px);
  --section-footer-safe-bottom:clamp(128px,10vw,158px);
}

/* Auto margins only consume genuinely unused height. Long content therefore
   keeps its natural flow, while short content sits optically in the middle. */
section > .wrap{
  width:100%;
  min-width:0;
  margin-block:auto;
}

/* Keep the visible breathing room on both sides of an overlapping transition
   equal. The overlap itself remains intact and is not counted as content room. */
:is(
  .layanan,.proses,.kelas,.testi,
  .brevet-features,.brevet-cta,
  .harga-cta,
  .jadwal-content,.jadwal-cta,
  .page-ebook .ebook-catalog,
  .page-ebook .ebook-bundles,
  .page-ebook .ebook-guide,
  .page-ebook .ebook-cta
){
  padding-top:calc(var(--flow-overlap) + var(--section-edge-space))!important;
  padding-bottom:var(--section-content-safe-bottom)!important;
}

/* Home and Brevet retain their deliberate snap experience. The extra overlap
   is included in the box height, so the visible distance between locks remains
   one useful viewport instead of shrinking by the crossfade depth. */
@media (min-width:701px){
  html.scroll-lock-enabled :is(.hero,.brevet-hero){
    min-height:calc(100svh - var(--site-header-space))!important;
    padding-top:var(--section-edge-space)!important;
    padding-bottom:var(--section-content-safe-bottom)!important;
  }

  html.scroll-lock-enabled :is(.layanan,.proses,.kelas,.testi,.brevet-features){
    min-height:calc(100svh + var(--flow-overlap) - var(--site-header-space))!important;
  }

  html.scroll-lock-enabled .brevet-cta{
    min-height:calc(clamp(540px,70svh,680px) + var(--flow-overlap))!important;
  }

  html.scroll-lock-enabled .cta-footer-connect section.cta-final{
    min-height:clamp(520px,68svh,650px)!important;
    padding:var(--section-edge-space-compact) 0!important;
  }
}

/* First/standalone sections: a short page gets a composed full canvas; forms,
   tables, FAQs, and policies simply grow beyond it when their content needs it. */
html:not(.scroll-lock-enabled) :is(
  .harga-content,
  .jadwal-hero,
  .reg-page,
  .page-ebook .ebook-hero,
  .lokasi-page,
  .faq-page,
  .policy-page,
  .comingsoon-page,
  .err-page
){
  min-height:calc(100svh - var(--site-header-space))!important;
}

html:not(.scroll-lock-enabled) :is(.harga-content,.jadwal-hero,.page-ebook .ebook-hero){
  padding-top:var(--section-edge-space)!important;
  padding-bottom:var(--section-content-safe-bottom)!important;
}

/* These light sections carry their own darkening lower veil. Their last row
   needs a slightly deeper clear zone than sections that only receive the next
   section's masked background. */
:is(.harga-content,.jadwal-hero,.jadwal-content){
  --section-content-safe-bottom:clamp(142px,11vw,176px);
}

/* Information pages need a little more room before the footer fade, but not a
   second empty viewport. */
html:not(.scroll-lock-enabled) :is(.reg-page,.lokasi-page,.faq-page,.policy-page){
  padding-top:var(--section-edge-space)!important;
  padding-bottom:var(--section-footer-safe-bottom)!important;
}

html:not(.scroll-lock-enabled) :is(.comingsoon-page,.err-page){
  padding-top:var(--section-edge-space)!important;
  padding-bottom:var(--section-edge-space)!important;
}

/* Compact closing moments. They stay substantial enough to feel intentional,
   while the call to action remains centered without a large blank runway. */
html:not(.scroll-lock-enabled) :is(.harga-cta,.jadwal-cta){
  min-height:calc(clamp(500px,64svh,620px) + var(--flow-overlap))!important;
}

html:not(.scroll-lock-enabled) .jadwal-content{
  min-height:calc(clamp(620px,78svh,780px) + var(--flow-overlap))!important;
}

/* e-Book has a shorter crossfade, so it uses a slightly tighter editorial
   cadence. Its catalogue, bundle, and guide heights remain content-driven. */
.page-ebook{
  --section-edge-space:clamp(52px,5vw,72px);
  --section-edge-space-compact:clamp(44px,4.3vw,62px);
  --section-content-safe-bottom:clamp(82px,6.4vw,98px);
}

.page-ebook .ebook-hero{
  padding-top:var(--section-edge-space)!important;
  padding-bottom:var(--section-content-safe-bottom)!important;
}

.page-ebook :is(.ebook-catalog,.ebook-bundles,.ebook-guide){
  min-height:auto!important;
}

.page-ebook .ebook-cta{
  min-height:calc(clamp(500px,64svh,610px) + var(--flow-overlap))!important;
}

/* Repeated headings and closing panels share one calm internal rhythm. */
:is(.section-head,.materi-head){
  margin-bottom:clamp(30px,3.4vw,44px)!important;
}

:is(.harga-cta,.jadwal-cta,.brevet-cta,.page-ebook .ebook-cta) > .wrap{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.cta-footer-connect{
  margin-bottom:0!important;
}

section + footer,
.cta-footer-connect footer{
  margin-top:-1px!important;
}

@media (max-width:700px){
  :root{
    --site-header-space:68px;
    --section-edge-space:clamp(44px,10vw,58px);
    --section-edge-space-compact:clamp(38px,8vw,50px);
    --section-edge-space-footer:clamp(72px,16vw,96px);
    --section-content-safe-bottom:clamp(76px,15vw,94px);
    --section-footer-safe-bottom:clamp(104px,20vw,128px);
  }

  :is(.harga-content,.jadwal-hero,.jadwal-content){
    --section-content-safe-bottom:clamp(98px,20vw,118px);
  }

  /* Mobile has no active vertical snap. Let copy and cards determine height so
     compact screens never inherit desktop-sized empty canvases. */
  html.scroll-lock-enabled :is(
    .hero,.layanan,.proses,.kelas,.testi,
    .brevet-hero,.brevet-features,.brevet-cta,
    .cta-footer-connect section.cta-final
  ){
    min-height:auto!important;
  }

  html.scroll-lock-enabled :is(.hero,.brevet-hero){
    padding-top:var(--section-edge-space)!important;
    padding-bottom:var(--section-content-safe-bottom)!important;
  }

  :is(
    .layanan,.proses,.kelas,.testi,
    .brevet-features,.brevet-cta,
    .harga-cta,
    .jadwal-content,.jadwal-cta,
    .page-ebook .ebook-catalog,
    .page-ebook .ebook-bundles,
    .page-ebook .ebook-guide,
    .page-ebook .ebook-cta
  ){
    padding-top:calc(var(--flow-overlap) + var(--section-edge-space))!important;
    padding-bottom:var(--section-content-safe-bottom)!important;
  }

  html:not(.scroll-lock-enabled) :is(
    .harga-content,.jadwal-hero,.reg-page,.page-ebook .ebook-hero,
    .lokasi-page,.faq-page,.policy-page
  ){
    min-height:auto!important;
  }

  html:not(.scroll-lock-enabled) :is(.harga-cta,.jadwal-content,.jadwal-cta),
  .page-ebook .ebook-cta{
    min-height:auto!important;
  }

  .page-ebook{
    --section-edge-space:clamp(42px,9vw,54px);
    --section-edge-space-compact:40px;
    --section-content-safe-bottom:clamp(72px,15vw,88px);
  }

  :is(.section-head,.materi-head){
    margin-bottom:clamp(24px,7vw,32px)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  section > .wrap{scroll-behavior:auto;}
}