/* Blog — seção de categoria (Figma 8314:1689 · repetida 5×: 8314:1689, 1768, 1795, 1822, 1849)
   Card de post (.post-card) = Article Content 8314:1710 — também usado por artemis_blog_card() no tema */

.blog-cat { background: var(--black-200); }

/* Da 2ª categoria em diante (8314:1768…1849): stroke superior de 1px no layout — 807 = 806 + 1 (título em y 121) */
.blog-cat + .blog-cat { border-top: 1px solid var(--gray-900); }

/* 8314:1689: px 32 (container) · py 120 · gap 80 entre título e conteúdo */
.blog-cat__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding-block: var(--section-py);
}

/* Main Description 8314:1706 · Cabin SemiBold 40/1.2 (min-w-full → 1376) */
.blog-cat__title {
  align-self: stretch;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: var(--gray-0);
  text-wrap: pretty;
  overflow-wrap: break-word;
}
/* 8314:1769 · 1796 · 1823 · 1850: da 2ª categoria em diante o título está em Exo SemiBold no Figma desktop
   (só a 1ª, 8314:1706, em Cabin) — implementado literalmente, a confirmar com o designer */
.blog-cat + .blog-cat .blog-cat__title { font-family: var(--font-display); }

/* Content Container 8325:2695: cards + botão centralizado, gap 32 */
.blog-cat__content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Article Card 8314:1709: 3 colunas iguais, gap 0, stroke 1px inside gray-900 */
.blog-cat__grid {
  align-self: stretch;
  display: flex;
  box-shadow: inset 0 0 0 1px var(--gray-900);
}

/* "Ver todos os artigos" (8325:2696): .btn com stroke gray-900 — 183×60 */
.blog-cat__more { border-color: var(--gray-900); }

/* --------------------------------------------------------------------------
   Card de post — Article Content 8314:1710: p 32; Article Text 8314:1711: gap 24
   -------------------------------------------------------------------------- */
.post-card {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 32px;
}
/* 8314:1928: strokes inside à esquerda e à direita */
.post-card:nth-child(2) { box-shadow: inset 1px 0 0 var(--gray-900), inset -1px 0 0 var(--gray-900); }

.post-card__text {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-wrap: break-word;
}

/* Meta Information 8314:1726 · Cabin SemiBold 16/1.3 (Figma arredonda 20,8 → 21) · gap 8 */
.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  color: var(--gray-500);
}
.post-card__cat,
.post-card__dot,
.post-card__date { white-space: nowrap; }
.post-card__cat { color: var(--gray-0); }

/* Article Info 8314:1927: gap 16 */
.post-card__info { display: flex; flex-direction: column; gap: 16px; }

/* 8314:1713 · Exo SemiBold 24/1.3 com reticências (Figma arredonda a entrelinha 31,2 → 31: 3 linhas = 93) */
.post-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 31px;
  color: var(--gray-0);
  transition: color .2s ease;
}
/* O card inteiro é clicável (link do título esticado) */
.post-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card__link:focus-visible { outline: none; }
.post-card:has(.post-card__link:focus-visible) { outline: 2px solid var(--blue-400); outline-offset: -2px; }
.post-card:hover .post-card__title { color: var(--gray-300); }

/* Blog (fora do "Continue lendo" do artigo, .blog-cat--related): o card aumenta com o cursor ou o foco do teclado —
   ganha fundo black-100 e stroke gray-800 próprios e passa por cima dos vizinhos e do stroke da grade.
   Só com mouse (hover: hover): no toque o tap não deixa o card preso aumentado. */
.blog-cat:not(.blog-cat--related) .post-card {
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .blog-cat:not(.blog-cat--related) .post-card:hover {
    z-index: 2;
    transform: scale(1.04);
    background: var(--black-100);
    box-shadow: inset 0 0 0 1px var(--gray-800);
  }
}
.blog-cat:not(.blog-cat--related) .post-card:has(.post-card__link:focus-visible) {
  z-index: 2;
  transform: scale(1.04);
  background: var(--black-100);
  box-shadow: inset 0 0 0 1px var(--gray-800);
}

/* 8314:1925 · Cabin Regular 16/1.5 gray-300 */
.post-card__excerpt { font-size: 16px; line-height: 1.5; color: var(--gray-300); }

/* Author Info 8314:1918: avatar 56 + gap 16, centralizado; fica no rodapé do card se a coluna vizinha for mais alta */
.post-card__author {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Avatar 8314:1919: círculo 56 com fundo primary/blue/1000 por trás da foto */
.post-card__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--blue-1000, #001240); /* primary/blue/1000 do Figma — token ainda fora do :root */
}
/* Author Details 8314:1920: nome Exo Bold 18/1.5 + cargo Cabin 16/1.5 gray-300 */
.post-card__author-details {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.5;
}
.post-card__author-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--gray-0);
}
.post-card__author-role { font-size: 16px; color: var(--gray-300); }

/* --------------------------------------------------------------------------
   768–1023: 3 colunas ficam estreitas demais (título cortado em poucas palavras) — os cards empilham
   como no Mobile, com o respiro e a tipografia do desktop
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .blog-cat__grid { flex-direction: column; }
  .post-card { flex: none; }
  .post-card:nth-child(2) { box-shadow: inset 0 1px 0 var(--gray-900), inset 0 -1px 0 var(--gray-900); }
}

@media (prefers-reduced-motion: reduce) {
  .post-card__title,
  .blog-cat:not(.blog-cat--related) .post-card { transition: none; }
  .blog-cat:not(.blog-cat--related) .post-card:hover,
  .blog-cat:not(.blog-cat--related) .post-card:has(.post-card__link:focus-visible) { transform: none; }
}

/* --------------------------------------------------------------------------
   Mobile (≤767) · categoria 8673:3920 (375×900) · da 2ª em diante 8673:4790…4937 (901)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 8673:4790: stroke superior gray-800 no Mobile */
  .blog-cat + .blog-cat { border-top-color: var(--gray-800); }

  /* 8673:3920: px 16 · py 60 (--section-py) · gap 40 */
  .blog-cat__inner { gap: 40px; }

  /* 8673:3921 · Cabin SemiBold 28/1.2 (Figma arredonda 33,6 → 34) — Cabin em todas (8673:4791 · 4840 · 4889 · 4938) */
  .blog-cat__title,
  .blog-cat + .blog-cat .blog-cat__title { font-family: var(--font-body); font-size: 28px; line-height: 34px; }

  /* 8673:3923: 2 artigos empilhados (o 3º não existe no frame Mobile) */
  .post-card:nth-child(n+3) { display: none; }

  /* 8673:3924: p 20 · 8673:3938: strokes em cima e embaixo */
  .post-card { padding: 20px; }

  /* 8673:3931 · Exo SemiBold 20/1.3 */
  .post-card__title { font-size: 20px; line-height: 1.3; }

  /* 8673:3966: botão na largura total (343) */
  .blog-cat__more { align-self: stretch; }
}