/*
  Componentes do site público. Nomes de classe próprios (bl-* = "blog"), para não colidir
  com nada herdado e deixar claro o que é nosso.
*/

/* ---------- Cabeçalho ---------- */
.bl-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 90px;
  display: flex;
  align-items: center;
  background: var(--color-bg);
  box-shadow: var(--shadow-header);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Home e post têm imagem escura logo no topo — o header nasce transparente com o logo/nav
   em branco, sobrepondo a imagem, e só fica sólido depois que a página rola (JS troca
   .is-scrolled). Confirmado no site ao vivo: classe "headroom" + troca de logo por opacidade. */
.bl-header--overlay:not(.is-scrolled) {
  background: transparent;
  box-shadow: none;
}

.bl-header--overlay:not(.is-scrolled) .bl-nav__list > li > a,
.bl-header--overlay:not(.is-scrolled) .bl-icon-btn {
  color: #fff;
}

.bl-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.bl-header__logo {
  position: relative;
  display: block;
}

.bl-header__logo-img {
  height: 32px;
  width: auto;
  display: block;
  transition: opacity 0.25s ease;
}

.bl-header__logo-img--light {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.bl-header--overlay:not(.is-scrolled) .bl-header__logo-img--dark {
  opacity: 0;
}

.bl-header--overlay:not(.is-scrolled) .bl-header__logo-img--light {
  opacity: 1;
}

.bl-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.bl-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  font-family: var(--font-regular);
  font-size: 15px;
}

.bl-nav__list a {
  text-decoration: none;
  color: var(--color-heading);
  padding: var(--space-xs) 0;
}

.bl-nav__list a:hover {
  color: var(--color-accent);
}

/* Confirmado no site ao vivo: só o item de topo cuja URL bate com a página atual fica
   vermelho — os itens dentro do submenu de categorias nunca ganham esse destaque, mesmo
   estando na categoria correspondente. */
.bl-nav__list a.is-active-page,
.bl-header--overlay:not(.is-scrolled) .bl-nav__list a.is-active-page {
  color: var(--color-accent);
}

.bl-nav__item--has-children {
  position: relative;
}

.bl-nav__submenu {
  list-style: none;
  margin: 0;
  padding: var(--space-xs) 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  display: none;
}

.bl-nav__item--has-children:hover .bl-nav__submenu,
.bl-nav__item--has-children:focus-within .bl-nav__submenu {
  display: block;
}

.bl-nav__submenu a {
  display: block;
  padding: var(--space-xs) var(--space-md);
}

.bl-header__search {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Some por padrão — o original não tem uma caixa de busca branca sempre visível, só o
   ícone; o JS (site-header.js) abre isto ao clicar. */
.bl-header__search input[type="search"] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-family: var(--font-regular);
  font-size: 14px;
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: width 0.2s ease, opacity 0.2s ease;
}

.bl-header__search.is-open input[type="search"] {
  width: 200px;
  opacity: 1;
  pointer-events: auto;
}

.bl-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--color-heading);
  cursor: pointer;
}

.bl-icon-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: opacity 0.2s ease;
}

.bl-icon-btn:hover svg {
  opacity: 0.6;
}

/* Ícone de busca do header: lupa que vira um X quando o painel abre — o original não tem
   uma caixa de busca inline, é um painel em tela cheia (.bl-search-popup) acionado por
   este ícone. */
.bl-search-toggle {
  position: relative;
}

.bl-search-toggle__x-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bl-search-toggle__x-line--1 {
  transform: translate(-50%, -50%) rotate(45deg);
}

.bl-search-toggle__x-line--2 {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.bl-search-toggle.is-active .bl-search-toggle__glass {
  opacity: 0;
}

.bl-search-toggle.is-active .bl-search-toggle__x-line {
  opacity: 1;
}

/* Painel de busca em tela cheia — desce por cima do topo da página. */
.bl-search-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 360px;
  z-index: 90;
  background: var(--color-indigo);
  display: flex;
  align-items: center;
  transform: translateY(-100%);
  transition: transform 0.35s ease;
}

