/* Wspólna nawigacja zestawów galerii (koncerty + reuse klas z opinions) */

.gallery-sets-section {
   margin-top: 2rem;
}

.gallery-sets-section .gallery-sets__grid.gallery-grid,
.gallery-sets-section .gallery-grid {
   margin-top: 0;
}

.gallery-sets {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.gallery-sets__viewport {
   flex: 1 1 auto;
   min-width: 0;
}

.gallery-sets__grid.gallery-grid,
.gallery-sets__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0.5rem;
}

@media (min-width: 640px) {
   .gallery-sets__grid.gallery-grid,
   .gallery-sets__grid {
      gap: 0.75rem;
   }
}

.gallery-sets__item {
   position: relative;
   aspect-ratio: 1;
   overflow: hidden;
   background: #f3f3f5;
}

.gallery-sets__item a {
   display: block;
   width: 100%;
   height: 100%;
}

.gallery-sets__item img,
.gallery-sets__item .gallery-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0;
   transition: opacity 0.3s ease, transform 0.25s ease;
}

.gallery-sets__item img.is-loaded,
.gallery-sets__item .gallery-image.is-loaded {
   opacity: 1;
}

.gallery-sets__item a:hover img.is-loaded {
   transform: scale(1.04);
}

.gallery-sets__loader {
   position: absolute;
   inset: 0;
   z-index: 1;
   display: none;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   background: #f3f3f5;
}

.gallery-sets__item.is-loading .gallery-sets__loader {
   display: flex;
}

.gallery-sets__loader::after {
   content: '';
   width: 1.5rem;
   height: 1.5rem;
   border: 2px solid #d4d4d8;
   border-top-color: #52525b;
   border-radius: 50%;
   animation: gallery-sets-spin 0.7s linear infinite;
}

@keyframes gallery-sets-spin {
   to {
      transform: rotate(360deg);
   }
}

.gallery-sets__nav {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2rem;
   height: 2rem;
   padding: 0;
   border: 1px solid #d4d4d8;
   border-radius: 9999px;
   background: #fff;
   color: #27272a;
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s;
}

.gallery-sets__nav:hover {
   background: #f4f4f5;
   border-color: #a1a1aa;
}

.gallery-sets__nav:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 2px;
}

.gallery-sets__nav[hidden] {
   display: none;
}

.gallery-sets__counter {
   margin-top: 1rem;
   text-align: center;
   font-size: 0.875rem;
   color: #737373;
}

.gallery-sets__counter[hidden] {
   display: none;
}