/* ==========================================================================
   Section: Brands
   Figma: 167:7 — 1666 × 219
   ========================================================================== */

.ss-brands__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-18);
}

.ss-brands__title {
  text-align: center;
}

.ss-brands__carousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-8);
  width: 100%;
}

.ss-brands__nav {
  grid-row: 1;
  width: var(--carousel-nav-size);
  background-color: var(--c-blue-50);
  box-shadow: none;
}

.ss-brands__nav--prev { grid-column: 1; }
.ss-brands__nav--next { grid-column: 3; }

/* Ένα λογότυπο: τα βελάκια δεν έχουν πού να πάνε. */
.ss-brands__carousel:not(:has(.ss-brands__slide:nth-child(2))) .ss-brands__nav {
  display: none;
}

.ss-brands__track {
  grid-column: 2;
  grid-row: 1;
  gap: var(--sp-12);
  width: 100%;
  padding-block: 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.ss-brands__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.ss-brands__dots {
  grid-column: 2;
  grid-row: 2;
  margin-block-start: var(--sp-6);
}

/* Τέσσερα λογότυπα μαζί. Το βήμα μένει ένα: το επόμενο μπαίνει από δεξιά. */
.ss-brands__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc((100% - 3 * var(--sp-12)) / 4);
  min-width: calc((100% - 3 * var(--sp-12)) / 4);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.ss-brands__slide img {
  width: auto;
  max-width: 100%;
  max-height: 93px;
  object-fit: contain;
}

/* Mobile (≤ 991px): swipe χωρίς βελάκια. */
@media (max-width: 991px) {
  .ss-brands__inner {
    gap: var(--sp-12);
  }

  .ss-brands__carousel {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss-brands__nav {
    display: none;
  }

  .ss-brands__track,
  .ss-brands__dots {
    grid-column: 1;
  }

  .ss-brands__track {
    gap: 0;
  }

  .ss-brands__slide {
    flex-basis: 100%;
    min-width: 100%;
  }

}