/* ==========================================================================
   APRESENTAÇÃO COM FOTO ALTERNADA — prefixo apres-
   Duas colunas: retrato que se reveza de um lado, título display gigante e
   dois parágrafos do outro.

   Tokens usados:
     --display --sans      tipografia do projeto
     --ease --dur          curva e duração de referência
     --fg --fg-2           título e corpo, herdados do escopo de tom da seção
     --radius-media        canto do retrato
     --sec-gap             respiro vertical (via .sec-pad do core)

   O componente NÃO declara escopo de tom. A seção declara .sec-paper (como no
   markup) ou .sec-dark, e título e texto seguem. É o que permite a mesma dobra
   abrir uma página clara e fechar uma escura sem tocar no CSS.
   ========================================================================== */

.apres{
  /* Corpo do título. O original de referência roda 160px numa display
     CONDENSADA — com ela, "SOMOS?" cabe em meia coluna. Numa display de
     largura normal o mesmo corpo estoura a coluna, então o teto aqui é mais
     baixo. Projeto com fonte condensada sobe este valor no tema e o resto
     do bloco acompanha sozinho.

     Quem desenha o título é a primitiva .display-xl do core; aqui só se
     escolhe o corpo. --apres-title continua sendo o gancho público desta
     dobra, e alimenta o parafuso da primitiva. */
  --apres-title:clamp(46px,6vw,104px);
  --display-xl:var(--apres-title);

  /* Tempo que cada foto fica na tela antes da troca. Lido pelo script.
     Abaixo de 2s a dobra pisca; acima de 5s ninguém vê a segunda foto. */
  --apres-hold:3.4s;

  /* Duração da fusão entre uma foto e a seguinte. */
  --apres-fade:1.1s;
}

/* Colunas iguais: a foto não é apoio do texto, é a outra metade da dobra.
   minmax(0,1fr) e não 1fr — sem o minmax, uma palavra longa no parágrafo
   empurra a coluna e desalinha o par. */
.apres-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,80px);
  align-items:center;
}

/* ---------------------------------------------------------------- retrato */
/* margin:0 porque é um <figure> e o navegador dá 1em de cada lado — o que
   quebraria o alinhamento da coluna sem que nada no CSS explicasse por quê. */
.apres-media{
  position:relative;
  margin:0;
  aspect-ratio:5/7;
  overflow:hidden;
  border-radius:var(--radius-media);
  /* As fotos são absolutas: sem isto, o quadro nasceria com altura zero
     enquanto a primeira imagem não decodifica. */
  background:var(--rule);
}

/* As três ocupam o mesmo quadro. Só a .is-on aparece.
   A que entra carrega blur indo a zero e um resto de escala — contrato §5,
   nada entra seco. A que sai faz o caminho inverso, então em nenhum quadro
   existem duas fotos nítidas ao mesmo tempo: o que se vê é uma virando a
   outra, não um empilhamento. */
.apres-shot{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;filter:blur(12px);transform:scale(1.045);
  transition:opacity var(--apres-fade) var(--ease),
             filter var(--apres-fade) var(--ease),
             transform calc(var(--apres-fade) * 1.6) var(--ease);
}
.apres-shot.is-on{opacity:1;filter:blur(0);transform:scale(1)}

/* ---------------------------------------------------------------- texto */
.apres-col{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(22px,3vw,32px);
  min-width:0;
}

/* O título é a primitiva .display-xl do core (ver core/base.css): as seis
   linhas que moravam aqui eram as mesmas do midia/carrossel-perfis e do
   conteudo/manifesto-com-imagens, e na terceira cópia o §6 manda promover.
   Sobrou o que é só desta dobra: nada. */

.apres-body{display:flex;flex-direction:column;gap:20px}

/* 60ch é a mesma medida do .sec-lead do core, e é o teto de linha confortável.
   Na coluna padrão ela quase encosta na borda — o parágrafo enche a coluna,
   como no original. Em tema de coluna larga ela segura a linha antes de a
   leitura ficar cansativa, que é o motivo de existir. */
.apres-p{
  font-size:16px;line-height:1.5;
  color:var(--fg-2);
  max-width:60ch;
}

/* Inverter os lados: retrato à direita, texto à esquerda. Mesma convenção do
   conteudo/imagem-lista-numerada, para as duas dobras virarem pelo mesmo
   gancho quando aparecem na mesma página. */
.apres.is-flipped .apres-media{order:2}

