/* vitrine.css — layout das páginas públicas da s7 (vitrine, recortes, página do achado, avisos, busca, compartilhar).
 * Só var(--...): os valores vêm do theme.css (gerado), do base.css (gerado) e do bloco de propostas do componentes.css.
 * Este arquivo NÃO redefine componente canônico (.cl-cartao, .cl-chip, .cl-botao, .cl-campo, .cl-folha, .cl-linha-achado…):
 * só dá LAYOUT por seletor de contexto (.cl-grade--vitrine …, .cl-compartilhar …) e estiliza classes da ÁREA (cl-pagina,
 * cl-topo, cl-busca-*, cl-como-*…). Nenhuma regra aqui estiliza .cl-chip.
 * Ordem de carga: Bootstrap → theme.css → base.css → componentes.css → vitrine.css (layout_funcoes.php).
 * Larguras: abaixo de 760 px é celular; de 760 px em diante é desktop (o mesmo corte do componentes.css).
 * Contrato do HTML: projetos/site-cestinha/site-completo/sessoes/s7_BRIEF_FASE4.md §C e s7_PLANO_R1.md.
 * Dono: desenvolvedor-frontend. */

/* ==========================================================================================================
 * PROPOSTA — demanda 3, não aprovada (M: Vitrine 1c v3.dc.html:346)
 * 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-foto-grade-celular:290px;      /* (M) teto da foto do cartão da grade abaixo de 760 px, Vitrine 1c v3.dc.html:346 */
  --prop-grade-coluna-min:320px;        /* (M) coluna mínima da grade da vitrine, Vitrine 1c v3.dc.html:338 */
  --prop-destaque-coluna-min:520px;     /* (M) coluna mínima da peça de destaque, Vitrine 1c v3.dc.html:283 */
  --prop-texto-aviso:40rem;             /* (M) medida do texto dos avisos de página, Vitrine 1c v3.dc.html:150, 267 */
  --prop-busca-abrir:28rem;             /* (M) largura do botão com cara de campo no 404, Vitrine 1c v3.dc.html:275 */
}

/* ==========================================================================================================
 * Animações da área (o cl-sobe já existe no componentes.css). Respeitam prefers-reduced-motion (base.css zera).
 * ========================================================================================================== */
@keyframes cl-desce{from{transform:translateY(calc(-1 * var(--esp-4)));opacity:0}to{transform:none;opacity:1}}
/* o painel de compartilhar do desktop e o aviso "surge" do mockup: -6 px = 1,5 × --esp-1 */
@keyframes cl-surge{from{transform:translateY(calc(-1.5 * var(--esp-1)));opacity:0}to{transform:none;opacity:1}}

/* ==========================================================================================================
 * A página: coluna até --largura-pagina; blocos colados ao cabeçalho no celular, cartões inteiros no desktop
 * (Vitrine 1c v3.dc.html:67)
 * ========================================================================================================== */
.cl-pagina{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 var(--vao-secoes);padding:0}
.cl-pagina > *{min-width:0}
/* margem de parágrafo e título do reboot do Bootstrap: quem quiser espaço o declara */
.cl-pagina :where(h1,h2,p,ol){margin-top:0;margin-bottom:0}
/* a âncora #n<N> (atalho de Nº, "Mostrar mais") não fica sob o cabeçalho fixo */
.cl-pagina .cl-cartao{scroll-margin-top:calc(var(--cab-compacto) + var(--esp-3))}
@media (min-width:760px){
  .cl-pagina{gap:var(--esp-5);padding:var(--esp-5) var(--margem-pagina) 0}
}

/* v3: o .cl-titulo do base.css já é 500 com a palavra-soco (b) em 700; nada a redefinir aqui */

/* Texto solto fora de cartão (sobretítulo, nota da lista, linha do Instagram, "anteriores"): 16 px em TODA largura — o
 * clamp(16px, …, 0px) do mockup devolve o mínimo (16), e assim o texto alinha com o de dentro dos cartões da grade */
