/* BH Horizontal Strip Gallery v2 */

.bh-scroll-wrap{
  position:relative;
}

.bh-scroll-frame{
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:12px;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  cursor:grab;
}

/* While actively dragging: hand closes, scrolling is direct (not smoothed),
   and text/image selection is suppressed so the pull feels clean. The
   !important on scroll-behavior beats any theme smooth-scroll rule that would
   otherwise fight the per-frame scroll writes and snap the position back. */
.bh-scroll-frame.bh-grabbing{
  cursor:grabbing;
  scroll-behavior:auto !important;
  user-select:none;
  -webkit-user-select:none;
}
.bh-scroll-frame.bh-grabbing img{
  pointer-events:none; /* stops the native image drag-ghost mid-pull */
}

/* Visible focus ring for keyboard users, removed for mouse users */
.bh-scroll-frame:focus{outline:none;}
.bh-scroll-frame:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

.bh-scroll-inner{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:18px;
  align-items:flex-start;
  width:max-content;
  max-width:none;
}

.bh-item{
  flex:0 0 auto;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.bh-item .vc_single_image-wrapper{display:block;}

/* Fixed height, natural width, no max cap, so the row runs wider than the
   screen and overflows into a scroll. !important beats any theme image rule. */
.bh-scroll-inner .bh-item img,
.bh-scroll-inner .bh-img{
  height:var(--bh-strip-h,340px) !important;
  width:auto !important;
  max-width:none !important;
  display:block !important;
}

.bh-item figcaption{
  display:block;
  margin-top:8px;
  font-size:13px;
  line-height:1.4;
  max-width:var(--bh-cap-w,360px);
}

/* Edge fades: hint that there is more to scroll. Toggled by JS via data-overflow. */
.bh-scroll-wrap::before,
.bh-scroll-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:12px; /* sit above the scrollbar padding */
  width:48px;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  z-index:2;
}
.bh-scroll-wrap::before{
  left:0;
  background:linear-gradient(to right, var(--bh-fade-color, rgba(0,0,0,0.12)), transparent);
}
.bh-scroll-wrap::after{
  right:0;
  background:linear-gradient(to left, var(--bh-fade-color, rgba(0,0,0,0.12)), transparent);
}
.bh-scroll-wrap[data-at-start="0"]::before{opacity:1;}
.bh-scroll-wrap[data-at-end="0"]::after{opacity:1;}

/* Arrow buttons (desktop affordance) */
.bh-arrow{
  position:absolute;
  top:calc(50% - 6px);
  transform:translateY(-50%);
  z-index:3;
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bh-arrow-bg, rgba(255,255,255,0.9));
  color:var(--bh-arrow-color, #222);
  box-shadow:0 1px 6px rgba(0,0,0,0.18);
  transition:opacity .2s ease, background .2s ease;
}
.bh-arrow:hover{background:var(--bh-arrow-bg-hover, #fff);}
.bh-arrow:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.bh-arrow--prev{left:8px;}
.bh-arrow--next{right:8px;}
.bh-arrow[hidden]{display:none;}

/* Hide arrows on touch where native swipe is the expected interaction */
@media (hover:none){
  .bh-arrow{display:none;}
}