/* ------------------------------------------------------------
   Hero Right Edge + Related FAQ Responsive Contract
   Version: 1.5.61-wo58
   Scope: right-edge hero media alignment + non-home related FAQ accordions.
   Purpose: remove remaining gutters from edge media layouts and make related
   FAQ sections on service/portfolio pages match the homepage FAQ experience.
------------------------------------------------------------- */

/* ============================================================
   1. Right Edge Image Hero: edge media must actually reach the edge.
   The old Bootstrap container/row gutters were still creating a visual inset.
============================================================ */

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

.vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.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: 992px){
  .vh-layout-hero.vh-hero-layout-right_edge_image > .container{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{
    --bs-gutter-x: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(34rem, 72vh, 54rem) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: stretch !important;
  }

  .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding-left: max(1.5rem, calc((100vw - 1140px) / 2 + 3rem)) !important;
    padding-right: clamp(1.5rem, 4vw, 4.5rem) !important;
  }

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

  .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap > .vh-hero-right-edge-media-col:last-child .vh-hero-media--right-edge{
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }

  .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap > .vh-hero-right-edge-media-col:last-child .vh-hero-media--right-edge > img,
  .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap > .vh-hero-right-edge-media-col:last-child .vh-hero-media--right-edge img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: clamp(34rem, 72vh, 54rem) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width: 991.98px){
  .vh-layout-hero.vh-hero-layout-right_edge_image > .container{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-wrap{
    --bs-gutter-x: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    row-gap: clamp(1rem, 3vw, 1.5rem) !important;
  }

  .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-copy{
    width: min(100%, 42rem) !important;
    max-width: min(100%, 42rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--vh-hero-shell-pad-x, 1.25rem) !important;
    padding-right: var(--vh-hero-shell-pad-x, 1.25rem) !important;
  }

  .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-right-edge-media-col{
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--vh-hero-shell-pad-x, 1.25rem) !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .vh-layout-hero.vh-hero-layout-right_edge_image .vh-hero-media--right-edge{
    width: min(100%, 42rem) !important;
    max-width: min(100%, 42rem) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    transform: none !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{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: right bottom !important;
  }
}

/* ============================================================
   2. Related FAQ accordions on single Service/Portfolio pages.
   These sections use #front-faq markup but do not load front-page.css, so they
   need the same component contract globally.
============================================================ */

body.single-vh_service #front-faq,
body.single-vh_portfolio #front-faq{
  background: var(--vh-faq-section-bg, #f6f7f3) !important;
  color: var(--vh-faq-section-text, #0f172a) !important;
  overflow: visible !important;
}

body.single-vh_service #front-faq .container,
body.single-vh_portfolio #front-faq .container{
  width: min(100%, 1060px) !important;
  max-width: min(100%, 1060px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.single-vh_service #front-faq .content-section-heading,
body.single-vh_portfolio #front-faq .content-section-heading{
  color: var(--vh-faq-section-text, #0f172a) !important;
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem) !important;
}

body.single-vh_service #front-faq .content-section-heading .text-secondary,
body.single-vh_portfolio #front-faq .content-section-heading .text-secondary{
  color: var(--vh-accent, #9fb30f) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.single-vh_service #front-faq .content-section-heading h2,
body.single-vh_portfolio #front-faq .content-section-heading h2{
  color: var(--vh-faq-section-text, #0f172a) !important;
  margin-bottom: 0 !important;
}

body.single-vh_service #front-faq .accordion,
body.single-vh_portfolio #front-faq .accordion{
  width: min(100%, 920px) !important;
  max-width: min(100%, 920px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.single-vh_service #front-faq .accordion-item,
body.single-vh_portfolio #front-faq .accordion-item{
  border-radius: .75rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  background: #fff !important;
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .06) !important;
}

body.single-vh_service #front-faq .accordion-item + .accordion-item,
body.single-vh_portfolio #front-faq .accordion-item + .accordion-item{
  margin-top: .75rem !important;
}

body.single-vh_service #front-faq .accordion-button,
body.single-vh_portfolio #front-faq .accordion-button{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 1.25rem !important;
  gap: .65rem !important;
  align-items: center !important;
  width: 100% !important;
  padding: 1rem 1.25rem !important;
  color: #111827 !important;
  background: #fff !important;
  font-weight: 600 !important;
  text-align: left !important;
  box-shadow: none !important;
}

body.single-vh_service #front-faq .accordion-button:not(.collapsed),
body.single-vh_portfolio #front-faq .accordion-button:not(.collapsed){
  color: #0f172a !important;
  background: #eaf2ff !important;
}

