/* Logo carousel: 1 tile on mobile, 3 on tablet, 5 on desktop. Swipe or use the arrows.
   Colours come from the dbim-theme tokens. */
.logo-carousel {
  --lc-gap: 1.25rem;
  --lc-per-view: 1;                       /* tiles visible at once */
  background: var(--white);
  border-block: 1px solid var(--bright-gray);
  padding-block: 2rem;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (min-width: 768px)  { .logo-carousel { --lc-per-view: 3; } }
@media (min-width: 1200px) { .logo-carousel { --lc-per-view: 5; } }

.logo-carousel .lc-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 1300px;         /* maximum width of the carousel on big screens */
  margin-inline: auto;       /* keeps it centred */
  padding-inline: 1.5rem;
}

/* Scrolling track: native swipe with snapping, scrollbar hidden */
.logo-carousel .lc-track {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--lc-gap);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.logo-carousel .lc-track::-webkit-scrollbar { display: none; }

.logo-carousel .lc-item {
  flex: 0 0 calc((100% - (var(--lc-per-view) - 1) * var(--lc-gap)) / var(--lc-per-view));
  scroll-snap-align: start;
  scroll-snap-stop: always;               /* one swipe = one tile on mobile */
}

/* Tile */
.logo-carousel .lc-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  padding: 0.75rem 1rem;
  background: var(--white);
  border: 1px solid var(--bright-gray);
  border-radius: 0.375rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.logo-carousel .lc-item a:hover { border-color: var(--key); }
.logo-carousel .lc-item a:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }
.logo-carousel .lc-item img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;                           /* keeps proportion */
  object-fit: contain;
}

/* Arrows: chevrons drawn in CSS, so no icon files are needed */
.logo-carousel .lc-btn {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--key);
  cursor: pointer;
}
.logo-carousel .lc-btn::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.logo-carousel .lc-next::before { transform: rotate(45deg);  margin-right: 0.3rem; }
.logo-carousel .lc-prev::before { transform: rotate(-135deg); margin-left: 0.3rem; }
.logo-carousel .lc-btn:hover:not(:disabled) { background: var(--bright-gray); }
.logo-carousel .lc-btn:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }
.logo-carousel .lc-btn:disabled { opacity: 0.35; cursor: not-allowed; }