/* ==========================================================================
   Component: Blog (listagem + post)
   ========================================================================== */

/* Listagem do blog: fundo levemente cinza (--color-bg). */
.blog-page {
  padding-top: var(--space-12);
  background-color: var(--color-bg);
  color: var(--color-fg);
}

/* Single post: fundo branco. O .site-header é sticky com border-bottom
   (cinza claro) — sobre o fundo branco esse border vira o separador entre
   o menu e o conteúdo do post. */
.post-page {
  padding-top: var(--space-12);
  /* Respiro branco no fim do post: o padding estende o fundo branco do
     artigo por 24px e o margin negativo puxa o footer pra cima, colado —
     assim não aparece a faixa cinza do body entre o texto e o rodapé. */
  padding-bottom: var(--space-6);
  margin-bottom: calc(-1 * var(--space-6));
  background-color: #ffffff;
  color: var(--color-fg);
}

/* Blog capado em 1200px (o container--fluid do tema é full-bleed). */
.blog-hero__inner,
.blog-body__inner {
  max-width: 1200px;
  margin-inline: auto;
}

/* --- Cabeçalho da listagem --- */

.blog-hero {
  padding-block: var(--space-16) var(--space-8);
}

.blog-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.blog-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-h2), 5vw, var(--text-d2));
  font-weight: var(--font-medium);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: #0a0a0a;
  /* Entre "Artigos e publicações" (~10em) e a frase toda (~15em): quebra
     em 2 linhas. Em em pra acompanhar o clamp da fonte. */
  max-width: 12.5em;
  margin: 0;
}

/* --- Pílulas de categoria --- */

.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.blog-cats__pill {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-p);
  color: var(--color-fg);
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-full);
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.blog-cats__pill:hover {
  background-color: var(--color-neutral-200);
}

.blog-cats__pill.is-active {
  color: var(--color-bg);
  background-color: var(--color-fg);
}

/* --- Corpo: feed + sidebar --- */

.blog-body {
  padding-bottom: var(--space-24);
}

.blog-body__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .blog-body__inner {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-16);
    align-items: start;
  }
}

.blog-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* --- Cartão (painel branco, texto + capa) --- */

.blog-card {
  margin: 0;
  background-color: var(--color-bg-elevated, #fff);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.blog-card__link {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-6);
  padding: var(--space-6);
}

@media (min-width: 640px) {
  .blog-card__link {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8);
  }

  .blog-card__text {
    flex: 1 1 52%;
  }

  .blog-card__media {
    flex: 1 1 48%;
  }
}

.blog-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.blog-card__byline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.blog-card__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.blog-card__avatar--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-subtle);
  background-color: var(--color-bg-subtle);
}

.blog-card__avatar--icon svg {
  width: 1rem;
  height: 1rem;
}

.blog-card__author {
  font-family: var(--font-ui);
  font-size: var(--text-p);
  font-weight: var(--font-medium);
  color: var(--color-fg);
}

.blog-card__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-h5), 2.2vw, var(--text-h3));
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  color: #0a0a0a;
  margin: 0;
}

/* Hover: o cartão inteiro vira amarelo Brauer. O texto já é escuro, então
   fica legível; a capa/placeholder ganham uma leve borda pra não brigar. */
.blog-card {
  transition: background-color var(--duration-fast) var(--ease-default);
}

.blog-card:hover {
  background-color: var(--color-cta);
}

.blog-card:hover .blog-card__excerpt {
  color: var(--color-cta-fg);
}

.blog-card__excerpt {
  font-family: var(--font-ui);
  font-size: var(--text-p);
  line-height: var(--leading-normal);
  color: var(--color-fg-subtle);
  margin: 0;
}

.blog-card__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-subtle);
  aspect-ratio: 4 / 3;
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal) var(--ease-out);
}

.blog-card__link:hover .blog-card__img {
  transform: scale(1.03);
}

.blog-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 20%, var(--color-neutral-200), transparent 65%),
    var(--color-bg-subtle);
}

.blog-card__placeholder-mark {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-style: italic;
  font-weight: var(--font-medium);
  color: var(--color-neutral-300);
  user-select: none;
}

/* --- Sidebar "Últimas publicações" --- */

.blog-body__aside {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
}

.blog-aside__title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--font-medium);
  color: #0a0a0a;
  margin: 0 0 var(--space-6);
}

.blog-aside__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-aside__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.blog-aside__item-title {
  font-family: var(--font-heading);
  font-size: var(--text-h6);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: #0a0a0a;
}

.blog-aside__link:hover .blog-aside__item-title {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-aside__item-author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  color: var(--color-fg-subtle);
}

.blog-aside__avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.blog-aside__avatar--icon {
  padding: 1px;
}

/* --- Paginação --- */

.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-16);
}

.blog-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-p);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default);
}

.blog-pagination__link:hover {
  border-color: var(--color-fg);
}

.blog-pagination__link.current {
  color: var(--color-bg);
  background-color: var(--color-fg);
  border-color: var(--color-fg);
}

.blog-empty {
  font-family: var(--font-ui);
  color: var(--color-fg-subtle);
  padding-block: var(--space-16);
}

