/* ── Slider — looping, swipeable slides (pairs with js/slider.js) ──
   Builder / no-JS: slides simply stack. Once the script runs (.is-ready)
   the track lays the slides side by side and the viewport clips them. */
.eos-slider.is-ready .eos-slider__viewport {
  /* Clip hard (keeps off-screen slides out of the page width). The viewport
     reaches 1rem past the column on the left and each slide carries that 1rem
     as its own empty padding — so script swashes that hang outside their text
     box have room, and no neighbouring slide (its divider) shows there mid-move. */
  overflow: hidden;
  box-sizing: border-box;
  width: calc(100% + 1rem) !important;
  max-width: none !important;
  padding: 1rem 0;
  margin: -1rem 0 -1rem -1rem !important; /* beats Divi's last-child margin-bottom:0, which left 1rem dead space under every slider */
  touch-action: pan-y;      /* vertical scroll stays native; horizontal drags slide */
  cursor: grab;
  user-select: none;
}
.eos-slider.is-dragging .eos-slider__viewport { cursor: grabbing; }
/* while moving, clip at the column edge so slides passing out of view can't
   draw into the 1rem swash strip (their divider would look longer) */
.eos-slider.is-moving .eos-slider__viewport { clip-path: inset(0 0 0 1rem); }
.eos-slider.is-ready .eos-slider__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 0 !important;
  will-change: transform;
}
.eos-slider.is-ready .eos-slider__track > .eos-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-left: 1rem;       /* swash room, see viewport note above */
}
/* at rest only the current slide shows (no sub-pixel peek of its neighbour).
   Opacity, not visibility: hidden slides stay painted, so Chrome doesn't have
   to re-raster them when a move starts (that froze the first move after a wrap). */
.eos-slider.is-ready:not(.is-moving) .eos-slider__track > .eos-slide:not(.is-active) { opacity: 0; }

/* Arrows — outline circles, a pair at the top-left */
.eos-slider__btn {
  display: flex;            /* block-level: an inline button sits on a text line, which
                               is taller than a small (18px) arrow and pushes it off-centre */
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: transparent;
  color: var(--light-cream);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.eos-slider__btn svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eos-slider__btn:hover,
.eos-slider__btn:focus-visible { background: color-mix(in srgb, var(--cream) 15%, transparent); }
.eos-slider__btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* Arrows hide until the slider is live, and when there's only one slide */
.eos-slider:not(.is-ready) .eos-slider__nav,
.eos-slider[data-count="1"] .eos-slider__nav { display: none; }

/* Screen-reader-only live region ("Slide 2 of 3") */
.eos-slider__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  /* visually hidden, but contrast checkers still measure it: give it a passing pair */
  color: #000;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .eos-slider.is-ready .eos-slider__track { transition: none !important; }
}

/* ── Small arrows — .eos-slider--sm: 34px / 1px outline circles, 18px below 981
   (Meet the Doctors photo carousel). Hit area stays 34px on mobile. ── */
.eos-slider--sm .eos-slider__btn { position: relative; width: 2.125rem; height: 2.125rem; border-width: 1px; border-color: var(--light-cream); }
.eos-slider--sm .eos-slider__btn svg { width: 1.5rem; height: 1.5rem; stroke-width: 1; }
@media (max-width: 980px) {
  .eos-slider--sm .eos-slider__btn { width: 1.125rem; height: 1.125rem; }
  .eos-slider--sm .eos-slider__btn svg { width: 0.8rem; height: 0.8rem; stroke-width: 1.9; }
  .eos-slider--sm .eos-slider__btn::after { content: ""; position: absolute; inset: -0.5rem; }
}

/* ── Photo slides — .eos-slider--photo: images sit edge to edge. Drops the
   1rem swash room (meant for script text), which showed as a strip of
   background sliding between photos. ── */
.eos-slider--photo.is-ready .eos-slider__viewport { width: 100% !important; margin: 0 !important; padding: 0; }
.eos-slider--photo.is-ready .eos-slider__track > .eos-slide { padding-left: 0; }
.eos-slider--photo.is-moving .eos-slider__viewport { clip-path: none; }