/* ===================================================
   SYNCRUS BLOG — estilos dos artigos (usa tokens de style.css)
   Carregar depois de css/style.css e css/blog-extra.css
   =================================================== */

/* -------------------- Article hero -------------------- */
.article-hero{padding-bottom:46px}
.article-meta{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:22px;
  color:var(--gray-500);font-size:.85rem;
}
.article-meta span{display:inline-flex;align-items:center;gap:7px}
.article-meta i{color:var(--lp-accent)}

/* -------------------- Layout: article + sidebar -------------------- */
.article-layout{display:grid;grid-template-columns:2.1fr 1fr;gap:48px;align-items:start}

/* -------------------- Typography -------------------- */
.article-body{max-width:760px}
.article-body p{color:var(--gray-300);line-height:1.9;margin-bottom:18px;font-size:1.02rem}
.article-body h2{
  font-family:var(--font-title);font-size:1.55rem;color:var(--white);
  margin:46px 0 18px;padding-left:16px;border-left:4px solid var(--lp-accent);
  scroll-margin-top:100px;
}
.article-body h2:first-child{margin-top:0}
.article-body h3{
  font-family:var(--font-title);font-size:1.15rem;color:var(--white);margin:30px 0 12px;
  scroll-margin-top:100px;
}
.article-body ul.plain{margin:0 0 18px 20px}
.article-body ul.plain li{color:var(--gray-300);line-height:1.8;margin-bottom:6px}
.article-body strong{color:var(--white)}
.article-lead{
  font-size:1.15rem;line-height:1.85;color:var(--gray-200,var(--gray-300));
  padding-bottom:8px;margin-bottom:8px;
}

/* -------------------- Case box -------------------- */
.case-box{
  background:var(--bg-700);border-left:4px solid var(--lp-accent);border-radius:var(--radius-md);
  padding:26px 28px;margin:32px 0;
}
.case-tag{
  display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lp-accent);margin-bottom:12px;
}
.case-box p{margin-bottom:10px}
.case-box p:last-child{margin-bottom:0}

/* -------------------- Checklist -------------------- */
.checklist-box{
  background:var(--bg-700);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-md);
  padding:26px 28px;margin:32px 0;
}
.checklist-box h4{font-family:var(--font-title);color:var(--white);font-size:1.02rem;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.checklist-box h4 i{color:var(--lp-accent)}
.checklist-box ul{display:flex;flex-direction:column;gap:12px}
.checklist-box li{display:flex;align-items:flex-start;gap:12px;color:var(--gray-300);font-size:.96rem;line-height:1.6}
.checklist-box li i{color:var(--lp-accent);margin-top:3px;flex-shrink:0}

/* -------------------- Table -------------------- */
.table-wrap{overflow-x:auto;margin:32px 0;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.07)}
table.article-table{width:100%;border-collapse:collapse;background:var(--bg-700);min-width:520px}
table.article-table th, table.article-table td{padding:13px 18px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);font-size:.9rem}
table.article-table th{
  background:rgba(255,255,255,.04);color:var(--white);font-family:var(--font-title);
  text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;white-space:nowrap;
}
table.article-table td{color:var(--gray-300)}
table.article-table tr:last-child td{border-bottom:none}

/* -------------------- KPIs -------------------- */
.kpi-block{margin:32px 0}
.kpi-block h4{font-family:var(--font-title);color:var(--white);font-size:1.02rem;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.kpi-block h4 i{color:var(--lp-accent)}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.kpi-card{
  background:var(--bg-700);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-md);
  padding:18px;text-align:center;
}
.kpi-card strong{display:block;font-family:var(--font-title);font-size:1.25rem;color:var(--lp-accent);margin-bottom:4px}
.kpi-card span{font-size:.74rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;line-height:1.4;display:block}

/* -------------------- Flow suggestion -------------------- */
.flow-box{
  background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.18);border-radius:var(--radius-md);
  padding:24px 26px;margin:32px 0;
}
.flow-box h4{font-family:var(--font-title);color:var(--white);font-size:1.02rem;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.flow-box h4 i{color:var(--lp-accent)}
.flow-box .flow-note{font-size:.85rem;color:var(--gray-500);margin-bottom:16px}
.flow-steps{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.flow-step{
  background:var(--bg-700);border:1px solid rgba(255,255,255,.08);color:var(--white);
  padding:10px 16px;border-radius:100px;font-size:.84rem;font-weight:600;
}
.flow-arrow{color:var(--lp-accent);font-size:.9rem}

/* -------------------- Image suggestion -------------------- */
.image-suggestion{
  display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.02);
  border:1px dashed color-mix(in srgb, var(--lp-accent) 45%, transparent);border-radius:var(--radius-md);
  padding:16px 20px;margin:26px 0;
}
.image-suggestion i{color:var(--lp-accent);font-size:1.15rem;margin-top:2px;flex-shrink:0}
.image-suggestion div{font-size:.88rem;color:var(--gray-400);line-height:1.7}
.image-suggestion strong{display:block;color:var(--gray-300);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}

/* -------------------- TOC / related sidebar -------------------- */
.toc-block ul{display:flex;flex-direction:column;gap:2px}
.toc-block a{
  display:block;padding:9px 12px;border-radius:10px;color:var(--gray-400);font-size:.86rem;
  transition:var(--transition-fast);line-height:1.5;
}
.toc-block a:hover{background:rgba(255,255,255,.05);color:var(--white)}
.toc-block .toc-num{color:var(--lp-accent);font-weight:700;margin-right:6px}

.related-list{display:flex;flex-direction:column;gap:12px}
.related-item{
  display:block;padding:14px;border-radius:12px;background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);transition:var(--transition-fast);
}
.related-item:hover{border-color:color-mix(in srgb, var(--lp-accent) 40%, rgba(255,255,255,.06));background:rgba(255,255,255,.04)}
.related-item .related-cat{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--lp-accent);display:block;margin-bottom:5px}
.related-item .related-title{font-size:.9rem;color:var(--white);font-weight:600;line-height:1.4}

.sidebar-cta{
  background:linear-gradient(160deg, color-mix(in srgb, var(--lp-accent) 16%, transparent), rgba(255,255,255,.02));
  border:1px solid color-mix(in srgb, var(--lp-accent) 26%, transparent);
}
.sidebar-cta p{font-size:.86rem;color:var(--gray-300);line-height:1.7;margin-bottom:16px}
.sidebar-cta .btn{width:100%;justify-content:center}

/* -------------------- Article images (Drive/Canva) -------------------- */
.article-image{
  margin:32px 0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-card);
}
.article-image img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}

/* -------------------- In-body internal links -------------------- */
.article-body a.inline-link{color:var(--lp-accent);font-weight:600;border-bottom:1px solid color-mix(in srgb, var(--lp-accent) 45%, transparent)}
.article-body a.inline-link:hover{border-bottom-color:var(--lp-accent)}

/* -------------------- Responsive -------------------- */
@media (max-width:980px){
  .article-layout{grid-template-columns:1fr}
}