.cl-nota-lista,.cl-insta-linha,.cl-anteriores-linha{padding-inline:var(--margem-cartao)}
/* v3: o sobretítulo é pílula (largura do texto): recuo por margem, não por padding, e sem esticar na grade da seção */
.cl-secao > .cl-sobretitulo{justify-self:start;margin-inline:var(--margem-cartao)}
.cl-insta-linha,.cl-anteriores-linha{padding-top:var(--esp-2)}

/* ==========================================================================================================
 * Topo, faixa do achado e aviso de página: três blocos de papel (raio só embaixo no celular, inteiro no desktop)
 * ========================================================================================================== */
.cl-topo,.cl-faixa-achado,.cl-aviso-pagina{box-sizing:border-box;background:var(--fundo-cartao);border-radius:0 0 var(--raio-cartao) var(--raio-cartao)}
.cl-topo{display:grid;gap:var(--esp-4);padding:var(--esp-2) var(--margem-cartao) var(--margem-cartao)}
.cl-topo-texto{display:grid;gap:var(--esp-2);max-width:var(--prop-texto-topo)}
/* sem o @ do Instagram em cima (recorte), o título ganha o respiro que o link dava */
.cl-topo-texto > .cl-titulo-vitrine:first-child{margin-top:var(--esp-2)}
.cl-topo-frase{text-wrap:pretty}
.cl-topo-frase--vazia{font-size:var(--tam-corpo)}
/* link DENTRO de frase: em linha, sem a altura de alvo do .cl-link (WCAG 2.5.8 isenta o link em texto), senão abre vão entre as linhas */
.cl-topo-frase .cl-link{display:inline;min-height:0;font-size:inherit}

.cl-faixa-achado{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--esp-5);padding:var(--esp-1) var(--margem-cartao) var(--esp-3)}
.cl-faixa-frase{flex-basis:100%;text-wrap:pretty}

.cl-aviso-pagina{display:grid;justify-items:start;gap:var(--esp-4);padding:var(--esp-5) var(--margem-cartao)}
.cl-aviso-pagina > .cl-nome,.cl-aviso-pagina > .cl-titulo,.cl-aviso-pagina > .cl-apoio{max-width:var(--prop-texto-aviso);text-wrap:balance}
.cl-aviso-pagina > .cl-apoio{font-size:var(--tam-corpo);text-wrap:pretty}
.cl-pagina--nicho .cl-aviso-pagina{gap:var(--esp-5)}
/* sem resultado: bloco DEPOIS do topo, sem h1 (o h1 da página continua no topo) */
.cl-aviso-pagina--resultado{border-radius:var(--raio-cartao)}
.cl-aviso-pagina-status{max-width:none;color:var(--oliva);font-size:var(--tam-corpo);font-weight:var(--peso-forte)}
/* o botão com a cara do campo de busca (404): abre o painel; sem JS é o link para /busca */
.cl-busca-abrir{box-sizing:border-box;display:flex;align-items:center;gap:var(--esp-3);width:100%;max-width:var(--prop-busca-abrir);height:var(--alvo-minimo);
  padding:0 var(--esp-4);border:var(--fio) solid var(--campo-borda);border-radius:var(--raio-botao);background:var(--campo-fundo);color:var(--carvao);
  font-family:var(--fonte);font-size:var(--tam-corpo);font-weight:var(--peso-medio);text-align:left;text-decoration:none;cursor:text}
.cl-busca-abrir:hover{color:var(--carvao);text-decoration:none}
.cl-busca-abrir img{flex:none;width:var(--prop-icone);height:var(--prop-icone)}

