/* ============================================================
   CARDS — sistema base + variantes
   ============================================================ */

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  background: var(--color-surface-3);
  border-color: var(--color-border-gold);
  box-shadow: 0 0 28px rgba(var(--color-gold-400-rgb), .12), 0 4px 16px rgba(0, 0, 0, .3);
}

/* Variante com borda e acento dourado */
.card--gold {
  background: var(--color-surface-gold);
  border-color: var(--color-border-gold);
}

.card--gold:hover {
  background: rgba(var(--color-gold-400-rgb), .12);
  border-color: var(--color-border-gold-strong);
}

.card__icon {
  font-size: 28px;
  color: var(--color-gold-400);
  flex-shrink: 0;
}

.card__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 26px);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.card__body {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.65;
  flex: 1;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gold-400);
  margin-top: auto;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.card__link:hover {
  color: var(--color-gold-300);
  gap: 8px;
}


/* ============================================================
   CARROSSEL 3D — portfolio preview
   JS adiciona .is-active / .is-prev / .is-next nos slides
   ============================================================ */

.carousel {
  position: relative;
  /* Perspectiva para o efeito 3D dos slides adjacentes */
  perspective: 1200px;
  /* Folga extra acima: os cards de trás sobem bastante (y negativo) e não
     podem encostar no subtítulo da seção. Ajuste aqui se ainda colidir. */
  margin-top: 140px;
}

.carousel__track {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  position: relative;
  /* Mantém os cards no mesmo espaço 3D da perspectiva → translateZ rende profundidade */
  transform-style: preserve-3d;
  /* pan-y: permite scroll vertical da página, mas entrega gestos horizontais ao JS
     (evita que o browser dispare pointercancel no swipe e cancele o click nos links) */
  touch-action: pan-y;
}

.carousel__card {
  position: absolute;
  width: min(560px, 90vw);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  overflow: hidden;

  /* Posição/escala/opacidade são dirigidas pelo GSAP (ver animations.js).
     Não declarar transform/opacity/transition aqui: o GSAP escreve esses
     valores inline a cada frame e uma transition CSS brigaria com ele. */
  opacity: 0;                     /* evita flash antes do JS posicionar */
  will-change: transform, opacity;
  backface-visibility: hidden;    /* evita serrilhado ao virar em perspectiva */
  transition: border-color var(--transition-base);
}

/* Só o realce de borda do card ativo é responsabilidade do CSS */
.carousel__card.is-active {
  border-color: var(--color-border-gold);
}

/* Texto dos cards de trás é ocultado para não competir com o da frente —
   eles permanecem como forma/profundidade. Transição acompanha a do GSAP. */
.carousel__card:not(.is-active) .carousel__card-body {
  opacity: 0;
  transition: opacity var(--transition-base);
}

.carousel__card.is-active .carousel__card-body {
  opacity: 1;
  transition: opacity var(--transition-base);
}

.carousel__card-image {
  width: 100%;
  /* Placeholder até os screenshots reais chegarem */
  height: 220px;
  background: var(--color-surface-3);
  flex-shrink: 0;
}

.carousel__card-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carousel__card-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 26px);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.carousel__card-desc {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.carousel__card-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.carousel__card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gold-400);
  margin-top: 4px;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.carousel__card-link:hover {
  color: var(--color-gold-300);
  gap: 8px;
}

/* ── Botões prev/next ── */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-default);
  border-radius: 50%;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.carousel__btn:hover {
  background: var(--color-surface-gold);
  border-color: var(--color-border-gold);
  color: var(--color-gold-400);
}

.carousel__btn .ti {
  font-size: 20px;
}

.carousel__btn--prev { left: 0; }
.carousel__btn--next { right: 0; }

/* ── Indicador de pontos (mobile) ── */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border-default);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
}

.carousel__dot--active {
  background: var(--color-gold-400);
  transform: scale(1.4);
}


/* ============================================================
   RESPONSIVIDADE
   ============================================================ */

@media (max-width: 768px) {
  .card {
    padding: 24px;
  }
}

/* Tablets e mobile: carrossel colapsa para 1 card (igual ao celular) */
@media (max-width: 1024px) {
  .carousel {
    margin-top: 88px;
  }

  .carousel__btn {
    display: none;
  }

  .carousel__track {
    /* min-height igual ao desktop garante que o card nunca transborda o track,
       evitando que os dots fiquem sobrepostos ao card */
    min-height: 460px;
    /* Os cards adjacentes esperam fora da tela (xPercent ±120 no JS) e deslizam
       para dentro ao navegar; clipar na horizontal evita scroll lateral.
       Só no mobile — no desktop os cards de trás sobem acima do track. */
    overflow-x: hidden;
  }
}