/* ============================================================
   Avant Garde — Blog (páginas estáticas, sem React)
   Tokens espelham colors_and_type.css / index.html para manter
   a mesma identidade visual do site principal.
   Arquivo compartilhado (link) de propósito: ao contrário da home
   (uma página só, CSS crítico inline pra não atrasar o LCP), o blog
   tem N páginas — um arquivo cacheável entre elas vale mais aqui
   do que evitar uma request a mais.
   ============================================================ */
:root{
  --ag-yellow:#FFA402;--ag-black:#000000;--ag-white:#FFFFFF;
  --ag-yellow-deep:#E69100;--ag-ink:#0A0A0A;--ag-ink-2:#5C5C5C;--ag-ink-3:#8A8A8A;
  --ag-line:#E3E3E3;--ag-line-soft:#EFEFEF;--ag-paper:#F6F6F4;--ag-on-dark-2:#9B9B9B;
  --font-sans:'Hanken Grotesk',-apple-system,system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',monospace;
  --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --h1:600 clamp(34px,4.6vw,58px)/1.08 var(--font-sans);
  --h2:600 clamp(26px,2.6vw,38px)/1.12 var(--font-sans);
  --h3:600 21px/1.3 var(--font-sans);
  --lead:400 clamp(18px,1.5vw,22px)/1.55 var(--font-sans);
  --body:400 17px/1.7 var(--font-sans);
  --small:400 14px/1.55 var(--font-sans);
  --label:500 12px/1 var(--font-mono);--label-tracking:.16em;
  --r-1:2px;--r-2:4px;--maxw:1280px;
  --accent:#FFA402;--accent-deep:#E69100;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:var(--body);color:var(--ag-ink);background:var(--ag-white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#000}

.blog-wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;width:100%}

/* ---- Eyebrow / label ---- */
.ag-eyebrow{display:inline-flex;align-items:center;gap:10px;font:var(--label);letter-spacing:var(--label-tracking);
  text-transform:uppercase;color:var(--ag-ink-3)}
.ag-eyebrow.on-dark{color:var(--ag-on-dark-2)}

/* ---- Brand mark ---- */
.ag-wordmark{font-family:var(--font-sans);font-weight:700;letter-spacing:-.02em;font-size:22px;line-height:1;
  color:inherit;white-space:nowrap;display:inline-flex;align-items:flex-start}
.ag-mark-sup{font-family:var(--font-serif);font-weight:400;font-size:.42em;line-height:1;margin-left:.14em;
  transform:translateY(.15em);font-style:italic}

/* ---- Buttons ---- */
.ag-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-sans);
  font-weight:600;font-size:15px;line-height:1;padding:13px 22px;border:1.5px solid transparent;border-radius:var(--r-1);
  cursor:pointer;white-space:nowrap;transition:background .18s,border-color .18s}
.ag-btn--primary{background:var(--accent);color:#000;border-color:var(--accent)}
.ag-btn--primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.ag-btn--ghost{background:transparent;color:var(--ag-ink);border-color:var(--ag-line)}
.ag-btn--ghost:hover{border-color:var(--ag-ink)}

/* ================= HEADER (estático, sem JS de scroll) ================= */
.blog-header{border-bottom:1px solid var(--ag-line);background:#fff}
.blog-header-inner{max-width:var(--maxw);margin:0 auto;padding:16px 40px;display:flex;align-items:center;gap:24px}
.blog-nav{display:flex;gap:26px;margin-left:auto}
.blog-nav a{font-size:15px;font-weight:500;color:var(--ag-ink-2)}
.blog-nav a:hover{color:var(--ag-ink)}
@media(max-width:640px){.blog-nav{display:none}}

/* ================= HUB (listagem) ================= */
.blog-hero{padding:clamp(56px,8vw,96px) 0 clamp(40px,5vw,56px);border-bottom:1px solid var(--ag-line)}
.blog-hero h1{font:var(--h1);letter-spacing:-.02em;max-width:16ch;margin:20px 0 18px}
.blog-hero p{font:var(--lead);color:var(--ag-ink-2);max-width:56ch}

.blog-grid{padding:clamp(48px,6vw,80px) 0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr;gap:40px}}

.blog-card{display:flex;flex-direction:column}
.blog-card-media{aspect-ratio:4/3;border-radius:var(--r-2);overflow:hidden;background:var(--ag-paper);margin-bottom:18px}
.blog-card-media img{width:100%;height:100%;object-fit:cover}
.blog-card .ag-eyebrow{margin-bottom:10px}
.blog-card h2{font:var(--h3);letter-spacing:-.01em;margin-bottom:8px}
.blog-card p{font:var(--small);color:var(--ag-ink-2)}
.blog-card-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:600;font-size:14px;
  border-bottom:1.5px solid var(--accent);align-self:flex-start;padding-bottom:2px}

