/* ------------------------------------------------------------
   Demo Gallery component
   Scope: screenshot grid, responsive ratios, carousel/modal display.
------------------------------------------------------------- */
.vh-demo-gallery{
  --vh-demo-gallery-aspect-ratio: 16 / 9;
}

.vh-demo-gallery--ratio-landscape{ --vh-demo-gallery-aspect-ratio: 16 / 9; }
.vh-demo-gallery--ratio-square{ --vh-demo-gallery-aspect-ratio: 1 / 1; }
.vh-demo-gallery--ratio-portrait{ --vh-demo-gallery-aspect-ratio: 9 / 16; }
.vh-demo-gallery--ratio-vertical{ --vh-demo-gallery-aspect-ratio: 4 / 5; }

.vh-demo-gallery:not(.vh-demo-gallery--ratio-auto) .vh-demo-gallery-grid > [class*="col-"]{
  aspect-ratio: var(--vh-demo-gallery-aspect-ratio) !important;
  min-height: 0 !important;
  overflow: hidden;
}

.vh-demo-gallery:not(.vh-demo-gallery--ratio-auto) .vh-demo-gallery-grid .vh-gallery-tile{
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden;
}

.vh-demo-gallery:not(.vh-demo-gallery--ratio-auto) .vh-demo-gallery-grid .vh-gallery-tile img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.vh-demo-gallery--ratio-auto .vh-demo-gallery-grid > [class*="col-"]{
  aspect-ratio: auto !important;
}

.vh-gallery-modal--ratio-landscape .carousel-item{ aspect-ratio: 16 / 9; }
.vh-gallery-modal--ratio-square .carousel-item{ aspect-ratio: 1 / 1; }
.vh-gallery-modal--ratio-portrait .carousel-item{ aspect-ratio: 9 / 16; }
.vh-gallery-modal--ratio-vertical .carousel-item{ aspect-ratio: 4 / 5; }

.vh-gallery-modal:not(.vh-gallery-modal--ratio-auto) .carousel-item{
  max-height: 82vh;
  background: #fff;
}

.vh-gallery-modal:not(.vh-gallery-modal--ratio-auto) .carousel-item img{
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

/* ------------------------------------------------------------
   Post-hero overlap
   Service and portfolio screenshot grids are designed to sit partially over
   the bottom of the hero. This stays independent from the hero bottom-padding
   setting: padding creates breathing room, this offset preserves the overlap.
------------------------------------------------------------- */
.vh-demo-gallery.vh-post-hero-overlap,
.single-vh_service .vh-demo-gallery,
.single-vh_portfolio .vh-demo-gallery{
  --vh-post-hero-overlap: clamp(4.75rem, 8vw, 7.5rem);
  --vh-post-hero-overlap-bg: var(--bs-body-bg, #ffffff);
  margin-top: calc(var(--vh-post-hero-overlap) * -1) !important;
  position: relative;
  z-index: 1000;
  isolation: isolate;
  background: transparent !important;
}

.vh-demo-gallery.vh-post-hero-overlap::before,
.single-vh_service .vh-demo-gallery::before,
.single-vh_portfolio .vh-demo-gallery::before{
  content: "";
  position: absolute;
  top: var(--vh-post-hero-overlap);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background: var(--vh-post-hero-overlap-bg);
  pointer-events: none;
}

.vh-demo-gallery.vh-post-hero-overlap > *,
.single-vh_service .vh-demo-gallery > *,
.single-vh_portfolio .vh-demo-gallery > *{
  position: relative;
  z-index: 1;
}

@media (min-width: 600px) and (max-width: 991.98px){
  .vh-demo-gallery.vh-post-hero-overlap,
  .single-vh_service .vh-demo-gallery,
  .single-vh_portfolio .vh-demo-gallery{
    --vh-post-hero-overlap: clamp(3.5rem, 7vw, 5.5rem);
  }
}

@media (max-width: 599.98px){
  .vh-demo-gallery.vh-post-hero-overlap,
  .single-vh_service .vh-demo-gallery,
  .single-vh_portfolio .vh-demo-gallery{
    --vh-post-hero-overlap: 2rem;
  }
}