.bl-search-popup.is-open {
  transform: translateY(0);
}

.bl-search-popup__form {
  width: 100%;
}

.bl-search-popup input {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  font-family: var(--font-light);
  font-size: 36px;
  padding: 0 0 var(--space-sm);
}

.bl-search-popup input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.bl-search-popup input:focus {
  outline: none;
}

/* ---------- Menu mobile (painel deslizante) ----------
   Confirmado no site ao vivo: abaixo de 1024px o menu inline não cabe mais e vira um
   hambúrguer que abre um painel branco deslizando da direita — mesmo breakpoint já usado
   no resto do site para a virada mobile/desktop. */
.bl-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.bl-mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.bl-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--color-bg);
  z-index: 300;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
}

.bl-mobile-menu.is-open {
  transform: translateX(0);
}

.bl-mobile-menu__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 290;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bl-mobile-menu__backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.bl-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bl-mobile-menu__logo img {
  height: 24px;
}

.bl-mobile-menu__close {
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--color-heading);
  cursor: pointer;
}

.bl-mobile-menu__nav {
  padding: var(--space-md);
}

.bl-mobile-menu__nav .bl-nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  font-size: 17px;
}

.bl-mobile-menu__nav .bl-nav__list a {
  display: block;
  padding: var(--space-sm) 0;
  color: var(--color-heading);
}

.bl-mobile-menu__nav .bl-nav__submenu {
  display: block;
  position: static;
  box-shadow: none;
  padding-left: var(--space-md);
}

.bl-mobile-menu__nav .bl-nav__submenu a {
  padding: var(--space-xs) 0;
  font-size: 15px;
  color: var(--color-text);
}

@media (max-width: 1023px) {
  .bl-header .bl-nav > .bl-nav__list {
    display: none;
  }

  .bl-mobile-toggle {
    display: flex;
  }
}

/* ---------- Cabeçalho de página (título do post/categoria com imagem de fundo) ---------- */
.bl-page-header {
  position: relative;
  padding: 120px 0 56px;
  background: linear-gradient(rgba(20, 20, 20, 0.55), rgba(20, 20, 20, 0.55)), var(--color-heading);
  background-size: cover;
  background-position: center;
  color: var(--color-heading-on-dark);
  text-align: center;
}

.bl-page-header__category a {
  display: inline-block;
  font-family: var(--font-regular);
  font-size: var(--text-tiny);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-heading-on-dark);
  text-decoration: none;
  margin-bottom: var(--space-sm);
}

/* Título do post: 34px até 1024px, 42px de 1024 a 1439, 60px a partir de 1440 — três
   degraus reais medidos ao vivo, não uma escala fluida. */
.bl-page-header h1 {
  font-family: var(--font-bold);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .bl-page-header h1 {
    font-size: 42px;
  }
}

@media (min-width: 1440px) {
  .bl-page-header h1 {
    font-size: 60px;
  }
}

.bl-page-header__meta {
  margin-top: var(--space-sm);
  font-family: var(--font-regular);
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.85);
}

.bl-page-header__meta strong {
  font-family: var(--font-semibold);
  color: var(--color-heading-on-dark);
}

/* Variante para categoria/tag/autor — no site original só o post tem a faixa escura com
   imagem de fundo; essas páginas são um título simples sobre fundo branco (confirmado por
   getComputedStyle no site ao vivo: cor rgb(52,52,52), sem background-image nenhum). */
.bl-page-header--plain {
  background: none;
  color: var(--color-heading);
}

/* Categoria/tag/autor/busca pulam direto pra 70px em 1024px (sem o degrau intermediário
   de 42px que o post usa) e são mais pesados (600, não 500). */
.bl-page-header--plain h1 {
  color: var(--color-heading);
  font-weight: 600;
}

@media (min-width: 1024px) {
  .bl-page-header--plain h1 {
    font-size: 70px;
    line-height: 1;
  }
}

.bl-page-header--plain .bl-page-header__meta {
  color: var(--color-muted);
}

