/* ============================================================
   blog.css — Estilos exclusivos da página blog
   Athletica · 2026
   ============================================================ */

/* ============================================================
   Header da página (reutiliza .page-header de plataformas —
   aqui declaramos apenas o que é específico do blog)
   ==================================================== */
.blog-header {
  background-color: var(--color-surface);
  padding-block: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.blog-header__inner {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.blog-header__breadcrumb {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.blog-header__breadcrumb a {
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.blog-header__breadcrumb a:hover {
  color: var(--color-text);
}

.blog-header__h1 {
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.blog-header__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ============================================================
   Empty state
   ============================================================ */
.blog-empty {
  padding-block: var(--space-24);
  text-align: center;
}

.blog-empty__inner {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.blog-empty__titulo {
  font-size: var(--text-xl);
  color: var(--color-text);
  max-width: 20ch;
  text-align: center;
}

.blog-empty__texto {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 44ch;
  text-align: center;
  line-height: 1.7;
}