/* Shared gallery marquee (Splide). Slide widths mirror the Splide perPage breakpoints so the pre-init layout
   matches the mounted one (no shift). Live slide: 9/16 image, radius, ~1.25rem between images. */
@layer components {
  .marquee { --per-page: 7; position: relative; inline-size: 100%; visibility: visible; }
  @media (width <= 80rem) { .marquee { --per-page: 6; } }
  @media (width <= 62rem) { .marquee { --per-page: 5; } }
  @media (width <= 48rem) { .marquee { --per-page: 4; } }
  @media (width <= 30rem) { .marquee { --per-page: 3; } }
  .marquee .splide__track { overflow: hidden; position: relative; z-index: 0; }
  .marquee .splide__list { display: flex; margin: 0; padding: 0; list-style: none; backface-visibility: hidden; }
  .marquee:not(.is-initialized) .splide__list { justify-content: flex-start; }
  .marquee .splide__slide {
    flex: 0 0 calc(100% / var(--per-page));
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.625rem;
    list-style: none;
  }
  .marquee__img { inline-size: 100%; block-size: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius); }
  .marquee.is-initialized .splide__slide { cursor: grab; }
  .marquee.is-initialized .splide__slide:active { cursor: grabbing; }
  .marquee .splide__track:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
}