/* Página interna dos cases (frame "Página interna", 1440px) */
.case-page {
  display: block;
  padding: 0;
  background: var(--surface);
}

/* Barra do topo na mesma altura da home (40px), com o conteúdo ainda começando em 89 */
.case-bar { padding: 40px var(--gutter) 0; }

/* ---------- Conteúdo ---------- */
.case {
  display: grid;
  grid-template-columns: 325px minmax(0, 1fr);
  column-gap: 21px;
  align-items: start;
  padding: 22px var(--gutter) 80px;
}

/* Card de contexto: é apoio, fica em tom mais baixo para as imagens e o texto do case liderarem.
   No desktop vira o painel da esquerda (bloco "Página interna no desktop"); em telas menores fica no topo */
.case-aside { color: var(--muted); }
.case-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.case-head {
  display: flex;
  flex-direction: column;
  gap: 27px;
}
/* Retorno: seta num círculo, fundo transparente e borda cinza */
.case-back {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  font-size: 16px;
  line-height: 1;
  transition: border-color 0.25s var(--ease), transform 0.3s var(--ease);
}
.case-back:hover { border-color: var(--fg); transform: translateX(-3px); }
/* A seta solta (fixa na tela) só existe no desktop; nas telas menores fica só a do card */
.case-back-solta { display: none; }
.case-title {
  max-width: none;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  color: rgb(255 255 255 / 0.68);
}
/* Card lateral: resumo em primeira pessoa e a ficha do projeto em linhas */
.case-summary {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
}
.case-facts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.53;
  text-transform: uppercase;
}
.case-fact {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 28px;
}
.case-fact dd { color: rgb(255 255 255 / 0.8); }
.case-fact a { display: inline-block; margin-right: 12px; transition: color 0.25s var(--ease); }
.case-fact a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
/* Visitar site: logo abaixo das ferramentas, no mesmo tom de apoio da coluna */
.case-visit {
  align-self: flex-start;
  padding: 6px 14px;
  border-color: var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg);
}

/* Imagens seguidas ficam próximas; o texto abre espaço dos dois lados para separar as partes */
.case-main { display: flex; flex-direction: column; gap: 24px; }
.case-shot { overflow: hidden; }
.case-shot:not(.has-media) { background: var(--fg); }
.case-shot img,
.case-shot video { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-shot-wide { aspect-ratio: 1014 / 503; }
/* Palco: foto, vídeo ou trio numa tela menor, no meio de uma faixa preta da largura toda que serve de moldura
   e pode receber uma imagem de fundo (campo backdrop do bloco, enviado pelo /admin) */
.case-palco {
  display: grid;
  place-items: center;
  padding: 72px 0;
  background: #000 center / cover no-repeat;
}
.case-palco.case-shot-wide { aspect-ratio: auto; }
.case-tela { width: min(68%, 1080px); overflow: hidden; }
.case-tela.case-group { width: min(80%, 1180px); overflow: visible; }

/* Blocos de texto alinhados à direita da coluna (Figma: x=730, largura 670) */
.case-text {
  width: 600px;
  max-width: 100%;
  margin-left: 96px;
  margin-block: 40px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-transform: uppercase;
}
/* Caixa alta pede entrelinha e tracking maiores para ler em bloco */
.case-text h2 { font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: 0.03em; }
.case-text p { font-size: 14px; line-height: 1.8; letter-spacing: 0.04em; }

/* Números do resultado: discretos, na mesma coluna do texto do case; sem caixa nem linha, só espaço */
.case-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px;
  margin: 8px 0 40px 96px;
}
.case-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-stat-pre {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-stat-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.case-stat-label {
  max-width: 26ch;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Entrada: os blocos sobem em sequência quando chegam na tela (media.js marca is-visible) */
.case-stats.reveal-ready .case-stat { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.case-stats.reveal-ready .case-stat:nth-child(2) { transition-delay: 0.1s; }
.case-stats.reveal-ready .case-stat:nth-child(3) { transition-delay: 0.2s; }
.case-stats.reveal-ready .case-stat:nth-child(4) { transition-delay: 0.3s; }
.case-stats.reveal-ready.is-visible .case-stat { opacity: 1; transform: none; }

.case-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 8px;
}
.case-pair .case-shot { aspect-ratio: 491 / 470; }

/* Peça do case: imagem (ou trio de imagens) com a legenda logo abaixo */
.case-figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
/* Legenda: alinhada à imagem, numerada e em tom baixo, para ser apoio e não texto do case */
.case-cap {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  width: 520px;
  max-width: 100%;
  margin-left: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--dim);
  text-transform: uppercase;
}
.case-cap-i { color: rgb(255 255 255 / 0.22); }

/* Lista de entregas dentro de um bloco de texto */
.case-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
}
.case-bullets li { position: relative; padding-left: 20px; }
.case-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 1px;
  background: var(--muted);
}

