/* ---------- página de case ----------
   Referência: páginas de projeto do Agentic. O case inteiro é uma cena; no fim, os próximos
   projetos sobem por cima dela como cartões (scenes.css).
   Ordem: abertura (nome, dados e link), imagem de abertura, introdução em texto grande e,
   depois, blocos de rótulo + parágrafo que alternam de lado, com imagens de largura total entre eles.
   O texto fica sempre alinhado à esquerda, mesmo nos blocos da direita. */
.case__inner {
  position: relative; /* referência para o case.js medir a posição de cada peça */
  display: flex;
  flex-direction: column;
  gap: var(--case-vao);
  padding: calc(var(--header-altura) + var(--space-7)) var(--margem-conteudo) var(--case-vao);
}

/* ---------- abertura ---------- */
.case__head {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}
.case__title {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-case-titulo);
  font-weight: var(--peso-titulo);
  line-height: 0.9;
  letter-spacing: var(--tracking-titulo);
}
.case__facts { width: min(36rem, 100%); }

/* lista de dados: nome do dado à esquerda, valor ao lado */
.facts {
  display: grid;
  margin: 0;
}
.facts > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--cena-borda);
}
.facts dt {
  font-size: var(--fs-rodape);
  color: var(--cena-apoio);
}
.facts dd { margin: 0; }

/* link em forma de pílula */
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 2px currentColor;
  font-weight: var(--peso-corpo-forte);
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pill-link:hover {
  background: var(--cena-texto);
  color: var(--cena-fundo);
}
.pill-link .link-arrow { transition: transform var(--dur-med) var(--ease-out); }
.pill-link:hover .link-arrow { transform: translateX(4px); }
/* pílula cheia: o link principal quando há dois lado a lado. No hover ela esvazia */
.pill-link--solid {
  background: var(--cena-texto);
  color: var(--cena-fundo);
  box-shadow: inset 0 0 0 2px var(--cena-texto);
}
.pill-link--solid:hover {
  background: transparent;
  color: var(--cena-texto);
}

/* ---------- imagens ---------- */
.case__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  /* linha fina por dentro: separa do fundo as imagens claras no tema claro e as escuras no escuro */
  outline: 1px solid var(--cena-borda);
  outline-offset: -1px;
}
.case__media[data-case-grow] { will-change: transform; }
.case__media img {
  display: block;
  width: 100%;
  height: auto; /* a altura vem da proporção dos atributos width e height: o espaço fica reservado antes de a imagem carregar */
}
/* imagens seguidas, sem texto entre elas, ficam juntas num grupo */
.case__gallery,
.case__pair {
  display: grid;
  gap: var(--case-galeria-vao);
}
.case__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a abertura fica mais perto da imagem do que os outros blocos entre si */
.case__head + .case__media { margin-top: calc(var(--space-8) - var(--case-vao)); }

/* espaço provisório: some quando a imagem real entrar */
.placeholder {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 9;
  padding: var(--space-5);
  background: var(--tema-placeholder);
  transition: background-color var(--dur-med) var(--ease-out);
}
.case__media--cover .placeholder { aspect-ratio: 16 / 10; }
.placeholder__label {
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-corpo-medio);
}

/* ---------- introdução ---------- */
.case__intro {
  max-width: 19em;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-frase);
  font-weight: var(--peso-titulo);
  line-height: var(--lh-frase);
  letter-spacing: var(--tracking-titulo);
  text-wrap: pretty;
  will-change: transform;
}

/* ---------- blocos de texto ----------
   Cada bloco ocupa a largura toda em duas colunas: o texto de um lado e o marcador do outro. */
.case__block {
  display: grid;
  grid-template-columns: var(--case-bloco-largura) minmax(0, 1fr);
  align-items: start;
}
.case__block--right { grid-template-columns: minmax(0, 1fr) var(--case-bloco-largura); }
.case__block-body {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  gap: var(--space-5);
}
.case__block--right .case__block-body { grid-column: 2; }
.case__block p {
  font-size: var(--fs-case-texto);
  line-height: 1.4;
  text-wrap: pretty;
}
.case__dot {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  width: var(--case-ponto);
  height: var(--case-ponto);
  margin-top: 0.2em;
  border-radius: 50%;
  background: var(--tema-destaque-forma);
}
.case__block--right .case__dot { grid-column: 1; justify-self: start; }

