/* ==========================================================================
   INAEC · SEÇÃO 4: DECK DE ARTIGOS
   Três posts em destaque, com capa, autor, data e horário de publicação.

   >>> MIGRAÇÃO ELEMENTOR PRO
   Container "artigos" (full width · fundo Branco)
     ├── Container "section-head--row" (row · space-between · align end)
     └── Widget **Posts** (skin Cards · 3 colunas · 3 itens)
           Meta: Autor + Data. O horário exige o campo "Custom" do widget
           Posts (formato de data personalizado) ou um ACF de publicação —
           a marcação abaixo já reserva o lugar dele.
   ========================================================================== */

.artigos__grid { grid-auto-rows: 1fr; }

.post {
  position: relative;            /* ancora o overlay de clique do título */
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  padding: 0;                     /* a capa sangra até a borda do card */
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.post:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}

@media (hover: hover) {
  .post:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}
}
.post:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* --- Capa ---------------------------------------------------------------
   MIV · Imagens: fotografia documental, luz natural, saturação reduzida.
   Substituir os placeholders em assets/img/media/. */
.post__capa { position: relative; margin: 0; }
.post__capa img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.post__capa .tag {
  position: absolute;
  inset-block-end: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  background-color: var(--color-surface);
}

.post__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
  padding: var(--space-sm) var(--space-sm) var(--space-xs);
}

.post__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;           /* 18px */
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-heading);
}
.post__titulo a { color: inherit; text-decoration: none; }
.post__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post__titulo a:focus-visible { outline: none; }

.post__resumo {
  margin: 0;
  font-size: var(--fs-legend);   /* 14px */
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* --- Rodapé do card: autor, data e horário ------------------------------ */
.post__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: auto;
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
  border-block-start: 1px solid var(--color-border);
}

/* Avatar por iniciais — dispensa foto e mantém o card leve */
/* O selo da assinatura: retrato quando existe, iniciais quando não.
   O `<img>` mora dentro do mesmo `<span>` para herdar tamanho, forma e cor de
   fundo — sem isto seriam duas regras a manter em sincronia. */
.post__avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: 50%;
  display: block;
}

.post__avatar {
  overflow: hidden;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  flex: none;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--inaec-verde) 12%, transparent);
  color: var(--inaec-verde);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}

.post__autor {
  display: block;
  font-size: var(--fs-legend);   /* 14px */
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.35;
}
.post__data {
  display: block;
  font-size: 0.8125rem;          /* 13px — subordinado ao nome do autor */
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* O card inteiro é clicável pelo título; a área de meta não deve capturar
   o clique do link que a cobre. */
.post__meta { position: relative; z-index: 1; pointer-events: none; }

.artigos__rodape {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-lg);
}

@media (max-width: 767px) {
  .artigos__rodape .btn { inline-size: 100%; }
}