/* ==========================================================================
   Post single
   ========================================================================== */

/* Header (hero) no topo: banner largo, colado no topo, sem divisor.
   Só existe quando o post tem _brauer_post_header; senão o post não mostra
   imagem de abertura (nada cai como fallback para a capa).
   A margem negativa puxa o hero até a borda superior do main (que tem
   padding-top: var(--space-12)), removendo o gap entre o menu e a imagem.
   Sem margin horizontal: o main é full-width e o hero ocupa toda a largura. */
.post-single__hero {
  margin: calc(var(--space-12) * -1) 0 var(--space-10);
}

.post-single__hero-img {
  display: block;
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
}

/* Corpo do post: uma coluna de leitura mais larga que a original, à esquerda. */
.post-single__body {
  max-width: 800px;
}

.post-single__back {
  display: inline-block;
  margin-bottom: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-p);
  color: var(--color-fg-subtle);
  transition: color var(--duration-fast) var(--ease-default);
}

.post-single__back:hover {
  color: var(--color-fg);
}

.post-single__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

/* Com hero (header) no topo, o divisor abaixo do cabeçalho é dispensável —
   a imagem já separa visualmente. Mantém o divisor só quando não há hero. */
.post-single--has-header .post-single__header {
  border-bottom: 0;
}

.post-single__date {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  color: var(--color-fg-subtle);
}

.post-single__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-h3), 4.5vw, var(--text-h1));
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #0a0a0a;
  margin: 0;
}

.post-single__lead {
  font-family: var(--font-ui);
  font-size: var(--text-h6);
  line-height: var(--leading-normal);
  color: var(--color-fg-subtle);
  margin: 0;
}

.post-single__byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.post-single__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.post-single__avatar--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-subtle);
  background-color: var(--color-bg-subtle);
}

.post-single__avatar--icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.post-single__byline-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-family: var(--font-ui);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
}

.post-single__author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-p);
  font-weight: var(--font-medium);
  color: var(--color-fg);
}

.post-single__badge {
  display: inline-flex;
  color: var(--color-secondary);
}

.post-single__badge svg {
  display: block;
}

.post-single__role {
  color: var(--color-fg-subtle);
  transition: color var(--duration-fast) var(--ease-default);
}

a.post-single__role:hover {
  color: var(--color-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Coluna de leitura — corpo em serifada, arejado (h6 da escada). */
.post-single__content {
  font-family: var(--font-reading);
  font-size: var(--text-h6);
  line-height: var(--leading-relaxed);
  color: var(--color-fg);
}

.post-single__content > * {
  margin-block: 0 var(--space-6);
}

/* Subtítulos do artigo: mesma família serifada do corpo, só maiores e com
   mais respiro acima. O conteúdo migrado usa níveis inconsistentes (h4 pras
   perguntas, algum h1/h2 solto) — normalizamos todos na mesma escala. */
.post-single__content h1,
.post-single__content h2,
.post-single__content h3,
.post-single__content h4 {
  font-family: var(--font-reading);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #0a0a0a;
  margin-block: var(--space-10) var(--space-3);
}

.post-single__content h1,
.post-single__content h2 {
  font-size: var(--text-h4);
}

.post-single__content h3,
.post-single__content h4 {
  font-size: var(--text-h5);
  line-height: var(--leading-snug);
  margin-block: var(--space-8) var(--space-2);
}

.post-single__content a {
  color: var(--color-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-single__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.post-single__content blockquote {
  margin-inline: 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-accent);
  font-style: italic;
  color: var(--color-fg-subtle);
}

.post-single__content ul,
.post-single__content ol {
  margin-inline: 0;
  padding-inline-start: var(--space-6);
  font-family: var(--font-reading);
  list-style-position: outside;
}

.post-single__content ul {
  list-style-type: disc;
}

.post-single__content ol {
  list-style-type: decimal;
}

.post-single__content li {
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

.post-single__content li::marker {
  color: var(--color-fg-subtle);
}

/* Conteúdo migrado do Framer aninha <p> dentro do <li> (preserve:
   <li><p>item</p></li>). Eliminar a margem do <p> para o item não ficar
   espichado sob o marcador. */
.post-single__content li > p {
  margin-block: 0;
}

.post-single__content ul ul,
.post-single__content ol ol,
.post-single__content ul ol,
.post-single__content ol ul {
  margin-top: var(--space-3);
}

/* --- Relacionados --- */

.post-related {
  padding-block: var(--space-16) var(--space-24);
  margin-top: var(--space-16);
  border-top: 1px solid var(--color-border);
}

/* Alinha "Continue lendo" e os cards à coluna de leitura do artigo (800px),
   senão o .container--fluid estica os cards pra largura toda da página. */
.post-related > .container {
  max-width: 800px;
}

.post-related__title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--font-medium);
  color: #0a0a0a;
  margin: 0 0 var(--space-8);
}

@media (max-width: 767px) {
  .blog-hero {
    padding-block: var(--space-10) var(--space-6);
  }

  .post-single__title {
    font-size: clamp(var(--text-h3), 7vw, var(--text-h2));
  }

  .post-single__content {
    font-size: var(--text-p);
  }
}