/* ==========================================================================
   Blog — /blog e /blog/tema/{slug}

   Uma folha para o indice. Nada aqui conhece um artigo: tudo vem de
   config/posts/. A pagina do artigo carrega esta folha tambem, porque a
   linha do indice (.post-row) volta no "Leia tambem".

   Composicao, de cima para baixo:
     .bl-hero     topo curto: texto a esquerda, painel dos ultimos a direita
     .bl-panel    o painel escuro com os ultimos artigos, linha a linha
     .bl-filter   o filtro por tema, na pilula fixa (.pagenav, components)
     .post-list   o indice: uma linha por artigo (.post-row)
     .bl-paging   mais recentes / mais antigos

   Principio herdado das outras paginas: fio fino, numero tabular, um unico
   bloco escuro por tela e o vermelho so como assinatura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Topo
   -------------------------------------------------------------------------- */
.bl-hero {
  /* Mesma escala do topo das tabelas: texto e painel dividem a janela. */
  --fs-display: clamp(1.75rem, min(0.7rem + 5.4vw, 8.6vh), 5.5rem);
  --bl-pad: var(--page-hero-pad);
  --bl-gap: clamp(0.5rem, min(2.2vw, 1.9vh), 1.375rem);

  padding: var(--hero-top) var(--shell-pad) var(--shell-pad);
}

.bl-hero__card {
  position: relative;
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.bl-hero__glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.bl-hero__glow::after {
  content: "";
  position: absolute;
  top: -34%;
  right: -10%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-tint) 0%, transparent 68%);
}

.bl-hero__main {
  position: relative;
  display: grid;
  gap: calc(var(--bl-gap) * 1.8);
  padding: var(--bl-pad);
}

.bl-hero__content {
  display: grid;
  align-content: end;
  gap: var(--bl-gap);
  min-width: 0;
  container-type: inline-size;
}

.bl-hero__headline {
  display: grid;
  gap: 0.06em;
  margin-left: -0.04em; /* alinhamento optico da haste */
}

/* O sobretitulo carrega a marca e o tema dentro do H1; as linhas grandes
   ficam livres para falar com o leitor. */
.bl-hero__kicker {
  display: block;
  padding-bottom: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-strong);
}

.bl-hero__lead {
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-70);
}

.bl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

/* Coluna estreita: os dois botoes dividem a linha em vez de empilhar. */
@container (max-width: 26rem) {
  .bl-hero__actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 0.75rem;
    font-size: 0.8125rem;
  }

  .bl-hero__actions .btn__icon {
    display: none;
  }
}

.bl-hero__visual {
  position: relative;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Painel dos ultimos artigos — o unico bloco escuro do topo. As linhas
   entram uma por vez, de cima para baixo, no ritmo do painel do hero da
   home (--row-stagger / --dur-row).
   -------------------------------------------------------------------------- */
.bl-panel {
  position: relative;
  display: grid;
  gap: clamp(0.75rem, min(1.6vw, 1.6vh), 1.125rem);
  padding: clamp(0.875rem, min(1.8vw, 1.8vh), 1.5rem);
  border-radius: var(--radius-panel);
  background: var(--surface-ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  opacity: 0;
  animation: panel-in var(--dur-reveal) var(--ease-out) 420ms forwards;
}

.bl-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, rgba(229, 50, 45, 0) 62%);
}

.bl-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bl-panel .status-chip {
  color: var(--on-ink);
}

.bl-panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, min(0.9rem + 1.1vw, 2.4vh), 1.4375rem);
  font-weight: var(--fw-display);
  line-height: 1.15;
  letter-spacing: calc(-0.028em * var(--track-display));
}

.bl-panel__list {
  display: grid;
}

.bl-panel__row {
  border-top: 1px solid var(--line-on-ink);
  opacity: 0;
  animation: rise-in var(--dur-row) var(--ease-out) forwards;
  animation-delay: calc(760ms + var(--i, 0) * var(--row-stagger));
}

.bl-panel__link {
  display: grid;
  gap: 0.25rem;
  padding-block: clamp(0.5rem, 1.2vh, 0.6875rem);
  color: inherit;
}

.bl-panel__meta {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
  font-variant-numeric: tabular-nums;
}

.bl-panel__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
  font-weight: var(--fw-display);
  line-height: 1.25;
  letter-spacing: calc(-0.022em * var(--track-display));
  text-wrap: pretty;
  transition: color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .bl-panel__link:hover .bl-panel__name {
    color: var(--brand);
  }
}

/* --------------------------------------------------------------------------
   Filtro por tema — a pilula fixa, com a contagem de cada tema em miniatura
   -------------------------------------------------------------------------- */
