/* ==========================================================================
   blocks/horse-slider — live S3b "Horses Available" (#brxe-qadwbp): docs/BLOCKS.md §4.5,
   SECTIONS-A §3.2–3.4, SECTIONS-B §2. Cards: assets/css/parts/horse-card.css + badge.css; Splide base:
   assets/css/parts/slider.css (Bricks delta) over vendor splide-core.min.css.

   Measured on live (block top / height): 1440 2173.3 / 913.2 (1100 wide) · 768 2812.5 / 717.2 ·
   390 2867 / 760.8. Heading header 85.3 / 77.5 / 72.6 (h2 + 10px + Bebas line); slider 100px below it
   (the arrows sit in that gap); CTA --content-gap below the slider.

   The arrow pair (2 × 200px + 20px, centred) is wider than the slider below 420px: live overflows the
   viewport there (scrollWidth 405 @390). The S3 wrapper <section> clips it (base .section overflow-x:clip,
   DI-D7) — nothing here clips, so both arrows render exactly as live inside the viewport.
   ========================================================================== */

/* Block body: the nested root itself, or the inner body of the standalone section. */
.block-horse-slider--nested,
.block-horse-slider__body {
  display: flex;
  flex-direction: column;
  align-self: center;
  align-items: flex-start;
  gap: var(--content-gap);
  width: 100%;
  max-width: 110rem;
}
.block-horse-slider--nested:not(:first-child) { margin-top: var(--space-xl); }   /* live .margin-top--xl */
.block-horse-slider__container { align-items: center; }

.block-horse-slider__slider { margin-top: 10rem; }

/* Arrows: two white 200 × 44 bars above the track, 20px apart, centred on the slider (measured one-offs). */
.block-horse-slider__slider .splide__arrow {
  top: -8rem;
  width: 200px;
  min-width: 2.6rem;
  height: 44px;
  min-height: 2.6rem;
  background-color: var(--white);
  color: var(--black);
  font-size: 2.6rem;
}
.block-horse-slider__slider .splide__arrow--prev {
  left: calc(50% - 210px);
  border-radius: var(--radius-s) 0 0 var(--radius-s);
}
.block-horse-slider__slider .splide__arrow--next {
  right: calc(50% - 210px);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

/* "Click to view full selection": primary + glow, centred (Buttons v2 lock, docs/design/BUTTONS.md §4.3: live's
   48 box; 20px side padding ≤478 so the label stays on one line down to 360). */
.block-horse-slider__button {
  --btn-h: 4.8rem;
  --btn-padding-inline: 2rem;
  align-self: center;
  margin-top: var(--content-gap);
}

@media (min-width: 479px) {
  .block-horse-slider__button { --btn-padding-inline: var(--btn-md-pad-x); }
}

/* No JS (replica addition; DI-D27 keeps .splide visible): lay the cards out as Splide would and let the
   track scroll sideways; the arrows need Splide, so they are hidden. */
html:not(.js) .block-horse-slider__slider .splide__track { overflow-x: auto; }
html:not(.js) .block-horse-slider__slider .splide__arrows { display: none; }
html:not(.js) .block-horse-slider__slide {
  width: 100%;
  margin-right: 2rem;
}

@media (min-width: 768px) {
  html:not(.js) .block-horse-slider__slide { width: calc(50% - 1rem); }
}