/* =========================================================
   PsiGabriel, pages/single.css
   Artigo de blog (spoke do cluster). Assinatura visual exclusiva:
   cabeçalho de artigo (eyebrow + datas), capa 16/9, barra de progresso
   de leitura + TOC compacto sticky, coluna única arejada.
   Namespace: .psig-single / .psig-single__*  (não colide com outras páginas).
   Só tokens de main.css (:root). Não edita main.css/theme.json.
   ========================================================= */

/* ---- raiz do artigo ---- */
.psig-single{
  background:var(--c-white);
  padding-block:0;
}

/* ---- barra de progresso de leitura (fina, no topo do artigo) ---- */
.psig-single__progress{
  position:sticky;
  top:72px; /* abaixo do header sticky (min-height 72px) */
  z-index:80;
  height:3px;
  background:transparent;
}
.psig-single__progress-bar{
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:var(--c-accent);
  will-change:transform;
}

/* ---- cabeçalho de artigo (rico) ---- */
.psig-single__head{
  padding-block:clamp(1.75rem,5vw,3rem) clamp(1.25rem,3vw,2rem);
  border-bottom:1px solid var(--c-border);
  background:linear-gradient(180deg,var(--c-cream),var(--c-white));
}
.psig-single__head .psig-container{
  max-width:var(--measure-wide); /* leitura confortável, levemente mais larga que o corpo */
}
.psig-single__head .psig-breadcrumbs{
  margin-bottom:1.25rem;
}
.psig-single__eyebrow{
  display:inline-block;
  margin:0 0 .65rem;
  padding:.25rem .7rem;
  border-radius:999px;
  background:var(--c-primary-tint);
  color:var(--c-primary);
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.psig-single__title{
  font-size:var(--fs-hero);
  font-weight:700;
  line-height:1.15;
  margin:0 0 .85rem;
  max-width:24ch;
}
.psig-single__meta{
  margin:0;
  color:var(--c-muted);
  font-size:var(--fs-small);
}
.psig-single__author{
  color:var(--c-slate);
  font-weight:600;
  text-decoration:none;
}
.psig-single__author:hover{
  color:var(--c-primary);
  text-decoration:underline;
}
.psig-single__date{
  color:var(--c-muted);
}

/* ---- capa 16/9 (LCP) ---- */
.psig-single__thumb{
  margin:clamp(1.5rem,4vw,2.5rem) 0 0;
}
.psig-single__thumb img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.psig-single__caption{
  margin-top:.6rem;
  color:var(--c-muted);
  font-size:var(--fs-small);
  font-style:italic;
  text-align:center;
}

/* ---- corpo: coluna única arejada + TOC sticky compacto ao lado ---- */
.psig-single__layout{
  margin-top:clamp(2rem,5vw,3.25rem);
}
.psig-single__content{
  /* reaproveita .psig-prose (max-width 760px, margin-inline auto) */
}
/* mais "ar" no artigo: parágrafos e títulos respiram */
.psig-single .psig-single__content p{
  margin-bottom:1.25rem;
}
.psig-single .psig-single__content h2{
  margin-top:2.5rem;
  scroll-margin-top:96px; /* âncoras do TOC não ficam sob o header */
}
.psig-single .psig-single__content h3{
  scroll-margin-top:96px;
}
/* citações destacadas (artigo editorial): aspas + barra de acento */
.psig-single .psig-single__content blockquote{
  position:relative;
  margin:1.75rem 0;
  padding:1rem 1.1rem 1rem 1.6rem;
  font-size:1.1rem;
  line-height:1.55;
}
.psig-single .psig-single__content blockquote cite{
  display:block;
  margin-top:.5rem;
  font-style:normal;
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--c-primary);
}

/* TOC: aparece como lateral sticky só em telas largas; no mobile fica no topo da coluna */
.psig-single__toc{
  max-width:var(--measure);
  margin:0 auto 2rem;
  padding:1rem 1.25rem;
  background:var(--c-cream);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
}
.psig-single__toc[hidden]{display:none;}
.psig-single__toc-title{
  margin:0 0 .6rem;
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--c-primary);
}
.psig-single__toc-list{
  margin:0;
  padding-left:1.1rem;
  color:var(--c-slate);
}
.psig-single__toc-list li{
  margin-bottom:.4rem;
}
.psig-single__toc-link{
  color:var(--c-slate);
  text-decoration:none;
  font-size:.95rem;
}
.psig-single__toc-link:hover{
  color:var(--c-primary);
  text-decoration:underline;
}
.psig-single__toc-link.is-active{
  color:var(--c-primary);
  font-weight:600;
}

/* rodapé do artigo (refs + autor + relacionados) na largura de leitura */
.psig-single__foot{
  max-width:var(--measure);
}

/* ---- desktop largo: TOC sticky fora da coluna de leitura ---- */
/* desktop: o sumário permanece no TOPO do texto (não vira coluna lateral) */
@media (min-width:1100px){
  .psig-single__layout{display:block}
  .psig-single__content{max-width:var(--measure);margin-inline:auto}
  .psig-single__toc{max-width:var(--measure);margin:0 auto 2rem;position:static}
}

/* ---- mobile: tudo confortável e tocável ---- */
@media (max-width:768px){
  .psig-single__title{
    font-size:clamp(1.7rem,7vw,2.2rem);
    max-width:none;
  }
  .psig-single__thumb img{
    border-radius:var(--radius-sm);
  }
  .psig-single .psig-single__content blockquote{
    font-size:1.05rem;
  }
  .psig-single__progress{
    top:64px;
  }
}

@media (prefers-reduced-motion:reduce){
  .psig-single__progress-bar{transition:none;}
}