/* =========================================================================
   Homepage hero - responsive sizing
   -------------------------------------------------------------------------
   Enqueued AFTER assets/css/homepage.css (see inc/assets.php), so these rules
   win ties against it. homepage.css pins the hero to a fixed 255px / 285px band
   at <=1024px, so the crop is decided by a hard-coded number instead of the
   viewport: the same 285px strip at 480px and at 1024px, throwing away most of a
   2.6:1 image.

   ONE continuous height instead of per-breakpoint ratios:

     height: clamp(250px, 38vw, 620px)

   38vw is exactly the artwork's own ratio (773 / 2035 = 0.3799), so in the middle
   of the range the hero shows the image uncropped at its natural proportions and
   simply scales with the viewport. The clamps only bite at the ends:

     below ~658px wide  -> 250px tall, i.e. taller than natural, so cover crops
                           the SIDES. object-position 76% keeps the subject in
                           frame (the artwork puts them right of centre).
     above ~1632px wide -> 620px tall, i.e. wider than natural, so cover crops a
                           little top/bottom instead of the hero growing forever.

   Per-breakpoint aspect-ratios were the obvious approach but they make the height
   JUMP DOWN every time the ratio widens (e.g. 459px at 1024 down to 389px at
   1025). A single clamp is smooth at every width, which is what "responsive"
   should mean.
   ========================================================================= */

/* The container must stop being a fixed-height box. */
body.home .mqs-home .mqs-hero-shell > .mqs-hero{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding-top:0!important;
}

/* The image height follows the viewport width, within limits. */
body.home .mqs-home .mqs-hero-shell > .mqs-hero > img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:clamp(250px, 38vw, 620px)!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:76% 50%!important;
}

/* Short landscape phones: don't let the hero eat the first screen. */
@media(max-height:520px) and (max-width:900px){
  body.home .mqs-home .mqs-hero-shell > .mqs-hero > img{
    height:clamp(180px, 34vw, 300px)!important;
  }
}