/* ==========================================================================
   Lista de novidades
   Usada na home e na aba Noticias da pagina do jogo: os dois mostram a mesma
   lista (partes/novidade.php), entao o estilo mora aqui, num lugar so.
   ========================================================================== */

/* Novidades --------------------------------------------------------------------- */

.blizi-novidades { display: grid;}
.blizi-novidade {
	display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: center;
	margin: 0 0 20px 0;
}
/*
 * No card largo o texto deita sobre a arte, como no destaque da home: arte e
 * corpo dividem a mesma celula da grade e o corpo, que vem depois na marcacao,
 * pinta por cima.
 */
.blizi-novidade--larga { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; }
/*
 * A altura do card e a maior entre a foto em 16:9 e o texto. Antes a foto tinha
 * aspect-ratio 16/9 e era esticada pela grade: quando o texto (padding de 60px
 * mais um titulo de varias linhas) passava da altura da foto, a linha crescia,
 * a foto esticava junto e, por causa da proporcao, recalculava a LARGURA a
 * partir da altura — ficando mais larga que o proprio card em tela estreita.
 * Agora a proporcao mora num espacador invisivel que so garante a altura minima,
 * e a foto, sem proporcao propria, preenche o que a linha der.
 */
/* align-self: start e obrigatorio no espacador: esticado na vertical ate a altura
   da linha, o aspect-ratio recalcularia a largura (202px de altura viram 358 de
   largura) e o card ganhava rolagem horizontal em tela estreita. */
/* Altura minima fixa de 312px, em qualquer largura (antes era a proporcao 16:9).
   Sem aspect-ratio, o espacador nao tem mais como recalcular largura a partir
   da altura. Se o texto passar de 312px a linha cresce e a foto acompanha. */
.blizi-novidade--larga::before {
	content: ""; grid-area: 1 / 1; align-self: start; width: 100%;
	height: 312px; pointer-events: none;
}
.blizi-novidade--larga .blizi-novidade__imagem { grid-area: 1 / 1; aspect-ratio: auto; min-width: 0; position: relative; }
/* A <img> sai do fluxo: no fluxo normal ela contribuiria com a altura natural
   dela (16:9 da largura) para o tamanho da linha, e o card nunca ficaria em 312px. */
.blizi-novidade--larga .blizi-novidade__imagem img,
.blizi-novidade--larga .blizi-novidade__imagem picture,
.blizi-novidade--larga .blizi-novidade__vazia { position: absolute; inset: 0; width: 100%; height: 100%; }
.blizi-novidade--larga .blizi-novidade__corpo {
	/*
	 * Unico lugar do tema onde a cor do texto e fixa: a paleta nao alcanca a
	 * foto, entao sobre imagem o texto e claro sempre. Redefinir os tokens aqui
	 * faz a etiqueta e o botao de ler depois acompanharem sem regra propria.
	 */
	--blizi-texto: #fff;
	--blizi-texto-apoio: rgba(255, 255, 255, .78);
	--blizi-borda: rgba(255, 255, 255, .38);

	grid-area: 1 / 1; align-self: end;
	/*
	 * Acima da foto. No hover a foto ganha transform (zoom), que a promove a
	 * uma camada propria e a pinta por cima de tudo que nao tem posicao — o
	 * texto sumia. Com position + z-index o corpo fica sempre por cima.
	 */
	position: relative; z-index: 1;
	padding: 60px 18px 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .5) 55%, transparent 100%);
	border-radius: 0 0 var(--blizi-arredondamento) var(--blizi-arredondamento);
}
.blizi-novidade--larga .blizi-novidade__tempo { opacity: 1; }
/* Texto do card largo alinhado à direita (título, etiqueta e a linha do tempo com o salvar). */
.blizi-novidade--larga .blizi-novidade__corpo { text-align: right; }
.blizi-novidade--larga .blizi-novidade__rodape { justify-content: flex-end; }
/* Fora do celular o título do card largo é maior que o das linhas comuns (o celular segue com 1.25rem, mais abaixo). */
@media (min-width: 601px) {
	.blizi-novidade--larga .blizi-novidade__titulo { font-size: 1.75rem; line-height: 1.15; letter-spacing: -.03em; }
}
/* Mesma razao da capa da materia: a etiqueta do jogo e escura por padrao e
   sobre a foto precisa ser clara. */
