document.addEventListener(‘DOMContentLoaded’, function () {
let nightclubsSwiper;

function initNightclubsSwiper() {
const isDesktop = window.matchMedia(‘(min-width: 1024px)’).matches;

// destroy previous instance cleanly
if (nightclubsSwiper) {
nightclubsSwiper.destroy(true, true);
nightclubsSwiper = undefined;
}

// On desktop: no slider (static 4-card row)
if (isDesktop) return;

// On mobile/tablet: coverflow + loop
nightclubsSwiper = new Swiper(‘.coco-swiper-nightclubs’, {
effect: ‘coverflow’,
grabCursor: true,
centeredSlides: true,
slidesPerView: 1.15,
initialSlide: 1,
loop: true,
spaceBetween: 20,
coverflowEffect: { rotate: 0, stretch: 120, depth: 220, modifier: 1, slideShadows: true },
pagination: {
el: ‘.coco-swiper-nightclubs .swiper-pagination’,
clickable: true
},
breakpoints: {
768: {
slidesPerView: 3.2,
centeredSlides: true,
spaceBetween: 24,
effect: ‘coverflow’,
coverflowEffect: { rotate: 0, stretch: 160, depth: 260, slideShadows: true }
}
}
});
}

initNightclubsSwiper();
window.addEventListener(‘resize’, initNightclubsSwiper);
});

.coco-venues { padding:56px 0 36px; }
.coco-title{ color:#fff; text-align:center; font-weight:800; letter-spacing:.5px; margin:0 0 18px; }

/* applies now because container has .coco-swiper */
.coco-swiper{ padding:24px 16px 48px; }

.coco-card{
position:relative; height:520px; border-radius:22px; overflow:hidden;
background: var(–bg) center/cover no-repeat;
box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
@media (min-width:768px){ .coco-card{ height:560px; } }

.coco-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.65) 70%); }
.coco-content{ position:absolute; left:0; right:0; bottom:0; padding:22px 20px 18px; color:#fff; }
.coco-content h3{ margin:0 0 6px; font-size:40px !important; line-height:1.1; }
.coco-content p{ margin:0 0 14px; opacity:.9; }
.coco-actions{ display:flex; gap:10px; }
.coco-btn{ display:inline-block; padding:12px 16px; border-radius:5px; font-weight:700; background:#ff7a1a; color:#0b0b0d; text-decoration:none; }
.coco-btn.outline{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7); }

.swiper-pagination-bullet{ background:#fff; opacity:.5; }
.swiper-pagination-bullet-active{ opacity:1; }

/* Desktop: make it look like a non-slider 4-card grid */
@media (min-width:1024px){
.coco-swiper .swiper-pagination{ display:none !important; }
.coco-swiper .swiper-wrapper{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
transform: none !important;
}
.coco-swiper .swiper-slide{ width:auto !important; transform:none !important; }
.coco-swiper{ padding: 0 16px 0; }
}