/* ============================================================
   Totusia — blog (complementa style.css, usa os mesmos tokens)
   @author Rogério Sá
   ============================================================ */

/* ---------- header do blog / listagem ---------- */
.blog-hero { padding-top: clamp(40px, 6vw, 72px); }
.blog-hero .sec-head { max-width: 760px; }

.blog-filters {
  margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.blog-filters button {
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 700;
  transition: border-color .2s, background .2s, color .2s, transform .2s var(--ease);
}
.blog-filters button:hover { transform: translateY(-1px); border-color: var(--brand-200); }
.blog-filters button.active {
  background: var(--grad-brand); color: #fff; border-color: transparent;
  box-shadow: var(--sh-brand);
}

.blog-grid { margin-top: 40px; display: grid; gap: 18px; }
@media (min-width: 620px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  display: flex; flex-direction: column; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--bg); padding: 24px;
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.blog-card:hover { transform: translateY(-4px); border-color: var(--brand-200); box-shadow: var(--sh-lg); }
.blog-card.hidden { display: none; }
.blog-card .cat {
  align-self: flex-start; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--brand-700); background: var(--brand-50);
  border: 1px solid var(--brand-200); border-radius: 8px; padding: 4px 10px;
}
.blog-card h3 { margin-top: 14px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.blog-card p { margin-top: 9px; font-size: 14px; line-height: 1.55; color: var(--muted); flex: 1; }
.blog-card .meta {
  margin-top: 16px; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); font-weight: 600;
}
.blog-card .meta .sep { opacity: .5; }

/* ---------- página de artigo ---------- */
.post { padding-top: clamp(36px, 5vw, 60px); }
.post-wrap { margin-inline: auto; max-width: 760px; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.breadcrumb a { color: var(--brand-700); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { opacity: .5; }

.post-header h1 {
  margin-top: 18px; font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.12;
}
.post-meta {
  margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: 13.5px; color: var(--muted); font-weight: 600;
}
.post-meta .cat {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-200);
  border-radius: 8px; padding: 4px 10px;
}

.prose { margin-top: 34px; font-size: 16.5px; line-height: 1.75; color: var(--fg); }
.prose p { margin: 0 0 18px; }
.prose h2 {
  margin: 40px 0 14px; font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
}
.prose h3 { margin: 28px 0 10px; font-size: 1.12rem; font-weight: 700; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--brand-500); }
.prose a { color: var(--brand-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-500); }
.prose strong { color: var(--fg); }
.prose blockquote {
  margin: 0 0 18px; padding: 14px 20px; border-left: 3px solid var(--brand-500);
  background: var(--soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--muted);
}

/* caixa de CTA dentro do artigo */
.cta-box {
  margin: 34px 0; border-radius: var(--r-lg); border: 1px solid var(--brand-200);
  background: linear-gradient(170deg, var(--brand-50), #fff);
  padding: 26px; text-align: center;
}
.cta-box strong { display: block; font-family: var(--font-display); font-size: 18px; letter-spacing: -.01em; }
.cta-box p { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); }
.cta-box .cta-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* posts relacionados */
.related { margin-top: 48px; border-top: 1px solid var(--border); padding-top: 30px; }
.related h2 { font-size: 1.2rem; font-weight: 800; }
.related ul { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.related a { color: var(--brand-700); font-weight: 600; }
.related a:hover { text-decoration: underline; }