/* HanAnHua v126 — hero spacing and responsive illustration stability.
   Keeps the hero content-driven on large screens so viewport height changes do
   not create a large empty band above the marquee, and keeps the student art
   anchored to the hero instead of dropping into document flow on tablet widths. */

@media (min-width: 821px){
  .hero{
    min-height:0 !important;
    padding-top:clamp(46px,4.2vw,72px) !important;
    padding-bottom:clamp(36px,3.2vw,54px) !important;
    align-items:center !important;
  }
  .hero-collage{
    min-height:clamp(420px,32vw,540px) !important;
    max-height:none !important;
  }
}

/* The supplied student illustration should stay floating above the marquee.
   The previous 980px breakpoint changed it to position:relative, which could
   make it jump downward while the browser window was resized. */
@media (min-width: 981px){
  .hero-students-visual{
    position:absolute !important;
    left:clamp(330px,27vw,540px) !important;
    bottom:-2px !important;
    width:clamp(330px,31vw,560px) !important;
    margin:0 !important;
  }
}

@media (min-width: 621px) and (max-width: 980px){
  .hero-students-visual{
    position:absolute !important;
    left:clamp(135px,20vw,230px) !important;
    bottom:-2px !important;
    width:clamp(300px,48vw,470px) !important;
    margin:0 !important;
  }
}

/* Mid-size desktop/tablet windows get a slightly shorter collage so the hero
   remains compact without crowding the photos or text. */
@media (min-width: 821px) and (max-width: 1180px){
  .hero{
    padding-top:42px !important;
    padding-bottom:40px !important;
  }
  .hero-collage{
    min-height:clamp(400px,39vw,470px) !important;
  }
}

/* At the one-column breakpoint, keep the illustration floating over the lower
   hero area rather than becoming an extra block below the collage. */
@media (min-width: 621px) and (max-width: 820px){
  .hero{
    padding-bottom:38px !important;
  }
  .hero-collage{
    min-height:clamp(390px,61vw,480px) !important;
    margin-top:30px !important;
  }
}

/* Very small screens keep the existing in-flow treatment, where it is safer
   for readability, but tighten the spacing so the artwork still feels attached
   to the hero instead of looking like a separate section. */
@media (max-width: 620px){
  .hero{
    padding-bottom:42px !important;
  }
  .hero-students-visual{
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    width:min(94%,520px) !important;
    margin:-66px auto -28px !important;
  }
}

/* ============================================================
   v127 — automatic safe placement for the hero student artwork
   Keep the illustration floating, but never let it sit on top of
   the headline/description/buttons when the desktop width gets tight.
   ============================================================ */
@media (min-width: 981px){
  .hero-students-visual{
    /* Move the artwork into the centre/right transition zone instead of
       pinning it inside the text column.  Percentage positioning follows the
       hero width automatically as the browser is resized. */
    left:clamp(46%,48vw,52%) !important;
    width:clamp(250px,22vw,420px) !important;
    max-width:calc(48% - 18px) !important;
    bottom:-2px !important;
  }
}

/* On compact desktop widths, give the text column a larger protected zone and
   reduce the artwork a little more. */
@media (min-width: 981px) and (max-width: 1360px){
  .hero-students-visual{
    left:47% !important;
    width:clamp(245px,21vw,320px) !important;
    max-width:44% !important;
  }
}

/* Once the hero becomes one column, anchor the artwork to the bottom of the
   collage area.  It stays floating, but no longer shares space with the copy. */
@media (min-width: 621px) and (max-width: 980px){
  .hero-students-visual{
    left:auto !important;
    right:clamp(18px,7vw,72px) !important;
    width:clamp(270px,40vw,390px) !important;
    max-width:48% !important;
    bottom:-2px !important;
  }
}