/* =====================================================================
   Carrossel de banners de projetos — alinhamento central, laço infinito
   Todos os slides têm o mesmo tamanho e a imagem nunca muda de escala.
   O que varia é só o `clip-path: inset(...)`, escrito diretamente em cada
   imagem por projects-carousel.js em função da distância até o centro.
   Os limites do recorte moram aqui, nas variáveis --pc-inset-* / --pc-round,
   para que o ajuste responsivo continue sendo assunto do CSS.
   ===================================================================== */

/* ---------- seção que abriga o carrossel ---------- */
.projects-showcase {
  position: relative;
  z-index: 1;
  /* left casa com .calone-portal-portfolio__top da seção anterior */
  padding: clamp(84px, 10vh, 112px) clamp(22px, 4.5vw, 68px) clamp(64px, 8vw, 128px);
  background: var(--calone-off-white, #f2f2f0);
  color: var(--calone-black, #0e0e0e);
  font-family: var(--calone-font-sans, "Inter", sans-serif);
}

.projects-showcase__inner {
  width: 100%;
}

.projects-showcase__title {
  margin: 0;
  text-align: center;
  /* mesmo corpo e entrelinha de "Novas oportunidades." */
  font-size: clamp(34px, 4.8vw, 74px);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.045em;
}

.projects-carousel {
  --pc-slide: 58%;          /* largura de cada slide dentro do viewport */
  --pc-gap: clamp(12px, 1.4vw, 24px);
  --pc-inset-y: 6%;         /* recorte vertical no slide totalmente fora do centro */
  --pc-inset-x: 12%;        /* recorte horizontal no mesmo ponto */
  --pc-round: 28px;         /* raio do slide lateral */
  --pc-round-active: 0px;   /* raio do slide central — retângulo inteiro, cantos retos */
  position: relative;
  width: min(100%, 1500px);
  margin: clamp(28px, 4vw, 56px) auto 0;
}

/* ---------- entrada e saída ----------
   Quando o GSAP está disponível, quem comanda é o ScrollTrigger (ver
   projects-carousel.js) e a classe .is-gsap desliga estas transições para
   os dois não brigarem. As regras abaixo são o caminho de reserva — sem
   GSAP ou com movimento reduzido — onde a regra base governa a SAÍDA e
   [data-visible] governa a ENTRADA. */
.projects-showcase.is-gsap .projects-showcase__title,
.projects-showcase.is-gsap .projects-carousel__viewport,
.projects-showcase.is-gsap .projects-carousel__dots {
  transition: none;
}

.projects-showcase__title,
.projects-carousel__viewport,
.projects-carousel__dots {
  opacity: 0;
  transform: translateY(var(--motion-distance, 28px));
  transition:
    opacity var(--motion-standard, 420ms) var(--ease-calone),
    transform var(--motion-standard, 420ms) var(--ease-calone);
}

.projects-carousel__viewport {
  transform: translateY(var(--motion-distance, 28px)) scale(.97);
}

.projects-showcase[data-visible] .projects-showcase__title,
.projects-showcase[data-visible] .projects-carousel__viewport,
.projects-showcase[data-visible] .projects-carousel__dots {
  opacity: 1;
  transform: none;
  transition-duration: var(--motion-reveal, 680ms);
}

.projects-showcase[data-visible] .projects-carousel__viewport {
  transition-delay: var(--motion-stagger, 80ms);
}

.projects-showcase[data-visible] .projects-carousel__dots {
  transition-delay: calc(var(--motion-stagger, 80ms) * 2);
}

/* ---------- viewport e trilho (nó raiz do Embla) ---------- */
.projects-carousel__viewport {
  overflow: hidden;
  cursor: grab;
}

.projects-carousel__viewport.is-dragging {
  cursor: grabbing;
}

.projects-carousel__track {
  display: flex;
  margin: 0 0 0 calc(var(--pc-gap) * -1);
  padding: 0;
  list-style: none;
  touch-action: pan-y pinch-zoom;   /* o scroll vertical passa; o horizontal é do carrossel */
  will-change: transform;
}

.projects-carousel__slide {
  flex: 0 0 var(--pc-slide);
  min-width: 0;
  padding-left: var(--pc-gap);
}

.projects-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1284 / 912;      /* proporção nativa dos banners */
  object-fit: cover;
  /* estado de repouso: retângulo inteiro. O JS assume a partir daqui e
     interpola de forma contínua durante o movimento do trilho. */
  clip-path: inset(0% 0% 0% 0% round var(--pc-round-active));
  will-change: clip-path;
  -webkit-user-drag: none;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;             /* o gesto pertence ao viewport, não à imagem */
}

/* ---------- indicadores ---------- */
.projects-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(16px, 2vw, 24px);
}

.projects-carousel__dot {
  width: 32px;
  height: 32px;                   /* alvo de toque; o traço visível vai no ::after */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.projects-carousel__dot::after {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: .28;
  transition:
    opacity var(--motion-micro, 220ms) var(--ease-calone),
    transform var(--motion-micro, 220ms) var(--ease-calone);
}

.projects-carousel__dot[aria-selected="true"]::after {
  opacity: 1;
  transform: scaleX(1.35);
}

@media (hover: hover) and (pointer: fine) {
  .projects-carousel__dot:hover::after { opacity: .6; }
}

.projects-carousel__dot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- telas estreitas ----------
   Menos slide vizinho à vista e recorte lateral mais suave, senão o
   vizinho vira uma tira fina e o inset de 14% come quase toda ela. */
@media (max-width: 1024px) {
  .projects-carousel {
    --pc-slide: 76%;
    --pc-inset-x: 10%;
    --pc-round: 22px;
  }
}

@media (max-width: 640px) {
  .projects-carousel {
    --pc-slide: 88%;
    --pc-inset-y: 4%;
    --pc-inset-x: 6%;
    --pc-round: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* mantém a revelação por opacidade, remove o deslocamento */
  .projects-showcase__title,
  .projects-carousel__viewport,
  .projects-carousel__dots {
    transform: none;
  }

  /* sem animação de clip-path: todos os slides ficam retangulares e o
     carrossel se resume ao salto entre eles (ver projects-carousel.js) */
  .projects-carousel__slide img {
    clip-path: none;
    will-change: auto;
  }
}