/* =========================================================
   PsiGabriel, pillar.css  (página pillar de demanda / BOFU)
   Dono exclusivo: page-templates/template-pillar.php
   Namespace: .psig-pillar / .psig-pillar__*  (ver docs/research/LAYOUTS.md §3)
   Só usa tokens de main.css (:root). Nenhuma cor nova.
   ========================================================= */

/* ----- 1. Hero empático (split) ----- */
.psig-pillar__hero{
  background:
    radial-gradient(circle at 88% 12%, var(--c-primary-tint) 0, transparent 46%),
    var(--c-cream);
  border-bottom:1px solid var(--c-border);
}
.psig-pillar .psig-pillar__hero-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
}
.psig-pillar .psig-pillar__hero-content .psig-breadcrumbs{margin-bottom:1.25rem}
.psig-pillar__eyebrow{
  color:var(--c-primary);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.8rem;
  margin-bottom:.5rem;
}
.psig-pillar .psig-pillar__title{
  font-size:var(--fs-hero);
  font-weight:700;
  margin-bottom:.6rem;
}
.psig-pillar__lead{
  font-size:1.2rem;
  color:var(--c-slate);
  max-width:42ch;
}
.psig-pillar__trust{
  font-size:.85rem;
  color:var(--c-muted);
  margin-top:.25rem;
}
/* coluna lateral: aspas serenas (sem foto de sofrimento) */
.psig-pillar__hero-aside{
  position:relative;
  background:var(--c-white);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1.5rem,3vw,2.25rem);
}
.psig-pillar__hero-quote{
  margin:0;
  font-size:1.3rem;
  line-height:1.4;
  color:var(--c-primary);
  font-weight:500;
  font-style:italic;
}
.psig-pillar__hero-quote::before{
  content:"\201C";
  display:block;
  font-size:3rem;
  line-height:.6;
  color:var(--c-accent);
  margin-bottom:.25rem;
}

/* ----- 2. Corpo editorial (the_content) ----- */
.psig-pillar__intro{padding-block:clamp(2.5rem,6vw,4.5rem)}
.psig-pillar .psig-pillar__prose{margin-inline:auto}

/* ----- 3. Quando procurar, cards de sinais ----- */
.psig-pillar__sinais-grid{
  list-style:none;
  margin:0;
  padding:0;
}
.psig-pillar .psig-pillar__sinal{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.psig-pillar__sinal-text{
  margin:0;
  color:var(--c-slate);
  font-size:1.05rem;
}
.psig-pillar__sinal-tag{
  margin-top:auto;
  align-self:flex-start;
  font-size:.8rem;
  font-weight:600;
  color:var(--c-primary);
  background:var(--c-primary-tint);
  border-radius:999px;
  padding:.3rem .75rem;
}

/* ----- 4. Como eu escuto, passos numerados ----- */
.psig-pillar__steps{
  list-style:none;
  counter-reset:none;
  margin:0 auto;
  padding:0;
  max-width:var(--measure-wide);
  display:grid;
  gap:1.25rem;
}
.psig-pillar__step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.25rem;
  align-items:start;
  background:var(--c-white);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.4rem 1.6rem;
}
.psig-pillar__step-num{
  font-size:1.5rem;
  font-weight:700;
  line-height:1;
  color:var(--c-white);
  background:var(--c-primary);
  border-radius:var(--radius-sm);
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.psig-pillar .psig-pillar__step-title{
  font-size:var(--fs-h3);
  margin:.1rem 0 .35rem;
}
.psig-pillar__step-text{
  margin:0;
  color:var(--c-slate);
}
.psig-pillar__como-cta{
  display:flex;
  justify-content:center;
  margin-top:2rem;
}
.psig-pillar__como-cta .psig-cta-group{margin:0}

/* ----- 5. EEAT (refs + autor) ----- */
.psig-pillar__eeat{padding-top:0}

/* ----- 8. Hub do cluster ----- */
.psig-pillar__hub .psig-card--post .psig-card__link{margin-top:1rem}

/* ===== responsivo ===== */
@media (max-width:991px){
  .psig-pillar .psig-pillar__hero-inner{grid-template-columns:1fr}
  .psig-pillar__hero-aside{order:-1}
  .psig-pillar__sinais-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .psig-pillar .psig-pillar__title{font-size:clamp(1.7rem,7vw,2.2rem)}
  .psig-pillar__lead{margin-inline:auto;max-width:none}
  .psig-pillar__hero-content{text-align:center}
  .psig-pillar__hero-content .psig-cta-group{justify-content:center}
  .psig-pillar__hero-content .psig-breadcrumbs{text-align:left}
  .psig-pillar__sinais-grid{grid-template-columns:1fr}
  .psig-pillar__step{
    grid-template-columns:1fr;
    gap:.65rem;
    text-align:left;
  }
  .psig-pillar__step-num{width:40px;height:40px;font-size:1.25rem}
}