/* =========================================================
   PsiGabriel, pages/abordagem.css
   Layout: Educacional / long-form (LAYOUTS.md §2).
   Assinatura: capa textual em tint + TOC sticky lateral + pull-quotes.
   Escopo 100% ancorado em .psig-abordagem; só tokens de main.css (:root).
   ========================================================= */

/* ---- capa textual (sem imagem), faixa fina em tint ---- */
.psig-abordagem__hero{
  background:var(--c-primary-tint);
  border-bottom:1px solid var(--c-border);
  padding-block:clamp(2rem,5vw,3.5rem);
}
.psig-abordagem__hero .psig-breadcrumbs{margin-bottom:1.25rem}
.psig-abordagem__hero-inner{max-width:var(--measure-wide)}
.psig-abordagem__eyebrow{
  color:var(--c-primary);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.78rem;
  margin:0 0 .5rem;
}
.psig-abordagem__title{
  font-size:var(--fs-hero);
  font-weight:700;
  margin:0 0 .75rem;
  max-width:18ch;
}
.psig-abordagem__lead{
  font-size:1.2rem;
  line-height:1.55;
  color:var(--c-slate);
  max-width:62ch;
  margin:0;
}

/* ---- corpo: grid leitura + TOC ---- */
.psig-abordagem__body{padding-block:var(--section-y)}
.psig-abordagem__grid{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
/* Sem sumário (conteúdo sem <h2>): coluna única, leitura centralizada. */
.psig-abordagem__grid--no-toc{grid-template-columns:minmax(0,1fr)}
.psig-abordagem__grid--no-toc .psig-abordagem__prose{margin-inline:auto}

/* ---- TOC sticky lateral (desktop) ---- */
.psig-abordagem__toc{position:sticky;top:96px}
.psig-abordagem__toc-box{
  border-left:2px solid var(--c-border);
  padding-left:1.1rem;
}
.psig-abordagem__toc-box[open] .psig-abordagem__toc-title::after{transform:rotate(180deg)}
.psig-abordagem__toc-title{
  cursor:pointer;
  list-style:none;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--c-muted);
  margin-bottom:.75rem;
  user-select:none;
}
.psig-abordagem__toc-title::-webkit-details-marker{display:none}
/* Em telas largas o sumário fica sempre visível (não é dobrável). */
.psig-abordagem__toc-list{
  list-style:none;
  margin:0;
  padding:0;
  font-size:.92rem;
  line-height:1.35;
}
.psig-abordagem__toc-list li{margin-bottom:.6rem}
.psig-abordagem__toc-link{
  color:var(--c-slate);
  text-decoration:none;
  display:block;
  padding:.15rem 0;
  border-left:2px solid transparent;
  margin-left:-1.1rem;
  padding-left:1.1rem;
  transition:color .15s ease,border-color .15s ease;
}
.psig-abordagem__toc-link:hover{color:var(--c-primary)}
/* item ativo (definido por JS via aria-current, com fallback :target/:focus) */
.psig-abordagem__toc-link[aria-current="true"],
.psig-abordagem__toc-link:focus-visible{
  color:var(--c-primary);
  font-weight:600;
  border-left-color:var(--c-primary);
}

/* ---- coluna de leitura ---- */
.psig-abordagem__prose{
  max-width:var(--measure);
  margin-inline:0; /* alinhada ao TOC, não centralizada */
  font-size:1.08rem;
}
/* offset das âncoras para não ficarem sob o header sticky */
.psig-abordagem .psig-abordagem__anchor{scroll-margin-top:96px}
.psig-abordagem__prose h2{
  font-size:var(--fs-h2);
  margin-top:2.75rem;
  padding-top:.25rem;
}
.psig-abordagem__prose h2:first-of-type{margin-top:0}
.psig-abordagem__prose h3{margin-top:1.75rem}
.psig-abordagem__prose p{margin-bottom:1.15rem}

/* ---- pull-quote conceitual (tese lacaniana) ----
   reusa a linguagem visual do .psig-pillar-callout, namespeado. */
.psig-abordagem__pull{
  background:var(--c-cream);
  border-radius:var(--radius-sm);
  padding:1.25rem 1.5rem;
  margin:2rem 0;
  font-size:1.15rem;
  line-height:1.5;
  color:var(--c-primary);
  font-weight:500;
}
.psig-abordagem__pull cite{
  display:block;
  margin-top:.5rem;
  font-size:.85rem;
  font-style:normal;
  color:var(--c-muted);
}

/* ---- responsivo ---- */
@media (max-width:991px){
  .psig-abordagem__grid{grid-template-columns:1fr;gap:1.5rem}
  /* TOC vira bloco recolhível no topo da leitura */
  .psig-abordagem__toc{position:static;top:auto}
  .psig-abordagem__toc-box{
    border:1px solid var(--c-border);
    border-radius:var(--radius-sm);
    background:var(--c-cream);
    padding:1rem 1.25rem;
  }
  .psig-abordagem__toc-title::after{
    content:"▾";
    float:right;
    color:var(--c-accent);
    transition:transform .2s ease;
  }
  .psig-abordagem__toc-list{margin-top:.75rem}
  .psig-abordagem__toc-link{margin-left:0;padding-left:.75rem}
}
@media (max-width:768px){
  .psig-abordagem__title{max-width:none}
  .psig-abordagem__lead{font-size:1.08rem}
  .psig-abordagem__prose{font-size:1.0625rem}
  .psig-abordagem__pull{font-size:1.05rem;padding:1rem 1.15rem}
}

/* respeita movimento reduzido */
@media (prefers-reduced-motion:reduce){
  .psig-abordagem__toc-link,
  .psig-abordagem__toc-title::after{transition:none}
}