/* ---------------------------------------------------------------- movimento reduzido */
/* Quem pediu menos movimento fica com a primeira foto, parada — o script nem
   liga o temporizador (ver script.js). A regra abaixo cobre o caso do CSS
   colado sem o script: sem transição, a foto de cima simplesmente é a que se
   vê, e a dobra continua inteira. */
@media(prefers-reduced-motion:reduce){
  .apres-shot{transition:none}
}

/* ---------------------------------------------------------------- mobile */
/* ---- Variação: em colunas com rótulo (.apres-colunas) ----------------
   A mesma dobra de apresentação lida como página de revista: a frase em
   cima, na largura da coluna, e embaixo três colunas separadas por filete —
   o retrato vertical estreito e dois blocos de texto, cada um com o próprio
   rótulo entre parênteses. Os rótulos GRUDAM no alto da tela enquanto a
   coluna deles passa, e é isso que deixa ler "(Abordagem)" ao lado do
   parágrafo mesmo quando o parágrafo começa mais acima.

   Referência: a dobra "Sobre" da Skave (skave.co). Mesmo motor de fotos —
   o script não sabe que a variação existe; ele só alterna os .apres-shot da
   raiz. Seletores com a classe da variação na frente: vencem as regras da
   dobra-padrão em qualquer ordem (§6.4), e as media queries lá embaixo
   continuam valendo para a dobra-padrão sem tocar nesta. */
.apres-colunas{
  /* A frase aqui é enunciado, não título de duas palavras: corpo menor e
     entrelinha de frase longa — os dois parafusos do .display-xl do core. */
  --apres-title:clamp(30px,3.6vw,54px);
  --display-xl-lh:1.1;
}
.apres-colunas .apres-frase{
  max-width:26ch;
  margin-block:14px clamp(40px,7vh,72px);
}
.apres-colunas .apres-grid{
  /* O retrato é a coluna estreita, os dois blocos de texto são as largas —
     o contrário da dobra-padrão, em que a foto é metade da dobra. */
  grid-template-columns:minmax(160px,.72fr) minmax(0,1.3fr) minmax(0,1fr);
  gap:0;
  /* stretch, e não center: cada bloco precisa ter a altura da linha para
     o rótulo grudado ter por onde andar. */
  align-items:stretch;
}
.apres-colunas .apres-media{aspect-ratio:9/16}
.apres-bloco{
  border-inline-start:1px solid var(--rule);
  padding-inline:clamp(18px,2.4vw,34px);
}
/* O sticky é do conjunto rótulo + parágrafo, e funciona dentro do data-rv
   do bloco: filtro não interfere em sticky (MANUAL §5). Com o parágrafo
   mais curto que a coluna, o conjunto anda até o pé dela e para. */
.apres-fixo{
  position:sticky;
  inset-block-start:calc(var(--nav-h) + 24px);
  display:grid;
  gap:14px;
}
.apres-rot{
  font-family:var(--sans);
  font-weight:400;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-muted);
}

@media(max-width:900px){
  .apres-grid{grid-template-columns:1fr;gap:clamp(28px,5vh,44px)}
  /* Empilhado, o retrato de 5/7 come a tela inteira antes do texto começar.
     Achatar para 4/5 mantém o enquadramento sem virar uma parede. */
  .apres-media{aspect-ratio:4/5}
  /* A ordem invertida é decisão de desktop: empilhado, a foto vem sempre
     primeiro — é ela que abre a dobra. */
  .apres.is-flipped .apres-media{order:0}
}

@media(max-width:560px){
  .apres{--apres-title:clamp(38px,12vw,58px)}
  .apres-body{gap:16px}
}

/* A variação em colunas tem degraus próprios, e eles vêm por último para
   ficarem juntos. A 900px o retrato ocupa a coluna da esquerda nas duas
   linhas e os blocos empilham à direita; a 560px tudo vira uma coluna e o
   filete passa de lateral a superior. O rótulo deixa de grudar: empilhado,
   cada bloco tem a altura do próprio texto e não há o que acompanhar. */
@media(max-width:900px){
  .apres-colunas .apres-grid{grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr);row-gap:28px}
  .apres-colunas .apres-media{grid-row:span 2;aspect-ratio:9/16}
  .apres-colunas .apres-fixo{position:static}
}
@media(max-width:560px){
  .apres-colunas .apres-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
  .apres-colunas .apres-media{grid-row:auto;aspect-ratio:4/5}
  .apres-bloco{
    border-inline-start:0;
    border-block-start:1px solid var(--rule);
    padding:20px 0 0;
    margin-block-start:28px;
  }
}