/* ==========================================================================
   Dr. Bruno Brito — listagem de artigos (/artigos/ e os arquivos de etapa,
   autor, data e busca)

   O site.css já tem o vocabulário: .hub-hero no topo, .journey-bar/.jstep
   como barra de etapas, .journey-card como cartão (e --featured como
   destaque), .cta-band no fim. Este arquivo cobre só o que o site HTML não
   tinha — a grade e a paginação do Loop Grid e o estado vazio — com os
   mesmos tokens do :root. Carrega depois do elementor-bridge.css.
   ========================================================================== */

/* ------------------------------------------------------ grade de artigos */
/* Colunas e espaçamentos vêm do próprio widget Loop Grid (4 / 2 / 1, 16px),
   para continuarem editáveis no painel do Elementor. Aqui só a altura: os
   cartões de uma mesma linha ficam iguais e o "Ler artigo" alinha no pé,
   como na .journey-grid do site. */
.brunobrito .artigos-grid .e-loop-item > .e-con {
  height: 100%;
}

/* O site.js anima a entrada dos cartões com fill-mode "both", que prende
   transform:none depois da animação e anula a elevação do hover
   (a.journey-card:hover). Sem o preenchimento final, o cartão volta ao
   próprio estilo quando a entrada termina. */
html.anim .artigos-grid .journey-card[data-anim] {
  animation-fill-mode: backwards;
}

/* ------------------------------------------------------ barra de etapas */
/* No site HTML os .jstep eram rótulos; aqui são links para cada etapa
   (categoria). A pílula .current continua marcando onde o leitor está. */
.brunobrito a.jstep {
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.brunobrito a.jstep:not(.current):hover {
  background: var(--sage-tile);
  color: var(--ink-2);
}

/* O a:hover do site.css escureceria o texto da pílula atual. */
.brunobrito a.jstep.current:hover {
  color: #fff;
}

@media (max-width: 760px) {
  /* Faixa com rolagem lateral: alvo de toque maior e foco que não é cortado. */
  .brunobrito a.jstep {
    padding-block: 10px;
  }

  .brunobrito a.jstep:focus-visible {
    outline-offset: -2.5px;
  }
}

/* ------------------------------------------------------------ paginação */
/* O mesmo vocabulário da barra de etapas: pílulas pequenas, página atual em
   tinta. Um fio separa a grade da navegação, como no .next-step. */
.brunobrito .artigos-grid .elementor-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
}

.brunobrito .artigos-grid .elementor-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
  background: rgba(15, 23, 42, 0.035); /* o mesmo fundo do .jstep */
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.brunobrito .artigos-grid .elementor-pagination a.page-numbers:hover {
  background: var(--sage-tile);
  color: var(--ink-2);
}

.brunobrito .artigos-grid .elementor-pagination .page-numbers.current {
  background: var(--ink-2);
  color: #fff;
}

.brunobrito .artigos-grid .elementor-pagination .page-numbers.dots {
  min-width: 0;
  padding-inline: 2px;
  background: none;
}

/* "Anterior" e "Próxima" só aparecem quando levam a algum lugar. */
.brunobrito .artigos-grid .elementor-pagination span.prev,
.brunobrito .artigos-grid .elementor-pagination span.next {
  display: none;
}

/* A seta anda, como no .go dos cartões. */
.brunobrito .artigos-grid .elementor-pagination .prev span,
.brunobrito .artigos-grid .elementor-pagination .next span {
  transition: transform 0.22s var(--ease);
}

.brunobrito .artigos-grid .elementor-pagination a.prev:hover span {
  transform: translateX(-3px);
}

.brunobrito .artigos-grid .elementor-pagination a.next:hover span {
  transform: translateX(3px);
}

@media (max-width: 700px) {
  .brunobrito .artigos-grid .elementor-pagination .page-numbers {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------- estado vazio */
/* Sem artigos (uma etapa ainda vazia, uma busca sem resultado): a mensagem
   do Loop Grid ganha o tom da caixa de resposta (.hub-answer) e o link, o do
   .go. Alinhada à esquerda, como o resto do site. */
.brunobrito .artigos-grid .e-loop-nothing-found-message {
  padding: 0;
  text-align: left;
  color: var(--ink);
}

.brunobrito .artigos-grid .e-loop-nothing-found-message__text {
  max-width: 860px;
  background: var(--sage-tile);
  border-radius: var(--r);
  padding: clamp(22px, 2.6vw, 32px);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--ink);
}

.brunobrito .artigos-grid .e-loop-nothing-found-message__text a {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 10px;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--sage-deep);
}

.brunobrito .artigos-grid .e-loop-nothing-found-message__text a:hover {
  color: var(--ink-2);
}

.brunobrito .artigos-grid .e-loop-nothing-found-message__text a span {
  transition: transform 0.22s var(--ease);
}

.brunobrito .artigos-grid .e-loop-nothing-found-message__text a:hover span {
  transform: translateX(3px);
}

/* ------------------------------------------------------- topo da etapa */
/* O botão "Guia completo da etapa" só existe quando a categoria tem um guia
   pilar; sem ele, o widget fica vazio e não deve deixar espaço no topo. */
.brunobrito .elementor-widget-html.hub-hero-actions:not(:has(*)) {
  display: none;
}