/* a linha de filtro: rótulo + "+N para o lado" (o JS mede e escreve) + chips rolando de lado */
.cl-filtro{display:grid;gap:var(--esp-1)}
.cl-filtro-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--esp-3)}
.cl-filtro-cab-fim{display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:0 var(--esp-3);margin-left:auto}
/* "Outro número? Buscar" (U2) à vista junto da dica: link de texto com o alvo de toque do .cl-link */
.cl-filtro-buscar{white-space:nowrap}
.cl-filtro-dica{color:var(--oliva);font-weight:var(--peso-forte);white-space:nowrap}
.cl-filtro-dica[hidden]{display:none}
/* as bordas da linha rolável acompanham o respiro do bloco (16 no celular, 32 no desktop) */
.cl-topo .cl-chips{margin-inline:calc(-1 * var(--margem-cartao));padding-inline:var(--margem-cartao)}
.cl-filtro-limpar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-1) var(--esp-5);padding-top:var(--esp-2);border-top:var(--fio) solid var(--fio-cor)}

@media (min-width:760px){
  .cl-topo,.cl-faixa-achado,.cl-aviso-pagina{border-radius:var(--raio-cartao)}
  .cl-topo{padding-inline:var(--margem-cartao-desktop);padding-bottom:var(--margem-cartao-desktop)}
  .cl-faixa-achado{padding-inline:var(--margem-cartao-desktop)}
  .cl-aviso-pagina{padding:var(--esp-5) var(--margem-cartao-desktop) var(--esp-6)}
  .cl-aviso-pagina--resultado{padding:var(--esp-5) var(--margem-cartao-desktop)}
  .cl-topo .cl-chips{margin-inline:calc(-1 * var(--margem-cartao-desktop));padding-inline:var(--margem-cartao-desktop)}
}

/* ==========================================================================================================
 * Seções e grades (DC-6)
 * ========================================================================================================== */
.cl-secao{display:grid;gap:var(--esp-3)}
.cl-secao--destaque[data-cl-lugar="alternativa"]{padding-top:var(--esp-4)}
.cl-grade{display:grid;gap:var(--vao-cartoes) var(--esp-5)}

/* Destaque ("Do último post", "Uma alternativa"): peça dupla quando cabem duas colunas de 520 px */
.cl-grade--destaque{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--prop-destaque-coluna-min)),1fr))}

/* Grade da vitrine (DC-6): layout por contexto. Não muda a anatomia do .cl-cartao da s4: só a direção do cartão DENTRO da
 * grade, para o botão e o preço ficarem na mesma altura em cada linha (o corpo estica, a nota cresce, o preço desce).
 * Candidato a variante de grade do cartão no componentes.css. */
.cl-grade--vitrine{grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--prop-grade-coluna-min)),1fr))}
.cl-grade--vitrine.cl-grade--poucos{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--prop-grade-coluna-min)),1fr))}
.cl-grade--vitrine > .cl-cartao{flex-direction:column;flex-wrap:nowrap}
.cl-grade--vitrine .cl-cartao-lado{flex:none}
.cl-grade--vitrine .cl-cartao-corpo{flex:1 1 auto;display:flex;flex-direction:column;align-content:normal;padding-inline:var(--margem-cartao)}
.cl-grade--vitrine .cl-cartao-nota{flex:1 1 auto;align-content:start}
/* a foto que falhou (caixa "A foto não carregou.", aspect 4/5) respeita o MESMO teto da foto, senão o cartão cresce */
.cl-grade--vitrine .cl-cartao-foto .cl-foto-falhou-texto{box-sizing:border-box;width:100%;max-height:var(--prop-foto-max)}
@media (max-width:759.98px){
  .cl-grade--vitrine .cl-cartao-foto > a > img[data-cl-foto]{max-height:var(--prop-foto-grade-celular)}
  .cl-grade--vitrine .cl-cartao-foto .cl-foto-falhou-texto{max-height:var(--prop-foto-grade-celular)}
}
/* na grade a margem do texto do cartão fica em 16 também no desktop (o mockup); a s4 troca para 32 acima de 760 */
@media (min-width:760px){
  .cl-grade--vitrine .cl-cartao-corpo{padding-inline:var(--margem-cartao)}
  .cl-grade{row-gap:var(--esp-5)}
}

