/* ==================================================================
   02 · DEFINICAO: o verbete  (widget fp-definicao)

   Copiado do lab (lab/especialista/secoes/definicao/definicao.css), que
   fica congelado como referencia aprovada.

   Navy. E a resposta direta a uma pergunta: o primeiro paragrafo e a
   definicao, em corpo grande; o segundo, a nota, na metade da direita. Um
   fio separa a pergunta da resposta.

   Desktop com cortina (.cortina no html e .fp-cortina-definicao no
   involucro, postas pelo JS): a secao sobe por cima do hero e, quando
   assenta, o palco fica preso por mais 70% de uma tela enquanto as
   palavras da definicao acendem, do apagado ao branco. No fim, a nota
   aparece. Sem cortina (celular, tela baixa, chave desligada, editor) ou
   com movimento reduzido: tudo aceso, altura natural.
   ================================================================== */

.definicao{
  position:relative;
  background:var(--navy);
  color:var(--paper);
}
.definicao__palco{
  display:flex;
  align-items:center;
  min-height:100svh;
  padding-block:calc(var(--topo) * .75) clamp(3rem,8vh,5rem);
}
.definicao__caixa{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gutter);
}

.definicao__h2{
  grid-column:1 / span 10;
  max-width:14em;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.5rem,min(5vw,8.4vh),5.5rem);
  line-height:.94;
  letter-spacing:-.04em;
  text-wrap:balance;
}

/* A definicao: fio em cima (pergunta -> resposta) e corpo grande, limitado
   tambem pela altura para caber no palco em tela baixa. */
.definicao__verbete{
  position:relative;
  grid-column:1 / span 11;
  margin-top:clamp(2rem,5vh,3.5rem);
  padding-top:clamp(1.5rem,3.6vh,2.5rem);
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.5rem,min(2.5vw,4.6vh),2.75rem);
  line-height:1.28;
  letter-spacing:-.012em;
  color:var(--paper);
  text-wrap:pretty;
}
.definicao__verbete::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:var(--rule-dark-strong);
  transform:scaleX(var(--fio,1));
  transform-origin:left;
}

.definicao__nota{
  grid-column:7 / -1;
  max-width:48ch;
  margin-top:clamp(1.5rem,4vh,2.75rem);
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--fg-2);
  text-wrap:pretty;
}

/* Cortina: o involucro sobe por cima do hero preso (a regra do hero esta
   em hero.css). Presa: a secao ganha 70% de uma tela e o palco fica no
   lugar enquanto as palavras acendem. */
.cortina .fp-cortina-definicao{position:relative;z-index:2}
.cortina .fp-cortina-definicao .definicao{height:170svh}
.cortina .fp-cortina-definicao .definicao__palco{position:sticky;top:0;height:100svh;min-height:0}

@media (max-width:1099.98px){
  .definicao__palco{min-height:0;padding-block:clamp(4.5rem,14vw,7rem)}
  .definicao__caixa{grid-template-columns:minmax(0,1fr)}
  .definicao__h2,.definicao__verbete,.definicao__nota{grid-column:1}
  .definicao__h2{font-size:clamp(2.25rem,9.5vw,4rem)}
  .definicao__verbete{font-size:clamp(1.375rem,5.6vw,2rem);line-height:1.3}
}