/* Seção Cases em destaque da home (Figma: Portfolio › 582:3670) — desktop + versão mobile/tablet no final
   86px após os Depoimentos. Cards proporcionais: 1080/1400 do conteúdo, centralizados. */
.cases {
  padding-block: var(--section-spacing);
}

/* Página Cases (Figma 625:9308): "Conheça meu trabalho" + frase à direita, logo abaixo do header */
.cases--page {
  padding-top: var(--space-56);
}

/* Título à esquerda e frase à direita na mesma linha (Figma 595:5410),
   frase alinhada ao topo do título como em Sobre mim */
.cases__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-16);
  margin-bottom: var(--space-56);
}

.cases__title {
  margin: 0;
  color: var(--color-branding-default-purple);
  font-family: var(--font-family-display);
  font-size: var(--section-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--section-title-lh);
}

.cases__tagline {
  margin: 0;
  color: var(--color-branding-default-purple);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  text-align: right;
}

.cases__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
}

.cases__list > li {
  width: calc(100% * 1080 / 1400);
}

/* "Ver mais cases" (Button) centralizado abaixo dos cards, com o mesmo espaço entre os cards */
.cases__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-40);
}

/* ---------- Case card (Figma: DS › Card 625:9101) ----------
   Em 1080px: imagem 360×264 colada à esquerda (cantos do card), 32px de espaço, detalhes 656 + 32 à direita.
   Detalhes centralizados na altura da imagem; com texto longo o card cresce (mínimo 32px acima e abaixo, decisão do usuário)
   e a imagem acompanha a altura.
   Só o "Explorar case" (Award Link) é clicável; com mouse o fundo do card vai para Gray 2. */
.case-card {
  display: grid;
  grid-template-columns: minmax(0, 360fr) minmax(0, 656fr);
  column-gap: var(--space-32);
  align-items: center;
  padding-right: var(--space-32);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-background-default-lavender);
  transition: background-color var(--motion-duration) var(--motion-easing);
}

/* Hover do DS (fundo Gray 2) só com mouse; no teclado o mesmo visual quando o "Explorar case" tem foco */
.case-card:has(.award-link:focus-visible) {
  background: var(--color-neutrals-gray-2);
}

@media (hover: hover) {
  .case-card:hover {
    background: var(--color-neutrals-gray-2);
  }
}

/* Espaço da imagem: branco até as imagens chegarem. Altura mínima na proporção 360:264 (::before),
   esticando junto com o card quando o texto for maior; a imagem preenche e é recortada. */
.case-card__media {
  position: relative;
  align-self: stretch;
  background: var(--color-background-secondary-white);
}

.case-card__media::before {
  content: "";
  display: block;
  padding-top: calc(100% * 264 / 360);
}

.case-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 77px entre o texto e o "Explorar case", como no Figma */
.case-card__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 77px;
  padding-block: var(--space-32);
}

/* Links do card lado a lado (ex.: "Explorar case" + "Ver prêmio"), 24px entre eles como no Award Card */
.case-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
}

.case-card__eyebrow {
  margin: 0 0 var(--space-16);
  color: var(--color-branding-default-purple);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
}

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

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

/* ---------- Tablet (600–1023px) ----------
   Card em largura total, ainda horizontal: imagem (1/3) colada à esquerda, detalhes ao lado.
   Começa em 600px (não em 768) para cobrir iPads em janelas estreitas / Split View. */
@media (max-width: 1023.98px) {
  .cases--page {
    padding-top: var(--space-32);
  }

  .cases__header {
    margin-bottom: var(--space-32);
  }

  .cases__list {
    gap: var(--space-24);
  }

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

  .cases__list > li {
    width: 100%;
  }

  .case-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--space-24);
    padding-right: var(--space-24);
  }

  .case-card__details {
    gap: var(--space-24);
    padding-block: var(--space-24);
  }

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

/* ---------- Mobile (< 600px) ----------
   Imagem colada no topo em largura total e detalhes embaixo. */
@media (max-width: 599.98px) {
  .case-card {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
  }

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