/* ==========================================================================
   uc-prosa — o RITMO do texto corrido (Fase 4b, 06/09/2026)
   ==========================================================================

   ==========================================================================
   1. POR QUE ISTO EXISTE, E POR QUE SO' AGORA
   ==========================================================================
   O `01-base.css` zera a margem de TODO bloco de texto numa linha so':

     p,ul,ol,dl,figure,blockquote,pre{ margin:0 }

   Ate' aqui isso estava certo e nao custava nada: o tema so' tinha componentes,
   e componente que herda margem do navegador e' componente que ninguem
   consegue posicionar. Mas a Fase 4b traz a primeira tela feita de TEXTO DE
   VERDADE -- o post do legado, ~600 paginas vivas, muitas delas com os links de
   produto inseridos em 06/09/2026 dentro do proprio conteudo. Sem ritmo
   vertical, `the_content()` sai como um bloco unico de paragrafos colados: o
   reset, que era higiene, vira defeito.

   ⛔ O RITMO NAO VOLTA PARA O `01-base.css`. La' ele valeria para o documento
   inteiro e alcancaria o miolo de todo componente -- que e' exatamente o que o
   reset foi escrito para impedir. Ele vale onde alguem DECLARA "aqui ha' texto
   corrido", e essa declaracao e' a classe `uc-prosa`, que a fundacao ja' tinha
   escolhido (`index.php` a usa desde a tarefa A).

   ==========================================================================
   2. A DONA DO PREFIXO E' ESTA FOLHA
   ==========================================================================
   O `01-base.css` tem UMA regra com `.uc-prosa` -- `.uc-prosa p{max-width}` --
   e ela e' um seletor DESCENDENTE, que pela Regra 16 nao da' posse. A posse do
   prefixo nasce aqui, no seletor de um compound so', e por isso nao ha dono
   dividido. A regra de la' fica onde esta de proposito: ela e' MEDIDA DE
   LEITURA, propriedade da base tipografica, e nao ritmo.

   ==========================================================================
   3. O IRMAO ADJACENTE, E POR QUE NAO `margin-bottom`
   ==========================================================================
   `* + *` poe espaco ENTRE irmaos e nunca depois do ultimo. Com
   `margin-bottom` o ultimo paragrafo empurraria o fim do artigo, e a distancia
   ate o proximo bloco da pagina passaria a ser "o espaco da secao MAIS o
   espaco do paragrafo" -- dois donos para um vao, que e' como se acumula o
   espacamento que ninguem sabe explicar.

   ⚠️ O CONTEUDO E' HTML IMPORTADO e vem com `<div>`, `<section>` e `<figure>`
   entre o container e o texto (medido nos posts do legado: o bloco "Leia
   Tambem" e' um `<section>` com `<h2>` e `<ul>` dentro). Por isso o seletor e'
   DESCENDENTE (`.uc-prosa * + *` seria largo demais e alcancaria item de
   lista); a saida e' aplicar aos FILHOS diretos e repetir a mesma regra um
   nivel abaixo, dentro de `section` e `div`, que sao os dois invólucros que o
   conteudo real usa. E' menos elegante do que um seletor universal e e' o que
   nao quebra em conteudo de terceiro.
   ========================================================================== */


.uc-prosa{
  color:var(--uc-ink);
  font-family:var(--uc-sans);
  font-size:var(--uc-s-0);
  line-height:var(--uc-lh-normal);
}

/* `details` E' O TERCEIRO INVOLUCRO desde 16/09/2026: a lista completa de
   provas do hub (taxonomy.php, secao 7) guarda os anos mais antigos num
   `<details>`, e sem ele nestas tres regras o titulo de cada ano colaria na
   lista do ano anterior. Mesma regra, um nivel abaixo, como section e div. */

/* O vao base entre blocos de texto. 16px e' o degrau da grade que corresponde
   a uma linha de texto no corpo (--uc-s-0 x --uc-lh-normal ~= 25,6px nao e'
   degrau; --sp-4 e' o vizinho que agrupa sem separar). */
