/* pcs- prefix */
.pcs-outer{ width:100%; }
.pcs-wrap{ --pcs-ratio: 100%; }
.pcs-grid{
  --pcs-cols: 4;
  display:grid;
  grid-template-columns: repeat(var(--pcs-cols), minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 28px;
}
.pcs-card{
  display:block;
  border:1px solid rgba(255,199,0,0.18);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 18px 50px rgba(0,0,0,0.30);
  overflow:hidden;
  text-decoration:none;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.pcs-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,199,0,0.35);
  box-shadow: 0 22px 65px rgba(0,0,0,0.42);
}
.pcs-media{
  position:relative;
  padding-top: var(--pcs-ratio);
}
.pcs-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 250ms ease;
}
.pcs-card:hover .pcs-img{ transform: scale(1.06); }
.pcs-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.55);
  transition: background 250ms ease;
}
.pcs-card:hover .pcs-overlay{ background: rgba(0,0,0,0.35); }

.pcs-content{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 18px;
  gap: 8px;
}
.pcs-title{ font-weight: 700; font-size: 28px; color:#fff; text-shadow: 0 8px 18px rgba(0,0,0,0.45); }
.pcs-sub{ color: rgba(255,255,255,0.65); letter-spacing: 2px; font-size: 12px; text-transform: uppercase; }
.pcs-badge{
  position:absolute; top:14px; left:14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,199,0,0.15);
  color: #FFC700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 11px;
}
.pcs-desc{ margin-top: 4px; font-size: 13px; opacity: .72; max-width: 260px; }

/* Swiper controls */
.pcs-swiper{ position:relative; }
.pcs-swiper .swiper-slide{ height:auto; }
.pcs-swiper .swiper-slide .pcs-card{ height:100%; }
.pcs-dots{ margin-top: 18px; display:flex; justify-content:center; }

.pcs-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 1px solid rgba(255,199,0,0.25);
  border-radius: 999px;
  cursor:pointer;
  background: rgba(0,0,0,0.30);
  z-index: 2;
}
.pcs-prev{ left:-10px; }
.pcs-next{ right:-10px; }
.pcs-arrow:before{
  content:"";
  position:absolute; inset:0; margin:auto;
  width:10px; height:10px;
  border-top:2px solid rgba(255,199,0,0.75);
  border-right:2px solid rgba(255,199,0,0.75);
  transform: rotate(225deg);
}
.pcs-next:before{ transform: rotate(45deg); }

@media (max-width: 767px){
  .pcs-prev{ left: 6px; }
  .pcs-next{ right: 6px; }
}