/* ==========================================================================
   GALLERY - MASONRY LAYOUT
   ========================================================================== */

.tournaments__gallery {
  margin-top: var(--space-3xl);
}

.tournaments__gallery-title {
  font-size: var(--text-2xl);
  color: var(--color-secondary);
  text-align: center;
  margin-bottom: var(--space-2xl);
}

/* Masonry через CSS columns */
.gallery {
  columns: 3;
  column-gap: var(--space-lg);
}

.gallery__item {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-gray-200);
  margin-bottom: var(--space-lg);
  break-inside: avoid;
}

.gallery__item:hover img {
  transform: scale(1.05);
}

.gallery__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 81, 173, 0.7) 0%,
    transparent 50%
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--space-lg);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.gallery__item:hover .gallery__overlay {
  opacity: 1;
}

.gallery__overlay i {
  font-size: 1.8rem;
  color: var(--color-white);
  transform: translateY(10px);
  transition: transform var(--transition-bounce);
}

.gallery__item:hover .gallery__overlay i {
  transform: translateY(0);
}

/* Адаптив */
@media (max-width: 1024px) {
  .gallery {
    columns: 2;
  }
}

@media (max-width: 600px) {
  .gallery {
    columns: 1;
  }
}