/* ---------- Conteúdos — biblioteca + páginas de artigo (só nestas páginas) ---------- */
/* .article-card{display:flex} teria prioridade sobre o [hidden] nativo do navegador
   (regra de UA, não sobrevive a um display de autor); forçar aqui para o filtro da
   biblioteca realmente esconder os cartões, não só atualizar a contagem. */
[hidden]{display:none!important}
.ct-hero{background:#eff6f6}
.ct-hero__inner{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto;
  display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:56px 0}
.ct-hero__inner img{width:100%;aspect-ratio:1.3;object-fit:cover;border-radius:80px 12px 12px 12px}
.ct-hero__lead{font-size:1.12rem;color:#3a5063}

.ct-featured{display:grid;grid-template-columns:1.15fr 1fr;border-radius:var(--radius);
  border:1px solid var(--line);overflow:hidden}
.ct-featured img{height:100%;min-height:280px;object-fit:cover}
.ct-featured .ct-card-copy{padding:36px;align-self:center}
.ct-featured h3{font-size:1.7rem}

.ct-tag{color:var(--teal-dark);font-size:.76rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;display:block;margin-bottom:10px}
.ct-card-copy h3 a{text-decoration:none;color:var(--ink)}
.ct-card-copy h3 a:hover{text-decoration:underline}
.ct-meta{display:flex;justify-content:space-between;gap:16px;font-size:.82rem;color:var(--muted);margin-top:18px}
.ct-meta a{font-weight:800;color:var(--teal-dark)}

.ct-library{background:var(--bg);padding:56px 0}
.ct-tools{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin:24px 0 18px}
.ct-filters{display:flex;gap:8px;flex-wrap:wrap}
.ct-filters button{font:inherit;font-size:.88rem;padding:9px 16px;border:1px solid #cddde2;border-radius:30px;
  cursor:pointer;background:#fff;color:var(--ink)}
.ct-filters button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.ct-search{display:grid;gap:6px;font-size:.84rem;font-weight:700}
.ct-search input{font:inherit;min-height:44px;border:1px solid #bdced5;border-radius:var(--radius-sm);
  padding:10px 14px;width:260px;max-width:100%}
.ct-count{font-size:.84rem;color:var(--muted)}
.ct-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ct-grid .article-card{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  background:#fff;display:flex;flex-direction:column}
.ct-grid .card-image img{aspect-ratio:1.6;object-fit:cover}
.ct-grid .ct-card-copy{padding:22px;display:flex;flex-direction:column;flex:1}
.ct-grid .ct-card-copy p{font-size:.92rem;color:var(--muted)}
.ct-grid .ct-meta{margin-top:auto;padding-top:16px}
.ct-empty{padding:32px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-sm)}

.ct-series{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ct-series article{background:var(--teal-soft);border-radius:var(--radius);padding:30px}
.ct-series article:first-child{background:var(--navy);color:#fff}
.ct-series article:first-child p{color:#cbdbe5}
.ct-series a{display:block;margin-top:14px;text-underline-offset:5px;font-weight:700;color:var(--teal-dark)}
.ct-series article:first-child a{color:#8bddd8}

/* ---------- página de artigo ---------- */
.article-hero{background:var(--bg);padding:52px 0 40px}
.article-hero__inner{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto;
  display:grid;grid-template-columns:1fr .92fr;gap:48px;align-items:center}
.article-hero h1{margin:10px 0 14px}
.article-cover img{width:100%;aspect-ratio:1.6;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.article-meta{display:flex;gap:16px;margin-top:18px;color:var(--muted);font-size:.8rem}
.breadcrumbs{font-size:.8rem;color:var(--muted);margin-bottom:20px}
.breadcrumbs a{color:var(--teal-dark)}

.article-layout{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,720px) 260px;gap:56px;padding:56px 0 72px;align-items:start}
.article-body{font-size:1.05rem;line-height:1.78}
.article-body h2{margin:2.4em 0 .5em;font-size:1.7rem;line-height:1.2}
.article-body h3{margin:1.6em 0 .4em;font-size:1.2rem}
.article-body p{margin:0 0 1.2em;color:var(--ink)}
.article-body ul,.article-body ol{padding-left:1.4em;margin:0 0 1.4em;color:var(--ink)}
.article-body li{margin:.45em 0}
.article-body blockquote{margin:1.8em 0;padding:.3em 0 .3em 1.3em;border-left:4px solid var(--lime);
  color:var(--navy);font-size:1.3rem;font-weight:700;line-height:1.4}
.article-body .example{margin:1.6em 0;padding:22px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg)}
.article-body .example strong{display:block;color:var(--teal-dark);margin-bottom:4px}
.article-body .checklist{margin:1.6em 0;padding:26px;background:var(--navy);color:#fff;border-radius:var(--radius)}
.article-body .checklist h3{color:#fff;margin-top:0}
.article-body .checklist li::marker{color:var(--lime)}

.article-aside{position:sticky;top:96px}
.aside-card{padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.aside-card h3{margin:0 0 8px;font-size:1.05rem}
.aside-card p{font-size:.82rem;color:var(--muted)}
.aside-card .btn{width:100%;margin-top:6px;font-size:.8rem}

.related{padding:56px 0;background:var(--bg)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.related-link{padding:20px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;
  text-decoration:none;font-weight:700;color:var(--ink);display:block}
.related-link span{display:block;margin-bottom:5px;color:var(--teal-dark);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.08em}

@media(max-width:1000px){
  .ct-grid{grid-template-columns:repeat(2,1fr)}
  .ct-hero__inner{gap:28px}
  .article-layout{grid-template-columns:1fr}
  .article-aside{position:static}
}
@media(max-width:760px){
  .ct-hero__inner,.ct-featured,.ct-series,.article-hero__inner{grid-template-columns:1fr}
  .ct-search,.ct-search input{width:100%}
}
@media(max-width:500px){
  .ct-grid,.related-grid{grid-template-columns:1fr}
}
