/* ═══════════════════════════════════════
   BLOG — índice (/blog) e artigo (/blog/:slug)
   Renderizado pelas funções SSR em api/blog/*
═══════════════════════════════════════ */

/* ─── Hero ─── */

.blog-hero {
  min-height: 46vh;
}

.blog-hero--compact {
  min-height: 38vh;
}

.blog-hero--post {
  min-height: 44vh;
}

.blog-hero--post .page-hero__title {
  font-size: var(--text-6xl);
  max-width: 20ch;
}

.blog-hero--post .page-hero__subtitle {
  max-width: none;
}

/* ─── Índice: filtros ─── */

.blog-list {
  background-color: var(--neutral-50);
  padding-block: var(--space-24);
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-16);
  border-bottom: 1px solid var(--neutral-300);
  padding-bottom: var(--space-6);
}

.blog-filters__item {
  font-family: var(--font-impact);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral-500);
  padding: var(--space-2) var(--space-4);
  transition: color var(--duration-base) var(--ease-smooth);
}

.blog-filters__item:hover {
  color: var(--primary-900);
}

.blog-filters__item.is-active {
  color: var(--accent-500);
  border-bottom: 2px solid var(--accent-500);
  margin-bottom: -1px;
}

/* ─── Índice: grid de cards ─── */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

.post-card {
  display: flex;
  flex-direction: column;
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-300);
}

.post-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-smooth);
}

.post-card:hover .post-card__media img {
  transform: scale(1.03);
}

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-8);
}

.post-card__category {
  font-family: var(--font-impact);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-500);
  margin-bottom: var(--space-3);
}

.post-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.2;
  color: var(--primary-900);
}

.post-card__title a {
  color: inherit;
  transition: color var(--duration-base) var(--ease-smooth);
}

.post-card__title a:hover {
  color: var(--accent-500);
}

.post-card__excerpt {
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--neutral-500);
  line-height: 1.7;
  margin-top: var(--space-4);
}

.post-card__meta {
  font-family: var(--font-impact);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin-top: auto;
  padding-top: var(--space-6);
}

.blog-empty {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  font-style: italic;
  color: var(--neutral-500);
  text-align: center;
  padding-block: var(--space-24);
}

/* ─── Índice: paginação ─── */

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--neutral-300);
}

.blog-pagination__link {
  font-family: var(--font-impact);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-900);
  transition: color var(--duration-base) var(--ease-smooth);
}

.blog-pagination__link:hover {
  color: var(--accent-500);
}

.blog-pagination__info {
  font-family: var(--font-impact);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

/* ─── Artigo ─── */

.post {
  background-color: var(--neutral-50);
  padding-block: var(--space-24);
}

.post__cover {
  max-width: var(--container-md);
  margin-inline: auto;
  margin-bottom: var(--space-16);
  /* Moldura: destaca capas cujo fundo é off-white (mesma cor da página).
     Sem sombra (regra da marca) — matte branco + filete. */
  padding: var(--space-4);
  background: var(--neutral-0);
  border: 1px solid var(--neutral-300);
}

.post__cover img {
  width: 100%;
  display: block;
}

.post__body {
  max-width: var(--container-sm);
  margin-inline: auto;
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.85;
  color: var(--primary-700);
}

.post__body p {
  margin-bottom: var(--space-6);
}

.post__body h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 500;
  line-height: 1.2;
  color: var(--primary-900);
  margin-top: var(--space-16);
  margin-bottom: var(--space-6);
}

.post__body h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1.25;
  color: var(--primary-900);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.post__body h4 {
  font-family: var(--font-impact);
  font-size: var(--text-base);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-900);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.post__body ul,
.post__body ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

.post__body li {
  margin-bottom: var(--space-2);
}

.post__body ul li {
  list-style: none;
  position: relative;
}

.post__body ul li::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-5));
  top: 0.85em;
  width: 10px;
  height: 1px;
  background-color: var(--accent-500);
}

.post__body ol li {
  list-style: decimal;
}

.post__body a {
  color: var(--primary-900);
  text-decoration: underline;
  text-decoration-color: var(--accent-500);
  text-underline-offset: 3px;
}

.post__body a:hover {
  color: var(--accent-500);
}

.post__body blockquote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--primary-900);
  border-left: 1px solid var(--accent-500);
  padding-left: var(--space-8);
  margin-block: var(--space-10);
}

.post__body img {
  width: 100%;
  display: block;
  margin-block: var(--space-8);
}

.post__body figure {
  margin-block: var(--space-8);
}

.post__body figcaption {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  margin-top: var(--space-2);
}

.post__body hr {
  border: 0;
  width: 64px;
  height: 1px;
  background-color: var(--accent-500);
  margin: var(--space-12) auto;
}

.post__body table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-8);
  font-size: var(--text-base);
}