.uc-prosa > * + *,
.uc-prosa > section > * + *,
.uc-prosa > div > * + *,
.uc-prosa > details > * + *{
  margin-top:var(--sp-4);
}

/* ⛔ TITULO NAO USA O VAO BASE. Espacamento uniforme nao agrupa nada: com 16px
   antes e depois, o `<h2>` fica no meio de dois paragrafos sem pertencer a
   nenhum. O craft cobra 8-12px DENTRO de um grupo e 32-48px ENTRE grupos -- o
   titulo pertence ao que vem DEPOIS dele, entao a distancia grande fica em
   cima e a pequena embaixo. */
.uc-prosa > h2 + *,
.uc-prosa > h3 + *,
.uc-prosa > h4 + *,
.uc-prosa > section > h2 + *,
.uc-prosa > section > h3 + *,
.uc-prosa > div > h2 + *,
.uc-prosa > div > h3 + *,
.uc-prosa > details > h2 + *,
.uc-prosa > details > h3 + *{
  margin-top:var(--sp-2);
}

.uc-prosa > * + h2,
.uc-prosa > * + h3,
.uc-prosa > section > * + h2,
.uc-prosa > section > * + h3,
.uc-prosa > div > * + h2,
.uc-prosa > div > * + h3,
.uc-prosa > details > * + h2,
.uc-prosa > details > * + h3{
  margin-top:var(--sp-6);
}

/* Titulo dentro de texto corrido nao herda o `text-wrap:balance` da base sem
   pagar por ele: a medida aqui e' de leitura, e um titulo balanceado numa
   coluna de 65ch quebra melhor do que um titulo esticado. Isto e' so' a
   MEDIDA -- tamanho e peso continuam vindo do `01-base.css`. */
.uc-prosa h2,
.uc-prosa h3,
.uc-prosa h4{
  max-width:var(--uc-medida);
}

/* Lista: a base mantem de proposito o recuo do navegador (~40px), que e' o que
   enunciado de questao precisa. Aqui o recuo e' menor e vem da grade, porque
   texto de noticia com 40px de recuo abre um degrau visivel contra a coluna
   dos paragrafos. */
.uc-prosa ul,
.uc-prosa ol{
  max-width:var(--uc-medida);
  padding-left:var(--sp-5);
}

.uc-prosa li + li{
  margin-top:var(--sp-2);
}

/* Lista aninhada e' um grupo DENTRO de um item: ela cola no item que a
   introduz, e o vao dela e' o de dentro do grupo. */
.uc-prosa li > ul,
.uc-prosa li > ol{
  margin-top:var(--sp-2);
}

/* ⚠️ O CONTEUDO IMPORTADO TRAZ `<a>` COM E SEM SUBLINHADO conforme a origem. O
   sublinhado fica: dentro de texto corrido a cor sozinha nao distingue link de
   enfase para quem nao a percebe, e essa e' a regra do craft escrita literal
   ("cor nunca e' o unico sinal"). A cor continua vindo do `01-base.css`. */
.uc-prosa a{
  text-decoration:underline;
}

.uc-prosa blockquote{
  max-width:var(--uc-medida);
  padding-left:var(--sp-4);
  border-left:var(--uc-borda) solid var(--uc-rule-forte);
  color:var(--uc-ink-2);
}

/* Figura e imagem soltas: o conteudo do legado tem as duas formas. */
.uc-prosa img{
  display:block;
  border-radius:var(--uc-r-2);
}

.uc-prosa figcaption{
  margin-top:var(--sp-2);
  font-size:var(--uc-s--1);
  color:var(--uc-ink-2);
}

/* Tabela dentro de conteudo importado nao cabe em 320px, e a saida NAO e'
   encolher a fonte: e' rolar a tabela dentro da propria caixa, para o corpo da
   pagina nunca rolar na horizontal. */
.uc-prosa table{
  display:block;
  overflow-x:auto;
}
