/* 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;
  /* min/max pin the size against theme button rules that would
     otherwise stretch the arrow across the whole slider */
  width:40px;
  min-width:40px;
  max-width:40px;
  height:40px;
  min-height:40px;
  flex:0 0 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;right:auto;}
.portfolio-slider-container .nav-next{right:-20px;left:auto;}

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

.portfolio-slider-container .dots{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:2px;
  margin-top:12px;
}

/* The dot stays 9px visually; the button around it is padded out to a
   44px touch target so it is reliably tappable on mobile. */
.portfolio-slider-container .dot{
  /* min/max pin the size against theme button rules and flex stretching */
  width:32px;
  min-width:32px;
  max-width:32px;
  height:44px;
  min-height:44px;
  flex:0 0 44px;
  border:none;
  padding:0;
  background:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}

.portfolio-slider-container .dot::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#c8c8c8;
  transition:background .2s ease, transform .2s ease;
}

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

.portfolio-slider-container .dot:focus-visible{
  outline:2px solid #021E80;
  outline-offset:-6px;
  border-radius:50%;
}

/* 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;}

  /* With one slide per view there is a dot per image, so a full 44px
     target would wrap onto several rows. Keep the row single-line and
     let the dots share the width, still a comfortable 30px tall. */
  .portfolio-slider-container .dots{
    flex-wrap:nowrap;
    gap:0;
  }
  .portfolio-slider-container .dot{
    width:auto;
    min-width:0;
    max-width:none;
    flex:1 1 0;
    height:30px;
    min-height:30px;
  }
}