/* Tema Ghost 'combo' — reskin por cliente via tokens (:root). Mesma linguagem do site. */
:root{
  --c-accent:#0B5FFF; --c-accent-600:#084BCC; --c-accent-fg:#fff; --c-accent-soft:#EAF1FF;
  --c-fg:#14181F; --c-muted:#5B6472; --c-bg:#fff; --c-surface:#F6F8FB; --c-border:#E2E7EF;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --container:1100px; --radius:12px; --shadow:0 10px 30px rgba(20,24,31,.08); --shadow-lg:0 24px 60px rgba(20,24,31,.14);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);color:var(--c-fg);background:var(--c-bg);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em;margin:0 0 .5em}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.center{text-align:center}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;padding:12px 24px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.btn--primary{background:var(--c-accent);color:var(--c-accent-fg)}
.btn--primary:hover{background:var(--c-accent-600)}

/* Header / footer (iguais ao site) */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-border)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;color:var(--c-fg)}
.brand__mark{width:28px;height:28px;border-radius:8px;background:var(--c-accent)}
.brand__logo{height:30px;width:auto}
.nav{display:flex;gap:24px}
.nav a{color:var(--c-muted);font-weight:500}
.nav a:hover{color:var(--c-fg)}
.site-footer{background:var(--c-fg);color:#cbd3e0;margin-top:80px}
.site-footer__bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 24px;font-size:.85rem;color:#8b94a6;max-width:var(--container);margin:0 auto}
.site-footer__credit a{color:#aeb8c9;font-weight:600}
.site-footer__credit a:hover{color:#fff}

/* Blog hero */
.blog-hero{padding:64px 0 40px;background:var(--c-surface);border-bottom:1px solid var(--c-border)}
.blog-hero h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.blog-hero p{color:var(--c-muted);max-width:640px;font-size:1.1rem}

/* Grid de posts */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:48px 0}
.post-card{border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;background:var(--c-bg);transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.post-card__link{display:flex;flex-direction:column;height:100%}
.post-card__img{aspect-ratio:16/9;overflow:hidden;background:var(--c-surface)}
.post-card__img img{width:100%;height:100%;object-fit:cover}
.post-card__img--ph{background:linear-gradient(135deg,var(--c-accent-soft),var(--c-surface))}
.post-card__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-card__tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent);background:var(--c-accent-soft);padding:4px 10px;border-radius:100px;margin-bottom:12px}
.post-card__title{font-size:1.15rem;margin:0 0 8px}
.post-card__excerpt{color:var(--c-muted);font-size:.92rem;margin:0 0 14px;flex:1}
.post-card__meta{color:var(--c-muted);font-size:.8rem}

/* Paginação */
.pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 64px}
.pagination__btn{font-weight:600;color:var(--c-accent)}
.pagination__pos{color:var(--c-muted);font-size:.9rem}

/* Post único */
.post{padding:56px 0}
.post__head{max-width:760px;text-align:center}
.post .container{max-width:760px}
.post__tag{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent)}
.post__title{font-size:clamp(1.9rem,4vw,2.8rem);margin:12px 0}
.post__meta{display:flex;gap:16px;justify-content:center;color:var(--c-muted);font-size:.9rem}
.post__cover{width:100%;border-radius:var(--radius);margin:32px auto;box-shadow:var(--shadow)}
.post__content{font-size:1.1rem}
.gh-content>*{margin:0 0 1.2em}
.gh-content h2{font-size:1.6rem;margin-top:1.6em}
.gh-content h3{font-size:1.3rem;margin-top:1.4em}
.gh-content img{border-radius:var(--radius);margin:1.5em auto}
.gh-content a{color:var(--c-accent);text-decoration:underline}
.gh-content blockquote{border-left:3px solid var(--c-accent);padding-left:20px;color:var(--c-muted);font-style:italic}
.gh-content pre{background:var(--c-fg);color:#e6edf3;padding:18px;border-radius:10px;overflow:auto;font-size:.9rem}
.gh-content code{background:var(--c-surface);padding:2px 6px;border-radius:5px;font-size:.9em}
.gh-content pre code{background:none;padding:0}

@media (max-width:900px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.post-grid{grid-template-columns:1fr}.nav{gap:16px}}

/* ─── Cards largos do editor (Koenig) ────────────────────────────────────────
   O editor do Ghost marca imagem/galeria/embed como "wide" ou "full" e aplica
   estas classes no HTML do post. Sem elas no tema, o autor escolhe a largura
   no editor e o blog ignora — e o gscan reprova com
   ".kg-width-wide/.kg-width-full CSS class is required".
   A técnica (margin-left:50% + translateX(-50%)) rompe a largura do container
   sem precisar tirar o conteúdo do fluxo. */
.gh-content .kg-width-wide {
  position: relative;
  width: min(1040px, 94vw);
  margin-left: 50%;
  transform: translateX(-50%);
}
.gh-content .kg-width-full {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.gh-content .kg-width-full img { border-radius: 0; }
.gh-content .kg-image { margin-left: auto; margin-right: auto; }
.gh-content figcaption {
  text-align: center;
  font-size: .8125rem;
  color: var(--c-muted, #5B6472);
  margin-top: .625rem;
}