/* ═══════════════════════════════════════════════════════════════════════════
   Resultados de busca (search.php)

   [REESCRITO] A versão anterior tinha três problemas sérios:

   1. SELETORES GLOBAIS. Redefinia `.content-wrapper` e `.pagination` sem
      escopo nenhum. Como o arquivo só carrega em is_search(), o estrago ficava
      contido — mas `.content-wrapper{display:flex}` desmontava o grid do tema
      e `.pagination` reescrevia a paginação inteira com outra aparência: as
      bolinhas vinhas viravam retângulos cinza. A mesma paginação, dois visuais
      diferentes conforme a página.

   2. REGRA MORTA. `.sidebar{display:none}` e o bloco que a mostrava acima de
      992px apontavam para uma classe que não existe mais — a coluna passou a
      ser `.content-sidebar` quando a barra lateral foi padronizada em todo o
      site. Na prática a busca ficou sem estilo de coluna lateral.

   3. PALETA PRÓPRIA. `#c22` (que não é cor do tema), `#ddd`, `#333`, `#000`,
      raios de 10px e 5px, sombra própria. Tudo fora do design system.

   Agora: escopo em `.search-results`, tokens do tema e a paginação do tema.
   ═══════════════════════════════════════════════════════════════════════════ */

.search-results .content-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--esp-5);
}

@media (min-width: 1025px) {
	.search-results .content-wrapper {
		grid-template-columns: minmax(0, 1fr) 400px;
		align-items: start;
	}
}

.search-results .main-content { min-width: 0; }

/* ── Item de resultado ────────────────────────────────────────────────────
   Mesmo cartão de `.receita-small`, que é o padrão do tema para listagem
   compacta: imagem à esquerda, texto à direita. */
.search-results .post-list-item {
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr);
	align-items: center;
	gap: var(--esp-4);
	background: var(--cor-branco);
	border: 1px solid var(--cor-linha);
	border-radius: var(--sup-cartao-raio);
	box-shadow: var(--sombra-cartao);
	padding: var(--sup-cartao-pad);
	margin-bottom: var(--esp-4);
	/* [CLS] A miniatura tem 100x100 no CSS, mas a altura do cartão dependia
	   dela ter carregado. Sem imagem (post sem destaque) ou antes de ela
	   chegar, o cartão colapsava para a altura do texto e todos os de baixo
	   subiam. min-height trava a caixa nos dois casos. */
	min-height: calc(100px + var(--sup-cartao-pad) * 2);
	box-sizing: border-box;
}

@media (max-width: 480px) {
	.search-results .post-list-item {
		grid-template-columns: 84px minmax(0, 1fr);
		gap: var(--esp-3);
		padding: var(--esp-2);
		min-height: calc(84px + var(--esp-2) * 2);
	}
}

/* O <a> da imagem é aria-hidden (duplicata do link do título), mas continua
   sendo o contêiner: precisa de dimensão própria para não colapsar. */
.search-results .post-list-item > a {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--raio-medio);
	overflow: hidden;
	background: var(--cor-fundo-suave);
}

.search-results .post-list-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--raio-medio);
}

.search-results .post-title {
	font-family: "Baloo 2", "Baloo 2 Fallback", sans-serif;
	font-size: var(--texto-lg);
	line-height: var(--altura-titulo);
	margin: 0 0 var(--esp-2);
}

.search-results .post-title a { font-weight: 700; color: var(--cor-marca); }
.search-results .post-title a:hover { text-decoration: underline; }

.search-results .post-list-item p {
	font-size: var(--texto-sm);
	line-height: var(--altura-base);
	color: var(--cor-texto);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 480px) {
	.search-results .post-title { font-size: var(--texto-base); }
	.search-results .post-list-item p { display: none; }
}

/* ── Cabeçalho da busca ───────────────────────────────────────────────── */
.search-results header.search h1 {
	font-family: "Baloo 2", "Baloo 2 Fallback", sans-serif;
	font-size: var(--texto-4xl);
	line-height: var(--altura-titulo);
	color: var(--cor-titulo);
	margin: 0 0 var(--esp-3);
}

@media (max-width: 768px) {
	.search-results header.search h1 { font-size: var(--texto-2xl); }
}

/* [CORRIGIDO] Faltava espaço entre "N resultados encontrados." e o primeiro
   cartão — o header.search termina com padding zero por baixo e o primeiro
   .post-list-item também não tinha margin-top, então o texto encostava
   direto no card. Só o PRIMEIRO: os demais já têm respiro via
   margin-bottom de cada item. */
.search-results .post-list-item:first-of-type {
	margin-top: var(--esp-6);
}

/* A paginação NÃO é redefinida aqui: usa a do tema (`.pagination` do
   style.css), que já tem alvo de toque de 44px e a cor da marca. Ter duas
   aparências para a mesma paginação era o defeito da versão anterior. */