/* Connect Blog - estilos básicos e 3 layouts */
:root { --connect-blog-font: Inter, system-ui, -apple-system, Segoe UI, Roboto; }
.connect-blog { font-family: var(--connect-blog-font); color: #111827; background: #ffffff; }
.cb-container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.cb-header { margin-bottom: 18px; }
.cb-title { font-size: 32px; line-height: 1.1; margin: 0; }
.cb-empty { color: #6b7280; }
.cb-meta { color: #6b7280; font-size: 12px; display: inline-block; margin-top: 6px; }

/* Grid cards */
.cb-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.cb-item { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; display:flex; flex-direction: column; }
.cb-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: #f3f4f6; }
.cb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-content { padding: 12px 14px 16px; }
.cb-item-title { font-size: 18px; margin: 0 0 6px; line-height: 1.25; }
.cb-item-title a { color: #111827; text-decoration: none; }
.cb-item-title a:hover { text-decoration: underline; }
.cb-excerpt { color: #4b5563; margin: 0 0 6px; }

/* List classic */
.cb-list { display: grid; gap: 16px; }
.cb-item--list { display: grid; gap: 14px; grid-template-columns: 220px 1fr; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.cb-item--list .cb-thumb { aspect-ratio: 16/10; }

/* Magazine */
.cb-magazine { display: grid; gap: 16px; }
.cb-featured { border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; }
.cb-featured .cb-thumb { aspect-ratio: 16/7; }

/* Single */
.cb-article-cover { width: 100%; border-radius: 10px; border: 1px solid #e5e7eb; margin-bottom: 14px; }
.cb-article-content { color: #111827; line-height: 1.6; }

/* Footer */
.cb-footer { margin-top: 28px; padding-top: 14px; border-top: 1px solid #e5e7eb; color: #6b7280; font-size: 14px; }
.cb-footer a { color: #111827; }

@media (max-width: 1024px) {
  .cb-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cb-item--list { grid-template-columns: 180px 1fr; }
}
@media (max-width: 640px) {
  .cb-grid { grid-template-columns: 1fr; }
  .cb-item--list { grid-template-columns: 1fr; }
}

/* --- Single Clean Layout --- */
.cb-single{max-width:860px}
.cb-article-wrap{padding:10px 2px}
.cb-title-single{font-size:30px;line-height:1.2;margin:6px 0 8px}
.cb-meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#6b7280;font-size:13px;margin-bottom:12px;flex-wrap:wrap}
.cb-chip{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef2ff;color:#1e3a8a;margin-right:6px;text-decoration:none;font-size:12px}
.cb-chip:hover{background:#e0e7ff}
.cb-cover{width:100%;border-radius:12px;border:1px solid #e5e7eb;margin:12px 0}
.cb-cover-small{width:240px;max-width:40%;aspect-ratio:16/9;object-fit:cover;float:right;margin-left:12px;margin-bottom:8px;border-radius:10px;border:1px solid #e5e7eb;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.cb-footer-single{margin-top:22px}

/* --- Video Embed --- */
.cb-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;border:1px solid #e5e7eb;margin:16px 0}
.cb-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%}

/* --- Prose (content formatting) --- */
.cb-prose{color:#111827;line-height:1.75}
.cb-prose h1,.cb-prose h2,.cb-prose h3{margin:18px 0 10px;line-height:1.25}
.cb-prose h1{font-size:28px}
.cb-prose h2{font-size:22px}
.cb-prose h3{font-size:18px}
.cb-prose p{margin:12px 0}
.cb-prose ul,.cb-prose ol{margin:10px 0 10px 20px}
.cb-prose blockquote{margin:14px 0;padding:10px 14px;border-left:3px solid #3b82f6;background:#f8fafc}
.cb-prose img{max-width:100%;border-radius:8px;border:1px solid #e5e7eb}
.cb-prose a{color:#1d4ed8}

/* --- Reading Progress --- */
.cb-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:transparent;z-index:9999}
.cb-progress-bar{height:100%;width:0;background:#3b82f6;transition:width .1s linear}

/* Helpers */
.cb-single::after{content:"";display:block;clear:both}
@media (max-width: 768px){
  .cb-cover-small{float:none;width:100%;max-width:100%;margin-left:0}
}