/* =============================================================
   conteudo.css — /blog e /projetos (e o texto Markdown)
   Usa os tokens do style.css. Carregado só nessas páginas.
   ============================================================= */

.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.ct__aviso{
  margin-bottom:22px; padding:12px 16px; font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em;
  border:1px solid var(--sunset); background:rgba(255,158,0,.1); color:#FFD9A0;
}
.ct__aviso a{ color:var(--cyan); margin-left:8px; }

/* ---------- Listagem ---------- */
.ct__hero{ margin-bottom:clamp(26px,4vw,40px); }
.ct__alterna{ display:inline-flex; border:1px solid var(--line); margin-top:4px; }
.ct__alterna a{
  padding:10px 22px; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey-dim); transition:.25s var(--ease);
}
.ct__alterna a + a{ border-left:1px solid var(--line); }
.ct__alterna a:hover{ color:var(--white); }
.ct__alterna a.is-ativo{ color:var(--bg); background:linear-gradient(90deg,var(--cyan),var(--magenta)); }
.ct__filtro{ font-family:var(--f-mono); font-size:.82rem; color:var(--grey-dim); margin-bottom:18px; }
.ct__filtro a{ color:var(--cyan); }
.ct__vazio{ padding:60px 20px; text-align:center; border:1px dashed var(--line); color:var(--grey-dim); margin-bottom:40px; }
.ct__vazio p{ font-size:1.1rem; margin-bottom:18px; }

.ct__grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:clamp(16px,2.2vw,24px); margin-bottom:clamp(40px,6vw,70px);
}
.ct__grade--3{ grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); }

