/* ==========================================================================
   FRASE COM IMAGENS — prefixo frase-
   Manifesto de três linhas em caixa alta, com retângulos de foto ocupando o
   lugar de uma palavra dentro da linha.

   Tokens usados:
     --display          a face do manifesto
     --fg --fg-muted    tinta da frase e uma das cores de hover
     --accent --accent-2  as outras duas cores de hover
     --radius-media     canto das imagens de dentro da frase
     --sec-gap          respiro vertical, por multiplicação
     --ease             curva do projeto

   Sem JavaScript e sem @keyframes: a entrada é o data-rv do core e o resto
   é uma transição de cor.
   ========================================================================== */

.frase{
  /* Corpo da frase. Calibrado pela LARGURA da linha, não pelo corpo da
     letra: o original roda 36px numa display condensada e enche 69% da
     coluna, e é essa fração que faz o manifesto parecer manifesto. Numa
     face de largura normal, 69% da mesma coluna pede ~45px. Trocar a
     display do tema muda a conta — o que se persegue é a fração, não o
     número. */
  --frase-corpo:clamp(22px,3.1vw,46px);
  /* Alimenta os dois parafusos da primitiva .display-xl do core. A
     entrelinha aqui é MUITO maior que o .82 padrão dela: lá o título tem
     uma ou duas palavras e as linhas se encaixam; aqui são três frases
     inteiras, e apertar a entrelinha faria as imagens de uma linha
     encostarem no texto da outra. */
  --display-xl:var(--frase-corpo);
  --display-xl-lh:1.25;

  /* FAIXA, NÃO DOBRA. Menos da metade do respiro de uma seção normal, e
     ainda assim derivado de --sec-gap — que continua sendo a fonte única do
     ritmo (contrato §4). Esta seção é pontuação entre duas dobras: com o
     respiro cheio ela vira uma dobra por conta própria e perde a função. */
  padding-block:calc(var(--sec-gap) * .45);
}


/* O resto do desenho do título é a primitiva .display-xl do core. Sobra aqui
   só o que é desta dobra: o texto centrado. O manifesto é uma declaração no
   meio da página — alinhado à esquerda ele vira parágrafo. */
.frase-txt{text-align:center}

/* A linha existe para o data-rv ter em que pegar: o reveal é por linha, e
   sem este invólucro ele seria por frase inteira ou por palavra solta. */
.frase-linha{display:inline-block}

/* ---------------------------------------------------------------- palavra */
/* Cor no hover, e nada mais. Não vira link, não muda de peso e não desloca:
   a frase é um bloco de tipografia, e qualquer movimento aqui faria a linha
   inteira dançar. cursor:default porque não é clicável — sem isso o ponteiro
   vira barra de texto e sugere seleção. */
.frase-palavra{
  cursor:default;
  transition:color .15s var(--ease);
}
.frase-palavra:hover{color:var(--frase-cor,var(--accent))}

/* ---------------------------------------------------------------- imagem */
/* A imagem tem o tamanho de uma palavra e se alinha pelo MEIO da linha, não
   pela linha de base — align-middle é o que a faz parecer parte da frase e
   não um anexo pendurado nela.

   As medidas são em em de propósito: presas ao corpo do texto, a imagem
   cresce e encolhe junto com a frase em qualquer tela, sem uma segunda
   media query para acertar. 1.95em × .86em é a proporção do original
   (72 × 32) traduzida para o corpo da letra. */
.frase-img{
  display:inline-block;
  vertical-align:middle;
  width:2em;height:.89em;
  object-fit:cover;
  border-radius:var(--radius-media);
  margin-inline:.22em;
  /* A imagem entra no meio de uma frase em caixa alta: colorida demais ela
     rouba a linha. O dessaturado parcial deixa a foto legível e ainda assim
     subordinada ao texto. */
  filter:grayscale(.35);
  /* Sem isto, o descer da imagem empurra a entrelinha e a terceira linha
     descola das outras duas. */
  position:relative;top:-.04em;
}

/* ---------------------------------------------------------------- movimento reduzido */
/* A entrada é do core e o core já a desliga. O que sobra aqui é a cor do
   hover, que não é movimento — fica. */

/* ---------------------------------------------------------------- mobile */
/* As três linhas continuam sendo três em qualquer tela: são inline-block, e
   inline-block quebra POR DENTRO quando não cabe. Uma linha do manifesto
   virando duas em celular é o comportamento certo — o que não pode é a
   segunda linha subir para o lado da primeira, e é isso que o <br> impede.
   Por isso não há media query mexendo nas quebras. */

@media(max-width:560px){
  /* Em corpo pequeno o vão da imagem pesa mais que em corpo grande: os mesmos
     .22em abrem um buraco visível no meio da frase. */
  .frase-img{margin-inline:.14em}
}