/*
 * Home page only (loaded from mainsite/home.blade.php @section('css')).
 * Kept outside public/assets so a new HTML/asset drop does not overwrite these fixes.
 * Every selector starts with #main so it outranks site.css / extras.css (incl. dark-mode rules).
 */

/* 1) Ecosystem section: show the full wave-1 artwork instead of cropping it at 260px */
#main .ms-sec#ms-eco::before{height:auto;aspect-ratio:1600/513}

/* 2) Pathway cards: image box follows the artwork ratio (444x520), so no empty band above it */
#main .ms-pcard__img{height:auto;aspect-ratio:444/520}

/* 3) Schools section image card: no drop shadow */
#main .ms-schools .ms-media__img{box-shadow:none}

/* 4) Educators artwork: no white backing card or glow rings */
#main .ms-edu__img img{background:none;box-shadow:none}

/* 5) Professionals artwork: no white backing card */
#main .ms-pro .ms-media__img{background:none}

/* 6) Numbers artwork: no gradient card; fade the artwork's white bottom edge into the section */
#main .mx-num-art{background:none;box-shadow:none;padding:0;border-radius:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 87%);mask-image:linear-gradient(to bottom,#000 62%,transparent 87%)}

/* 7) "From Reels to Real Growth": show the full wave-3 artwork instead of cropping it at 180px */
#main .mx-reels::before{height:auto;aspect-ratio:1600/528}

/* 9) Partner network section: the long copy left the image floating mid-section.
      Desktop only: start the image level with the green lead line (heading = 3 lines x 1.15 line-height + 14px lead margin)
      and keep it sticky below the header until the section ends. */
@media (min-width:901px){
  #main .ms-net .ms-split{align-items:start}
  #main .ms-net .ms-media__img img{object-position:center top}
  #main .ms-net .ms-split__media{position:sticky;top:calc(var(--hh) + 24px);margin-top:calc(clamp(28px,3.4vw,44px) * 3.45 + 14px)}
}

/* 10) Dark mode: the Classrooms section has an inline style="background:#fff" from the HTML export, which the
       dark theme cannot override, so its light dark-mode text sat on white. Use the dark page background instead. */
html[data-theme="dark"] #main #ms-classrooms{background:#081530!important}