/* ===================================================================
   USAVIR v39 — Academy as full-screen panels

   Applied to the page's EXISTING sections rather than rebuilding the
   markup, so the enrolment dialog, subject slates and /api/enrol flow
   are untouched.

   Same scale system as the homepage: --u is derived from viewport
   HEIGHT, so the ratio between any two elements is identical on every
   device inside a layout family.
   =================================================================== */

html.academy-snap,
html:has(body[data-page="academy"]){
  /* v39.1: snapping removed - the scroll is completely free */
  scroll-snap-type:none;
  scroll-padding-top:0;
}

body[data-page="academy"]{height:auto;min-height:100dvh}

/* the shell must not impose its own height once its children are panels */
body[data-page="academy"] .v21-shell{
  display:block;
  max-width:none;
  padding:0;
  margin:0;
}

/* ---------- every top-level section becomes one screen ---------- */
body[data-page="academy"] .v21-hero,
body[data-page="academy"] #subjects,
body[data-page="academy"] #price-comparison,
body[data-page="academy"] .enrol-route{
  --u:1dvh;
  font-size:clamp(13px,calc(var(--u) * 1.98),30px);

  /* !important throughout: the original mobile rules force min-height:0,
     display:grid and padding:0 on these sections, and they win otherwise */
  min-height:calc(100dvh - 1px)!important;
  scroll-margin-top:0;

  box-sizing:border-box;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center;
  gap:calc(var(--u) * 2);

  width:min(1480px,100%);
  margin:0 auto!important;
  padding:calc(var(--v24-taskbar-h,72px) + var(--u) * 3)
          clamp(16px,4vw,60px)
          calc(var(--u) * 3)!important;
}

/* grid/flex children refuse to shrink below content without this and
   overflow the panel instead */
body[data-page="academy"] .v21-hero > *,
body[data-page="academy"] #subjects > *,
body[data-page="academy"] #price-comparison > *,
body[data-page="academy"] .enrol-route > *{min-width:0}

/* ---------- pricing: the one section that cannot fit ----------
   Seven providers plus the advantage block runs to ~125% of a screen.
   The panel stays exactly one screen and the table scrolls inside it,
   which is the right treatment for dense tabular data. */
/* v39.1: the pricing cap is gone. The original mobile treatment scrolls the
   seven providers SIDEWAYS inside a compact card (v30-core: .price-table-wrap
   overflow-x:auto, .price-table min-width:620px). Capping the section and
   scrolling it vertically instead is what made it 203% of an SE screen and
   hid rows. See v39-scale.css. */

/* ---------- last panel shares its stop with the footer ---------- */
body[data-page="academy"] .enrol-route{
  min-height:calc(100dvh - 1px - var(--v22-footer-height,50px));
  padding-bottom:calc(var(--u) * 2);
}
body[data-page="academy"] .global-footer{
  position:static;
  width:100%;
  scroll-snap-align:none;
}

/* =========================================================
   PHONE FAMILY — same composition, smaller scale
   ========================================================= */
@media (orientation:portrait){
  body[data-page="academy"] .v21-hero,
  body[data-page="academy"] #subjects,
  body[data-page="academy"] #price-comparison,
  body[data-page="academy"] .enrol-route{
    font-size:clamp(12px,calc(var(--u) * 1.95),19px);
    padding:calc(var(--v24-taskbar-h,72px) + var(--u) * 2)
            clamp(14px,4.5vw,20px)
            calc(var(--u) * 2);
    gap:calc(var(--u) * 1.5);
  }
  /* three slates + heading ran ~36px past the screen at 390x844 */
  body[data-page="academy"] #subjects .section-heading{margin-bottom:calc(var(--u) * .8)!important}
  body[data-page="academy"] .subject-slate__bar{padding:calc(var(--u) * .9)!important}
  body[data-page="academy"] .subject-slates{gap:calc(var(--u) * .8)!important}
}

/* =========================================================
   INPUT — touch targets, independent of layout family
   ========================================================= */
@media (hover:none) and (pointer:coarse){
  body[data-page="academy"] .v21-button,
  body[data-page="academy"] .subject-slate__toggle{min-height:44px}
}

/* =========================================================
   Too short for a full screen — landscape phones, short windows
   ========================================================= */
@media (max-height:520px){
  body[data-page="academy"] .v21-hero,
  body[data-page="academy"] #subjects,
  body[data-page="academy"] #price-comparison,
  body[data-page="academy"] .enrol-route{
    min-height:0;
    font-size:clamp(12px,2.6vw,16px);
    justify-content:flex-start;
    padding-top:calc(var(--v24-taskbar-h,72px) + 14px);
    padding-bottom:22px;
  }
}

@media (prefers-reduced-motion:reduce){
}

/* The enrolment dialog must never be constrained by a panel. */
body[data-page="academy"] .enrol-dialog,
body[data-page="academy"] dialog{scroll-snap-align:none}

/* =========================================================
   PHONE — structural compression.
   At 375x667 the type is already at its legibility floor, so
   fitting a section to one screen has to come from structure,
   not scale: the subjects section ran 900px against a 667px
   screen (heading 179 + three 185px slates).
   ========================================================= */
@media (orientation:portrait){

  /* the descriptive paragraph is the single biggest saving and the
     least missed — the slates below say the same thing */
  /* v39.1: the paragraph is no longer hidden - the scale lock fits the
     section, so a phone shows exactly what a desktop shows. */
  body[data-page="academy"] #subjects .section-heading{margin-bottom:calc(var(--u) * .6)!important}
  body[data-page="academy"] #subjects .section-heading h2{
    font-size:1.9em!important;line-height:1!important;margin-bottom:.15em!important;
  }

  /* slate bars: tighter rows, smaller marks */
  body[data-page="academy"] .subject-slate__bar{
    padding:calc(var(--u) * .8) calc(var(--u) * .9)!important;
    gap:calc(var(--u) * .6)!important;
  }
  body[data-page="academy"] .subject-slate__logo{width:1.6em!important;height:1.6em!important}
  body[data-page="academy"] .subject-slate__title h3{font-size:1.1em!important;line-height:1.05!important}
  body[data-page="academy"] .subject-slate__title p{font-size:.68em!important;line-height:1.25!important}
  body[data-page="academy"] .subject-slate__index{font-size:.5em!important}
  body[data-page="academy"] .subject-slates{gap:calc(var(--u) * .6)!important}

  /* hero proof cards */
  body[data-page="academy"] .academy-proof{gap:calc(var(--u) * .6)!important}
  body[data-page="academy"] .proof-card{padding:calc(var(--u) * .8)!important}

  /* enrolment steps */
  body[data-page="academy"] .enrol-steps{gap:calc(var(--u) * .6)!important}
  body[data-page="academy"] .enrol-step{padding:calc(var(--u) * .8)!important}
  body[data-page="academy"] .enrol-step p{font-size:.72em!important;line-height:1.3!important}
}

/* =========================================================
   VERY SHORT SCREENS (<=700px tall, e.g. iPhone SE 375x667)

   Four dense sections cannot all be exactly one screen at
   legible type on a 667px display — the type is already at
   its floor. Rather than let some sections spill and others
   not (which is the inconsistency being fixed), every panel
   is bounded to one screen and the dense ones scroll inside
   themselves, exactly as the pricing table already does.
   ========================================================= */
/* v39.1: the (max-height:700px) internal-scroll block is DELETED.
   It bounded short-phone sections with overflow-y:auto, which is precisely
   why an iPhone SE showed less content than an XR. The scale lock in
   v39-scale.css makes every phone show the same content instead. */