/* Generalt, komment nelkuli valtozat. Ne szerkeszd kozvetlenul! Forras: a fejlesztoi (kommentes) mester. */
.gallery { --csuszkas-accent: var(--c-accent, #1F3A8A); }

.gallery{position:relative;background:#111;overflow:hidden;user-select:none}
.gallery-viewport{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;touch-action:pan-y;cursor:grab}
.gallery-viewport:active{cursor:grabbing}

@supports not (aspect-ratio: 16/9){.gallery-viewport{height:0;padding-bottom:56.25%}}

.gallery-track{display:flex;height:100%;will-change:transform}
.gallery-slide{position:relative;flex:0 0 100%;width:100%;height:100%;overflow:hidden;background:#111}

.gallery-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(22px) brightness(.55);transform:scale(1.15)}

.gallery-slide-img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;-webkit-user-drag:none;user-drag:none}

.gallery .gallery-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border:none;border-radius:50%;padding:0;
  background:rgba(20,20,20,.42);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:background .2s,opacity .2s,transform .12s;opacity:0
}
.gallery .gallery-arrow svg{width:22px;height:22px;display:block}
.gallery:hover .gallery-arrow{opacity:1}
.gallery .gallery-arrow:hover{background:rgba(0,0,0,.68)}
.gallery .gallery-arrow:active{transform:translateY(-50%) scale(.92)}
.gallery .gallery-prev{left:14px}
.gallery .gallery-next{right:14px}

.gallery-counter{position:absolute;top:10px;right:12px;z-index:6;background:rgba(0,0,0,.45);color:#fff;font-size:.78rem;padding:3px 9px;border-radius:999px;backdrop-filter:blur(4px);pointer-events:none}

.gallery-dots{position:absolute;left:0;right:0;bottom:10px;z-index:6;display:flex;justify-content:center;gap:7px;pointer-events:auto}
.gallery-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.gallery-dot.active{background:#fff;transform:scale(1.3)}

.gallery-thumbs{display:flex;gap:8px;overflow-x:auto;background:#111;padding:10px;
  scrollbar-width:none;-ms-overflow-style:none}
.gallery-thumbs::-webkit-scrollbar{display:none;height:0;width:0}
.gallery-thumb{height:64px;width:92px;flex:0 0 auto;object-fit:cover;border-radius:6px;cursor:pointer;opacity:.5;border:2px solid transparent;transition:opacity .2s,border-color .2s}
.gallery-thumb.active,.gallery-thumb:hover{opacity:1;border-color:var(--csuszkas-accent)}

@media(max-width:720px){
  .gallery .gallery-arrow{opacity:1;width:40px;height:40px}
  .gallery .gallery-arrow svg{width:20px;height:20px}
  .gallery-thumb{height:52px;width:74px}
}

.gallery-thumbs{cursor:grab}
.gallery-thumbs.dragging{cursor:grabbing;scroll-behavior:auto}
.gallery-thumbs .gallery-thumb{user-select:none;-webkit-user-drag:none}

.gallery-slide-img{cursor:zoom-in}

body.lightbox-lock{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  background:rgba(10,10,12,.86);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.lightbox.open{display:flex}
.lightbox-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:32px 16px;touch-action:pan-y}
.lightbox-img{max-width:96vw;max-height:92vh;width:auto;height:auto;object-fit:contain;
  -webkit-user-drag:none;user-select:none;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.5)}

.lightbox-close{position:absolute;top:14px;right:16px;z-index:3;width:44px;height:44px;border:none;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);transition:background .2s}
.lightbox-close:hover{background:rgba(255,255,255,.25)}
.lightbox-close svg{width:22px;height:22px}

.lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;border:none;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);transition:background .2s}
.lightbox-arrow:hover{background:rgba(255,255,255,.25)}
.lightbox-arrow svg{width:26px;height:26px}
.lightbox-prev{left:16px}.lightbox-next{right:16px}

.lightbox-counter{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:3;
  color:#fff;font-size:.82rem;pointer-events:none;
  background:rgba(0,0,0,.5);padding:4px 12px;border-radius:999px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  text-shadow:0 1px 2px rgba(0,0,0,.8)}

.lightbox-caption{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;
  max-width:min(90vw,900px);text-align:center;pointer-events:none}
.lightbox-caption-text{display:inline-block;color:#fff;font-size:.92rem;line-height:1.4;
  background:rgba(0,0,0,.58);padding:8px 16px;border-radius:12px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  text-shadow:0 1px 3px rgba(0,0,0,.9);box-shadow:0 2px 12px rgba(0,0,0,.35)}

@media(max-width:720px){
  .lightbox-arrow{width:42px;height:42px;background:rgba(255,255,255,.14)}
  .lightbox-arrow svg{width:22px;height:22px}
  .lightbox-stage{padding:56px 8px 64px}
  .lightbox-img{max-width:98vw;max-height:82vh}
  .lightbox-caption{bottom:12px;max-width:94vw}
  .lightbox-caption-text{font-size:.85rem;padding:7px 12px}
  .lightbox-counter{top:12px}
}