/* Página de case (Figma: Portfolio › 3. CASES 613:8588) — desktop + versões tablet/mobile no final
   Coluna de 1074px (em 1400) centralizada; no Figma ela está ~26px à direita do centro, aqui fica centralizada.
   Ritmo vertical: 56px header → tags → 32 → título → 32 → capa → 56 → números → 56 → seções (32 entre elas)
   → 86 → caixa de contato → 86 até a seção Contato. */
.case-study {
  padding: var(--space-56) 0 var(--section-spacing);
}

.case-study__inner {
  width: calc(100% * 1074 / 1400);
  margin-inline: auto;
}

/* Tags (Tag --small); 16px entre elas como no Figma */
.case-study__tags {
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-study__title {
  margin: var(--space-32) 0 0;
  color: var(--color-neutrals-primary-black);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* Capa 1074×400, cantos de 24px, imagem recortada; selo iF (Award Badge) por cima */
.case-study__cover {
  position: relative;
  aspect-ratio: 1074 / 400;
  margin-top: var(--space-32);
  overflow: hidden;
  border-radius: var(--radius-card);
}

/* Sem imagem ainda: o espaço da capa fica em Gray, na mesma proporção */
.case-study__cover--empty {
  background: var(--color-background-terciary-gray);
}

.case-study__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Números de resultado ----------
   4 colunas iguais com divisor Gray de 2px à esquerda (e no fim), 32px de recuo do texto, 104px de altura. */
.case-study__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--space-56) 0 0;
  padding: 0;
  list-style: none;
}

/* Case com 3 números: 3 colunas iguais (decisão do usuário); no mobile segue a grade de 2 */
.case-study__metrics--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-metric {
  min-height: 104px;
  padding: 0 var(--space-32);
  border-left: 2px solid var(--color-background-terciary-gray);
}

/* Divisor final à direita só no último número (no 2×2, no fim de cada linha), da altura do item */
.case-metric:last-child {
  border-right: 2px solid var(--color-background-terciary-gray);
}

.case-metric__value {
  margin: 0;
  color: var(--color-branding-default-purple);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

.case-metric__label {
  margin: var(--space-4) 0 0;
  color: var(--color-neutrals-primary-black);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
}

/* ---------- Seções de texto ---------- */
.case-study__section {
  margin-top: var(--space-32);
}

.case-study__metrics + .case-study__section {
  margin-top: var(--space-56);
}

.case-study__heading {
  margin: 0;
  color: var(--color-neutrals-primary-black);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

.case-study__text {
  margin: var(--space-16) 0 0;
  color: var(--color-neutrals-primary-black);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
}

/* Lista alinhada à esquerda com o título (decisão do usuário), uma linha em branco (20px) entre os itens */
.case-study__list {
  margin: var(--space-24) 0 0;
  padding-left: 0;
  color: var(--color-neutrals-primary-black);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
}

.case-study__list li + li {
  margin-top: var(--space-20);
}

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

/* ---------- Caixa "entre em contato" ----------
   Fundo Gray, cantos 24px, 80px de altura, texto itálico light com 24px de recuo; o link é o Award Link. */
.case-study__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.25em;
  row-gap: var(--space-4);
  min-height: 80px;
  margin: var(--section-spacing) 0 0;
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-card);
  background: var(--color-background-terciary-gray);
  color: var(--color-neutrals-primary-black);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
}

/* Link para o case completo (ex.: artigo no Medium), no lugar da caixa "entre em contato";
   alinhado à esquerda do conteúdo, com o mesmo espaço acima; vários links lado a lado com 24px entre eles */
/* Links lado a lado com 48px entre eles; quebram com 16px entre linhas */
.case-study__more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-48);
  margin: var(--section-spacing) 0 0;
}

/* Botão para o próximo case (na ordem da página de Cases), centralizado no fim do conteúdo */
.case-study__next {
  display: flex;
  justify-content: center;
  margin-top: var(--space-40);
}

/* ---------- Tablet (< 1024px): coluna em largura total, números em 2×2 ---------- */
@media (max-width: 1023.98px) {
  .case-study {
    padding-top: var(--space-32);
  }

  .case-study__inner {
    width: 100%;
  }

  .case-study__tags {
    gap: var(--space-8);
  }

  .case-study__title {
    margin-top: var(--space-24);
    font-size: var(--font-size-24);
  }

  .case-study__cover {
    margin-top: var(--space-24);
  }

  /* 2×2: divisor à esquerda de cada número e à direita do segundo de cada linha */
  .case-study__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-32);
    margin-top: var(--space-40);
  }

  .case-metric {
    min-height: 0;
    padding: 0 var(--space-24);
  }

  .case-metric:nth-child(2n) {
    border-right: 2px solid var(--color-background-terciary-gray);
  }

  .case-study__metrics + .case-study__section {
    margin-top: var(--space-40);
  }

  .case-study__heading {
    font-size: var(--font-size-20);
  }
}

/* ---------- Mobile (< 768px): capa 4:3; números menores ---------- */
@media (max-width: 767.98px) {
  .case-study__cover {
    aspect-ratio: 4 / 3;
  }

  .case-metric {
    padding: 0 var(--space-16);
  }

  .case-metric__value {
    font-size: var(--font-size-24);
  }

  .case-metric__label {
    font-size: var(--font-size-14);
  }

  .case-study__note {
    padding: var(--space-20);
  }
}

/* ---------- Tablet (768–1023px) com 3 números: mantém as 3 colunas ---------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .case-study__metrics--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-study__metrics--3 .case-metric:nth-child(2) {
    border-right: 0;
  }
}