.rs-gallery-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin:32px 0 48px;
max-width:1320px;
}
@media (max-width:1024px){.rs-gallery-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media (max-width:640px){.rs-gallery-grid{grid-template-columns:repeat(2,1fr);gap:8px}}
body.page-id-44 .entry-content .rs-gal-item{
margin:0 !important;padding:0;
position:relative;
border-radius:12px;
overflow:hidden;
background:#1a2235;
border:1px solid #252a3a;
aspect-ratio:4/3;
box-shadow:0 4px 14px rgba(0,0,0,.25);
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
display:block;
}
body.page-id-44 .entry-content .rs-gal-item:hover{
transform:translateY(-4px);
box-shadow:0 14px 32px rgba(37,99,235,.35);
border-color:#60a5fa;
}
body.page-id-44 .entry-content .rs-gal-link{
display:block !important;
width:100% !important;
height:100% !important;
aspect-ratio:auto !important;
position:relative;
text-decoration:none !important;
cursor:zoom-in;
border:none !important;
border-radius:0 !important;
object-fit:initial !important;
transform:none !important;
background:none !important;
}
body.page-id-44 .entry-content .rs-gal-link img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
display:block !important;
border:none !important;
border-radius:0 !important;
margin:0 !important;
aspect-ratio:auto !important;
image-rendering:auto;
transition:transform .5s ease, filter .3s ease;
filter:brightness(.95) contrast(1.05) saturate(1.1);
box-shadow:none !important;
max-width:none !important;
}
body.page-id-44 .entry-content .rs-gal-link:hover img{
transform:scale(1.06) !important;
filter:brightness(1) contrast(1.1) saturate(1.15);
}
.rs-gal-hover{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
background:radial-gradient(circle at center, rgba(37,99,235,.25) 0%, rgba(0,0,0,.55) 100%);
color:#fff;
opacity:0;
transition:opacity .3s ease;
pointer-events:none;
}
.rs-gal-link:hover .rs-gal-hover{opacity:1}
.rs-gal-hover svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
/* === Lightbox === */
.rs-lb{
position:fixed;inset:0;
z-index:99999;
background:rgba(8,11,18,.96);
display:none;
align-items:center;justify-content:center;
opacity:0;
transition:opacity .25s ease;
-webkit-tap-highlight-color:transparent;
user-select:none;
}
.rs-lb.is-open{display:flex;opacity:1}
.rs-lb-stage{
position:relative;
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
padding:60px 80px;
box-sizing:border-box;
}
@media (max-width:768px){.rs-lb-stage{padding:60px 16px}}
.rs-lb-img{
max-width:100%;max-height:100%;
object-fit:contain;
border-radius:6px;
box-shadow:0 24px 60px rgba(0,0,0,.7);
opacity:0;
transition:opacity .3s ease;
}
.rs-lb-img.loaded{opacity:1}
.rs-lb-spinner{
position:absolute;
width:48px;height:48px;
border:3px solid rgba(255,255,255,.15);
border-top-color:#60a5fa;
border-radius:50%;
animation:rsSpin .8s linear infinite;
display:none;
}
.rs-lb-spinner.is-on{display:block}
@keyframes rsSpin{to{transform:rotate(360deg)}}
.rs-lb-btn{
position:absolute;
background:rgba(255,255,255,.08);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.12);
color:#fff;
width:48px;height:48px;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
transition:background .2s ease, transform .2s ease, border-color .2s ease;
z-index:2;
padding:0;
}
.rs-lb-btn:hover{background:rgba(96,165,250,.35);border-color:#60a5fa;transform:scale(1.08)}
.rs-lb-btn:active{transform:scale(.95)}
.rs-lb-btn svg{width:22px;height:22px;display:block}
.rs-lb-close{top:20px;right:20px}
.rs-lb-prev{left:20px;top:50%;transform:translateY(-50%);width:54px;height:54px}
.rs-lb-prev:hover{transform:translateY(-50%) scale(1.08)}
.rs-lb-prev:active{transform:translateY(-50%) scale(.95)}
.rs-lb-next{right:20px;top:50%;transform:translateY(-50%);width:54px;height:54px}
.rs-lb-next:hover{transform:translateY(-50%) scale(1.08)}
.rs-lb-next:active{transform:translateY(-50%) scale(.95)}
@media (max-width:640px){
.rs-lb-prev,.rs-lb-next{width:44px;height:44px}
.rs-lb-prev{left:8px}
.rs-lb-next{right:8px}
.rs-lb-close{top:12px;right:12px;width:44px;height:44px}
}
.rs-lb-caption{
position:absolute;
bottom:24px;left:50%;
transform:translateX(-50%);
background:rgba(0,0,0,.6);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
color:#fff;
padding:10px 18px;
border-radius:24px;
font-size:14px;
font-family:Inter,sans-serif;
max-width:80%;
text-align:center;
border:1px solid rgba(255,255,255,.1);
}
.rs-lb-counter{
position:absolute;
top:24px;left:24px;
color:rgba(255,255,255,.75);
font-size:14px;
font-family:Inter,sans-serif;
font-variant-numeric:tabular-nums;
background:rgba(0,0,0,.5);
padding:6px 14px;
border-radius:14px;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.08);
}
body.rs-lb-open{overflow:hidden}
(function(){
if (window.__rsGalleryLoaded) return;
window.__rsGalleryLoaded = true;
function init(){
var grid = document.getElementById(’rs-gallery’);
if (!grid) return;
var links = Array.prototype.slice.call(grid.querySelectorAll(’.rs-gal-link’));
if (!links.length) return;
var lb = document.createElement(’div’);
lb.className = 'rs-lb’;
lb.setAttribute(’role’,’dialog’);
lb.setAttribute(’aria-modal’,’true’);
lb.setAttribute(’aria-label’,’Galeria zdjęć Record Sound’);
lb.innerHTML = ”
+ ’
’
+ ’’
+ ’’
+ ’’
+ ’
’
+ ’
’;
document.body.appendChild(lb);
var imgEl = document.getElementById(’rs-lb-img’);
var capEl = document.getElementById(’rs-lb-caption’);
var cntEl = document.getElementById(’rs-lb-counter’);
var spinEl = document.getElementById(’rs-lb-spinner’);
var stageEl = document.getElementById(’rs-lb-stage’);
var current = 0;
function show(idx){
current = ((idx % links.length) + links.length) % links.length;
var link = links[current];
var href = link.getAttribute(’href’);
var title = link.getAttribute(’data-rs-title’) || ”;
imgEl.classList.remove(’loaded’);
spinEl.classList.add(’is-on’);
capEl.textContent = title;
capEl.style.display = title ? 'block’ : 'none’;
cntEl.textContent = (current + 1) + ’ / ’ + links.length;
var pre = new Image();
pre.onload = function(){
imgEl.src = href;
imgEl.alt = title;
imgEl.classList.add(’loaded’);
spinEl.classList.remove(’is-on’);
[current-1, current+1].forEach(function(j){
var ni = ((j % links.length) + links.length) % links.length;
var pre2 = new Image();
pre2.src = links[ni].getAttribute(’href’);
});
};
pre.onerror = function(){
spinEl.classList.remove(’is-on’);
capEl.textContent = 'Nie udało się załadować zdjęcia’;
};
pre.src = href;
}
function openLb(idx){
show(idx);
lb.classList.add(’is-open’);
document.body.classList.add(’rs-lb-open’);
}
function closeLb(){
lb.classList.remove(’is-open’);
document.body.classList.remove(’rs-lb-open’);
setTimeout(function(){ imgEl.src=”; imgEl.classList.remove(’loaded’); }, 250);
}
function next(){ show(current+1); }
function prev(){ show(current-1); }
links.forEach(function(a, i){
a.addEventListener(’click’, function(e){
e.preventDefault();
openLb(i);
});
});
document.getElementById(’rs-lb-close’).addEventListener(’click’, closeLb);
document.getElementById(’rs-lb-prev’).addEventListener(’click’, function(e){e.stopPropagation();prev();});
document.getElementById(’rs-lb-next’).addEventListener(’click’, function(e){e.stopPropagation();next();});
lb.addEventListener(’click’, function(e){
if (e.target === lb || e.target === stageEl) closeLb();
});
document.addEventListener(’keydown’, function(e){
if (!lb.classList.contains(’is-open’)) return;
if (e.key === 'Escape’) closeLb();
else if (e.key === 'ArrowRight’) next();
else if (e.key === 'ArrowLeft’) prev();
});
var startX = 0, dx = 0;
stageEl.addEventListener(’touchstart’, function(e){
if (!e.touches.length) return;
startX = e.touches[0].clientX;
dx = 0;
}, {passive:true});
stageEl.addEventListener(’touchmove’, function(e){
if (!e.touches.length) return;
dx = e.touches[0].clientX – startX;
}, {passive:true});
stageEl.addEventListener(’touchend’, function(){
if (Math.abs(dx) > 60) { if (dx < 0) next(); else prev(); }
});
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
else init();
})();