/* Arthur Diaz — Blog (complementa site.css) */
.nav a[aria-current="page"]{color:var(--teal-bright)}

/* ---------- índice ---------- */
.blog-hero{padding:156px 0 20px}
.blog-hero h1{font-size:clamp(2.3rem,4.6vw,3.5rem);margin-top:18px}
.blog-hero h1 em{font-style:italic;color:var(--teal-bright)}
.blog-hero p{color:var(--ink-dim);font-size:1.15rem;margin-top:18px;max-width:34em;text-wrap:pretty}
.post-list{display:grid;gap:22px;margin-top:56px}
.post-card{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:28px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.post-card:hover{transform:translateY(-3px);border-color:var(--teal-line);background:var(--surface-2)}
.post-card .thumb{
  aspect-ratio:1;border-radius:var(--radius);background:var(--teal-soft);border:1px solid var(--teal-line);
  display:flex;align-items:center;justify-content:center;color:var(--teal);
}
.post-card .thumb svg{width:46%;height:46%;stroke:currentColor;fill:none;stroke-width:1.4}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.84rem;color:var(--muted);letter-spacing:.02em}
.post-meta span{display:inline-flex;align-items:center;gap:8px}
.post-meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--teal);opacity:.7;margin-right:10px}
.post-card h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.2;margin-top:8px}
.post-card:hover h2{color:var(--teal-bright)}
.post-card p{
  color:var(--muted);font-size:1rem;margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-card .more{display:inline-block;margin-top:12px;font-size:.92rem;font-weight:600;color:var(--teal)}

/* ---------- artigo ---------- */
.article-head{padding:150px 0 10px}
.article-head .inner,.article-body{max-width:720px;margin:0 auto}
.crumbs{font-size:.86rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px}
.crumbs a:hover{color:var(--teal-bright)}
.article-head h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin:22px 0 22px;text-wrap:balance}
.article-head .lede{font-size:1.2rem;color:var(--ink-dim);margin-top:22px;text-wrap:pretty}
.author-line{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.author-line img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--line)}
.author-line b{display:block;font-weight:600;font-size:.98rem}
.author-line span{font-size:.84rem;color:var(--muted)}

.article-body{padding:36px 0 30px;font-size:1.12rem;line-height:1.75;color:var(--ink-dim)}
.article-body > * + *{margin-top:1.15em}
.article-body h2{
  font-family:var(--font-display);font-weight:500;color:var(--ink);
  font-size:clamp(1.6rem,2.8vw,2rem);line-height:1.2;margin-top:2.1em;
}
.article-body h3{font-size:1.18rem;font-weight:600;color:var(--ink);margin-top:1.8em;line-height:1.35}
.article-body h2 + p,.article-body h3 + p{margin-top:.6em}
.article-body strong{color:var(--ink);font-weight:600}
.article-body a{color:var(--teal-bright);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--teal-line)}
.article-body a:hover{text-decoration-color:var(--teal-bright)}
.article-body ul{padding-left:1.2em}
.article-body li{margin-top:.55em;padding-left:.3em}
.article-body li::marker{color:var(--teal)}
.article-body blockquote{
  font-family:var(--font-display);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--ink);
  padding:6px 0 6px 24px;border-left:2px solid var(--teal);margin-top:1.6em;margin-bottom:.4em;
}
.article-body .note{
  background:var(--surface);border:1px solid var(--teal-line);border-radius:var(--radius);
  padding:22px 24px;font-size:1.02rem;color:var(--ink-dim);margin-top:1.8em;
}
.article-body .note b{color:var(--teal-bright);display:block;margin-bottom:4px;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
.article-cta{padding-top:40px}

@media (max-width:680px){
  .blog-hero,.article-head{padding-top:124px}
  .post-card{grid-template-columns:1fr;gap:18px;padding:22px}
  .post-card .thumb{width:72px}
  .article-body{font-size:1.06rem}
}