/**
 * Video Slider block.
 */

.video-slider {
  position: relative;
  width: 673px;
  max-width: 90vw;
  margin: 72px auto 0; /* 72px top margin above this slider only */
}

/* Responsive 16:9 YouTube embed. */
.video-slide__embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #d9d9d9;
}

.video-slide__embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Hide slides until slick has initialized to avoid a stacked flash. */
.video-slider__track:not(.slick-initialized) .video-slide + .video-slide {
  display: none;
}

/* ---- Arrows ---- */
.video-slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #00538d; /* Amphenol blue */
  color: #fff;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.video-slider .slick-arrow:hover,
.video-slider .slick-arrow:focus {
  background-color: #003b66;
  outline: none;
}

/* Arrows sit exactly 90px from the video on each side. The container width
   equals the video width, so positioning relative to its edges keeps the
   90px gap consistent at any size (including the 90vw cap). */
.video-slider .slick-prev {
  left: auto;
  right: 100%;
  margin-right: 90px;
}

.video-slider .slick-next {
  left: 100%;
  right: auto;
  margin-left: 90px;
}

/* Chevron icons drawn with borders. */
.video-slider .slick-arrow::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  opacity: 1;
}

.video-slider .slick-prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.video-slider .slick-next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}

/* ---- Dots ---- */
.video-slider .slick-dots {
  position: static;
  display: flex;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.video-slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}

.video-slider .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #c4c4c4;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

.video-slider .slick-dots li button::before {
  content: none;
}

.video-slider .slick-dots li.slick-active button {
  background-color: #00538d;
}

/* ---- Mobile ---- */
@media (max-width: 800px) {
  /* Hide the dots on mobile. */
  .video-slider .slick-dots {
    display: none;
  }

  /* Center the two arrows next to each other, below the video. */
  .video-slider .slick-arrow {
    position: static;
    top: auto;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .video-slider .slick-prev,
  .video-slider .slick-next {
    left: auto;
    right: auto;
    margin: 0;
  }

  .video-slider .slick-list {
    margin-bottom: 18px;
  }

  /* Wrapper that holds both arrows, created via JS on mobile. */
  .video-slider__arrows {
    display: flex;
    justify-content: center;
    gap: 18px;
  }
}