.bl-filter .pagenav__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
}

.bl-filter__count {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-30);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out);
}

.bl-filter .pagenav__link[aria-current="page"] .bl-filter__count {
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   Indice — uma linha por artigo, no fio fino das listas do site
   -------------------------------------------------------------------------- */
.post-list {
  display: grid;
}

.post-row {
  position: relative;
  border-top: 1px solid var(--line);
}

.post-row:last-child {
  border-bottom: 1px solid var(--line);
}

/* O fio superior vira vermelho por cima, crescendo da esquerda. */
.post-row::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.post-row__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  /* Celular: a capa abre a linha, como um cartao de noticia. */
  grid-template-areas:
    "thumb thumb thumb"
    "n    meta    arrow"
    "text text    arrow"
    "read read    arrow";
  column-gap: 0.75rem;
  row-gap: 0.375rem;
  align-items: center;
  padding-block: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
  color: inherit;
}

/* Capa. A moldura .media ja faz o zoom de entrada com a revelacao; o hover
   aproxima mais um pouco, como quem se inclina para ler. */
.post-row__thumb {
  grid-area: thumb;
  aspect-ratio: 16 / 9;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-sm);
}

.post-row__n {
  grid-area: n;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-30);
  transition: color var(--dur-fast) var(--ease-out);
}

.post-row__meta {
  grid-area: meta;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-30);
  font-variant-numeric: tabular-nums;
}

.post-row__theme {
  color: var(--brand-strong);
}

.post-row__text {
  grid-area: text;
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.post-row__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.625rem);
  font-weight: var(--fw-display);
  line-height: 1.15;
  letter-spacing: calc(-0.03em * var(--track-display));
  color: var(--ink);
  text-wrap: pretty;
  transition: color var(--dur-fast) var(--ease-out);
}

