.rhf-slider {
  position: relative;
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 56px; /* space for arrows */
  box-sizing: border-box;
}
#slider {
    margin: 3.5vw 7vw 7vw;
}
.rhf-lightbox__embed iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 90vh;
}
.rhf-slider__viewport {
  overflow: hidden;
  width: 100%;
}
button {
    padding: 13px;
}
.rhf-slider {
  --rhf-gap: 30px;
  --rhf-slide-max: 700px; /* cap each slide around 500px on big screens */
}

/* Track */
.rhf-slider__track {
  display: flex;
  gap: var(--rhf-gap);
  will-change: transform;
  transition: transform 300ms ease;
  transform: translate3d(0,0,0);
}

/*
  KEY FIX:
  Make each slide width be exactly 1/3 of the viewport (minus gaps),
  so 3 slides show fully and NEVER allow a 4th to peek in.
*/
.rhf-slide {
  flex: 0 0 calc((100% - (var(--rhf-gap) * 2)) / 3);
  max-width: var(--rhf-slide-max);
  cursor: pointer;
  user-select: none;
  outline: none;
}

/* Ensure viewport is truly clipping any overflow */
.rhf-slider__viewport {
  overflow: hidden;
  width: 100%;
}


.rhf-slide__media {
  position: relative;
  width: 100%;
  aspect-ratio: 500 / 298;
  border-radius: 0;
  overflow: hidden;
  background: #111;
}

.rhf-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rhf-slide__play {
  position: absolute;
  inset: auto auto 14px 14px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
    display: none;
}

.rhf-slide__meta {
  padding-top: 15px;
    padding-left: 10px;
}

.rhf-slide__name {
  font-weight: 700;
 font-size: calc(0.72916667vw + 10px);
  line-height: 1.2;
  color: #fff;
}

.rhf-slide__location {
  margin-top: 4px;
  font-size: calc(10px + 0.41666667vw);
  line-height: 1.2;
  color: #fff;
  font-weight: 300;
}

/* Arrows */
.rhf-slider__arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 26px;
  text-align: center;
  cursor: pointer;
  z-index: 5;
    background-image: url(/wp-content/uploads/2026/01/left.png);
  text-indent: -9999px;
  width: 1.5vw;
  height: 3vw;
  background-size: 1.5vw 3vw;
  padding: 0;
  margin: 0;
  background-repeat: no-repeat;
}


.rhf-slider__arrow--left { left: 8px; }
.rhf-slider__arrow--right { right: 8px;
    background-image: url(/wp-content/uploads/2026/01/right.png); }

/* Dots */
.rhf-slider__dots {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding-top: 20px;
}

.rhf-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #ffffff; /* default white */
  opacity: 0.9;
}

.rhf-dot.is-active {
  background: #73A2D6; /* active blue */
  opacity: 1;
}

/* Lightbox */
.rhf-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.rhf-lightbox.is-open { display: block; }

.rhf-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

.rhf-lightbox__content {
  position: relative;
  width: 80vw;
  margin: 5vh auto 0;
  background: #0b0b0b;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.rhf-lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 22px;
  line-height: 0;
}

.rhf-lightbox__videoWrap {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.rhf-lightbox__iframe {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 768px) {
  .rhf-slider {
    padding: 0 46px;
  }

  .rhf-slide {
    flex: 0 0 100%;
    max-width: none;
  }

  .rhf-slider__dots {
    display: none;
  }
}