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


   Hero Layout Ratio + Radius Contract


   Version: 1.5.115-wo105b1


   Scope: universal hero media shells only.


   Purpose:


   - Apply the generic ratio only to supported media layouts.


   - Keep portrait ratios from creating unbounded full-width hero heights.


   - Give one element ownership of aspect ratio, clipping, and corner radius.


   - Prevent image-ratio settings from resizing unrelated text cards.


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





/* The generic ratio never owns proof, feature, floating, or inline text cards. */


.vh-layout-hero.vh-hero-ratio-contract .vh-hero-feature-card,


.vh-layout-hero.vh-hero-ratio-contract .vh-hero-floating-card,


.vh-layout-hero.vh-hero-ratio-contract .vh-hero-inline-detail{


  aspect-ratio: auto !important;


  height: auto !important;


  min-height: 0 !important;


  overflow: visible !important;


}





/* Wide media wrappers are layout/position containers, not crop boxes. The


   nested .vh-hero-media shell is the single clipping and radius owner. */


.vh-layout-hero.vh-hero-ratio-contract .vh-hero-wide-media{


  border-radius: 0 !important;


  overflow: visible !important;


}





.vh-layout-hero.vh-hero-ratio-contract .vh-hero-media{


  border-top-left-radius: var(--vh-hero-media-radius-tl) !important;


  border-top-right-radius: var(--vh-hero-media-radius-tr) !important;


  border-bottom-right-radius: var(--vh-hero-media-radius-br) !important;


  border-bottom-left-radius: var(--vh-hero-media-radius-bl) !important;


  overflow: hidden !important;


}





.vh-layout-hero.vh-hero-ratio-contract .vh-hero-media > :is(img,picture,video,iframe,embed,object,.vh-hero-video,.vh-hero-placeholder),


.vh-layout-hero.vh-hero-ratio-contract .vh-hero-media > picture > img,


.vh-layout-hero.vh-hero-ratio-contract .vh-hero-media .vh-hero-video-trigger,


.vh-layout-hero.vh-hero-ratio-contract .vh-hero-media .vh-hero-video-trigger > img{


  border-radius: inherit !important;


}





/* Auto preserves each layout's established default media behavior. */





/* Explicit ratios belong to the media shell. Child media fills that one crop


   box; nested wrappers do not receive a second ratio or second clipping edge. */


.vh-layout-hero.vh-hero-ratio-contract.vh-hero-ratio-enabled .vh-hero-media{


  aspect-ratio: var(--vh-hero-card-aspect-ratio) !important;


  height: auto !important;


  min-height: 0 !important;


  max-height: none !important;


}





.vh-layout-hero.vh-hero-ratio-contract.vh-hero-ratio-enabled .vh-hero-media > :is(img,picture,video,iframe,embed,object,.vh-hero-video,.vh-hero-placeholder),


.vh-layout-hero.vh-hero-ratio-contract.vh-hero-ratio-enabled .vh-hero-media > picture > img,


.vh-layout-hero.vh-hero-ratio-contract.vh-hero-ratio-enabled .vh-hero-media .vh-hero-video-trigger,


.vh-layout-hero.vh-hero-ratio-contract.vh-hero-ratio-enabled .vh-hero-media .vh-hero-video-trigger > img{


  display: block !important;


  width: 100% !important;


  height: 100% !important;


  min-height: 0 !important;


  max-height: none !important;


  aspect-ratio: auto !important;


  object-fit: cover !important;


  object-position: center center !important;


}





/* Wide layouts use an outer positioning wrapper. Once a ratio is explicit,


   the nested crop shell fills that bounded wrapper instead of retaining the


   older generic 46rem media maximum. */


.vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-ratio-enabled .vh-hero-wide-media > .vh-hero-media{


  width: 100% !important;


  max-width: 100% !important;


  margin-inline: auto !important;


}





/* Width guardrails keep portrait selections proportionate. The media shell


   still uses the selected ratio, but the wrapper stops a 9:16 crop from using


   the full 1120–1200px hero width and creating a near-2000px hero. */


.vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-square .vh-hero-wide-media{


  width: min(100%, 42rem) !important;


  max-width: min(100%, 42rem) !important;


}


.vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-portrait .vh-hero-wide-media{


  width: min(100%, 25rem) !important;


  max-width: min(100%, 25rem) !important;


}


.vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-vertical .vh-hero-wide-media{


  width: min(100%, 34rem) !important;


  max-width: min(100%, 34rem) !important;


}


.vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-landscape .vh-hero-wide-media{


  width: min(100%, 72rem) !important;


  max-width: min(100%, 72rem) !important;


}


.vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-wide .vh-hero-wide-media{


  width: min(100%, 70rem) !important;


  max-width: min(100%, 70rem) !important;


}





/* Media-card layouts have narrower portrait crop boxes while wide ratios can


   continue to fill their normal column. */


.vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-square .vh-hero-media{


  width: min(100%, 38rem) !important;


  max-width: min(100%, 38rem) !important;


  margin-inline: auto !important;


}


.vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-portrait .vh-hero-media{


  width: min(100%, 24rem) !important;


  max-width: min(100%, 24rem) !important;


  margin-inline: auto !important;


}


.vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-vertical .vh-hero-media{


  width: min(100%, 32rem) !important;


  max-width: min(100%, 32rem) !important;


  margin-inline: auto !important;


}





/* Right Edge Image is governed by its edge-height contract rather than the


   generic crop-ratio control. Keep its two edge corners square. */


.vh-layout-hero.vh-hero-ratio-contract.vh-hero-layout-right_edge_image .vh-hero-media--right-edge{


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


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


}





@media (min-width: 600px) and (max-width: 991.98px){


  .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-square .vh-hero-wide-media{ width:min(100%,36rem) !important; max-width:min(100%,36rem) !important; }


  .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-portrait .vh-hero-wide-media{ width:min(100%,22rem) !important; max-width:min(100%,22rem) !important; }


  .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-vertical .vh-hero-wide-media{ width:min(100%,30rem) !important; max-width:min(100%,30rem) !important; }


  .vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-portrait .vh-hero-media{ width:min(100%,22rem) !important; max-width:min(100%,22rem) !important; }


  .vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-vertical .vh-hero-media{ width:min(100%,29rem) !important; max-width:min(100%,29rem) !important; }


}





@media (max-width: 599.98px){


  .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-portrait .vh-hero-wide-media,


  .vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-portrait .vh-hero-media{


    width: min(100%, 19rem) !important;


    max-width: min(100%, 19rem) !important;


  }


  .vh-layout-hero.vh-hero-ratio-mode-wide_media.vh-hero-card-ratio-vertical .vh-hero-wide-media,


  .vh-layout-hero.vh-hero-ratio-mode-media_card.vh-hero-card-ratio-vertical .vh-hero-media{


    width: min(100%, 23rem) !important;


    max-width: min(100%, 23rem) !important;


  }


}