/* ══════════════════════════════════════════════════════════
   GALÉRIA 2026 — pás v sekcii #podakovanie
   Lightbox používa .lightbox* triedy z sections.css,
   tu sú len doplnky (rozmery, počítadlo).
══════════════════════════════════════════════════════════ */
.gal26 {
  position: relative;
  margin-top: 2.75rem;
  overflow: hidden;
  /* fade na okrajoch — zároveň hint, že pás pokračuje do strán */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  /* pri manuálnom scrolle (reduced-motion) žiadny viditeľný scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gal26::-webkit-scrollbar {
  display: none;
}

.gal26-track {
  display: flex;
  width: max-content;
  /* 76s drží rovnakú rýchlosť ako 55s pri 13 položkách (18/13 × 55) */
  animation: gal26Scroll 76s linear infinite;
  will-change: transform;
}

/* Pauza: hover, klávesový fokus, alebo dotyk (class z JS) */
.gal26:hover .gal26-track,
.gal26:focus-within .gal26-track,
.gal26.is-paused .gal26-track {
  animation-play-state: paused;
}

@keyframes gal26Scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* padding-right tvorí medzeru — NIE gap (gap by rozbil seamless -50%) */
.gal26-item {
  flex: 0 0 auto;
  padding-right: 14px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Rozmery dlaždíc: každá položka má identickú celkovú šírku
   (510 + 14 = 524px), takže 36 × 524 = 18 864 a translateX(-50%)
   = 9 432 = presne 18 × 524 → slučka nadväzuje bez skoku. */
.gal26-img {
  display: block;
  width: 510px;
  height: 360px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  background: var(--black);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.gal26-item:hover .gal26-img,
.gal26-item:focus-visible .gal26-img {
  transform: scale(1.02);
  border-color: rgba(33, 150, 243, 0.5);
  box-shadow: 0 0 16px rgba(33, 150, 243, 0.2);
}

/* ── Lightbox — doplnky k .lightbox v sections.css ─────── */
.lightbox-content {
  max-width: 92vw;
  max-height: 88vh;
}

.lightbox-img,
.lightbox-video {
  max-width: 92vw;
  max-height: 88vh;
}

.lightbox-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-condensed);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.85rem;
  user-select: none;
}

/* ── Mobil ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gal26 {
    margin-top: 2rem;
  }

  .gal26-item {
    padding-right: 10px;
  }

  /* mobil: 340 + 10 = 350px na položku → 36 × 350 = 12 600,
     -50% = 6 300 = presne 18 × 350 */
  .gal26-img {
    width: 340px;
    height: 240px;
    border-radius: 6px;
  }

  .lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
  }

  .lightbox-nav {
    width: 40px;
    height: 54px;
  }

  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }

  .lightbox-counter {
    bottom: 1rem;
    font-size: 0.85rem;
  }
}

/* ── Bez animácie — pás sa scrolluje ručne ────────────── */
@media (prefers-reduced-motion: reduce) {
  /* animácia vypnutá, pás sa posúva ručne — fade maska ostáva ako hint */
  .gal26 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gal26-track {
    animation: none;
    will-change: auto;
  }

  .gal26-img,
  .gal26-item:hover .gal26-img {
    transition: none;
    transform: none;
  }
}