/* ------------------------------------------------------------
   Hero Layout Base Contract
   Scope: shared universal hero shell across home, pages, archives, and CPTs.
   Purpose: isolate hero layout stability from legacy style.css/front-page.css.
------------------------------------------------------------- */

.vh-layout-hero{
  --vh-hero-shell-pad-x: clamp(1rem, 3.5vw, 2rem);
  --vh-hero-row-gap: clamp(1.75rem, 4vw, 3.5rem);
  --vh-hero-copy-max: 48rem;
  --vh-hero-media-max: 46rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip){
  .vh-layout-hero{ overflow-x: hidden; }
}

.vh-layout-hero *,
.vh-layout-hero *::before,
.vh-layout-hero *::after{
  box-sizing: border-box;
}

.vh-layout-hero > .container,
.vh-layout-hero .row,
.vh-layout-hero [class*="col-"]{
  min-width: 0;
}

.vh-layout-hero > .container{
  width: 100%;
  max-width: min(100%, 1140px);
  padding-left: var(--vh-hero-shell-pad-x) !important;
  padding-right: var(--vh-hero-shell-pad-x) !important;
}

@media (min-width: 1400px){
  .vh-layout-hero > .container{ max-width: min(100%, 1320px); }
}

.vh-layout-hero .row{
  row-gap: var(--vh-hero-row-gap);
}

.vh-layout-hero .vh-hero-copy,
.vh-layout-hero .vh-hero-copy--overlay,
.vh-layout-hero .vh-hero-copy--minimal,
.vh-layout-hero .vh-hero-copy--center{
  max-width: min(100%, var(--vh-hero-copy-max));
}

.vh-layout-hero .vh-hero-title{
  max-width: min(100%, 22ch) !important;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  text-wrap: balance;
}

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

.vh-layout-hero .vh-hero-media,
.vh-layout-hero .vh-hero-wide-media,
.vh-layout-hero .vh-hero-collage,
.vh-layout-hero .vh-hero-collage-main,
.vh-layout-hero .vh-hero-before-after,
.vh-layout-hero .vh-hero-portfolio-grid,
.vh-layout-hero .vh-hero-finder,
.vh-layout-hero .vh-hero-extra{
  max-width: 100%;
  min-width: 0;
}

.vh-layout-hero .vh-hero-media,
.vh-layout-hero .vh-hero-wide-media{
  width: min(100%, var(--vh-hero-media-max));
}

.vh-layout-hero .vh-hero-media img,
.vh-layout-hero .vh-hero-wide-media img,
.vh-layout-hero .vh-hero-collage-main img,
.vh-layout-hero .vh-hero-portfolio-card img,
.vh-layout-hero .vh-hero-before-after-image{
  max-width: 100%;
}

.vh-layout-hero .vh-hero-media iframe,
.vh-layout-hero .vh-hero-media video,
.vh-layout-hero .vh-hero-media embed,
.vh-layout-hero .vh-hero-media object{
  max-width: 100%;
}

.vh-layout-hero .vh-hero-actions{
  max-width: 100%;
}

.vh-layout-hero .vh-action-btn{
  white-space: normal;
  text-align: center;
}

.vh-layout-hero .vh-hero-proof,
.vh-layout-hero .vh-hero-proof--rating,
.vh-layout-hero .vh-hero-proof--quote,
.vh-layout-hero .vh-hero-inline-detail-stack{
  max-width: min(100%, 42rem);
}

.vh-layout-hero .vh-hero-finder-form{
  max-width: 100%;
}

.vh-layout-hero .vh-hero-finder-form input[type="search"],
.vh-layout-hero .vh-hero-finder-form button{
  max-width: 100%;
}

.vh-layout-hero.vh-hero-layout-right_edge_image > .container{
  max-width: none;
}

/* ------------------------------------------------------------
   Hero Video Modal Contract
   Scope: interactive video poster, play trigger, and footer modal.
------------------------------------------------------------- */
.vh-layout-hero .vh-hero-video--modal{
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  background: #05070d;
}

.vh-layout-hero .vh-hero-video-trigger{
  appearance: none;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.vh-layout-hero .vh-hero-video-trigger > img,
.vh-layout-hero .vh-hero-video-trigger > .vh-hero-placeholder{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vh-layout-hero .vh-hero-video-trigger::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,7,13,.02), rgba(5,7,13,.18));
  pointer-events: none;
  transition: background-color .2s ease;
}

.vh-layout-hero .vh-hero-video-trigger .vh-hero-play{
  z-index: 2;
  pointer-events: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.vh-layout-hero .vh-hero-video-trigger:hover .vh-hero-play,
.vh-layout-hero .vh-hero-video-trigger:focus-visible .vh-hero-play{
  transform: translate(-50%,-50%) scale(1.08);
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,.38);
}

.vh-layout-hero .vh-hero-video-trigger:focus-visible{
  outline: 3px solid #fff;
  outline-offset: -6px;
  box-shadow: inset 0 0 0 6px rgba(17,24,39,.75);
}

.vh-hero-video-modal{
  z-index: 100100;
}

body.vh-hero-video-modal-open .modal-backdrop{
  z-index: 100090;
}

.vh-hero-video-modal .modal-dialog{
  width: calc(100% - 2rem);
  max-width: min(92vw, 1120px);
  margin-right: auto;
  margin-left: auto;
}

.vh-hero-video-modal .modal-content{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 1rem;
  background: #05070d;
  color: #fff;
  box-shadow: 0 2rem 5rem rgba(0,0,0,.55);
}

.vh-hero-video-modal .vh-hero-video-modal__toolbar{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 3.5rem;
  padding: .375rem .5rem;
  background: #05070d;
}

.vh-hero-video-modal .vh-hero-video-modal__close{
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: .75rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  background-color: rgba(255,255,255,.08);
  opacity: 1;
}

.vh-hero-video-modal .vh-hero-video-modal__close:hover{
  background-color: #05070d;
  opacity: 1;
}

.vh-hero-video-modal .vh-hero-video-modal__close:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(37,99,235,.72);
}

.vh-hero-video-modal .modal-body{
  padding: 0;
  background: #000;
}

.vh-hero-video-modal iframe{
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

@media (max-width: 599.98px){
  .vh-hero-video-modal .modal-dialog{
    width: calc(100% - 1rem);
    max-width: none;
    margin: .5rem auto;
  }

  .vh-hero-video-modal .vh-hero-video-modal__toolbar{
    min-height: 3.25rem;
    padding: .25rem .375rem;
  }
}