/* ------------------------------------------------------------
   Hero Layout Tablet + Media Radius Contract
   Version: 1.5.60-wo57
   Scope: hero tablet CTA rows, uniform stacked widths, per-corner media radius.
   Purpose: make tablet/mobile hero sections look structured instead of mixed-width.
------------------------------------------------------------- */

.vh-layout-hero{
  --vh-hero-media-radius-tl: var(--vh-hero-media-radius-top-left, var(--vh-hero-media-radius-top, 1.35rem));
  --vh-hero-media-radius-tr: var(--vh-hero-media-radius-top-right, var(--vh-hero-media-radius-top, 1.35rem));
  --vh-hero-media-radius-br: var(--vh-hero-media-radius-bottom-right, var(--vh-hero-media-radius-bottom, 1.35rem));
  --vh-hero-media-radius-bl: var(--vh-hero-media-radius-bottom-left, var(--vh-hero-media-radius-bottom, 1.35rem));
}

.vh-layout-hero :is(.vh-hero-media,.vh-hero-wide-media,.vh-hero-collage-main,.vh-hero-before-after-card,.vh-hero-portfolio-card,.vh-hero-portfolio-card--empty){
  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 :is(.vh-hero-media,.vh-hero-wide-media,.vh-hero-collage-main) > :is(img,picture,video,iframe,.vh-hero-video,.vh-hero-placeholder),
.vh-layout-hero :is(.vh-hero-media,.vh-hero-wide-media,.vh-hero-collage-main) picture > img,
.vh-layout-hero .vh-hero-portfolio-card > :is(img,.vh-hero-portfolio-placeholder){
  border-radius: inherit !important;
}

/* Right Edge Image is an edge layout: the right side must stay square even when
   global or front-page per-corner image radius values are set. */
.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{
  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-stack-width: min(100%, 42rem);
    --vh-hero-copy-media-gap: clamp(1.15rem, 2.8vw, 1.75rem);
    --vh-hero-block-gap: clamp(1rem, 2.4vw, 1.5rem);
    --vh-hero-action-gap: .8rem;
  }

  /* Tablet CTAs should read like one action row, not a mobile stack. */
  body.home .vh-layout-hero .vh-hero-actions,
  .vh-layout-hero .vh-hero-actions{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: center !important;
    justify-items: stretch !important;
    gap: var(--vh-hero-action-gap) !important;
    width: var(--vh-hero-stack-width) !important;
    max-width: var(--vh-hero-stack-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home .vh-layout-hero .vh-hero-actions .btn,
  body.home .vh-layout-hero .vh-action-btn,
  .vh-layout-hero .vh-hero-actions .btn,
  .vh-layout-hero .vh-action-btn{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3.1rem !important;
    white-space: normal !important;
  }

  /* Make stacked hero sections share one visual measure on tablet. */
  .vh-layout-hero :is(.vh-hero-copy,.vh-hero-lead,.vh-hero-proof,.vh-hero-finder,.vh-hero-before-after,.vh-hero-portfolio-grid,.vh-hero-three-col-info,.vh-hero-wide-media,.vh-hero-wide-media--bottom-edge,.vh-hero-media--bottom-touch,.vh-hero-media--center-column,.vh-hero-media--offset,.vh-hero-media--right-edge){
    width: var(--vh-hero-stack-width) !important;
    max-width: var(--vh-hero-stack-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .vh-layout-hero .vh-hero-lead{
    max-width: min(100%, 58ch) !important;
  }

  .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-bottom-image-wrap > [class*="col"],
  .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap > [class*="col"],
  .vh-layout-hero.vh-hero-layout-center_image_three .vh-hero-three-col-wrap > [class*="col"]{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-proof,
  .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-proof,
  .vh-layout-hero.vh-hero-layout-center_image_three .vh-hero-three-col-info{
    margin-top: var(--vh-hero-block-gap) !important;
  }

  .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge,
  .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{
    margin-top: var(--vh-hero-copy-media-gap) !important;
    margin-bottom: 0 !important;
    align-self: center !important;
  }

  .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch > img,
  .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img,
  .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge > img,
  .vh-layout-hero.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-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge{
    margin-right: 0 !important;
    margin-left: auto !important;
  }

  .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{
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

@media (max-width: 599.98px){
  .vh-layout-hero{
    --vh-hero-stack-width: 100%;
    --vh-hero-copy-media-gap: 1rem;
    --vh-hero-block-gap: .9rem;
  }

  body.home .vh-layout-hero .vh-hero-actions,
  .vh-layout-hero .vh-hero-actions,
  .vh-layout-hero :is(.vh-hero-copy,.vh-hero-lead,.vh-hero-proof,.vh-hero-finder,.vh-hero-before-after,.vh-hero-portfolio-grid,.vh-hero-three-col-info,.vh-hero-wide-media,.vh-hero-wide-media--bottom-edge,.vh-hero-media--bottom-touch,.vh-hero-media--center-column,.vh-hero-media--offset,.vh-hero-media--right-edge){
    width: var(--vh-hero-stack-width) !important;
    max-width: var(--vh-hero-stack-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-bottom-image-wrap > [class*="col"],
  .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap > [class*="col"],
  .vh-layout-hero.vh-hero-layout-center_image_three .vh-hero-three-col-wrap > [class*="col"]{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge,
  .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch{
    margin-top: var(--vh-hero-copy-media-gap) !important;
    margin-bottom: 0 !important;
  }

  .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch > img,
  .vh-layout-hero.vh-hero-layout-bottom_image .vh-hero-media--bottom-touch img,
  .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge > img,
  .vh-layout-hero.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-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-media--right-edge img{
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}