/* Related posts: static horizontal slider (no Flexy hover dependency) */
.ct-related-posts.is-layout-slider .flexy-container {
  --grid-columns-width: calc(100% / 3);
  position: relative;
}

.ct-related-posts.is-layout-slider .flexy-view {
  overflow-x: auto !important;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ct-related-posts.is-layout-slider .flexy-view::-webkit-scrollbar {
  display: none;
}

.ct-related-posts.is-layout-slider .flexy-items {
  display: flex !important;
  transform: none !important;
  will-change: auto;
}

.ct-related-posts.is-layout-slider .flexy-items > * {
  flex: 0 0 var(--grid-columns-width, 50%) !important;
  max-width: var(--grid-columns-width, 50%) !important;
  transform: none !important;
  scroll-snap-align: start;
  cursor: grab;
}

.ct-related-posts.is-layout-slider .flexy {
  position: relative;
}

.ct-related-posts.is-layout-slider .flexy-arrow-prev,
.ct-related-posts.is-layout-slider .flexy-arrow-next {
  position: absolute !important;
  /* Prefer JS-measured image center; fallback ≈ half of 4:3 image in a 3-col row */
  top: var(--related-arrow-top, calc((100% / 3 - 30px) * 0.375)) !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  --flexy-nav-arrow-top-offset: 0;
  --translate-x: 0 !important;
  --rotate: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: 5;
  pointer-events: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ct-related-posts.is-layout-slider .flexy:hover .flexy-arrow-prev,
.ct-related-posts.is-layout-slider .flexy:hover .flexy-arrow-next,
.ct-related-posts.is-layout-slider .flexy:focus-within .flexy-arrow-prev,
.ct-related-posts.is-layout-slider .flexy:focus-within .flexy-arrow-next {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
}

.ct-related-posts.is-layout-slider .flexy-arrow-prev {
  left: 8px !important;
  right: auto !important;
}

.ct-related-posts.is-layout-slider .flexy-arrow-next {
  right: 8px !important;
  left: auto !important;
}

.ct-related-posts.is-layout-slider .flexy-arrow-prev:hover,
.ct-related-posts.is-layout-slider .flexy-arrow-next:hover {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.55) !important;
}

.ct-related-posts.is-layout-slider .flexy-arrow-prev svg,
.ct-related-posts.is-layout-slider .flexy-arrow-next svg {
  opacity: 0.9;
}

@media (max-width: 689.98px) {
  .ct-related-posts.is-layout-slider .flexy-container {
    --grid-columns-width: calc(100% / 1);
  }
}

/* Touch devices: keep arrows usable without hover */
@media (hover: none) {
  .ct-related-posts.is-layout-slider .flexy-arrow-prev,
  .ct-related-posts.is-layout-slider .flexy-arrow-next {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
  }
}