/* ============================================================
   OPTIMA CLINICAL — Blog
   Tokens conforme OPTIMA-Design-System.md (variante "premium":
   navy #1b3254 · dourado #c9a24b). --cream é reaproveitado direto
   de styles.css (mesmo valor: #F5F0E6).
   Header e rodapé do site NÃO usam este arquivo para suas cores —
   eles seguem intactos via styles.css. O container (.wrap) e o
   botão de CTA (.btn.btn-gold) também são reaproveitados de
   styles.css em vez de duplicados aqui. Este arquivo cobre apenas
   as faixas e componentes exclusivos do blog, cujos hex/px de
   navy, dourado e neutros são deliberadamente os do design system
   (levemente diferentes dos tokens --navy/--gold já existentes em
   styles.css, que usam outros tons).
   ============================================================ */

:root {
  --blog-navy: #1b3254;
  --blog-navy-deep: #122040;
  --blog-gold: #c9a24b;
  --blog-text2: #6b7a92;
  --blog-text3: #9aa7bd;
  --blog-border: #e2e6ee;
  --blog-shadow: 0 2px 14px rgba(27, 50, 84, .07);
}

.eyebrow-gold {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blog-gold);
}
.eyebrow-gold::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--blog-gold);
  flex-shrink: 0;
}

/* ---------- nav: item "Blog" ativo ---------- */
.nav-sec.is-active { color: var(--blog-gold) !important; font-weight: 600; }

/* ---------- faixa 1 — hero do blog ---------- */
.blog-hero {
  background: var(--blog-navy);
  padding: 72px 0 64px;
}
.blog-hero h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5vw, 58px);
  color: #ffffff;
  line-height: 1.15;
  margin-top: 18px;
}
.blog-hero h1 .accent { color: var(--blog-gold); }
.blog-hero p {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 17px;
  color: rgba(255, 255, 255, .82);
  max-width: 60ch;
  margin-top: 16px;
}

/* ---------- faixa 2 — filtros + artigos ---------- */
.blog-section {
  background: var(--cream);
  padding: 48px 0 88px;
}

.blog-filters {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  margin-bottom: 28px;
  scrollbar-width: thin;
}
.filter-chip {
  flex: 0 0 auto;
  border-radius: 24px;
  padding: 6px 14px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  background: #ffffff;
  color: var(--blog-text2);
  border: 1px solid var(--blog-border);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--blog-gold); }
.filter-chip.active {
  background: var(--blog-navy);
  color: #ffffff;
  border-color: var(--blog-navy);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.post-card {
  background: #ffffff;
  border: 1px solid var(--blog-border);
  border-radius: 14px;
  box-shadow: var(--blog-shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(27, 50, 84, .12);
}
.post-card.featured {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 24px;
  align-items: stretch;
}
.post-card.featured .cover { width: 42%; margin-bottom: 0; flex-shrink: 0; }
.post-card .body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.post-card .cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  background: var(--cream);
  margin-bottom: 14px;
}
.post-card .cat {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blog-gold);
  margin-bottom: 8px;
}
.post-card h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--blog-navy);
  line-height: 1.25;
  margin-bottom: 8px;
}
.post-card.featured h3 { font-size: 26px; }
.post-card p {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  color: var(--blog-text2);
  line-height: 1.55;
  flex: 1;
}
.post-card .divider {
  border-top: 1px solid var(--blog-border);
  margin: 16px 0 12px;
}
.post-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.post-card .meta .date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--blog-text3);
}
.post-card .meta .read-link {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--blog-gold);
  white-space: nowrap;
}

.blog-empty {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--blog-text2);
  font-size: 14.5px;
  padding: 32px 0;
  text-align: center;
}

/* ---------- página do artigo ---------- */
.article-hero {
  background: var(--blog-navy);
  padding: 36px 0 40px;
}
.breadcrumb {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 18px;
}
.breadcrumb a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.breadcrumb a:hover { color: var(--blog-gold); }
.article-hero h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  color: #ffffff;
  line-height: 1.2;
  margin: 14px 0 16px;
}
.article-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
}

.article-body-section {
  background: var(--cream);
  padding: 52px 0 8px;
}
.article-col {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: 20px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--blog-navy);
}
.article-col h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  color: var(--blog-navy);
  font-size: clamp(23px, 3vw, 29px);
  margin: 40px 0 16px;
}
.article-col h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  color: var(--blog-navy);
  font-size: 20px;
  margin: 32px 0 12px;
}
.article-col p { margin: 0 0 20px; }
.article-col a { color: var(--blog-gold); }
.article-col ul, .article-col ol { margin: 0 0 20px 22px; }
.article-col li { margin-bottom: 8px; }
.article-col blockquote {
  border-left: 3px solid var(--blog-gold);
  border-radius: 0;
  margin: 28px 0;
  padding: 4px 0 4px 20px;
  color: var(--blog-text2);
  font-style: italic;
}
.article-col table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14.5px;
}
.article-col th, .article-col td {
  border: 1px solid var(--blog-border);
  padding: 10px 12px;
  text-align: left;
}
.article-col th { background: #ffffff; font-weight: 600; }

.article-cta {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 0 20px 56px;
}
.cta-primary {
  background: #ffffff;
  border: 1px solid var(--blog-gold);
  border-radius: 14px;
  padding: 24px;
}
.cta-primary h4 {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  color: var(--blog-navy);
  font-size: 20px;
  margin-bottom: 8px;
}
.cta-primary p {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14.5px;
  color: var(--blog-text2);
  margin-bottom: 18px;
}
.cta-secondary {
  margin-top: 18px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--blog-text2);
}
.cta-secondary a { color: var(--blog-gold); }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .post-card.featured { flex-direction: column; }
  .post-card.featured .cover { width: 100%; }
  .post-card.featured h3 { font-size: 20px; }
}
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-hero { padding: 52px 0 44px; }
  .article-col, .article-cta { padding-inline: 20px; }
}