/* ============================================
   FETALMED — Single Post CSS
   Layout unificado 760px (sem sidebar)
   ============================================ */

/* === PAGE LAYOUT (unificado com calc.css) === */
/* page-outer e page-wrapper herdados do calc.css / design-system */
/* Se calc.css não estiver carregado, fallback aqui: */
.page-outer { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg, 24px); }
.page-wrapper { max-width: 760px; margin: 0 auto; padding: var(--space-xl, 32px) var(--space-md, 16px); }

/* === BREADCRUMB (mesmo padrão do calc.css) === */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-text-light);
  margin-bottom: var(--space-xl, 32px); flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-text-light); text-decoration: none; transition: color .15s; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb-sep { color: var(--color-border); font-size: 14px; }
.breadcrumb-current { color: var(--color-text-mid); font-weight: 500; }

/* === ARTICLE HEADER === */
.article-header { margin-bottom: var(--space-xl, 32px); }
.article-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-md, 16px); }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 99px;
}
.badge-gestantes { background: var(--rosa-50); color: var(--rosa-600, #e11d48); }
.badge-medico { background: var(--teal-50); color: var(--teal-600, #0891b2); }
.article-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 5vw, 34px); font-weight: 700;
  color: var(--color-text-strong);
  line-height: 1.2; margin-bottom: var(--space-md, 16px);
}
.article-excerpt {
  font-size: 16px; color: var(--color-text-mid);
  line-height: 1.7; margin-bottom: var(--space-lg, 24px);
}
.article-meta {
  display: flex; align-items: center; gap: 20px;
  padding: var(--space-md, 16px) 0;
  border-top: 0.5px solid var(--color-border);
  border-bottom: 0.5px solid var(--color-border);
  flex-wrap: wrap;
}
.meta-author { display: flex; align-items: center; gap: 10px; }
.author-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--teal-600, #0891b2));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 14px; font-weight: 700;
  font-family: var(--font-heading); flex-shrink: 0; overflow: hidden;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-info { line-height: 1.3; }
.author-name { font-size: 13px; font-weight: 600; color: var(--color-text-strong); }
.author-title { font-size: 11px; color: var(--color-primary); font-weight: 600; }
.meta-divider { width: 1px; height: 32px; background: var(--color-border); }
.meta-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-light); }
.meta-item svg { width: 14px; height: 14px; stroke: var(--color-text-light); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.meta-item strong { color: var(--color-text-mid); font-weight: 600; }

/* === FEATURED IMAGE === */
.featured-image {
  width: 100%; border-radius: var(--radius-lg, 16px);
  overflow: hidden; margin-bottom: var(--space-xl, 32px);
  aspect-ratio: 16/7; background: var(--teal-50);
  display: flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--color-border); position: relative;
}
.featured-image img { width: 100%; height: 100%; object-fit: cover; }

/* === TOC === */
.toc {
  background: var(--color-white, #fff);
  border: 0.5px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
  padding: var(--space-md, 16px) var(--space-lg, 24px);
  margin-bottom: var(--space-xl, 32px);
}
.toc-title {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-light); margin-bottom: var(--space-sm, 8px);
}
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.toc-list li a {
  font-size: 14px; color: var(--color-text-mid);
  text-decoration: none; transition: color .15s;
  display: flex; align-items: center; gap: 8px;
}
.toc-list li a:hover { color: var(--color-primary); }
.toc-list li a::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-border); flex-shrink: 0; transition: background .15s;
}
.toc-list li a:hover::before { background: var(--color-primary); }