.cl-mais{display:grid;justify-items:center;gap:var(--esp-2);padding:var(--esp-4) var(--margem-cartao) 0}

/* Outros achados (miniaturas) */
.cl-outros{display:grid;gap:var(--esp-4);padding:var(--esp-5) var(--margem-cartao) 0}
.cl-outros-titulo{font-size:var(--tam-nome-produto)}

/* Como funciona: bloco próprio, só texto, depois dos achados (DS ComoFunciona.jsx) */
.cl-como{display:grid;gap:var(--esp-4);margin-top:calc(var(--vao-secoes) - var(--vao-cartoes));padding:var(--esp-5) var(--margem-cartao);background:var(--fundo-cartao);border-radius:var(--raio-cartao)}
.cl-como-passos{display:grid;align-items:start;gap:var(--esp-4);margin:0;padding:0;list-style:none}
.cl-como-passos > li{display:grid;align-content:start;gap:var(--esp-1)}
@media (min-width:760px){
  .cl-como{margin-top:calc(var(--vao-secoes) - var(--esp-5));padding:var(--esp-7) var(--margem-cartao-desktop)}
  .cl-como-passos{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-6)}
}

/* galeria da página do achado: as miniaturas viram botões (o vitrine.js põe role, tabindex e aria-pressed) */
.cl-galeria-mini[role="button"]{cursor:pointer}

/* ==========================================================================================================
 * Busca: painel que DESCE do topo (Vitrine 1c v3.dc.html:430-527). Componente da área; abre por siteFolha.
 * ========================================================================================================== */
.cl-busca{box-sizing:border-box;position:fixed;inset:0 0 auto 0;width:100%;max-width:var(--largura-pagina);max-height:calc(100vh - var(--esp-5));margin:0 auto;overflow-y:auto;
  padding:var(--esp-3) var(--margem-cartao) var(--esp-5);border:0;border-radius:0 0 var(--raio-cartao) var(--raio-cartao);background:var(--fundo-folha);color:var(--carvao)}
.cl-busca:not([open]){display:none}
.cl-busca[open]{display:block}
/* o véu é o elemento irmão .cl-folha-veu (o ::backdrop não herda variável no Safari até 17.3) */
.cl-busca::backdrop{background:transparent}
@media (prefers-reduced-motion:no-preference){.cl-busca[open]{animation:cl-desce var(--transicao-folha)}}
.cl-busca :where(p){margin-top:0;margin-bottom:0}

.cl-busca-form{display:grid;gap:var(--esp-4)}
.cl-busca-linha{display:flex;align-items:center;gap:var(--esp-2)}
.cl-busca-linha > .cl-botao{flex:none}
.cl-busca-campo{position:relative;flex:1 1 auto;min-width:0}
/* campo de busca = componente da ÁREA (R1.4); candidato a "campo público grande" no componentes.css */
.cl-busca-entrada{box-sizing:border-box;display:block;width:100%;height:var(--alvo-minimo);padding:0 calc(var(--alvo-icone) + var(--esp-2)) 0 var(--esp-4);
  border:var(--fio) solid var(--campo-borda);border-radius:var(--raio-botao);background:var(--campo-fundo);color:var(--carvao);
  font-family:var(--fonte);font-size:var(--tam-corpo);font-weight:var(--peso-medio);box-shadow:none;-webkit-appearance:none;appearance:none}
.cl-busca-entrada::-webkit-search-cancel-button,.cl-busca-entrada::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.cl-busca-campo .cl-botao-icone{position:absolute;top:50%;right:var(--fio);transform:translateY(-50%)}
.cl-busca-campo .cl-botao-icone[hidden]{display:none}

