/* ============================================================
   PORTFOLIO — Baralho HORIZONTAL scroll-driven
   Figma node 97:455 (UI › SECÕES › PORTFOLIO — conteúdo real)

   Mesmo modelo do deck de Serviços, porém horizontal: os cards
   empilham no centro; o próximo desliza da LATERAL (direita),
   cobre a pilha e fica NO TOPO até virar a frente; os de trás
   espiam uma faixa p/ o lado, encolhem e escurecem.

   Progressivo:
     - Sem JS / mobile / reduced-motion: lista com scroll horizontal
       (scroll-snap) — tudo legível, nada pinned.
     - Com JS (desktop ≥1024px): portfolio.js adiciona
       .portfolio__carousel--deck → a seção vira track de scroll, o
       viewport fica pinned (sticky) e o baralho é "scrubbado" por scroll.

   build6: 6 cards com imagem real (assets/images/portfolio-*.jpg),
   cards viram <a> clicáveis (abrem o projeto no Behance) e o badge
   de resultado aceita 2 linhas (rótulos de benefício do Figma).
   ============================================================ */

/* ─── Seção ──────────────────────────────────────────────────
   Fundo sumi puro = mesma cor do body e das demais seções → contínuo.
   overflow-x:clip impede barra horizontal (cards sangram pela lateral). */
.portfolio {
  background-color: var(--color-sumi);
  padding-block: 7.5rem; /* 120px */
  overflow-x: clip;
}

/* ─── Header: intro (esq) + link "ver todos" (dir) ───────────── */
.portfolio__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: var(--space-16); /* respiro até o palco */
}

.portfolio__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* 32px */
  max-width: 38rem;
}

/* Título — Figma: 56px Medium washi, "Veja" em sakura */
.portfolio__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-washi);
}

.portfolio__title-accent {
  color: var(--color-sakura);
  font-style: normal;
}

/* Subtítulo — Figma: 16px washi 60%, 1ª frase em bold */
.portfolio__subtitle {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  max-width: 22.25rem; /* 356px Figma */
}

.portfolio__subtitle strong {
  font-weight: var(--font-weight-bold);
}

/* Link outline — Figma: borda tsutsuji, rounded 6px */
.portfolio__all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5); /* 10px */
  height: 39px;
  padding-inline: var(--space-5);
  border: 1px solid var(--color-tsutsuji);
  border-radius: var(--radius-md);
  color: var(--color-tsutsuji);
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background-color var(--transition-base),
    color            var(--transition-base);
}

.portfolio__all-icon {
  display: inline-flex;
  transition: transform var(--transition-base);
}

.portfolio__all:hover,
.portfolio__all:focus-visible {
  background-color: var(--color-tsutsuji);
  color: var(--color-washi);
}

.portfolio__all:hover .portfolio__all-icon {
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════
   CARROSSEL — base (sem JS / mobile): scroll horizontal
   ═══════════════════════════════════════════════════════════ */
.portfolio__carousel {
  position: relative;
}

.portfolio__track {
  display: flex;
  gap: var(--space-8); /* 32px */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--container-pad-x);
  padding-bottom: var(--space-4);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.portfolio__card {
  flex: 0 0 min(34rem, 85vw);
  scroll-snap-align: start;
}

/* ─── Card: superfície grafite, borda neutra, rounded 32 ─────── */
.portfolio__card-inner {
  position: relative; /* âncora da pill de hover e do véu de profundidade */
  display: flex;
  flex-direction: column;
  gap: var(--space-10); /* 40px ≈ 42 Figma */
  height: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-stroke);
  border-radius: var(--radius-2xl);
  padding: var(--space-3); /* 12px */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  color: inherit;
  text-decoration: none;
  cursor: pointer; /* cards clicáveis → abrem o projeto */
  /* Hover mexe SÓ no inner (transform de scale/lift). O .portfolio__card
     carrega o transform do baralho (JS) → separar evita conflito. */
  transition:
    transform   var(--transition-spring),
    box-shadow  var(--transition-base),
    border-color var(--transition-base);
}

/* ─── Hover (cards interativos) ──────────────────────────────── */
.portfolio__media img,
.portfolio__result {
  transition:
    transform  var(--transition-slow),
    filter     var(--transition-base);
}

@media (hover: hover) {
  .portfolio__card-inner:hover {
    transform: translateY(-10px) scale(1.025);
    border-color: var(--color-border-accent);
    box-shadow:
      0 36px 90px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(250, 196, 212, 0.18),
      var(--shadow-glow);
  }
  .portfolio__card-inner:hover .portfolio__media img {
    transform: scale(1.07);
    filter: brightness(0.72);
  }
  .portfolio__card-inner:hover .portfolio__result {
    transform: scale(1.06);
  }
}

/* ─── Pill "Ver projeto" — label que ACOMPANHA o ponteiro (cores Utena) ───
   O JS seta --cta-x/--cta-y (px relativos ao card-inner) no mousemove; a pill
   é centralizada nesse ponto. A transition no transform dá leve inércia
   (a pill segue o cursor com um rastro suave). */
.portfolio__cta {
  --cta-x: 50%;
  --cta-y: 42%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;             /* acima do véu de profundidade (::before, z 3) */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2); /* 8px */
  padding: var(--space-2-5) var(--space-5); /* 10 20 — levemente menor */
  border-radius: var(--radius-pill);
  background-color: var(--color-washi);
  color: var(--color-sumi);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm); /* 14px — menor */
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(var(--cta-x) - 50%), calc(var(--cta-y) - 50%)) scale(0.88);
  transition:
    opacity   var(--transition-base),
    transform 150ms ease-out;
}