.post__body th,
.post__body td {
  border: 1px solid var(--neutral-300);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.post__body th {
  font-family: var(--font-impact);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: var(--neutral-0);
}

.post__body code {
  font-size: 0.9em;
  background-color: var(--accent-100);
  padding: 0.1em 0.35em;
}

/* ─── FAQ do artigo ─── */

.post-faq {
  margin-top: var(--space-20);
  border-top: 1px solid var(--neutral-300);
  padding-top: var(--space-12);
}

.post-faq__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 500;
  color: var(--primary-900);
  margin-bottom: var(--space-8);
}

.post-faq__item {
  border-bottom: 1px solid var(--neutral-300);
}

.post-faq__question {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--primary-900);
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: var(--space-10);
}

.post-faq__question::-webkit-details-marker {
  display: none;
}

.post-faq__question::after {
  content: '+';
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--accent-500);
  transition: transform var(--duration-base) var(--ease-smooth);
}

.post-faq__item[open] .post-faq__question::after {
  content: '−';
}

.post-faq__answer {
  padding-bottom: var(--space-6);
  color: var(--neutral-500);
}

/* ─── Autor + voltar ─── */

.post__author {
  max-width: var(--container-sm);
  margin-inline: auto;
  margin-top: var(--space-20);
}

.post__author .gold-line {
  margin-bottom: var(--space-6);
}

.post__author-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--primary-900);
}

.post__author-creds {
  font-family: var(--font-impact);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin-top: var(--space-2);
}

.post__author-about {
  margin-top: var(--space-4);
}

.post__author-about a {
  font-family: var(--font-impact);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-900);
}

.post__author-about a:hover {
  color: var(--accent-500);
}

.post__author-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent-500);
  text-underline-offset: 3px;
}

.post__disclaimer {
  max-width: var(--container-sm);
  margin-inline: auto;
  margin-top: var(--space-10);
  font-size: var(--text-sm);
  color: var(--neutral-500);
  line-height: 1.6;
}

/* ─── Referências ─── */

.post-refs {
  margin-top: var(--space-16);
  border-top: 1px solid var(--neutral-300);
  padding-top: var(--space-10);
}

.post-refs__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--primary-900);
  margin-bottom: var(--space-6);
}

.post-refs__list {
  padding-left: var(--space-6);
  color: var(--primary-700);
  font-size: var(--text-base);
  line-height: 1.7;
}

.post-refs__list li {
  margin-bottom: var(--space-3);
  list-style: decimal;
}

.post-refs__list a {
  color: var(--primary-900);
  text-decoration: underline;
  text-decoration-color: var(--accent-500);
  text-underline-offset: 3px;
}

.post__back {
  max-width: var(--container-sm);
  margin-inline: auto;
  margin-top: var(--space-12);
}

.post__back a {
  font-family: var(--font-impact);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-900);
}

.post__back a:hover {
  color: var(--accent-500);
}

/* ─── CTA final do artigo ─── */

.post-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* ─── Responsivo ─── */

@media (max-width: 960px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .blog-list,
  .post {
    padding-block: var(--space-16);
  }

  .blog-hero--post .page-hero__title {
    font-size: var(--text-4xl);
  }
}

/* ─── Formulário de agendamento no fim do artigo (→ CRM, origem "Blog") ─── */

.post-lead {
  margin-top: var(--space-16);
}

.post-lead__inner {
  background: var(--primary-900);
  color: var(--neutral-0);
  padding: var(--space-12);
  border: 1px solid var(--primary-900);
}

.post-lead__eyebrow {
  font-family: var(--font-impact);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-500);
  margin-bottom: var(--space-4);
}

.post-lead__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.post-lead__title em {
  font-style: italic;
  color: var(--accent-300);
}

.post-lead__text {
  color: rgba(245, 242, 236, 0.75);
  margin-bottom: var(--space-8);
}

.post-lead__form {
  display: grid;
  gap: var(--space-5);
}

.post-lead__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.post-lead__field {
  display: grid;
  gap: var(--space-2);
}

.post-lead__field > span {
  font-family: var(--font-impact);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.7);
}

.post-lead__field input,
.post-lead__field select,
.post-lead__field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(245, 242, 236, 0.25);
  color: var(--neutral-0);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.post-lead__field input:focus,
.post-lead__field select:focus,
.post-lead__field textarea:focus {
  outline: none;
  border-color: var(--accent-500);
}

.post-lead__field select option {
  color: var(--primary-900);
}

.post-lead__status {
  min-height: 1.2em;
  font-size: var(--text-sm);
  color: var(--accent-300);
}

.post-lead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.post-lead__privacy {
  font-size: var(--text-xs);
  color: rgba(245, 242, 236, 0.55);
  margin-top: var(--space-2);
}

@media (max-width: 640px) {
  .post-lead__inner { padding: var(--space-8); }
  .post-lead__row { grid-template-columns: 1fr; }
}