/* ==========================================================================
   blocks/stable-slider — live S5 "Our Stable" (section#brxe-jqtkrz): docs/BLOCKS.md §4.7, SECTIONS-B §4.
   Cards: assets/css/parts/stable-card.css; Splide base: assets/css/parts/slider.css over splide-core.

   Measured on live (section top / height): 1440 4295 / 1368.7 · 768 4904.4 / 1262.9 · 390 4895.7 / 1307.8.
   Intro .width--m (546.4px), slider .width--xl (1092.8px); 3 / 2 / 1 cards per view at ≥992 / 479–991 /
   ≤478 (gap 2rem / 3rem / 3rem, from data-splide); dots 80px below the track; the button --space-xxl
   below the slider (the dots sit in that gap).
   ========================================================================== */

/* White section with the horse-head artwork contained at the top (live #brxe-jqtkrz). */
.block-stable-slider {
  background-image: var(--block-stable-slider-bg, none);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

.block-stable-slider__container { align-items: center; }

/* Intro (live .center--all.text--secondary.width--m) */
.block-stable-slider__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--content-gap);
  width: var(--width-m);
  max-width: 100%;
  color: var(--secondary);
  text-align: center;
}
.block-stable-slider__heading {
  color: var(--secondary);
  text-align: center;
  text-transform: capitalize;
}
.block-stable-slider__lead {                 /* live p.text--l.text--bold: ACSS text sizes render in Nimbus */
  font-family: var(--text-font-family);
  font-size: var(--text-l);
  font-weight: 700;
}
.block-stable-slider__text > * + * { margin-block: var(--paragraph-spacing) 0; }   /* live .brxe-text flow */

/* Slider + button (live .width--xl) */
.block-stable-slider__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--content-gap);
  width: var(--width-xl);
  max-width: 100%;
}

.block-stable-slider__slide {                /* live .wlp-slide */
  justify-content: flex-start;
  padding: 1rem;
}

.block-stable-slider__slider .splide__pagination { bottom: -8rem; }
/* Live's li line box is the body line height (ACSS li rule beats Bricks' layered 0); splide-core's
   unlayered line-height:1 would shorten it and lift the dots. */
.block-stable-slider__slider .splide__pagination li { line-height: var(--text-line-height); }
.block-stable-slider__slider .splide__pagination .splide__pagination__page {   /* live #brxe-lloycz: 12px dots */
  width: 12px;
  height: 12px;
}
.block-stable-slider__slider .splide__pagination .splide__pagination__page.is-active {
  background-color: var(--secondary);
  color: var(--secondary);
}

.block-stable-slider__button {
  --btn-h: 4.8rem;                      /* Buttons v2 locks (docs/design/BUTTONS.md §4.3): live's 48 box, */
  --btn-font-size: 1.6rem;              /* its 16px label (2 lines, 64 tall, up to ~400px), */
  --btn-padding-inline: 3rem;           /* and its outer width now that the 2px border is inside the box */
  align-self: center;
  margin-top: var(--space-xxl);
}

/* No JS (replica addition; DI-D27 keeps .splide visible): lay the cards out as Splide would (1 / 2 / 3 per
   view, gaps 3rem / 3rem / 2rem) and let the track scroll sideways. */
html:not(.js) .block-stable-slider__slider .splide__track { overflow-x: auto; }
html:not(.js) .block-stable-slider__slide {
  width: 100%;
  margin-right: 3rem;
}

@media (min-width: 479px) {
  html:not(.js) .block-stable-slider__slide { width: calc(50% - 1.5rem); }
}

@media (min-width: 992px) {
  html:not(.js) .block-stable-slider__slide {
    width: calc(33.3333% - 1.33333rem);
    margin-right: 2rem;
  }
}