.portfolio__cta-icon {
  display: inline-flex;
}

@media (hover: hover) {
  .portfolio__card-inner:hover .portfolio__cta {
    opacity: 1;
    transform: translate(calc(var(--cta-x) - 50%), calc(var(--cta-y) - 50%)) scale(1);
  }
}

/* ─── Mídia — foto real do projeto (Figma: 548×477 rounded-24) ── */
.portfolio__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 548 / 477; /* proporção da mídia no Figma */
  background-color: var(--color-surface);
}

.portfolio__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim que escurece a mídia no hover → a pill washi salta */
.portfolio__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(22, 17, 15, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
@media (hover: hover) {
  .portfolio__card-inner:hover .portfolio__media::after {
    opacity: 1;
  }
}

/* ─── Meta (cliente / segmento / frase / resultado) ──────────── */
.portfolio__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px */
  padding: 0 var(--space-5) var(--space-4); /* 0 20 16 */
}

.portfolio__meta-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Cliente — Figma: 32px Medium washi */
.portfolio__client {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-washi);
}

/* Segmento — Figma: 18px Regular washi */
.portfolio__segment {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-washi);
  white-space: nowrap;
  flex-shrink: 0;
}

.portfolio__divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-stroke);
}

.portfolio__meta-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Frase — Figma: 24px Regular washi 60% */
.portfolio__phrase {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  max-width: 17.5rem;
}

/* Resultado — Figma: pill hinomaru, 18px, rótulo de benefício (até 2 linhas) */
.portfolio__result {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.625rem; /* 58px Figma */
  max-width: 14.5rem;
  padding: var(--space-3) var(--space-6); /* 12 24 */
  border-radius: var(--radius-pill);
  background-color: var(--color-hinomaru);
  color: var(--color-washi);
  font-family: var(--font-heading);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   MODO BARALHO (deck) — scroll-driven, ativado por portfolio.js
   A altura (em vh) do .portfolio__carousel é setada pelo JS conforme
   o nº de cards → essa é a "pista" de scroll que prende o viewport.
   ═══════════════════════════════════════════════════════════ */
.portfolio__carousel--deck {
  --card-w: 34rem;                          /* 544px */
  --deck-h: calc(var(--card-w) * 1.233);    /* proporção 710/576 do Figma */
}

/* Palco pinned: ocupa a viewport inteira e centraliza o baralho */
.portfolio__carousel--deck .portfolio__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;          /* recorta os cards que entram pela lateral */
}

/* Pilha: caixa centralizada; cada card é absoluto sobre ela.
   Deck FLAT (sem perspective/preserve-3d) → o z-index controla o
   empilhamento de forma confiável em qualquer máquina. */
.portfolio__carousel--deck .portfolio__track {
  display: block;
  position: relative;
  width: var(--card-w);
  height: var(--deck-h);
  margin: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

.portfolio__carousel--deck .portfolio__card {
  position: absolute;
  inset: 0;
  width: var(--card-w);
  height: var(--deck-h);
  margin: 0;
  transform-origin: center center;
  /* Sem transition: o JS escreve o transform a cada frame de scroll
     (scrub contínuo) → movimento colado ao scroll, sem lag. */
  will-change: transform, opacity;
  pointer-events: none;      /* só o card da frente é interativo (abaixo) */
}

/* Só o card central recebe hover/click (os de trás ficam inertes) */
.portfolio__carousel--deck .portfolio__card.is-active {
  pointer-events: auto;
}

/* No baralho o card tem altura fixa → a mídia preenche o espaço livre */
.portfolio__carousel--deck .portfolio__media {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}

/* Véu de profundidade: escurece os cards do fundo SEM torná-los
   translúcidos (occlusão limpa → o card de trás não "vaza" pelo da frente).
   O JS controla --veil por nível de pilha. */
.portfolio__carousel--deck .portfolio__card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background-color: var(--color-sumi);
  opacity: var(--veil, 0);
  pointer-events: none;
}

/* Card da frente: borda viva + sombra mais profunda */
.portfolio__carousel--deck .portfolio__card.is-active .portfolio__card-inner {
  border-color: rgba(245, 240, 232, 0.28);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .portfolio {
    padding-block: 5rem;
  }
  .portfolio__header {
    align-items: flex-start;
    margin-bottom: var(--space-12);
  }
}

@media (max-width: 767px) {
  /* Mobile: empilha vertical (sem scroll horizontal) → não quebra o fluxo.
     O baralho scroll-driven (deck) só roda em ≥1024px. */
  .portfolio__track {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: var(--space-6);
  }
  .portfolio__card {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: none;
  }
  .portfolio__card-inner {
    border-radius: var(--radius-xl);
    gap: var(--space-6);
  }
  .portfolio__meta {
    padding: 0 var(--space-3) var(--space-3);
    gap: var(--space-4);
  }
  .portfolio__meta-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .portfolio__phrase {
    max-width: none;
  }
  .portfolio__result {
    max-width: none;
  }

  /* Tipografia maior no mobile (títulos) + botão maior */
  .portfolio__title {
    font-size: 2.25rem;   /* 36px */
  }
  .portfolio__client {
    font-size: 1.75rem;   /* 28px */
  }
  .portfolio__all {
    height: 48px;
    padding-inline: var(--space-6);
    font-size: var(--font-size-lg);   /* 18px */
  }
}