.bl-page-header--plain .bl-page-header__meta strong {
  color: var(--color-heading);
}

/* ---------- Corpo do post ---------- */
.post-single {
  padding-top: var(--space-lg);
}

.post-featured-image img {
  border-radius: var(--radius);
}

/* ---------- Card de post (grade de categoria / home) ---------- */
/* Valores medidos ao vivo (getComputedStyle, desktop 1440px) em /categoria/enem/ e na home —
   os dois contextos usam tamanho de título e cor de categoria levemente diferentes; aqui
   fica o valor de /categoria (o mais comum, já que a home só tem algumas fileiras). */
.bl-post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bl-post-card__image {
  display: block;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 76 / 63;
  background: var(--color-bg-alt);
  margin-bottom: 35px;
}

.bl-post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s linear;
}

.bl-post-card:hover .bl-post-card__image img {
  transform: scale(1.05);
}

/* Preto quase puro, não indigo — remedido em 1440px depois de confundir isso com a cor do
   título da fileira (esse sim é indigo). Igual em qualquer contexto (home ou arquivo). */
.bl-post-card__category {
  font-family: var(--font-regular);
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  color: #090909;
  text-decoration: none;
}

.bl-post-card__title {
  font-family: var(--font-regular);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #090909;
  margin: 0 0 10px;
}

.bl-post-card__title a {
  text-decoration: none;
  color: inherit;
}

.bl-post-card__title a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.bl-post-card__excerpt {
  font-family: var(--font-light);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}

/* Nas fileiras da home (grid dentro de .bl-home-main) o rótulo é indigo, e o título é
   maior/mais pesado — confirmado que difere do card usado em /categoria, /tag, /autor. */
/* ---------- Fileira de categoria (home) ---------- */
.bl-category-row {
  padding: 30px 0;
}

.bl-category-row__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 35px;
}

/* 16px só abaixo de 1024px — em desktop de verdade o site ao vivo usa 24px (achado
   perdido na primeira auditoria, que rodou numa largura de ~972px por engano). */
.bl-category-row__title {
  font-family: var(--font-bold);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-indigo);
  margin: 0;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .bl-category-row__title {
    font-size: 24px;
  }
}

/* A linha ao lado do título — no original vem DEPOIS do texto, não antes (era border-top
   no bloco inteiro, o que lia como "linha, depois título" ao rolar a página). */
.bl-category-row__rule {
  flex: 1 1 auto;
  height: 0;
  border-top: 2px solid #ebebeb;
}

.bl-category-row__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
}

/* Botão pílula com gradiente — "Ver mais artigos", centralizado abaixo da grade de posts
   (não é um link de texto ao lado do título, como uma primeira leitura do CSS sugeriria). */
.bl-category-row__cta-wrap {
  text-align: center;
  margin-top: var(--space-md);
}

.bl-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  border-radius: 300px;
  background-image: linear-gradient(-135deg, var(--color-accent), var(--color-indigo));
  color: #fff;
  font-family: var(--font-semibold);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.bl-btn-pill:hover {
  opacity: 0.92;
}

/* ---------- Botões da página /editorias/ ----------
   Confirmado no site ao vivo: são botões cheios com cantos discretos (3px), não pills —
   4 por linha em telas largas, empilhando em mobile. */
.bl-editoria-btn-wrap {
  margin-bottom: var(--space-md);
}

.bl-editoria-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  padding: 0 var(--space-md);
  border-radius: 3px;
  background-image: linear-gradient(-135deg, var(--color-accent), var(--color-indigo));
  color: #fff;
  font-family: var(--font-semibold);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

.bl-editoria-btn:hover {
  opacity: 0.92;
}

/* ---------- Carrossel hero (home) ---------- */
/* Slider próprio, sem dependência nova — o original usa Slick.js, mas é fácil o bastante
   de reproduzir com transform+transition puro pra não justificar puxar uma lib inteira. */
/* 85% da altura da JANELA (não da largura) — confirmado testando várias larguras com a
   mesma altura de viewport: o resultado batia sempre em ~85vh, de mobile a desktop largo. */
