//Created with PHPStorm AI

.logo-slider {
  &__title {
    margin-bottom: 1rem;
  }

  &__track {
    display: flex;

    /* defined in Twig inline style, but keep defaults for safety */
    --logo-gap: 3rem;
    --slides-count: 1;

    gap: var(--logo-gap);

    overflow-x: auto;
    padding: 0.25rem 0.125rem;

    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  &__slide {
    flex: 0 0 auto;
    display: flex;
    align-items: center;

    /* Default: natural sizing (no forced "slots") */
    width: auto;
  }

  /*
    Only when editor sets slides-per-view, force a slot width.
    Clamp to slides-count so it never exceeds actual slides.
  */
  &__track[data-spv="1"] {
    --effective-spv: min(var(--slides-per-view), var(--slides-count));
  }

  &__track[data-spv="1"] &__slide {
    width: calc(
            (100% - (var(--logo-gap) * (var(--effective-spv) - 1))) / var(--effective-spv)
    );
  }

  &__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-height: 56px;
    width: 100%;
  }

  /* SVG fallback */
  &__img {
    display: block;
    height: 56px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  /* image.twig include output */
  picture.logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    max-width: 100%;
  }

  picture.logo img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
}