.cl-busca-resultado{display:grid;gap:var(--esp-4)}
.cl-busca-bloco{display:grid;gap:0}
.cl-busca-bloco > * + *{margin-top:var(--esp-4)}
/* rótulo logo acima de uma lista ou de uma linha de chips: o respiro é do rótulo, não do vão entre blocos */
.cl-busca-bloco > .cl-miuda,.cl-busca-bloco [data-cl-busca-categorias] > .cl-miuda{padding-bottom:var(--esp-2)}
.cl-busca-bloco > .cl-miuda + [data-cl-busca-linhas]{margin-top:0}
.cl-busca-titulo{color:var(--oliva);font-size:var(--tam-corpo);font-weight:var(--peso-forte);line-height:var(--entrelinha-corpo)}
.cl-busca-bloco[data-cl-busca="procurando"] > * + *{margin-top:var(--esp-1)}
.cl-busca-bloco[data-cl-busca="procurando"] > .cl-miuda{padding-bottom:0}
.cl-busca-sugestoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-1) var(--esp-3)}
.cl-busca-sugestoes[hidden]{display:none}
.cl-busca-sugestoes .cl-botao--texto{min-height:var(--alvo-icone)}
/* "Ir para o Nº N" (Vitrine 1c v3.dc.html:461-464): com o índice, a MESMA linha da lista (componente intacto, um só link,
 * sem caixa por volta — a caixa colidia com o separador e o foco da linha, designer r3); sem o índice, o link de texto. */
.cl-busca-ir-link{display:inline-flex;align-items:center;min-height:var(--alvo-minimo);color:var(--oliva);font-size:var(--tam-corpo);font-weight:var(--peso-forte);text-decoration:none}
.cl-busca-ir-link:hover{color:var(--carvao);text-decoration:underline;text-decoration-thickness:var(--fio)}
[data-cl-busca-linhas]{display:grid}
[data-cl-busca-linhas][hidden]{display:none}
/* as linhas de chips da busca quebram em vez de rolar de lado (Vitrine 1c v3.dc.html:446) */
.cl-busca-bloco .cl-chips{flex-wrap:wrap;margin:0;padding:0;overflow:visible}
/* a busca sem JS (/busca): o campo e o botão "Buscar" no topo, e os mesmos blocos do painel em lista, sem rolagem de lado */
.cl-busca-form--pagina{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--esp-2)}
.cl-busca-lista{display:grid}
.cl-secao[data-cl-lugar="busca"] > :is(.cl-miuda,.cl-busca-lista,.cl-busca-sugestoes,.cl-chips){margin-inline:0;padding-inline:var(--margem-cartao)}
.cl-secao[data-cl-lugar="busca"] > .cl-chips{flex-wrap:wrap;overflow:visible}

/* ==========================================================================================================
 * Compartilhar: a folha da s4 (.cl-folha) com os nomes da área (Vitrine 1c v3.dc.html:529-551, FolhaCompartilhar.jsx).
 * Abaixo de 760 é folha de baixo com véu; de 760 em diante é um painel junto do botão (o vitrine.js escreve top/left).
 * ========================================================================================================== */
.cl-compartilhar .cl-folha-painel{gap:var(--esp-3)}
.cl-folha.cl-compartilhar{padding-bottom:var(--esp-6)}
.cl-compartilhar [hidden]{display:none}
.cl-compartilhar-manual{display:grid;gap:var(--esp-2)}
.cl-compartilhar-alerta{color:var(--oliva);font-weight:var(--peso-forte)}
.cl-compartilhar-url{overflow-wrap:anywhere}
@media (min-width:760px){
  .cl-folha.cl-compartilhar{padding-bottom:var(--esp-4);border:var(--fio) solid var(--pedra)}
  /* o véu continua existindo (o toque fora fecha), só transparente */
  .cl-compartilhar + .cl-folha-veu{background:transparent}
}
@media (min-width:760px) and (prefers-reduced-motion:no-preference){
  .cl-folha.cl-compartilhar[open]{animation:cl-surge var(--transicao-folha)}
}