.bl-hero-carousel {
  position: relative;
  overflow: hidden;
  height: clamp(400px, 85vh, 900px);
}

.bl-hero-carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
}

.bl-hero-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}

.bl-hero-carousel__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Centralizado verticalmente — não colado embaixo. Confirmado no site ao vivo:
   .portfolio-slide usa display:flex; align-items:center. */
.bl-hero-carousel__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%);
}

/* .row vira item de um flex container aqui (o overlay) — sem width:100% explícito, ele
   encolhe pro conteúdo em vez de esticar (era a causa real da coluna de texto ficar com
   290px em vez de ~700px, forçando o título a quebrar em linhas demais e parecer gigante). */
.bl-hero-carousel__overlay > .row {
  width: 100%;
}

.bl-hero-carousel__text {
  max-width: 560px;
}

.bl-hero-carousel__category {
  display: inline-block;
  font-family: var(--font-semibold);
  font-size: var(--text-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
  text-decoration: none;
  margin-bottom: var(--space-xs);
}

/* 22px até 1023px de largura, 48px a partir de 1024px — não é fluido, é um salto direto
   nesse breakpoint exato (mesmo breakpoint "large" que já usamos em outro lugar). */
.bl-hero-carousel__title {
  color: #fff;
  font-family: var(--font-regular);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 var(--space-sm);
}

@media (min-width: 1024px) {
  .bl-hero-carousel__title {
    font-size: 48px;
  }
}

.bl-hero-carousel__title a {
  color: inherit;
  text-decoration: none;
}

/* Regra global do original: qualquer link vira --color-accent no hover, a não ser que algo
   mais específico sobrescreva — aqui não havia nenhum hover definido. */
.bl-hero-carousel__title a:hover,
.bl-hero-carousel__category:hover,
.bl-hero-carousel__cta:hover {
  color: var(--color-accent);
}

.bl-hero-carousel__cta {
  display: inline-block;
  color: #fff;
  font-family: var(--font-semibold);
  font-size: var(--text-tiny);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 2px;
}

/* Agrupadas no canto inferior esquerdo, círculo vazado — medido no site ao vivo
   (o original não usa dots de paginação, só essas duas setas). */
.bl-hero-carousel__arrow {
  position: absolute;
  bottom: 45px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 21px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.bl-hero-carousel__arrow:hover {
  background: rgba(255, 255, 255, 0.15);
}

.bl-hero-carousel__arrow--prev {
  left: 50px;
}

.bl-hero-carousel__arrow--next {
  left: 105px;
}

/* ---------- Bloco YouTube (home) ---------- */
/* 3 colunas fixas (o plugin original usa sby_col_3), não auto-fit — senão a coluna
   principal mais estreita (por causa da sidebar) derruba pra 2 colunas sem necessidade. */
.bl-youtube-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 640px) {
  .bl-youtube-row {
    grid-template-columns: 1fr;
  }
}

.bl-youtube-row__item {
  position: relative;
  aspect-ratio: 16 / 9;
}

.bl-youtube-row__item iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius);
}

/* ---------- Bloco Banner (home) ---------- */
.bl-banner__link {
  position: relative;
  display: block;
}

.bl-banner__link img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

.bl-banner__cta {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  background: var(--color-accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-family: var(--font-semibold);
  font-size: var(--text-small);
}

/* ---------- Bloco Lista de categorias (home) ---------- */
.bl-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.bl-category-list__count {
  color: var(--color-muted);
  font-size: var(--text-small);
}

/* ---------- Home em 2 colunas (a partir do carrossel) ---------- */
/* Confirmado inspecionando o site ao vivo: a barra lateral corre ao lado de TODAS as
   fileiras, não só da seção de vídeo — é um único layout de 2 colunas até o rodapé. */
.bl-home-layout {
  padding-top: var(--space-lg);
  align-items: flex-start;
}

.bl-home-main .bl-category-row:first-child {
  padding-top: 0;
}

/* +20px além do gutter padrão da grade — o original tem 40px de respiro real entre o
   conteúdo principal e a sidebar, o dobro do gutter comum entre colunas. */
.bl-home-sidebar {
  padding-top: 0;
  padding-left: calc(var(--gutter) / 2 + 20px);
}

/* ---------- Sidebar / widgets ---------- */
.bl-widget {
  margin-bottom: 35px;
}

.bl-widget__title {
  font-family: var(--font-bold);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-indigo);
  margin: 0 0 20px;
}

