/* ==========================================================================
   parts/slider.css — shared Splide skin (Splide 4.1.4, vendored with splide-core.min.css).
   Live never loads Splide's own CSS: it loads Bricks' splide-layer.min.css (core + Bricks' default arrow and
   pagination theme) plus frontend-layer.min.css, all inside @layer bricks. The rules below are that delta
   (docs/scout/ASSETS.md "Gap-fill #7"), with the replica's `.slider` root class standing in for Bricks'
   `.brxe-slider-nested`. Markup: <div class="splide slider block-<name>__slider" data-splide="…">.

   Kept inside @layer bricks on purpose: every block/part override (horse-card.css, stable-card.css, the
   slider blocks' style.css) is unlayered, so it wins whatever its specificity — exactly the cascade live has
   (e.g. .horse-card's justify-content:flex-start beats `.slider .splide__slide{justify-content:center}`, and
   the horse arrows' left/right beat `.splide__arrows--ltr .splide__arrow--prev{left:0}`).
   Raw px below are Bricks' vendor values (not design tokens).

   splide-core.min.css hides .splide until mounted; base.css keeps sliders visible without JS (DI-D27).
   ========================================================================== */

@layer bricks {
  .splide__track { height: 100%; width: 100%; }

  .splide__slide {
    -webkit-tap-highlight-color: transparent;
    background-size: cover;
  }

  .splide__arrows.custom { display: block; }

  .splide__arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    background-color: transparent;
    font-size: 60px;
    cursor: pointer;
    transform: translateY(-50%);
  }
  .splide__arrow:disabled { opacity: .5; }
  .splide__arrows--ltr .splide__arrow--prev { left: 0; }
  .splide__arrows--ltr .splide__arrow--next { right: 0; }

  .splide__pagination {
    position: absolute;
    bottom: 15px;
    left: 50%;
    z-index: 1;
    padding: 0;
    list-style: none;
    transform: translateX(-50%);
  }
  .splide__pagination li { line-height: 0; }
  .splide__pagination .splide__pagination__page {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 5px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: var(--black-trans-33);
    transition: transform .2s linear;
  }
  .splide__pagination .splide__pagination__page.is-active {
    z-index: 1;
    background-color: var(--black);
  }
  /* Live's own rule, kept in @layer bricks as on live: the unlayered :focus-visible ring (ACSS on live,
     base.css here) outranks it, so keyboard focus rings the dot exactly as on live (DATA-ISSUES DI-B20:
     no deviation). */
  .splide__pagination .splide__pagination__page:focus { outline: none; }

  /* Bricks nested-slider element (frontend-layer.min.css) */
  .slider {
    min-width: 0;
    width: 100%;
  }
  .slider .splide__slide {
    position: relative;
    display: flex;
    flex-direction: column;          /* live slides are .brxe-block elements (flex column) */
    align-items: center;
    justify-content: center;
  }
  .slider .splide__arrows svg {
    min-width: 0;
    min-height: 0;
  }

  /* Replica addition. Under reduced motion base.css gives every element transition-duration .01ms, and
     the initial transition-property is `all`, so Splide's hidden → visible switch on mount (.splide →
     .is-initialized) would itself transition, leaving the slides hidden for a few frames. Elements that
     declare their own transitions (buttons, links: never visibility) keep them — this rule is layered. */
  @media (prefers-reduced-motion: reduce) {
    .slider,
    .slider * { transition-property: none; }
  }
}