/* CCC Portfolio Slider */
.portfolio-slider-container{
  --radius:8px;
  --gap:10px;
  --visible:4;
}

.portfolio-slider-container .slider-wrap{
  max-width:100%;
  margin:0 auto;
  position:relative;
}

.portfolio-slider-container .sliderMain{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--radius);
}

.portfolio-slider-container .slides-track{
  display:flex;
  gap:var(--gap);
  transition:transform .5s ease;
}

.portfolio-slider-container .slidemain{
  position:relative;
  flex:0 0 calc((100% - (var(--visible) - 1) * var(--gap))/var(--visible));
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  background:#000;
}

.portfolio-slider-container .slidemain img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}

.portfolio-slider-container .slidemain:hover img{
  transform:scale(1.04);
}

.portfolio-slider-container .corner-thumb{
  position:absolute;
  right:8px;
  bottom:8px;
  width:34%;
  aspect-ratio:4/3;
  border-radius:6px;
  overflow:hidden;
  border:2px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
  cursor:pointer;
  z-index:5;
}

.portfolio-slider-container .corner-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.portfolio-slider-container .nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.9);
  border:none;
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:6;
  font-size:18px;
}

.portfolio-slider-container .nav-prev{left:-20px;}
.portfolio-slider-container .nav-next{right:-20px;}

.portfolio-slider-container .nav-btn:disabled{
  opacity:.35;
  cursor:default;
}

.portfolio-slider-container .dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}

.portfolio-slider-container .dot{
  width:9px;
  height:9px;
  border-radius:50%;
  border:none;
  padding:0;
  background:#c8c8c8;
  cursor:pointer;
}

.portfolio-slider-container .dot.active{
  background:#021E80;
  transform:scale(1.2);
}

/* Lightbox (appended to body) */
.ccc-ps-lightbox{
  position:fixed;
  inset:0;
  background:rgba(10,10,12,.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100000;
}
.ccc-ps-lightbox.open{display:flex;}
.ccc-ps-lightbox .lightbox-content{position:relative;}
.ccc-ps-lightbox img{max-width:100%;max-height:82vh;}
.ccc-ps-lightbox .lb-btn,
.ccc-ps-lightbox .lb-close{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  font-size:18px;
}
.ccc-ps-lightbox .lb-prev{left:24px;}
.ccc-ps-lightbox .lb-next{right:24px;}
.ccc-ps-lightbox .lb-close{top:24px;right:24px;left:auto;transform:none;}
.ccc-ps-lightbox .lb-counter{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
}

@media(max-width:1024px){.portfolio-slider-container{--visible:3;}}
@media(max-width:720px){
  .portfolio-slider-container{--visible:2;}
  .portfolio-slider-container .nav-prev{left:8px;}
  .portfolio-slider-container .nav-next{right:8px;}
}
@media(max-width:480px){.portfolio-slider-container{--visible:1;}}