/* ========================================
   Sponsors — carrusel mobile en el lobby.
   En desktop los sponsors aparecen en el sidebar.
   ======================================== */

.lobby-sponsors-mobile {
  display: none;
  margin-top: 24px;
}

.lobby-sponsor-slides {
  position: relative;
  height: 200px;
  margin-top: 8px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.lobby-sponsor-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--card);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.lobby-sponsor-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Área de imagen — ocupa todo el espacio disponible */
.lobby-sponsor-slide > .lobby-sponsor-img {
  flex: 1;
  overflow: hidden;
}

.lobby-sponsor-slide > .lobby-sponsor-img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 300ms ease;
}

.lobby-sponsor-slide.active:hover > .lobby-sponsor-img > img {
  transform: scale(1.03);
}

/* Footer con nombre */
.lobby-sponsor-slide > .lobby-sponsor-footer {
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--card);
}

.lobby-sponsor-slide > .lobby-sponsor-footer > .lobby-sponsor-name {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Solo visible en mobile */
@media (max-width: 719px) {
  .lobby-sponsors-mobile { display: block; }
}