.blog-empty{padding:clamp(48px,6vw,80px) 0;max-width:56ch}
.blog-empty p{font:var(--body);color:var(--ag-ink-2);margin-bottom:22px}

/* ================= ARTIGO (post) ================= */
.blog-post-head{padding:clamp(48px,7vw,84px) 0 clamp(32px,4vw,44px);border-bottom:1px solid var(--ag-line)}
.blog-post-head .ag-eyebrow{margin-bottom:18px}
.blog-post-head h1{font:var(--h1);letter-spacing:-.02em;max-width:20ch;margin-bottom:18px}
.blog-post-meta{display:flex;gap:16px;flex-wrap:wrap;font:var(--small);color:var(--ag-ink-3)}

.blog-post-cover{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.blog-post-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-2);margin-top:clamp(28px,4vw,40px)}

.blog-article{max-width:720px;margin:0 auto;padding:clamp(40px,6vw,64px) 40px clamp(56px,7vw,84px)}
.blog-article p{font:var(--body);color:var(--ag-ink-2);margin-bottom:22px}
.blog-article h2{font:var(--h2);letter-spacing:-.01em;color:var(--ag-ink);margin:44px 0 18px}
.blog-article h3{font:var(--h3);color:var(--ag-ink);margin:32px 0 14px}
.blog-article ul,.blog-article ol{margin:0 0 22px 22px;color:var(--ag-ink-2);font:var(--body)}
.blog-article li{margin-bottom:8px}
.blog-article img{border-radius:var(--r-2);margin:32px 0}
.blog-article figcaption{font:var(--small);color:var(--ag-ink-3);margin-top:10px}
.blog-article strong{color:var(--ag-ink);font-weight:600}
.blog-article blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 22px;margin:32px 0;
  font:var(--lead);color:var(--ag-ink)}

.blog-cta{background:var(--ag-black);color:#fff;border-radius:var(--r-2);padding:clamp(32px,4vw,48px);
  margin-top:16px;text-align:center}
.blog-cta h3{font:var(--h3);color:#fff;margin-bottom:10px}
.blog-cta p{color:var(--ag-on-dark-2);margin-bottom:22px;font:var(--body)}

.blog-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;font-weight:600;font-size:14px;color:var(--ag-ink-2)}
.blog-back:hover{color:var(--ag-ink)}

/* ================= FOOTER (estático, espelha o site) ================= */
.blog-footer{background:var(--ag-black);color:#fff;padding:clamp(48px,6vw,72px) 0 32px}
.blog-footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-bottom:32px}
.blog-footer-grid div{display:flex;flex-direction:column;gap:8px}
.blog-footer-grid a,.blog-footer-grid span:not(.ag-eyebrow){color:rgba(255,255,255,.78);font-size:14px}
.blog-footer-grid a:hover{color:#fff}
.blog-footer-grid .ag-eyebrow{margin-bottom:6px}
.blog-footer-base{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;font:var(--small);color:var(--ag-on-dark-2)}
@media(max-width:640px){.blog-footer-grid{grid-template-columns:1fr 1fr}}