/* ------------------------------------------------------------


   Responsive Bottom-Image Hero Geometry Contract


   Version: 1.5.118-wo105b3-1


   Scope: tablet/mobile variants of Centered Text Hero — Bottom Image.


   Contract:


   - The hero shell owns the section boundary.


   - The bottom media shell ends on that same boundary.


   - The transition seam is anchored to that same coordinate.


   - Announcement/admin/navigation height changes only the top safe zone.


   - Configured extra height is absorbed above media, never below it.


------------------------------------------------------------- */





@media (max-width: 991.98px){


  /* These selectors intentionally outrank the generic responsive home-hero


     padding and the section-shell alignment CSS. Bottom-image heroes cannot


     honor bottom padding or vertical centering without violating their edge


     contract. Top padding remains controlled by the measured safe zone. */


  html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image,


  html body.home .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image,


  html body.home #page-top.vh-layout-hero.vh-hero-layout-editorial_center_bottom_image{


    /* Visibility remains owned by hero-responsive.css. Never force every


       responsive variant to display from a geometry contract. Active variants


       already receive display:flex at their own breakpoint; non-responsive


       heroes receive it from the established bottom-image layout rule. */


    flex-direction:column !important;


    align-items:stretch !important;


    justify-content:flex-start !important;


    padding-bottom:0 !important;


    margin-bottom:0 !important;


    --vh-bottom-image-boundary-gap:0px;


  }





  /* The container stretches through any configured min/exact height. Its flex


     child may grow with content, while margin-top:auto on the media absorbs


     only genuine spare space above the image. */


  html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image > .container,


  html body.home .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image > .container,


  html body.home #page-top.vh-layout-hero.vh-hero-layout-editorial_center_bottom_image > .container{


    display:flex !important;


    flex:1 1 auto !important;


    flex-direction:column !important;


    align-items:center !important;


    justify-content:flex-start !important;


    width:100% !important;


    min-height:0 !important;


    height:auto !important;


    padding-bottom:0 !important;


    margin-bottom:0 !important;


  }





  html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image,


  html body.home .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{


    flex:0 0 auto !important;


  }





  /* The wrapper and media shell form one bottom anchor. No transform or


     negative margin is used; browser geometry can therefore verify a true


     shared edge instead of a visually simulated one. */


  html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge,


  html body.home .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge,


  html body.home #page-top.vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{


    display:flex !important;


    flex:0 0 auto !important;


    align-self:center !important;


    align-items:flex-end !important;


    justify-content:center !important;


    margin-top:auto !important;


    margin-bottom:0 !important;


    padding-bottom:0 !important;


    line-height:0 !important;


    transform:none !important;


  }





  html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge,


  html body.home .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge,


  html body.home #page-top.vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge{


    display:block !important;


    width:100% !important;


    margin:0 !important;


    padding:0 !important;


    line-height:0 !important;


    vertical-align:bottom !important;


    transform:none !important;


    border-bottom-right-radius:0 !important;


    border-bottom-left-radius:0 !important;


  }





  html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge > :is(img,picture,video,iframe,embed,object,.vh-hero-video,.vh-hero-placeholder),


  html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge > picture > img,


  html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge .vh-hero-video-trigger,


  html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge .vh-hero-video-trigger > img{


    display:block !important;


    margin:0 !important;


    vertical-align:bottom !important;


    border-bottom-right-radius:0 !important;


    border-bottom-left-radius:0 !important;


  }





  /* The existing transition layer order remains authoritative. This contract


     only guarantees that the transition's boundary is the image boundary. */


  html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image.vh-hero-has-seamless-overlap{


    overflow:visible !important;


    clip-path:none !important;


  }





  html body .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image:not(.vh-hero-has-seamless-overlap){


    overflow:hidden !important;


  }


}