.post-row__summary {
  /* Duas linhas no maximo: o resumo convida, o artigo explica. O texto
     inteiro continua no HTML (buscador e leitor de tela leem tudo). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-50);
  text-wrap: pretty;
}

.post-row__reading {
  grid-area: read;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink-30);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.post-row__arrow {
  grid-area: arrow;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.post-row__arrow svg {
  width: 0.75rem;
  height: 0.75rem;
}

.post-row__arrow path {
  stroke: var(--ink-50);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .post-row:hover::after {
    transform: scaleX(1);
  }

  .post-row:hover .post-row__n {
    color: var(--brand);
  }

  .post-row:hover .post-row__img {
    --img-scale: 1.05;
  }

  .post-row:hover .post-row__arrow {
    background: var(--ink);
    border-color: var(--ink);
    transform: translateX(2px);
  }

  .post-row:hover .post-row__arrow path {
    stroke: #fff;
  }
}

.post-row__link:focus-visible {
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.bl-index__empty {
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-block: 1px solid var(--line);
  font-size: var(--fs-body);
  color: var(--ink-50);
}

/* --------------------------------------------------------------------------
   Paginacao — dois botoes e o estado no meio
   -------------------------------------------------------------------------- */
.bl-paging {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.bl-paging__state {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-30);
  font-variant-numeric: tabular-nums;
}

/* A seta de voltar aponta para a esquerda e anda para a esquerda. */
.bl-paging__back {
  transform: scaleX(-1);
}

.bl-paging .btn:hover .bl-paging__back {
  transform: scaleX(-1) translateX(3px);
}

/* --------------------------------------------------------------------------
   Fechamento — o cartao existe so para dar a mesma calha das outras secoes
   -------------------------------------------------------------------------- */
.bl-closing__card {
  padding: clamp(0.625rem, 0.4rem + 1vw, 1rem);
}

/* --------------------------------------------------------------------------
   Celular. O painel de ultimos vira uma faixa que rola no eixo horizontal:
   cada artigo e um cartao, o topo continua curto e nada empilha quatro
   titulos de duas linhas.
   -------------------------------------------------------------------------- */
@media (max-width: 63.99rem) {
  .bl-panel__list {
    display: flex;
    gap: 0.5rem;
    margin-inline: calc(-1 * clamp(0.875rem, min(1.8vw, 1.8vh), 1.5rem));
    padding-inline: clamp(0.875rem, min(1.8vw, 1.8vh), 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .bl-panel__list::-webkit-scrollbar {
    display: none;
  }

  .bl-panel__row {
    flex: none;
    width: 13.5rem;
    border-top: 0;
    border-radius: 0.75rem;
    background: var(--surface-ink-soft);
    border: 1px solid var(--line-on-ink);
    scroll-snap-align: start;
  }

  .bl-panel__link {
    padding: 0.75rem 0.875rem;
    gap: 0.375rem;
  }

  .bl-panel__name {
    font-size: 0.875rem;
  }

}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .post-row__link {
    grid-template-columns: 2.5rem 10rem minmax(0, 1fr) auto 1.75rem;
    grid-template-areas:
      "n thumb meta read arrow"
      "n thumb text text arrow";
    column-gap: clamp(1rem, 2vw, 1.75rem);
    align-items: start;
  }

  .post-row__arrow {
    align-self: center;
  }

  .post-row__reading {
    justify-self: end;
  }

  /* Ao lado do texto a capa vira miniatura 3:2, da altura das duas linhas. */
  .post-row__thumb {
    align-self: start;
    aspect-ratio: 3 / 2;
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   Desktop — a composicao da referencia: texto a esquerda, objeto a direita,
   e a linha do indice vira lancamento: numero | data e tema | texto | leitura
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .bl-hero__main {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(1.75rem, 3.5vw, 4rem);
  }

  .bl-hero__visual {
    display: flex;
    justify-content: flex-end;
  }

  .bl-panel {
    width: 100%;
    max-width: 25rem;
  }

  .post-row__link {
    /* Data e tema sobem para cima do titulo: a coluna que eles ocupavam
       agora e da capa. */
    grid-template-columns: 2.5rem 13rem minmax(0, 1fr) 7rem 1.75rem;
    grid-template-areas:
      "n thumb meta read arrow"
      "n thumb text read arrow";
    row-gap: 0.625rem;
    column-gap: clamp(1.25rem, 2.4vw, 2.5rem);
    align-items: start;
  }

  .post-row__n,
  .post-row__meta,
  .post-row__reading {
    padding-top: 0.45em;
  }

  .post-row__meta {
    padding-top: 0;
  }

  .post-row__arrow {
    align-self: center;
  }
}

/* Celular estreito: a linha de apoio desce um degrau para o topo caber. */
@media (max-width: 30rem) {
  .bl-hero {
    --bl-pad: var(--card-pad);
  }

  .bl-hero__lead {
    font-size: var(--fs-sm);
    line-height: 1.5;
  }
}

/* Celular pequeno em retrato (320x568): sai o que e apoio e a folga entre
   texto e painel encolhe. O topo continua inteiro na janela. */
@media (max-width: 30rem) and (max-height: 37rem) {
  .bl-hero__main {
    gap: var(--bl-gap);
  }

  /* O lead e generico (o indice logo abaixo diz o mesmo): sai antes do
     painel, que e o que o visitante veio ver. */
  .bl-hero__lead,
  .bl-panel__title {
    display: none;
  }

  .bl-panel {
    gap: 0.5rem;
  }
}

/* Janela baixa (celular deitado): duas colunas cedo, tipografia um degrau
   abaixo e descarte do que e acessorio, como nos outros topos. */
@media (min-width: 40rem) and (max-height: 34rem) {
  .bl-hero {
    --fs-display: clamp(1.5rem, min(0.9rem + 5vw, 7.4vh), 3.25rem);
    --bl-pad: clamp(0.75rem, 3.1vh, 1.5rem);
  }

  .bl-hero__main {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 1.5rem;
  }

  .bl-hero__visual {
    display: flex;
    justify-content: flex-end;
  }

  .bl-hero__lead {
    font-size: var(--fs-sm);
    line-height: 1.45;
  }

  .bl-panel__title,
  .bl-panel__row:nth-child(n + 3) {
    display: none;
  }

  .bl-panel {
    width: min(100%, 22rem);
    gap: 0.5rem;
  }

  /* Deitado o painel volta a ser lista vertical, mais compacta. */
  .bl-panel__list {
    display: grid;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .bl-panel__row {
    width: auto;
    border: 0;
    border-top: 1px solid var(--line-on-ink);
    border-radius: 0;
    background: transparent;
  }

  .bl-panel__link {
    padding: 0.375rem 0;
  }

  .bl-panel__name {
    -webkit-line-clamp: 1;
  }

  .bl-hero__actions {
    flex-wrap: nowrap;
  }
}

@media (max-height: 30rem) {
  .bl-hero__lead {
    display: none;
  }
}

/* Celular pequeno deitado (568x320): nao ha altura para o painel ao lado
   nem embaixo do texto. Fica a mensagem e a acao, como no topo das paginas
   de servico; o conteudo do painel esta logo abaixo, na propria pagina. */
@media (max-width: 39.99rem) and (max-height: 34rem) {
  .bl-hero__visual {
    display: none;
  }
}