/* ------------------------------------------------------------
   Hero Eyebrow Compact Contract
   Version: 1.5.64-wo61
   Scope: all hero layouts, with explicit left/center alignment rules.
   Purpose: prevent the eyebrow/badge pill from stretching across the hero
   copy lane. It should read as a compact label, not a section bar.
------------------------------------------------------------- */

.vh-layout-hero .vh-hero-eyebrow{
  width: fit-content !important;
  max-width: min(100%, 24rem) !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-wrap: balance;
}

/* Centered hero variants should keep the compact pill centered instead of
   stretching it to match the copy block. */
.vh-layout-hero .vh-hero-copy--center .vh-hero-eyebrow,
.vh-layout-hero .vh-hero-copy--minimal .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-editorial_center .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-background_image .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-search_finder .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-portfolio_grid .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-minimal_page .vh-hero-eyebrow{
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Split/right/offset layouts keep the badge aligned with the copy start. */
.vh-layout-hero.vh-hero-layout-default_split .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-image_card .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-video_hero .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-before_after .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-offset_media .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-bottom_aligned_image .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-three_column_center_image .vh-hero-eyebrow,
.vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-eyebrow{
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Right Edge Image Hero: the eyebrow is a small badge above the title, not a
   full-width rail. Keep it compact even inside the flex copy lane. */
.vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy > .vh-hero-eyebrow{
  width: fit-content !important;
  max-width: min(100%, 22rem) !important;
  align-self: flex-start !important;
}

@media (min-width: 600px) and (max-width: 991.98px){
  .vh-layout-hero .vh-hero-eyebrow{
    max-width: min(100%, 20rem) !important;
  }
}

@media (max-width: 599.98px){
  .vh-layout-hero .vh-hero-eyebrow{
    max-width: min(100%, 18rem) !important;
    padding-inline: .72rem !important;
    line-height: 1.18 !important;
  }
}