/* CLICK PETIT V315 — carrossel isolado de relacionados
   Escopo: produto.html, servico.html e curso.html.
   Preserva cards, textos e critérios existentes; altera somente navegação/apresentação. */

.cp-related-carousel{
  position:relative;
  margin-top:12px;
  --cp-related-gap:12px;
  --cp-related-card-basis:calc((100% - (var(--cp-related-gap) * 3)) / 4.15);
}

.cp-related-track.related-grid{
  display:flex!important;
  grid-template-columns:none!important;
  gap:var(--cp-related-gap)!important;
  align-items:stretch;
  margin-top:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:3px 2px 16px;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-x pan-y;
}

.cp-related-track::-webkit-scrollbar{display:none}

.cp-related-track>.related-card,
.cp-related-track>.course-related-card{
  flex:0 0 var(--cp-related-card-basis)!important;
  width:var(--cp-related-card-basis)!important;
  min-width:220px;
  max-width:none!important;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}

.cp-related-arrow{
  position:absolute;
  top:50%;
  z-index:8;
  width:46px;
  height:46px;
  margin:0;
  padding:0;
  border:1px solid rgba(17,17,20,.14);
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#17151b;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 30px rgba(26,20,35,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transform:translateY(-50%);
  transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  cursor:pointer;
}
.cp-related-arrow svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-related-arrow--prev{left:-18px}
.cp-related-arrow--next{right:-18px}
.cp-related-arrow:hover:not(:disabled){
  transform:translateY(-50%) scale(1.05);
  border-color:rgba(111,53,255,.28);
  box-shadow:0 16px 34px rgba(77,42,128,.21);
}
.cp-related-arrow:active:not(:disabled){transform:translateY(-50%) scale(.96)}
.cp-related-arrow:disabled{opacity:0;pointer-events:none}

.cp-related-carousel:before,
.cp-related-carousel:after{
  content:"";
  position:absolute;
  top:0;
  bottom:16px;
  width:38px;
  z-index:5;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}
.cp-related-carousel:before{left:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.86) 35%,rgba(255,255,255,0) 100%)}
.cp-related-carousel:after{right:0;background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,.86) 35%,rgba(255,255,255,0) 100%)}
.cp-related-carousel.has-scrolled:before{opacity:1}
.cp-related-carousel.has-overflow:not(.is-at-end):after{opacity:1}

.cp-related-hint{
  display:none;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  margin:3px auto 0;
  padding:7px 11px;
  border:1px solid #ebe5f1;
  border-radius:999px;
  color:#746c7c;
  background:#fbf9fd;
  font-size:10px;
  font-weight:800;
  letter-spacing:.01em;
  transition:opacity .25s ease,transform .25s ease;
}
.cp-related-hint.is-dismissed{opacity:0;transform:translateY(-3px);pointer-events:none}

@media(max-width:1199px){
  .cp-related-carousel{
    --cp-related-gap:12px;
    --cp-related-card-basis:calc((100% - (var(--cp-related-gap) * 2)) / 3.15);
  }
}

@media(max-width:767px){
  .cp-related-carousel{
    --cp-related-gap:9px;
    --cp-related-card-basis:calc((100% - var(--cp-related-gap)) / 2);
    margin-inline:-2px;
  }
  .cp-related-track.related-grid{
    gap:var(--cp-related-gap)!important;
    padding:3px 2px 12px;
  }
  .cp-related-track>.related-card,
  .cp-related-track>.course-related-card{
    flex-basis:var(--cp-related-card-basis)!important;
    width:var(--cp-related-card-basis)!important;
    min-width:0!important;
  }
  .cp-related-arrow{display:none}
  .cp-related-carousel:before,
  .cp-related-carousel:after{bottom:12px;width:26px}
  .cp-related-hint{display:flex}
}

@media(prefers-reduced-motion:reduce){
  .cp-related-track.related-grid{scroll-behavior:auto}
  .cp-related-arrow,.cp-related-hint{transition:none}
}