/* paginas.css — layout das páginas da s9: /anteriores e /privacidade.
 * Só var(--...): os valores vêm do theme.css (gerado), do base.css (gerado) e do bloco PROPOSTA abaixo.
 * Este arquivo NÃO redefine componente canônico (.cl-titulo, .cl-link, .cl-apoio, .cl-linha-achado…) fora do escopo
 * .cl-paginas*: só dá LAYOUT por seletor de contexto e estiliza classes da ÁREA (cl-paginas*, cl-anteriores-grade).
 * Ordem de carga: Bootstrap → theme.css → base.css → componentes.css → paginas.css (layout_funcoes.php, css => ['paginas']).
 * Larguras: abaixo de 760 px é celular; de 760 px em diante é desktop (a quebra do mockup e do componentes.css).
 * Contrato do HTML: projetos/site-cestinha/site-completo/sessoes/s9_BRIEF_FASE4.md.
 * Mockup: projetos/site-cestinha/mockup/handoff/Site Restante.dc.html (l.58-133, 255-257).
 * Dono: desenvolvedor-frontend. */

/* ==========================================================================================================
 * PROPOSTA — demanda 3, não aprovada (M: Site Restante.dc.html)
 * Números do mockup aceito que o design system v3 ainda não tem como token. Só --prop-*, sem cor. Quando o afiliados
 * aprovar, cada um vira token do design system (ou sobe para o bloco de propostas do componentes.css) e sai daqui.
 * ========================================================================================================== */
:root{
  --prop-entrelinha-texto:1.5;   /* (M) entrelinha do texto da privacidade, Site Restante.dc.html:85 */
  --prop-entrelinha-nome:1.25;   /* (M) entrelinha do nome na linha do anterior, Site Restante.dc.html:73 */
  --prop-recuo-lista:22px;       /* (M) recuo das listas da privacidade, Site Restante.dc.html:92 */
  --prop-vao-lista:6px;          /* (M) vão entre itens das listas, Site Restante.dc.html:92 */
  --prop-fim-texto:40px;         /* (M) respiro de baixo do texto da privacidade, Site Restante.dc.html:84 */
}

/* ==========================================================================================================
 * A página: coluna até --largura-pagina dentro do <main id="conteudo">; celular de borda a borda, desktop com margem
 * (Site Restante.dc.html:59, 256). O .cl-paginas é um div, não o <main>.
 * ========================================================================================================== */
.cl-paginas{box-sizing:border-box;display:grid;gap:var(--vao-cartoes);width:100%;max-width:calc(var(--largura-pagina) + 2 * var(--margem-pagina));
  margin:0 auto;padding:0 0 var(--vao-secoes)}
.cl-paginas > *{min-width:0}
@media (min-width:760px){
  .cl-paginas{gap:var(--esp-5);padding:var(--esp-5) var(--margem-pagina) var(--vao-secoes)}
}

/* v3: o h1 das duas páginas é o .cl-titulo do base.css (500, palavra-soco <b> em 700); sem regra própria */

/* ==========================================================================================================
 * Topo de /anteriores e texto da privacidade: papel colado ao cabeçalho, raio só embaixo no celular, inteiro no desktop.
 * Mesma forma e mesmos valores do .cl-topo da s7 (vitrine.css:57): a cópia segue como está na s12 e o destino é a s13 (plano R1, "FORA").
 * ========================================================================================================== */
.cl-paginas-topo,.cl-paginas-texto{box-sizing:border-box;background:var(--fundo-cartao);border-radius:0 0 var(--raio-cartao) var(--raio-cartao)}
.cl-paginas-topo{display:grid;gap:var(--esp-2);padding:var(--esp-4) var(--margem-cartao) var(--esp-5)}
.cl-paginas-topo .cl-apoio{margin:0;text-wrap:pretty}
/* o link não estica no grid: a área de toque é a do texto (equivale ao width:fit-content do mockup) */
.cl-paginas-topo .cl-link{justify-self:start}
@media (min-width:760px){
  .cl-paginas-topo,.cl-paginas-texto{border-radius:var(--raio-cartao)}
  .cl-paginas-topo{padding-inline:var(--margem-cartao-desktop)}
}

/* ==========================================================================================================
 * Grade de /anteriores: 1 coluna no celular, 2 no desktop (Site Restante.dc.html:67, 257)
 * ========================================================================================================== */
.cl-anteriores-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vao-cartoes)}
@media (min-width:760px){
  .cl-anteriores-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-4)}
}

/* ==========================================================================================================
 * SOBE para componentes.css na Integração (variante do componente da s4: .cl-linha-achado--anterior)
 * Os 8 deltas da linha do anterior contra o componente (mockup Site Restante.dc.html:69-77). Único consumidor: /anteriores.
 * Seletores com 3 classes para vencer o componentes.css (0,2,0) sem !important.
 * ========================================================================================================== */
.cl-anteriores-grade .cl-linha-achado--anterior{box-sizing:border-box;align-items:center;gap:var(--vao-cartoes);
  padding:var(--esp-3) var(--margem-cartao);border-top:0;background:var(--fundo-cartao);border-radius:var(--raio-cartao);
  outline-offset:calc(-1 * var(--foco-largura))}
.cl-anteriores-grade .cl-linha-achado--anterior .cl-linha-achado-foto{opacity:1}
.cl-anteriores-grade .cl-linha-achado--anterior .cl-nome{font-size:var(--tam-corpo);line-height:var(--prop-entrelinha-nome);letter-spacing:0;overflow-wrap:anywhere}
@media (min-width:760px){
  .cl-anteriores-grade .cl-linha-achado--anterior{padding-inline:var(--margem-cartao-desktop);outline-offset:var(--foco-recuo)}
}

/* ==========================================================================================================
 * Texto da privacidade: reset do Bootstrap no escopo .cl-paginas-texto (code rosa, strong 700, margens de fábrica)
 * ========================================================================================================== */
.cl-paginas-texto{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vao-cartoes);align-content:start;
  padding:var(--esp-5) var(--margem-cartao) var(--prop-fim-texto);line-height:var(--prop-entrelinha-texto)}
.cl-paginas-texto > *{max-width:var(--largura-texto);min-width:0}
.cl-paginas-texto .cl-titulo{margin:0 0 var(--esp-1)}
.cl-paginas-texto h2{margin:var(--esp-4) 0 0;font-size:var(--tam-corpo);font-weight:var(--peso-forte);color:var(--oliva);
  line-height:var(--prop-entrelinha-texto);letter-spacing:0}
.cl-paginas-texto p,.cl-paginas-texto ul{margin:0}
.cl-paginas-texto ul{display:grid;gap:var(--prop-vao-lista);padding-left:var(--prop-recuo-lista)}
.cl-paginas-texto strong,.cl-paginas-texto b{font-weight:var(--peso-forte)}
.cl-paginas-texto code{padding:0;background:none;font-family:var(--fonte);font-size:inherit;font-weight:var(--peso-forte);color:inherit}
.cl-paginas-texto a{overflow-wrap:anywhere}
@media (min-width:760px){
  .cl-paginas-texto{padding-inline:var(--margem-cartao-desktop)}
}