/* ---------- números e listas ----------
   Rótulo, texto de apoio opcional e uma fileira de três colunas com linha em cima de cada item. */
.case__stats,
.case__list {
  display: grid;
  gap: var(--space-6);
}
.case__lead {
  max-width: var(--case-bloco-largura);
  margin-top: calc(var(--space-5) - var(--space-6)); /* mesma distância do rótulo que nos blocos de texto */
  font-size: var(--fs-case-texto);
  line-height: 1.4;
  text-wrap: pretty;
}
.case__stats ul,
.case__list ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.case__stats li,
.case__list li {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--cena-borda);
}
.case__list-name {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-case-texto);
  font-weight: var(--peso-titulo);
  line-height: 1.1;
  letter-spacing: var(--tracking-titulo);
}
.case__list li p {
  font-size: var(--fs-corpo-m);
  line-height: 1.45;
  text-wrap: pretty;
}
.case__number {
  font-family: var(--fonte-numero);
  font-size: var(--fs-case-numero);
  font-weight: var(--peso-numero);
  line-height: 1;
  letter-spacing: var(--tracking-titulo);
  color: var(--tema-destaque-texto);
}
.case__number-label { font-size: var(--fs-corpo-g); }

/* ---------- faixa de CTA no fim do case ----------
   Referência: "Centered CTA with Dual Actions" da BYQ (coleção Kelvin): rótulo, título grande,
   uma linha de texto e dois links lado a lado. Aqui tudo fica à esquerda, sem o brilho de fundo
   e sem o título em dois tons. O rótulo é a frente de serviço a que o case pertence. */
.case-cta {
  display: grid;
  justify-items: start;
  gap: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--cena-borda);
}
.case-cta__title {
  max-width: 14em;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-titulo-g);
  font-weight: var(--peso-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}
.case-cta__text {
  max-width: 60ch;
  font-size: var(--fs-case-texto);
  line-height: 1.4;
  text-wrap: pretty;
}
.case-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---------- blocos aparecem quando entram na tela ---------- */
.js [data-case-reveal] {
  opacity: 0;
  transform: translateY(32px);
}
.js [data-case-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

/* ---------- próximos projetos ---------- */
.scene.next { min-height: var(--proximo-altura); }
.next__inner {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-5);
  min-height: var(--proximo-altura);
  padding: calc(var(--header-altura) + var(--space-5)) calc(var(--margem-conteudo) - var(--card-inset)) var(--space-8);
}
.next__title {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-case-titulo);
  font-weight: var(--peso-titulo);
  line-height: 0.9;
  letter-spacing: var(--tracking-titulo);
}
.next .facts { width: min(36rem, 100%); }
/* o cartão inteiro é a área de clique: o link do nome se estende por todo o cartão */
.next__title { width: 100%; }
.next__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.next__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.next__link .link-arrow {
  width: 0.5em;
  height: 0.5em;
  transition: transform var(--dur-med) var(--ease-out);
}
.next:hover .next__link .link-arrow { transform: translateX(0.12em); }

/* cartão final: volta para a lista de trabalhos da home */
.scene.more { min-height: var(--mais-altura); }
.more__inner {
  display: grid;
  align-content: center;
  min-height: var(--mais-altura);
  padding: calc(var(--header-altura) + var(--space-5)) calc(var(--margem-conteudo) - var(--card-inset)) var(--space-8);
}

/* ---------- tablet e celular: uma coluna só ---------- */
@media (max-width: 960px) {
  .case__block,
  .case__block--right { grid-template-columns: minmax(0, 1fr); }
  .case__block-body,
  .case__block--right .case__block-body { grid-column: 1; max-width: 40rem; }
  .case__dot { display: none; }
  .case__stats ul,
  .case__list ul,
  .case__pair { grid-template-columns: minmax(0, 1fr); }
  .case__lead { max-width: 40rem; }
  .placeholder,
  .case__media--cover .placeholder { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .facts > div { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-case-reveal] { opacity: 1; transform: none; }
  .js [data-case-reveal].is-in { transition: none; }
  .case__media, .case__gallery, .case__intro { transform: none !important; }
  .pill-link .link-arrow, .next__link .link-arrow { transition: none; }
}