/* O rodapé fica no preto do site, fora do cinza da página */
.case-page .footer { padding: 40px var(--gutter); background: var(--bg); }

/* Com o header fixo, o conteúdo começa abaixo dele (94px) */
@media (min-width: 768px) {
  .case-bar { padding: 0; }
  .case { padding-top: 100px; }
}

/* ---------- Próximo case (mesmo hover deslizante das linhas da home) ---------- */
.next-case {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 146px minmax(0, 1fr);
  column-gap: 56px;
  align-items: center;
  padding: 34px var(--gutter);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.next-case::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(255 255 255 / 0.07);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}
.next-case:hover::before,
.next-case:focus-visible::before { transform: scaleX(1); }

.next-label {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.53;
  color: #5e5e5e;
  text-transform: uppercase;
  transition: color 0.4s var(--ease), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.next-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1.1;
  color: var(--dim);
  transition: color 0.4s var(--ease), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.next-case:hover .next-label,
.next-case:focus-visible .next-label,
.next-case:hover .next-title,
.next-case:focus-visible .next-title { color: var(--fg); transform: translateX(16px); }

/* ---------- Entrada da página ----------
   A página nasce do preto em que a anterior terminou; o card entra, depois o texto dele, e a primeira tela sobe */
.case-page { animation: fade-in 0.5s ease backwards; }
.case-bar { animation: fade-in 0.6s ease 0.5s backwards; }
.case-card > * { animation: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.case-card > :nth-child(1) { animation-delay: 0.45s; }
.case-card > :nth-child(2) { animation-delay: 0.55s; }
.case-card > :nth-child(3) { animation-delay: 0.65s; }
.case-card > :nth-child(4) { animation-delay: 0.75s; }
.case-main > :first-child { animation: case-sobe 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards; }
@keyframes case-sobe {
  from { opacity: 0; transform: translateY(80px); }
}
@media (prefers-reduced-motion: reduce) {
  .case-page, .case-bar, .case-card > *, .case-main > :first-child { animation: none; }
}

/* ---------- Página interna no desktop ----------
   Conteúdo centralizado, com as imagens cheias (só a moldura de 8px). O card de contexto fica no topo, sobre o
   primeiro palco, e sai com a rolagem normal da página */
@media (min-width: 1024px) {
  /* O primeiro palco começa no topo, por baixo do header */
  .case { position: relative; display: block; padding: 0 8px 8px; }
  /* Palco na altura da tela, menos uma faixa embaixo (legenda e o começo do próximo bloco) que avisa que tem mais para rolar.
     A tela cabe na largura e na altura: nunca passa de 68% da largura nem da altura útil do palco */
  .case-palco { height: calc(100svh - 64px); padding: 0; }
  .case-tela { width: min(68%, 1080px, calc((100svh - 240px) * var(--ar, 1.6))); }
  .case-tela.case-group { width: min(80%, 1180px, calc((100svh - 240px) * var(--ar, 2.4))); }
  .case-main { gap: 8px; }
  .case-figure { gap: 12px; }
  .case-group { gap: 8px; }
  .case-cap { width: auto; padding: 0 24px 16px; }
  .case-text { width: min(640px, calc(100% - 64px)); margin: 104px auto; padding: 0; }
  /* mesma coluna do texto do case */
  .case-stats { width: min(640px, calc(100% - 64px)); margin: -56px auto 104px; }

  /* O card ocupa a altura do primeiro palco (o quadro do fundo) e fica no meio dele: o mesmo espaço acima e abaixo.
     Se não couber, encosta no limite de cima (safe) em vez de passar por baixo do header */
  .case-aside {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 8px;
    width: 500px;
    height: calc(100svh - 64px);
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    padding: 64px 0;
  }
  /* Fundo preto, sem borda. É uma informação única: sem rolagem interna; espaços e texto se ajustam à altura da tela.
     Espaços por grupo (seta e título, resumo, ficha, botão): dentro de um grupo o espaço é curto, entre grupos é bem maior,
     para cada parte se ler como um bloco */
  .case-card {
    gap: clamp(28px, 4.6vh, 48px);
    padding: 0 40px;
    background: #000;
  }
  .case-head { gap: clamp(20px, 3.2vh, 32px); }
  .case-summary { gap: clamp(12px, 1.8vh, 16px); font-size: clamp(12px, 1.45vh, 13px); }
  .case-facts { gap: clamp(10px, 1.7vh, 16px); }
  .case-title { max-width: 325px; }

  /* A primeira peça abre espaço para o card e fica centralizada no que sobra da tela.
     Em telas estreitas (perto de 1024) ela também diminui, para não encostar no card nem sair pela direita */
  .case-main > .case-figure:first-child .case-tela { transform: translateX(254px) scale(0.86); }
  .case-main > .case-figure:first-child .case-tela:not(.case-group) {
    width: min(68%, 1080px, calc((100svh - 240px) * var(--ar, 1.6)), calc((100vw - 588px) / 0.86));
  }

  /* Seta solta: no mesmo ponto da seta do card (transition.js passa a posição em --volta-top).
     Aparece quando o card sai da tela com a rolagem; some quando ele volta */
  .case-back-solta {
    display: grid;
    position: fixed;
    z-index: 25;
    top: var(--volta-top, 116px);
    left: 48px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.6);
    transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s, border-color 0.25s var(--ease);
  }
  html.card-fora .case-back-solta {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.4s var(--ease), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s, border-color 0.25s var(--ease);
  }
  html.card-fora .case-back-solta:hover { transform: translateX(-3px); }
}

/* Telas baixas (notebooks de 720 a 800 de altura): título um pouco menor para o card caber inteiro, sem rolagem */
@media (min-width: 1024px) and (max-height: 800px) {
  .case-title { font-size: 28px; }
}
/* Abaixo de 760 de altura os grupos se aproximam um pouco, sem perder a diferença entre grupo e item */
@media (min-width: 1024px) and (max-height: 760px) {
  .case-card { gap: 26px; }
  .case-head { gap: 20px; }
  .case-facts { gap: 10px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .case-stats { margin-left: 0; }
  /* minmax(0, 1fr): a coluna nunca cresce além da tela por causa de um filho largo (o texto tem 600px no desktop) */
  .case { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .case-card { gap: 32px; }
  .case-text { margin-left: 0; padding: 24px 0; }
  .next-case { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .contact-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .page-lead { max-width: none; }
}

/* ---------- Celular ---------- */
@media (max-width: 767px) {
  /* A peça ganha a tela: o palco vai de borda a borda e a tela quase encosta nele */
  .case-palco { margin-inline: calc(var(--gutter) * -1); padding: 16px 0; }
  .case-tela { width: calc(100% - 24px); }
  /* Trio de peças: lado a lado, arrastando para o lado, em vez de três telas empilhadas; a próxima aparece na borda */
  .case-tela.case-group {
    width: 100%;
    display: flex;
    gap: 8px;
    padding-inline: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
  }
  .case-tela.case-group::-webkit-scrollbar { display: none; }
  .case-group > .case-shot { flex: 0 0 80%; scroll-snap-align: start; }
  .case { padding-block: 32px; }
  .case-title { max-width: none; font-size: 28px; }
  .case-pair { grid-template-columns: 1fr; padding: 0; }
  .case-cap { width: auto; margin-left: 0; }
  .next-case { padding-block: 32px; }
  .next-label { font-size: 14px; }
  .next-title { font-size: 24px; }
}