/* =========================================================
   PsiGabriel, pages/sobre.css
   Página "Sobre" (EEAT). Layout institucional: retrato
   assimétrico com aside sticky (foto + cartão de credenciais),
   linha do tempo de experiência e bloco de leitura com
   citação. Concatenado após main.css, usa apenas os tokens
   de :root. Todas as classes sob o namespace .psig-sobre.
   ========================================================= */

/* ---- 1. Intro: split de retrato (.34fr / .66fr) ---- */
.psig-sobre__intro{
  padding-block:var(--section-y);
  background:var(--c-white);
}
.psig-sobre__split{
  display:grid;
  grid-template-columns:.34fr .66fr;
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}

/* aside sticky com foto + cartão de credenciais */
.psig-sobre__aside{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.psig-sobre__portrait{
  margin:0;
}
.psig-sobre__portrait img{
  width:100%;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  object-fit:cover;
  aspect-ratio:4/5;
}

/* cartão de credenciais, trust signals EEAT, fundo cream */
.psig-sobre__cred{
  background:var(--c-cream);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  padding:1.5rem;
}
.psig-sobre__cred-name{
  font-weight:700;
  color:var(--c-primary);
  font-size:1.15rem;
  margin:0;
}
.psig-sobre__cred-role{
  color:var(--c-slate);
  font-size:var(--fs-small);
  margin:0 0 1rem;
}
.psig-sobre__cred-list{
  margin:0;
  display:grid;
  gap:.9rem;
}
.psig-sobre__cred-row{
  display:grid;
  gap:.1rem;
  padding-top:.9rem;
  border-top:1px solid var(--c-border);
}
.psig-sobre__cred-row:first-child{
  border-top:0;
  padding-top:0;
}
.psig-sobre__cred-row dt{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
  color:var(--c-muted);
}
.psig-sobre__cred-row dd{
  margin:0;
  font-size:.95rem;
  color:var(--c-text);
  line-height:1.45;
}
.psig-sobre__cred-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight:600;
  color:var(--c-primary);
  text-decoration:none;
}
.psig-sobre__cred-link:hover{
  text-decoration:underline;
}
.psig-sobre__cred-verify{
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--c-primary);
  background:var(--c-primary-tint);
  border-radius:999px;
  padding:.12rem .5rem;
}

/* coluna de texto: leitor antes do currículo */
.psig-sobre__eyebrow{
  color:var(--c-primary);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.8rem;
  margin-bottom:.4rem;
}
.psig-sobre__title{
  font-size:var(--fs-hero);
  font-weight:700;
  margin-bottom:1.25rem;
}
.psig-sobre__body{
  /* reusa .psig-prose; aqui apenas tiramos o centramento de largura */
  max-width:none;
  margin-inline:0;
}
.psig-sobre__body p{
  color:var(--c-text);
}
.psig-sobre__body strong{
  color:var(--c-primary);
}

/* ---- 2. Trajetória: linha do tempo de experiência ---- */
.psig-sobre__sec-head{
  max-width:var(--measure);
  margin:0 0 2rem;
}
.psig-sobre__sec-title{
  font-size:var(--fs-h2);
  margin:0;
}
.psig-sobre__steps{
  list-style:none;
  margin:0;
  padding:0;
  max-width:var(--measure);
  position:relative;
}
.psig-sobre__steps::before{
  content:"";
  position:absolute;
  left:7px;
  top:.5rem;
  bottom:.5rem;
  width:2px;
  background:var(--c-border);
}
.psig-sobre__step{
  position:relative;
  padding:0 0 1.75rem 2.25rem;
}
.psig-sobre__step:last-child{
  padding-bottom:0;
}
.psig-sobre__step::before{
  content:"";
  position:absolute;
  left:0;
  top:.35rem;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--c-accent);
  border:3px solid var(--c-white);
  box-shadow:0 0 0 1px var(--c-border);
}
.psig-sobre__step-title{
  font-size:var(--fs-h3);
  margin:0 0 .25rem;
}
.psig-sobre__step-text{
  color:var(--c-slate);
  margin:0;
}

/* ---- 3. Como penso o trabalho clínico: leitura + citação ---- */
.psig-sobre__pensar-inner{
  max-width:var(--measure);
  margin-inline:auto;
}
.psig-sobre__pensar-inner .psig-sobre__sec-head{
  margin-inline:auto;
}
.psig-sobre__quote{
  margin:0 0 1.25rem;
  padding:1.25rem 1.5rem;
  background:var(--c-primary-tint);
  border-radius:var(--radius-sm);
}
.psig-sobre__quote p{
  font-size:1.2rem;
  line-height:1.5;
  color:var(--c-slate);
  margin:0 0 .75rem;
}
.psig-sobre__quote-cite{
  font-style:normal;
  font-weight:600;
  color:var(--c-primary);
  font-size:.95rem;
}
.psig-sobre__pensar-link{
  margin:0;
  font-weight:600;
}

/* ---- 4. Bloco compartilhado (refs + author) em largura de leitura ---- */
.psig-sobre__shared{
  max-width:var(--measure);
  padding-block:var(--section-y);
}

/* ---- responsivo ---- */
@media (min-width:992px){
  .psig-sobre__aside{
    position:sticky;
    top:96px;
  }
}
@media (max-width:991px){
  .psig-sobre__split{
    grid-template-columns:1fr;
  }
  .psig-sobre__portrait img{
    max-width:360px;
    margin-inline:auto;
    aspect-ratio:4/5;
  }
}
@media (max-width:768px){
  .psig-sobre__cred{
    padding:1.25rem;
  }
  .psig-sobre__quote p{
    font-size:1.08rem;
  }
}