@media (min-width: 1024px) {
  .bl-widget__title {
    font-size: 24px;
  }
}

.bl-widget-search {
  position: relative;
}

.bl-widget-search input {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 3px;
  padding: 15px 50px 15px 20px;
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 1.15;
  color: var(--color-heading);
  background: #fafafa;
}

.bl-widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 44px;
  border: none;
  background: transparent;
  color: var(--color-heading);
  cursor: pointer;
}

.bl-widget-search button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Cantos retos — o original não arredonda a imagem dos banners da lateral. */
.bl-widget--banner img {
  width: 100%;
  border-radius: 0;
}

.bl-widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bl-widget__list li {
  margin: 0 0 10px;
  font-size: 14px;
}

.bl-widget__list--posts li {
  font-size: 16px;
}

.bl-widget__list a {
  text-decoration: none;
  color: var(--color-heading);
}

.bl-widget__list a:hover {
  color: var(--color-accent);
}

.bl-widget__count {
  color: var(--color-muted);
  font-size: 13px;
}

/* ---------- Paginação ---------- */
/* Texto simples com espaçamento — o original não usa botões preenchidos/circulares. */
.bl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 80px 0;
  padding: 0;
  list-style: none;
}

.bl-pagination a,
.bl-pagination span {
  display: inline-flex;
  align-items: center;
  padding: 3px 2px;
  margin: 0 5px;
  text-decoration: none;
  color: var(--color-muted);
  font-family: var(--font-light);
  font-size: 16px;
  border-bottom: 1px solid transparent;
}

.bl-pagination a:hover {
  color: var(--color-heading);
}

.bl-pagination .is-current {
  color: #090909;
  border-bottom-color: #090909;
}

/* ---------- Compartilhamento e navegação entre posts ---------- */
.bl-share {
  display: flex;
  gap: var(--space-xs);
  margin: var(--space-md) 0;
}

.bl-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-heading);
}

.bl-share a svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.bl-post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.bl-post-nav__link {
  flex: 1 1 0;
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-regular);
  font-size: 14px;
}

.bl-post-nav__link--next {
  text-align: right;
}

.bl-post-nav__title {
  display: block;
  font-family: var(--font-semibold);
  color: var(--color-heading);
  margin-top: 4px;
}

/* ---------- Rodapé ---------- */
/* O original é um rodapé de 4 colunas de widgets (Quem somos / Editorias / Nossas soluções /
   Últimas publicações) — fora de escopo replicar o conteúdo agora (depende de uma lista de
   produtos que não existe no nosso CMS). Aqui só a cor/fonte/espaçamento da faixa em si. */
.bl-footer {
  margin-top: var(--space-xl);
  padding: 60px 0;
  background: linear-gradient(90deg, #060181 0%, var(--color-accent) 100%);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-light);
  font-size: var(--text-base);
}

.bl-footer a {
  color: #fff;
  text-decoration: none;
}

.bl-footer__col p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* Título de coluna à esquerda — era a diferença mais visível: o original nunca centraliza
   nada no rodapé, cada coluna é um bloco de texto alinhado à esquerda. */
.bl-footer__title {
  text-align: left;
  font-family: var(--font-bold);
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 25px;
}

.bl-footer__title--social {
  margin-top: var(--space-lg);
}

.bl-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bl-footer__list li {
  margin: 0 0 8px;
}

.bl-footer__list a {
  font-size: 14px;
  color: #fff;
}

.bl-footer__list a:hover {
  text-decoration: underline;
}

.bl-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.bl-footer__social img {
  display: block;
  width: auto;
}