.blizi-novidade--larga .blizi-etiqueta-jogo { color: #fff; border-color: rgba(255, 255, 255, .55); }
/*
 * 210x124 no card pequeno. A proporcao vai no lugar da altura fixa para a arte
 * continuar certa quando a coluna encolhe no celular.
 */
.blizi-novidade__imagem {
	display: block; aspect-ratio: 210 / 124; border-radius: var(--blizi-arredondamento); overflow: hidden;
	background: var(--blizi-moldura); line-height: 0;
	position: relative;
}

/*
 * Mesmo efeito de imagem rebaixada do destaque, com valores um pouco mais curtos
 * porque a miniatura e bem menor (210px contra 640px): o halo largo do destaque
 * escureceria a foto toda. Camada por cima da <img> — uma sombra inset da propria
 * caixa ficaria por baixo dela — e sem capturar o mouse.
 */
.blizi-novidade__imagem::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 0.17)
}
.blizi-novidade__imagem img { 
	width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease-in-out;     
	overflow: clip;  backface-visibility: hidden;
    transition: all .2s ease-in-out;
    -webkit-backface-visibility: hidden;
}
.blizi-novidade:hover .blizi-novidade__imagem img { transition: opacity .3s ease-in-out; opacity: .5;}
.blizi-novidade__vazia {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	font-size: 24px; color: var(--blizi-texto-apoio); opacity: .35;
}
.blizi-novidade__corpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.blizi-novidade__tempo {
	margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .1em; color: var(--blizi-texto-apoio); opacity: .75;
}
.blizi-novidade__titulo {
	margin: 0; font-size: 1.125rem; font-weight: 700;
	line-height: 1; letter-spacing: -.03em;
}
/* O degrau de desktop vale para os dois tamanhos de card: a diferenca entre
   eles e a largura da arte, nao o corpo do texto. Fica junto da regra base, e
   nao na secao responsiva la embaixo, porque as outras consultas sao de
   max-width e uma delas passaria na frente desta no meio do caminho. */
@media (min-width: 1024px) {
	.blizi-novidade__titulo { font-size: 1.275rem; line-height: 1.1; }
}
/* A transicao mora no link, que e quem troca de cor: em `all` no titulo ela
   tambem pegaria o reflow de font-size entre os degraus. */
.blizi-novidade__titulo a { color: var(--blizi-texto); transition: color .2s ease-in-out; }
.blizi-novidade__titulo a:hover { color: var(--blizi-secundaria); text-decoration: none; }
.blizi-novidade__rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.blizi-carregar-mais { margin-top: 26px; }

/*
 * Celular (ate 600px): a lista vira um feed de leitura rapida.
 *
 * Antes cada item empilhava foto de 200px + texto (~330px de altura): cabia um e meio por
 * tela e todos pareciam iguais. Agora o item comum e uma linha compacta — TEXTO a esquerda
 * (etiqueta do jogo, titulo, tempo e salvar) e uma MINIATURA quadrada a direita, como nos
 * apps de noticia —, com filete entre elas; cabem 4-5 por tela. O card largo a cada quatro
 * continua sendo o respiro visual do feed, so um pouco mais baixo. A marcacao nao muda: a
 * ordem visual sai de grid-areas e `order`, entao a versao de desktop segue intacta.
 */
@media (max-width: 600px) {
	.blizi-novidade:not(.blizi-novidade--larga) {
		grid-template-columns: minmax(0, 1fr) 104px;
		grid-template-areas: "corpo imagem";
		gap: 14px; align-items: start;
		margin: 0; padding: 0 0 16px;
		border-bottom: 1px solid var(--blizi-borda);
	}
	.blizi-novidade:not(.blizi-novidade--larga) + .blizi-novidade:not(.blizi-novidade--larga) { padding-top: 16px; }
	.blizi-novidade:not(.blizi-novidade--larga) .blizi-novidade__imagem { grid-area: imagem; aspect-ratio: 1 / 1; }
	.blizi-novidade:not(.blizi-novidade--larga) .blizi-novidade__corpo { grid-area: corpo; gap: 6px; }

	/* Etiqueta em cima, titulo no meio, tempo + salvar embaixo. */
	.blizi-novidade:not(.blizi-novidade--larga) .blizi-novidade__corpo > div:last-child { order: -1; }
	.blizi-novidade:not(.blizi-novidade--larga) .blizi-novidade__titulo { order: 1; }
	.blizi-novidade:not(.blizi-novidade--larga) .blizi-novidade__rodape { order: 2; justify-content: flex-start; gap: 12px; }
	.blizi-novidade:not(.blizi-novidade--larga) .blizi-novidade__titulo {
		font-size: 1.0625rem; line-height: 1.25; letter-spacing: -.02em;
		display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
	}
	.blizi-novidade:not(.blizi-novidade--larga) .blizi-etiqueta-jogo { font-size: 10px; }

	/* Card largo: mesma ideia, mais baixo para nao ocupar a tela inteira. */
	.blizi-novidade--larga { margin-bottom: 20px; }
	.blizi-novidade--larga::before { height: 260px; }
	.blizi-novidade--larga .blizi-novidade__titulo { font-size: 1.25rem; line-height: 1.2; }
}

/* Rolagem infinita ------------------------------------------------------------- */

.blizi-novidades__aviso {
	margin: 20px 0 0; padding: 14px; text-align: center;
	font-size: 14px; color: var(--blizi-texto-apoio);
	border-top: 1px solid var(--blizi-borda);
}
.blizi-novidades__aviso[hidden] { display: none; }
.blizi-carregar-mais[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Depois do titulo de uma listagem (categoria, autor, busca) a lista precisa de respiro. */
.blizi-cabecalho-arquivo + .blizi-novidades,
.blizi-cabecalho-arquivo ~ .blizi-novidades { margin-top: 28px; }