/* === AD SLOT === */
.ad-slot {
  background: var(--color-white, #fff);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md, 12px);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  color: var(--color-text-light);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ad-slot-leaderboard { min-height: 90px; height: auto; margin-bottom: var(--space-xl, 32px); }
.ad-slot-rectangle { min-height: 90px; height: auto; max-width: 728px; margin-left: auto; margin-right: auto; margin: var(--space-xl, 32px) 0; }
.ad-slot svg { width: 16px; height: 16px; opacity: .4; }

/* === ARTICLE BODY === */
.article-body { font-size: 15px; color: var(--color-text-mid); line-height: 1.75; }
.article-body h2 {
  font-family: var(--font-heading); font-size: 24px; font-weight: 700;
  color: var(--color-text-strong); margin: var(--space-xl, 32px) 0 var(--space-md, 16px); line-height: 1.25;
}
.article-body h3 {
  font-family: var(--font-body); font-size: 18px; font-weight: 600;
  color: var(--color-primary); margin: var(--space-lg, 24px) 0 var(--space-sm, 8px);
}
.article-body p { margin-bottom: var(--space-md, 16px); }
.article-body a { color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--teal-100, #cffafe); }
.article-body a:hover { text-decoration-color: var(--color-primary); }
.article-body strong { font-weight: 600; color: var(--color-text-strong); }
.article-body ul, .article-body ol {
  margin: var(--space-md, 16px) 0 var(--space-md, 16px) var(--space-lg, 24px);
  display: flex; flex-direction: column; gap: 6px;
}
.article-body ul li::marker { color: var(--color-primary); }
.article-body ol li::marker { color: var(--color-primary); font-weight: 600; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-md, 12px); margin: var(--space-md, 16px) 0; }

/* Callout */
.callout {
  padding: var(--space-md, 16px) var(--space-lg, 24px);
  border-left: 3px solid var(--color-primary);
  background: var(--teal-50);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  margin: var(--space-lg, 24px) 0;
}
.callout-gestante { border-left-color: var(--color-gestantes); background: var(--rosa-50); }
.callout-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--teal-600, #0891b2);
  margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
}
.callout-gestante .callout-label { color: var(--rosa-600, #e11d48); }
.callout-label svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.callout p { margin: 0; font-size: 14px; }

/* Inline image */
.article-img { width: 100%; border-radius: var(--radius-md, 12px); margin: var(--space-lg, 24px) 0; overflow: hidden; border: 0.5px solid var(--color-border); }
.article-img img { width: 100%; display: block; }
.article-img figcaption { font-size: 12px; color: var(--color-text-light); text-align: center; padding: var(--space-sm, 8px) var(--space-md, 16px); background: var(--color-bg, #fff); }

/* Info table */
.info-table { width: 100%; border-collapse: collapse; margin: var(--space-lg, 24px) 0; font-size: 14px; border-radius: var(--radius-md, 12px); overflow: hidden; border: 0.5px solid var(--color-border); }
.info-table th { background: var(--color-navy); color: #fff; padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.info-table td { padding: 10px 16px; border-bottom: 0.5px solid var(--color-border); vertical-align: top; }
.info-table tr:last-child td { border-bottom: none; }
.info-table tr:nth-child(even) td { background: var(--color-bg, #fff); }

/* === AUTOR CARD === */
.autor-card {
  background: var(--color-white, #fff); border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg, 16px); padding: var(--space-lg, 24px);
  display: flex; gap: var(--space-lg, 24px); align-items: flex-start; margin: var(--space-xl, 32px) 0;
}
.autor-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--teal-600, #0891b2));
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: white; font-size: 24px; font-weight: 700; font-family: var(--font-heading); overflow: hidden;
}
.autor-avatar img { width: 100%; height: 100%; object-fit: cover; }
.autor-info h4 { font-size: 15px; font-weight: 600; color: var(--color-text-strong); margin-bottom: 2px; }
.autor-titulo { font-size: 12px; color: var(--color-primary); font-weight: 600; margin-bottom: var(--space-sm, 8px); }
.autor-info p { font-size: 13px; color: var(--color-text-mid); line-height: 1.6; }

/* === RELATED POSTS === */
.related-section { margin-top: var(--space-xl, 32px); }
.related-title { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--color-text-strong); margin-bottom: var(--space-lg, 24px); }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md, 16px); }
.related-card {
  background: var(--color-white, #fff); border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg, 16px); overflow: hidden; text-decoration: none;
  transition: box-shadow .2s, transform .15s; display: block;
}
.related-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.related-card-img { aspect-ratio: 16/9; background: var(--teal-50); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.related-card-img svg { width: 32px; height: 32px; stroke: var(--teal-300, #67e8f9); fill: none; stroke-width: 1.5; }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; }
.related-card-body { padding: var(--space-md, 16px); }
.related-card-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rosa-600, #e11d48); margin-bottom: 6px; display: block; }
.related-card-title { font-size: 14px; font-weight: 600; color: var(--color-text-strong); line-height: 1.4; }

/* === RESPONSIVE === */
@media (max-width: 600px) {
  .article-title { font-size: 24px; }
  .related-grid { grid-template-columns: 1fr; }
  .autor-card { flex-direction: column; gap: 12px; }
}

/* Fix inline images from imported posts */
.article-body img,
.article-body figure img,
.article-body .wp-caption img {
  max-width: 100%;
  width: auto !important;
  height: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.article-body .wp-caption {
  max-width: 100% !important;
  width: auto !important;
}

.ad-slot[data-ad-tipo="banner"], .ad-slot[data-ad-tipo="adsense"] { min-height: 0; height: auto; border: none; background: transparent; }
@media (max-width: 600px) { .ad-slot-rectangle { min-height: 250px; max-width: 300px; } }