/* Blog 02 — Artigo em destaque (Figma 8314:1380 · mobile 8673:3901) — post fixado mais recente */

/* 8314:1380: p 32 em volta do card (container dá o lateral; vertical acompanha o --section-px) */
.blog-destaque {
  padding-block: var(--section-px);
  background: var(--black-200);
}

/* Article Content (8314:1568): fundo black-100 · p 32 · gap 80 · itens centralizados na vertical */
.blog-destaque__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(2.5 * var(--section-px)); /* 80 no frame (2,5 × 32), encolhe junto com o respiro lateral */
  padding: var(--section-px);
  background: var(--black-100);
}

/* Article Image (8314:1572): metade do card, 4:3, imagem em cover + stroke 1px black-200 por cima */
.blog-destaque__media {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: clip;
}
.blog-destaque__media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--black-200);
  pointer-events: none;
}
.blog-destaque__img { /* absoluta: a proporção da imagem (672×573) não estica o quadro 4:3 */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

/* Article Text (8314:1569): coluna, gap 32 */
.blog-destaque__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  overflow-wrap: break-word;
}

/* Tag (8314:2646): blue-300 · px 6 py 2 · Cabin Bold 12/1.3 (Figma arredonda 15,6 → 16) caixa-alta */
.blog-destaque__tag {
  display: flex;
  padding: 2px 6px;
  background: var(--blue-300);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  line-height: round(nearest, 1.3em, 1px);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--black-200);
}

.blog-destaque__content { align-self: stretch; display: flex; flex-direction: column; gap: 16px; } /* 8314:1685 */
.blog-destaque__head { display: flex; flex-direction: column; gap: 24px; }                       /* 8331:1151 */

/* Meta Information (8314:1681): Cabin SemiBold 16/1.3 (20,8 → 21) · gap 8 · categoria branca, resto gray-500 */
.blog-destaque__meta {
  display: flex;
  flex-wrap: wrap; /* 320: a data desce de linha em vez de estourar o card */
  align-items: center;
  column-gap: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  line-height: round(nearest, 1.3em, 1px);
  white-space: nowrap;
  color: var(--gray-500);
}
.blog-destaque__cat { color: var(--gray-0); }
.blog-destaque__dot { flex: none; width: 4px; } /* 8314:1680: caixa de 4 do "·" */

/* Main Heading (8314:1571): Exo SemiBold 40/1.2, caixa de 577 */
.blog-destaque__title {
  max-width: 577px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  line-height: round(nearest, 1.2em, 1px);
  color: var(--gray-0);
  transition: color .2s ease;
}
/* Link esticado: o card inteiro leva ao post */
.blog-destaque__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Description (8314:1660): Cabin 16/1.5 gray-300 */
.blog-destaque__excerpt { font-size: 16px; line-height: 1.5; color: var(--gray-300); }

/* Author Info (8314:1664): avatar 56 + nome/cargo, gap 16 — marcação de artemis_blog_author() no tema */
.blog-destaque__author { align-self: stretch; display: flex; align-items: center; gap: 16px; }
/* Avatar (8314:1675): círculo 56 com fundo primary/blue/1000 por trás da foto */
.blog-destaque__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 */
}
.blog-destaque__author-details { /* 8314:1666 */
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.5;
}
.blog-destaque__author-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--gray-0); } /* 8314:1663 */
.blog-destaque__author-role { font-size: 16px; color: var(--gray-300); }                                                   /* 8314:1665 */

/* Hover / foco do card: o card inteiro aumenta (cabe no respiro de 32 da seção), a imagem aproxima e o título clareia;
   foco do teclado contorna o card. O aumento só vale com mouse (hover: hover): no toque o tap não deixa o card preso. */
.blog-destaque__card { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) {
  .blog-destaque__card:hover { transform: scale(1.02); }
}
.blog-destaque__card:hover .blog-destaque__img { transform: scale(1.04); }
.blog-destaque__card:hover .blog-destaque__title { color: var(--gray-300); }
@supports selector(:has(*)) {
  .blog-destaque__link:focus-visible { outline: none; }
  .blog-destaque__card:has(.blog-destaque__link:focus-visible) { outline: 2px solid var(--blue-400); outline-offset: 3px; transform: scale(1.02); }
  .blog-destaque__card:has(.blog-destaque__link:focus-visible) .blog-destaque__img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-destaque__card,
  .blog-destaque__img,
  .blog-destaque__title { transition: none; }
  .blog-destaque__card:hover,
  .blog-destaque__card:has(.blog-destaque__link:focus-visible),
  .blog-destaque__card:hover .blog-destaque__img,
  .blog-destaque__card:has(.blog-destaque__link:focus-visible) .blog-destaque__img { transform: none; }
}

/* --------------------------------------------------------------------------
   Telas menores: imagem em cima, texto embaixo (como o mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .blog-destaque__card { flex-direction: column; align-items: stretch; gap: 32px; }
  .blog-destaque__media,
  .blog-destaque__text { flex: none; }
  .blog-destaque__title { max-width: none; }
}

/* --------------------------------------------------------------------------
   Mobile (frame 8673:3845 · seção 8673:3901, 375 × 641,25) — vale até 767px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .blog-destaque { padding-block: 16px; } /* 8673:3901: p 16 */

  /* Article Content (8673:3902): coluna · p 16 · gap 24 */
  .blog-destaque__card { gap: 24px; padding: 16px; }

  .blog-destaque__text { gap: 24px; } /* 8673:3904 */

  /* Main Heading (8673:3913): Exo SemiBold 24/1.2 (28,8 → 29) em largura total */
  .blog-destaque__title { font-size: 24px; }
}