/* ------------------------------------------------------------
   Hero Layout Responsive Contracts
   Version: 1.5.58-wo55
   Scope: all hero layout choices across home, pages, archives, and CPTs.
   Purpose: give every hero layout a predictable desktop/tablet/mobile
   contract without editing legacy broad styles.
------------------------------------------------------------- */

/* Shared rhythm: make vertical spacing intentional instead of inherited
   from Bootstrap .mt-5/.mb-5 utilities and older hero rules. */
.vh-layout-hero{
  --vh-hero-title-gap: clamp(.65rem, 1.2vw, 1rem);
  --vh-hero-lead-gap: clamp(1rem, 2vw, 1.55rem);
  --vh-hero-action-gap: clamp(.65rem, 1.4vw, .95rem);
  --vh-hero-copy-media-gap: clamp(1.65rem, 3.5vw, 3rem);
  --vh-hero-block-gap: clamp(1.3rem, 3vw, 2.5rem);
}

.vh-layout-hero .vh-hero-title.mb-3,
.vh-layout-hero .vh-hero-title{
  margin-bottom: var(--vh-hero-title-gap) !important;
}

.vh-layout-hero .vh-hero-lead.mb-4,
.vh-layout-hero .vh-hero-lead{
  margin-bottom: var(--vh-hero-lead-gap) !important;
}

.vh-layout-hero .vh-hero-actions{
  gap: var(--vh-hero-action-gap) !important;
}

.vh-layout-hero .mt-5,
.vh-layout-hero .vh-hero-extra.mt-5,
.vh-layout-hero .vh-hero-media-slot--below,
.vh-layout-hero .vh-hero-wide-media.mt-5{
  margin-top: var(--vh-hero-copy-media-gap) !important;
}

.vh-layout-hero .mb-5{
  margin-bottom: var(--vh-hero-copy-media-gap) !important;
}

/* Ensure repeated row-based layouts have the same gap vocabulary. */
.vh-hero-layout-default_split .row,
.vh-hero-layout-lifestyle_collage .row,
.vh-hero-layout-video_hero .row,
.vh-hero-layout-problem_solution .row,
.vh-hero-layout-portfolio_grid .row,
.vh-hero-layout-asymmetric_magazine .row,
.vh-hero-layout-bottom_image .row,
.vh-hero-layout-center_image_three .row,
.vh-hero-layout-right_edge_image .row{
  row-gap: var(--vh-hero-copy-media-gap) !important;
}

/* Desktop: media layouts should show their media clearly instead of being
   capped by the generic mobile/tablet recovery rules. */