.ct__card{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); background:linear-gradient(170deg,rgba(18,15,40,.78),rgba(4,4,15,.9));
  transition:border-color .35s, transform .35s var(--ease), box-shadow .35s;
  min-width:0;
}
.ct__card:hover{ border-color:rgba(0,243,255,.45); transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(0,243,255,.45); }
.ct__card-img{ display:block; aspect-ratio:1200/630; overflow:hidden; background:var(--bg-2); }
.ct__card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ct__card:hover .ct__card-img img{ transform:scale(1.04); }
.ct__card-ph{
  display:grid; place-items:center; width:100%; height:100%;
  font-family:var(--f-display); font-weight:900; font-size:3.4rem; color:rgba(255,255,255,.85);
  background:
    linear-gradient(transparent 62%, rgba(255,0,127,.35) 62% 63%, transparent 63%) 0 0/100% 18px,
    radial-gradient(60% 90% at 50% 110%, rgba(255,0,127,.55), transparent 70%),
    linear-gradient(160deg,#1A0633,#07061A);
  text-shadow:var(--glow-magenta);
}
.ct__card-txt{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.ct__card-t{ font-family:var(--f-display); font-weight:700; font-size:1.02rem; line-height:1.35; margin:0; }
.ct__card-t a{ color:var(--white); }
.ct__card-t a::after{ content:''; position:absolute; inset:0; }   /* card inteiro clicável */
.ct__card-t a:hover{ color:var(--cyan); }
.ct__card-r{ color:var(--grey); font-size:.95rem; line-height:1.6; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ct__card-links{ list-style:none; margin:auto 0 0; padding:6px 0 0; display:flex; gap:8px; position:relative; z-index:1; }
.ct__card-links a{
  display:grid; place-items:center; width:34px; height:34px; color:var(--grey-dim);
  border:1px solid var(--line); transition:.25s;
}
.ct__card-links a:hover{ color:var(--cyan); border-color:var(--cyan); }

@media (min-width:980px){
  .ct__card--grande{ grid-column:1 / -1; display:grid; grid-template-columns:1.25fr 1fr; }
  .ct__card--grande .ct__card-img{ aspect-ratio:auto; min-height:320px; }
  .ct__card--grande .ct__card-txt{ padding:clamp(24px,3vw,40px); justify-content:center; }
  .ct__card--grande .ct__card-t{ font-size:clamp(1.3rem,2.2vw,1.7rem); }
  .ct__card--grande .ct__card-r{ -webkit-line-clamp:5; font-size:1.05rem; }
}

/* ---------- Meta (tipo, situação, data) ---------- */
.ct__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-dim); }
.ct__tipo{ padding:3px 9px; border:1px solid currentColor; }
.ct__tipo--post{ color:var(--cyan); }
.ct__tipo--projeto{ color:var(--sunset); }
.ct__situacao{ display:inline-flex; align-items:center; gap:7px; color:var(--grey); }
.ct__situacao i{ width:8px; height:8px; border-radius:50%; background:var(--grey-dim); }
.ct__situacao--em-producao i{ background:#2BE372; box-shadow:0 0 10px #2BE372; animation:ct-pulso 2s infinite; }
.ct__situacao--beta i{ background:var(--sunset); box-shadow:0 0 8px var(--sunset); }
.ct__situacao--em-desenvolvimento i{ background:var(--violet-lite); }
.ct__situacao--open-source i{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
@keyframes ct-pulso{ 50%{ opacity:.35; } }

/* ---------- Artigo ---------- */
.ct__artigo{ max-width:760px; margin:0 auto clamp(40px,6vw,70px); }
.ct__cab{ margin-bottom:28px; }
.ct__cab .ct__meta{ margin-bottom:18px; }
.ct__h1{ font-size:clamp(1.8rem,4.6vw,2.9rem); }
.ct__resumo{ margin-bottom:22px; }
.ct__autor{ display:flex; align-items:center; gap:12px; padding:14px 0; border-block:1px solid var(--line); margin-bottom:22px; }
.ct__autor img,.ct__autor-ini{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.ct__autor-ini{ display:grid; place-items:center; font-family:var(--f-display); font-size:.8rem; font-weight:700;
  color:var(--bg); background:linear-gradient(135deg,var(--cyan),var(--magenta)); }
.ct__autor b{ display:block; color:var(--white); font-size:.98rem; }
.ct__autor span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:var(--grey-dim); }

.ct__links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.ct__link{
  display:inline-flex; align-items:center; gap:9px; padding:10px 16px;
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em; color:var(--grey);
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  transition:color .25s, border-color .25s, background .25s, transform .25s var(--ease);
}
.ct__link em{ font-style:normal; opacity:.6; }
.ct__link:hover{ transform:translateY(-2px); color:#fff; }
.ct__link--linkedin:hover{ border-color:#0A66C2; background:rgba(10,102,194,.22); }
.ct__link--github:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.ct__link--demo:hover,.ct__link--site:hover{ border-color:#2BE372; background:rgba(43,227,114,.12); }
.ct__link--youtube:hover{ border-color:#FF0033; background:rgba(255,0,51,.14); }
.ct__link--blog:hover,.ct__link--medium:hover,.ct__link--devto:hover,.ct__link--docs:hover,
.ct__link--npm:hover,.ct__link--outro:hover{ border-color:var(--cyan); background:rgba(0,243,255,.1); }

.ct__capa{ margin:0 0 34px; border:1px solid var(--line); overflow:hidden; }
.ct__capa img{ width:100%; display:block; }

.ct__pe{ margin-top:44px; padding-top:26px; border-top:1px solid var(--line); display:grid; gap:24px; }
.ct__tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.ct__tags a{ font-family:var(--f-mono); font-size:.78rem; color:var(--violet-lite); padding:4px 10px; border:1px solid rgba(192,132,252,.3); }
.ct__tags a:hover{ color:#fff; border-color:var(--violet-lite); }
.ct__links-fim p{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-dim); margin-bottom:12px; }

.ct__rel{ margin-bottom:10px; }
.ct__rel-t{ font-size:clamp(1.2rem,2.6vw,1.6rem); margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.ct__404{ padding:clamp(30px,8vw,90px) 0; }

/* ---------- Texto em Markdown ---------- */
.conteudo-md{ color:var(--grey); font-size:clamp(1.04rem,1.6vw,1.14rem); line-height:1.8; overflow-wrap:break-word; }
.conteudo-md > * + *{ margin-top:1.15em; }
.conteudo-md h2,.conteudo-md h3,.conteudo-md h4,.conteudo-md h5,.conteudo-md h6{
  color:var(--white); line-height:1.3; margin-top:2em; scroll-margin-top:calc(var(--nav-h) + 20px);
}
.conteudo-md h2{ font-size:clamp(1.35rem,2.8vw,1.75rem); }
.conteudo-md h3{ font-size:clamp(1.15rem,2.2vw,1.35rem); color:var(--cyan); }
.conteudo-md h4,.conteudo-md h5,.conteudo-md h6{ font-size:1.05rem; }
.conteudo-md strong{ color:var(--white); }
.conteudo-md a{ color:var(--cyan); text-decoration:underline; text-decoration-color:rgba(0,243,255,.4); text-underline-offset:3px; }
.conteudo-md a:hover{ text-decoration-color:var(--cyan); }
.conteudo-md img{ display:block; max-width:100%; height:auto; margin-inline:auto; border:1px solid var(--line); }
.conteudo-md p > img:only-child{ margin-block:.4em; }
.conteudo-md ul,.conteudo-md ol{ padding-left:1.4em; }
.conteudo-md li + li{ margin-top:.4em; }
.conteudo-md li::marker{ color:var(--magenta); }
.conteudo-md .md-tarefas{ list-style:none; padding-left:0; }
.conteudo-md .md-tarefa{ display:flex; gap:10px; align-items:baseline; }
.conteudo-md .md-check{ flex:none; width:18px; height:18px; border:1px solid var(--line); display:inline-grid; place-items:center; font-size:.8rem; color:#2BE372; transform:translateY(3px); }
.conteudo-md .md-tarefa.is-feita{ color:var(--grey-dim); }
.conteudo-md blockquote{
  margin-inline:0; padding:14px 20px; border-left:3px solid var(--magenta);
  background:linear-gradient(90deg,rgba(255,0,127,.1),transparent); color:var(--grey);
}
.conteudo-md blockquote > * + *{ margin-top:.8em; }
.conteudo-md hr{ border:0; height:1px; margin-block:2.4em; background:linear-gradient(90deg,transparent,var(--magenta),var(--cyan),transparent); }
.conteudo-md code{
  font-family:var(--f-mono); font-size:.88em; padding:.12em .42em;
  background:rgba(0,243,255,.08); border:1px solid rgba(0,243,255,.18); color:#A8FBFF;
}
.conteudo-md pre{
  position:relative; margin-inline:0; padding:18px 20px; overflow-x:auto;
  background:#060514; border:1px solid var(--line); border-left:3px solid var(--cyan);
  font-size:.88rem; line-height:1.65;
}
.conteudo-md pre[data-lang]::before{
  content:attr(data-lang); position:absolute; top:0; right:0; padding:3px 10px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bg); background:var(--cyan);
}
.conteudo-md pre code{ background:none; border:0; padding:0; color:var(--grey); font-size:inherit; }
.md-tabela{ overflow-x:auto; border:1px solid var(--line); }
.conteudo-md table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.conteudo-md th{ text-align:left; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); background:rgba(0,243,255,.06); }
.conteudo-md th,.conteudo-md td{ padding:10px 14px; border-bottom:1px solid var(--line); }
.conteudo-md del{ color:var(--grey-dim); }

@media (max-width:560px){
  .ct__link{ flex:1 1 100%; justify-content:center; }
  .ct__alterna{ display:flex; }
  .ct__alterna a{ flex:1; text-align:center; }
}

/* ---------- COMPOSIÇÃO CENTRALIZADA ----------------------- */
/* Listagem: cabeçalho no eixo central */
.ct__hero{ margin-inline:auto; text-align:center; }
.ct__hero .sv__resumo{ margin-inline:auto; }
.ct__filtro,.ct__rel-t{ text-align:center; }

/* Grades: cards de largura estável e centralizados — com 1 ou 2 itens
   nada fica encostado à esquerda com um vazio do lado. */
.ct__grade,.ct__grade--3{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),380px));
  justify-content:center;
}
.ct__rel-t{ border-bottom:0; position:relative; }
.ct__rel-t::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:72px; height:3px; background:linear-gradient(90deg,var(--magenta),var(--cyan));
}

/* Artigo: cabeçalho centralizado, corpo alinhado à esquerda para ler */
.ct__cab{ text-align:center; }
.ct__cab .ct__meta,.ct__cab .ct__links{ justify-content:center; }
.ct__cab .ct__resumo{ margin-inline:auto; max-width:60ch; }
.ct__autor{ justify-content:center; text-align:left; }
.ct__pe{ justify-items:center; text-align:center; }
.ct__tags,.ct__links-fim .ct__links{ justify-content:center; }
.ct__404{ text-align:center; }
.ct__404 .sv__resumo{ margin-inline:auto; }
.ct__404 .sv__acoes{ justify-content:center; }