body.single-vh_service #front-faq .accordion-button::after,
body.single-vh_portfolio #front-faq .accordion-button::after{
  grid-column: 3 !important;
  margin-left: 0 !important;
  justify-self: end !important;
}

body.single-vh_service #front-faq .vh-faq-accordion-title,
body.single-vh_portfolio #front-faq .vh-faq-accordion-title{
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.single-vh_service #front-faq .accordion-button .badge,
body.single-vh_portfolio #front-faq .accordion-button .badge{
  justify-self: end !important;
  max-width: min(100%, 18rem) !important;
  margin-left: 0 !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  color: #111827 !important;
  background: #f8fafc !important;
  white-space: normal !important;
  text-align: center !important;
}

body.single-vh_service #front-faq .accordion-body,
body.single-vh_portfolio #front-faq .accordion-body{
  color: #374151 !important;
  background: #fff !important;
  padding: 1rem 1.25rem 1.25rem !important;
}

body.single-vh_service #front-faq .accordion-body a,
body.single-vh_portfolio #front-faq .accordion-body a{
  color: var(--vh-accent, #9fb30f) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body.single-vh_service #front-faq .accordion-body a:hover,
body.single-vh_portfolio #front-faq .accordion-body a:hover{
  text-decoration: underline !important;
}

@media (min-width: 600px) and (max-width: 991.98px){
  body.single-vh_service #front-faq,
  body.single-vh_portfolio #front-faq{
    padding-top: clamp(3rem, 7vw, 5rem) !important;
    padding-bottom: clamp(3rem, 7vw, 5rem) !important;
  }

  body.single-vh_service #front-faq .container,
  body.single-vh_portfolio #front-faq .container{
    padding-left: clamp(1.25rem, 4vw, 2.5rem) !important;
    padding-right: clamp(1.25rem, 4vw, 2.5rem) !important;
  }
}

@media (max-width: 599.98px){
  body.single-vh_service #front-faq,
  body.single-vh_portfolio #front-faq{
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  body.single-vh_service #front-faq .container,
  body.single-vh_portfolio #front-faq .container{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  body.single-vh_service #front-faq .content-section-heading h2,
  body.single-vh_portfolio #front-faq .content-section-heading h2{
    font-size: clamp(2rem, 10vw, 2.75rem) !important;
    line-height: 1.05 !important;
  }

  body.single-vh_service #front-faq .accordion-button,
  body.single-vh_portfolio #front-faq .accordion-button{
    grid-template-columns: minmax(0, 1fr) 1.25rem !important;
    grid-auto-rows: auto !important;
    gap: .4rem .75rem !important;
    padding: 1rem !important;
  }

  body.single-vh_service #front-faq .accordion-button::after,
  body.single-vh_portfolio #front-faq .accordion-button::after{
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
  }

  body.single-vh_service #front-faq .accordion-button .badge,
  body.single-vh_portfolio #front-faq .accordion-button .badge{
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    max-width: 100% !important;
    font-size: .72rem !important;
    line-height: 1.2 !important;
    padding: .35rem .55rem !important;
  }

  body.single-vh_service #front-faq .accordion-body,
  body.single-vh_portfolio #front-faq .accordion-body{
    padding: 1rem !important;
  }
}