/**
 * Tira de logos — municipis i entitats col·laboradores.
 */

.logos-strip.ls-bg-white { background-color: #fff; }
.logos-strip.ls-bg-gray { background-color: #f5f5f5; }
.logos-strip.ls-bg-brand-bg { background-color: rgb(var(--neutral-bg, 245 247 250)); }

.logos-strip .ls-amb-separador {
  border-top: 1px solid rgb(var(--neutral-border));
  padding-top: 2.5rem;
}

.logos-strip .ls-title {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: rgb(var(--brand-primary));
}

.logos-strip .ls-intro {
  max-width: 62ch;
  color: rgb(var(--neutral-text-muted));
}

.logos-strip .ls-llista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3rem;
}

.logos-strip .ls-item img {
  display: block;
  width: auto;
  object-fit: contain;
  /* Els logos arriben amb fons i saturacions diferents; el gris els unifica
     i el color torna en passar-hi el ratolí. */
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.logos-strip .ls-item:hover img,
.logos-strip .ls-enllac:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.04);
}

.logos-strip.ls-mida-petita .ls-item img { max-height: 42px; }
.logos-strip.ls-mida-mitjana .ls-item img { max-height: 64px; }
.logos-strip.ls-mida-gran .ls-item img { max-height: 88px; }

@media (max-width: 640px) {
  .logos-strip .ls-llista { gap: 1.5rem 2rem; }
  .logos-strip.ls-mida-gran .ls-item img { max-height: 64px; }
}