@media (min-width: 992px){
  .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{
    width: min(100%, 1160px) !important;
    max-width: min(100%, 1160px) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  .vh-hero-layout-bottom_image{
    padding-bottom: 0 !important;
  }

  .vh-hero-layout-bottom_image .vh-hero-bottom-image-wrap{
    min-height: clamp(30rem, 70vh, 48rem) !important;
    align-items: stretch !important;
  }

  .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{
    align-self: flex-end !important;
    margin-bottom: 0 !important;
  }

  .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img{
    display: block !important;
    height: auto !important;
    max-height: clamp(28rem, 70vh, 48rem) !important;
    object-fit: contain !important;
    object-position: bottom center !important;
  }

  .vh-hero-layout-right_edge_image{
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{
    min-height: clamp(30rem, 70vh, 48rem) !important;
    align-items: stretch !important;
  }

  .vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{
    display: flex !important;
    align-items: stretch !important;
    padding-right: 0 !important;
  }

  .vh-hero-layout-right_edge_image .vh-hero-media--right-edge,
  .vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{
    width: 100% !important;
    height: 100% !important;
    min-height: clamp(30rem, 70vh, 48rem) !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Right edge means right edge. Custom radius controls may round the other
   corners, but never the top-right/bottom-right edge of this layout. */
.vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge,
.vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge > img,
.vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge img,
.vh-layout-hero.vh-hero-layout-right_edge_image.vh-hero-custom-media-radius .vh-hero-media--right-edge,
.vh-layout-hero.vh-hero-layout-right_edge_image.vh-hero-custom-media-radius .vh-hero-media--right-edge > img,
.vh-layout-hero.vh-hero-layout-right_edge_image.vh-hero-custom-media-radius .vh-hero-media--right-edge img{
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Finder layout: keep search input + search button in one crisp row on
   tablet and mobile. CTAs below it may still stack on mobile. */
.vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder{
  width: min(100%, 900px) !important;
  max-width: min(100%, 900px) !important;
}

.vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form,
body.home .vh-hero-layout-search_finder .vh-hero-finder-form{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 900px !important;
}

.vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form input[type="search"],
body.home .vh-hero-layout-search_finder .vh-hero-finder-form input[type="search"]{
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 3.75rem !important;
  border-radius: .95rem 0 0 .95rem !important;
  border-right: 0 !important;
}

.vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form button,
body.home .vh-hero-layout-search_finder .vh-hero-finder-form button{
  flex: 0 0 clamp(7rem, 24vw, 9.5rem) !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 3.75rem !important;
  padding-left: .9rem !important;
  padding-right: .9rem !important;
  white-space: nowrap !important;
  border-radius: 0 .95rem .95rem 0 !important;
  justify-self: auto !important;
}

/* Tablet contract: all layouts retain hierarchy, reduce utility spacing,
   and give media a deliberate size/edge behavior. */
@media (min-width: 600px) and (max-width: 991.98px){
  .vh-layout-hero{
    --vh-hero-title-gap: .7rem;
    --vh-hero-lead-gap: 1.15rem;
    --vh-hero-action-gap: .75rem;
    --vh-hero-copy-media-gap: clamp(1.5rem, 4vw, 2.25rem);
    --vh-hero-block-gap: clamp(1.25rem, 3vw, 2rem);
  }

  .vh-layout-hero .vh-hero-actions{
    max-width: min(100%, 42rem) !important;
  }

  .vh-hero-layout-default_split .row,
  .vh-hero-layout-lifestyle_collage .row,
  .vh-hero-layout-video_hero .row,
  .vh-hero-layout-problem_solution .row,
  .vh-hero-layout-portfolio_grid .row,
  .vh-hero-layout-asymmetric_magazine .row,
  .vh-hero-layout-bottom_image .row,
  .vh-hero-layout-center_image_three .row,
  .vh-hero-layout-right_edge_image .row{
    align-items: center !important;
  }

  .vh-hero-layout-editorial_center .vh-hero-wide-media,
  .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{
    width: min(100%, 46rem) !important;
    max-width: min(100%, 46rem) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image,
  .vh-hero-layout-bottom_image,
  .vh-hero-layout-right_edge_image{
    padding-bottom: 0 !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: bottom center !important;
  }

  .vh-hero-layout-bottom_image .vh-hero-bottom-image-wrap{
    min-height: auto !important;
    align-items: flex-end !important;
  }

  .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{
    width: min(100%, 32rem) !important;
    margin-bottom: 0 !important;
    align-self: flex-end !important;
  }

  .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img{
    max-height: clamp(22rem, 46vh, 34rem) !important;
    object-fit: contain !important;
    object-position: bottom center !important;
  }

  .vh-hero-layout-right_edge_image > .container{
    padding-left: var(--vh-hero-shell-pad-x) !important;
    padding-right: 0 !important;
    max-width: none !important;
  }

  .vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{
    padding-left: 0 !important;
    padding-right: var(--vh-hero-shell-pad-x) !important;
    text-align: center !important;
  }

  .vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .vh-hero-layout-right_edge_image .vh-hero-media--right-edge{
    width: min(100%, 46rem) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 34rem !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .vh-hero-layout-search_finder .vh-hero-finder{
    margin-top: 0 !important;
  }

  .vh-hero-layout-portfolio_grid .vh-hero-portfolio-grid,
  .vh-hero-layout-problem_solution .vh-hero-before-after,
  .vh-hero-layout-center_image_three .vh-hero-three-col-info{
    margin-top: 0 !important;
  }
}

/* Mobile contract: compressed, structured spacing. Search stays one row;
   normal CTAs stay stacked for tap comfort. */
@media (max-width: 599.98px){
  .vh-layout-hero{
    --vh-hero-title-gap: .55rem;
    --vh-hero-lead-gap: .9rem;
    --vh-hero-action-gap: .65rem;
    --vh-hero-copy-media-gap: 1.15rem;
    --vh-hero-block-gap: 1rem;
  }

  .vh-layout-hero .vh-hero-eyebrow{
    margin-bottom: .55rem !important;
  }

  .vh-layout-hero .vh-hero-actions{
    gap: .65rem !important;
  }

  .vh-layout-hero .vh-action-btn{
    min-height: 3rem !important;
  }

  .vh-layout-hero .vh-hero-proof,
  .vh-layout-hero .vh-hero-inline-detail-stack,
  .vh-layout-hero .vh-hero-before-after,
  .vh-layout-hero .vh-hero-portfolio-grid,
  .vh-layout-hero .vh-hero-three-col-info{
    margin-top: var(--vh-hero-block-gap) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image,
  .vh-hero-layout-bottom_image,
  .vh-hero-layout-right_edge_image{
    padding-bottom: 0 !important;
  }

  .vh-hero-layout-editorial_center_bottom_image > .container{
    padding-bottom: 0 !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{
    margin-bottom: 1rem !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: bottom center !important;
  }

  .vh-hero-layout-bottom_image .vh-hero-bottom-image-wrap{
    min-height: auto !important;
    align-items: flex-end !important;
    row-gap: 1.15rem !important;
  }

  .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{
    width: min(100%, 24rem) !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    align-self: flex-end !important;
  }

  .vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img{
    display: block !important;
    height: auto !important;
    max-height: clamp(17rem, 44vh, 26rem) !important;
    object-fit: contain !important;
    object-position: bottom center !important;
  }

  .vh-hero-layout-right_edge_image > .container{
    padding-left: var(--vh-hero-shell-pad-x) !important;
    padding-right: 0 !important;
    max-width: none !important;
  }

  .vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{
    padding-left: 0 !important;
    padding-right: var(--vh-hero-shell-pad-x) !important;
    text-align: center !important;
  }

  .vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .vh-hero-layout-right_edge_image .vh-hero-media--right-edge{
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .vh-hero-layout-right_edge_image .vh-hero-media--right-edge img{
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 24rem !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder{
    width: 100% !important;
    max-width: 100% !important;
  }

  .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form,
  body.home .vh-hero-layout-search_finder .vh-hero-finder-form{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form input[type="search"],
  body.home .vh-hero-layout-search_finder .vh-hero-finder-form input[type="search"]{
    min-height: 3.45rem !important;
    border-radius: .85rem 0 0 .85rem !important;
    font-size: .95rem !important;
  }

  .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form button,
  body.home .vh-hero-layout-search_finder .vh-hero-finder-form button{
    flex-basis: clamp(5.85rem, 30vw, 7.5rem) !important;
    min-height: 3.45rem !important;
    padding-left: .65rem !important;
    padding-right: .65rem !important;
    border-radius: 0 .85rem .85rem 0 !important;
    font-size: .95rem !important;
  }
}

@media (max-width: 360px){
  .vh-layout-hero.vh-hero-layout-search_finder .vh-hero-finder-form button,
  body.home .vh-hero-layout-search_finder .vh-hero-finder-form button{
    flex-basis: 5.6rem !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
}