/* ==========================================================================
   Home
   ========================================================================== */

/* Destaques ------------------------------------------------------------------ */

.blizi-destaques > .blizi-container { padding-inline: 15px; }

/* Desktop: 1,875rem (30px) de folga em cima e nenhuma embaixo. O espaco que o
   destaque tinha embaixo passou para o topo da home (regra mais adiante), para o
   vao ate as Novidades continuar o mesmo. */
.blizi-destaques {
	/* Mesma linha das colunas: caixa de 960px e 15px de gutter (930 de conteudo). */
	--blizi-largura: 960px;
	padding: 1.875rem 0 0;
	/* Contexto proprio: a tira de fundo fica por tras do destaque sem afundar
	   por baixo do fundo da pagina. */
	position: relative; isolation: isolate;
}

/*
 * Tira de fundo por tras do destaque: 10,9375rem (175px) de altura, de borda a
 * borda da tela e colada no cabecalho. O destaque tem mais de 400px e desce
 * alem do fim da tira, que so aparece em volta da parte de cima dele. A cor
 * primaria cobre o carregamento da imagem (54KB) e um arquivo ausente. A imagem
 * tem 1025px e o cover a amplia em tela larga — e um degrade suave, sem detalhe.
 */
.blizi-destaques::before {
	content: ""; position: absolute; z-index: -1;
	top: 0; left: 0; right: 0; height: 10.9375rem;
	background: var(--blizi-primaria) url("../imagens/bg-blizi.jpg") center center / cover no-repeat;
	pointer-events: none;
}
/*
 * Sem folga: a regua de manchetes encosta na arte, como uma peca so. O
 * arredondamento e a sombra sao do bloco inteiro, e o overflow guarda a arte e
 * a regua la dentro — arredondar a imagem em si abriria um entalhe na juncao
 * das duas.
 */
.blizi-destaques__interno {
	/* 291 = 290 do item + 1px da borda que segura a divisa com a arte. */
	display: grid; grid-template-columns: minmax(0, 1fr) 291px; gap: 0;
	border-radius: var(--blizi-arredondamento); overflow: hidden;
	        -webkit-box-shadow: 0 15px 25px rgba(0, 0, 0, .4);
        box-shadow: 0 15px 25px rgba(0, 0, 0, .4);
}

.blizi-destaques__palco {
	background: #111111;
	/*
	 * Janela do carrossel: corta o que passa e nao rola. Quem se move e a trilha
	 * la dentro, por transform (translate3d) — o usuario nao arrasta nem rola; so
	 * o clique nas manchetes e nas barras de subir/descer.
	 */
	overflow: hidden;
}
.blizi-destaques__trilho {
	display: flex;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
	.blizi-destaques__trilho { transition: none; }
}
.blizi-destaques__palco::-webkit-scrollbar { display: none; }

.blizi-destaque { flex: 0 0 100%; min-width: 0; }
.blizi-destaque__link { position: relative; display: block; color: inherit; }
.blizi-destaque__link:hover { text-decoration: none; }
.blizi-destaque__imagem { aspect-ratio: 640 / 400; background: var(--blizi-moldura); position: relative; }

/*
 * Efeito de imagem rebaixada: uma sombra interna bem sutil nas bordas, mais
 * marcada no topo, como se a foto estivesse encaixada um degrau atras do bloco.
 * Numa camada por cima da foto (::after) porque a <img> cobre qualquer sombra
 * "inset" da propria caixa. Preto neutro e baixa opacidade: sobre foto a sombra
 * nao depende da paleta. Nao captura o mouse, para o link e o hover seguirem
 * funcionando por baixo.
 */
.blizi-destaque__imagem::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
}
.blizi-destaque__imagem img { width: 100%; height: 100%; object-fit: cover;  transform: opacity .2s ease-in-out;     backface-visibility: hidden; }
.blizi-destaque__imagem img:hover {transition: opacity .2s ease-in-out; opacity: .9;}
.blizi-destaque__dados {
	position: absolute; inset-inline: 0; bottom: 0; padding: 60px 24px 22px;
	background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 55%, transparent 100%);
}
.blizi-destaque__tempo {
	display: flex; align-items: center; gap: 6px; margin: 0;
	font-size: 12px; color: rgba(255, 255, 255, .7);
}
/* O respiro entre o horario e o titulo mora aqui, e nao no margin-bottom do
   horario: dois irmaos com margem vertical colapsam, e o valor menor sumiria. */
.blizi-destaque__titulo {
	margin: .625rem 0 0; font-size: 1.25rem; font-weight: 700;
	line-height: 1.3; color: #fff;
}
/* Sobre imagem o realce clareia em vez de trocar de cor: a cor de apoio da
   paleta pode ser escura e sumiria na foto. */
.blizi-destaque__link:hover .blizi-destaque__titulo { color: rgba(255, 255, 255, .82); }

.blizi-destaques__manchetes {
	/*
	 * A regua tem cor propria, separada do fundo das imagens: as duas encostam
	 * uma na outra e a diferenca entre elas e o que marca onde a arte acaba.
	 * Como e uma peca escura mesmo com a pagina clara, ela redefine os tokens
	 * dentro de si — o mesmo recurso da barra de navegacao —, e o texto
	 * acompanha sozinho se a cor mudar.
	 */
	--blizi-texto: var(--blizi-sobre-manchetes);
	--blizi-texto-apoio: color-mix(in srgb, var(--blizi-sobre-manchetes) 62%, transparent);
	--blizi-superficie-2: color-mix(in srgb, var(--blizi-sobre-manchetes) 10%, transparent);
	--blizi-borda: color-mix(in srgb, var(--blizi-sobre-manchetes) 16%, transparent);

	background: var(--blizi-manchetes);
	color: var(--blizi-sobre-manchetes);

	/*
	 * Um pixel da propria cor da coluna encostando na arte. O bloco fica
	 * centrado numa coordenada fracionaria (x,5), entao a arte e o item da
	 * regua dividem o mesmo pixel da tela e o navegador mistura os dois — com o
	 * item ativo laranja, a mistura aparece como um fio de laranja por cima da
	 * foto. Com a borda, quem divide o pixel com a foto e o fundo escuro.
	 */
	border-inline-start: 1px solid var(--blizi-manchetes);

	/*
	 * A altura do bloco e da arte, nao da lista. A regua estica ate a altura da
	 * linha da grade, e e a caixa de rolagem la dentro que segura as manchetes
	 * que passarem disso.
	 */
	position: relative;

	/*
	 * Sem overflow aqui de proposito. As barras de primeiro/ultimo esperam fora
	 * da coluna, mas quem as esconde e o corte do bloco inteiro (a coluna vai de
	 * ponta a ponta dele, entao o topo e a base coincidem). Um corte na coluna
	 * tambem prenderia a aba da manchete ativa, que sai 5px para a esquerda.
	 */
}

/*
 * Posicao absoluta de proposito: assim a lista nao conta para a altura da
 * linha da grade. Com a lista no fluxo normal, cada manchete a mais esticava o
 * bloco e deixava faixa vazia ao lado da arte, que tem altura fixa.
 */
.blizi-manchetes__rolagem {
	/*
	 * Estendida 5px sobre a arte, com o mesmo recuo por dentro: os itens
	 * continuam onde estavam, e a aba da manchete ativa tem por onde sair — a
	 * rolagem corta tudo o que passa da sua propria borda, entao ela precisa
	 * comecar antes. O isolation cria o contexto onde a aba fica com z-index
	 * negativo sem afundar por baixo do fundo da coluna.
	 */
	position: absolute; inset: 0 0 0 -5px;
	padding-inline-start: 5px; isolation: isolate;
	display: flex; flex-direction: column;
	/* Sem rolagem do usuario: a coluna so anda quando a manchete ativa muda
	   (o JavaScript ajusta o scrollTop, que funciona com overflow hidden). */
	overflow-y: hidden;
	scrollbar-width: none; -ms-overflow-style: none;
}
.blizi-manchetes__rolagem::-webkit-scrollbar { display: none; }

/*
 * Barras de ir ao primeiro e ao ultimo destaque. Ficam por cima das pontas da
 * lista, com 25px, e deslizam para dentro so quando ha para onde ir: a de cima
 * some no primeiro item, a de baixo no ultimo. Fora da coluna elas ficam
 * cortadas pelo overflow do bloco.
 */
.blizi-manchetes__seta {
	position: absolute; left: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 25px; padding: 0;
	background: var(--blizi-seta-manchetes); color: var(--blizi-sobre-seta-manchetes);
	border: 0; cursor: pointer; font-size: 11px;
	transition: all .2s;
}
.blizi-manchetes__seta:hover { filter: brightness(1.25); }
.blizi-manchetes__seta--primeiro { top: -25px; }
.blizi-manchetes__seta--ultimo { bottom: -25px; }
/* Classes positivas, ligadas so pelo JavaScript: sem ele as barras ficam fora. */
.blizi-destaques__manchetes.pode-ir-ao-primeiro .blizi-manchetes__seta--primeiro { top: 0; }
.blizi-destaques__manchetes.pode-ir-ao-ultimo .blizi-manchetes__seta--ultimo { bottom: 0; }
/*
 * Altura fixa: a regua precisa caber a mesma quantidade de manchetes ao lado do
 * carrossel, venha o titulo com tres palavras ou com quinze. O `flex: none`
 * existe porque a regua e uma coluna flex — sem ele os itens seriam espremidos
 * para dividir a altura disponivel em vez de respeitar os 75px.
 */
.blizi-manchete {
	position: relative;
	display: flex; flex-direction: column; justify-content: center;
	flex: none; height: 75px;
	padding: 10px 20px; color: var(--blizi-texto);
	border-bottom: 1px solid color-mix(in srgb, var(--blizi-sobre-manchetes) 15%, transparent);
	transition: background .2s ease;
}
/*
 * Aba na lateral: 6px de largura por 75 de altura, cantos arredondados so do
 * lado de fora. Inativa, fica atras do item (z-index -1) numa tira escura; a da
 * manchete ativa sobe (z-index 1), pega a cor primaria e sai 5px para fora,
 * avancando sobre a arte — deixando 1px por dentro.
 */
.blizi-manchete::before {
	content: ""; position: absolute; top: 0; left: 0;
	width: .375rem; height: 75px;
	background: var(--blizi-aba-manchete);
	border-radius: .125rem 0 0 .125rem;
	z-index: -1;
	transition: all .2s;
}
.blizi-manchete.esta-ativa::before {
	background: var(--blizi-primaria);
	left: -.3125rem; z-index: 1;
}
.blizi-manchete:hover { background: var(--blizi-superficie-2); text-decoration: none; }
/* Troca automática: barra fina na base da manchete ativa que se enche no tempo do intervalo (o JavaScript põe `.esta-rodando`). */
.blizi-destaques.esta-rodando .blizi-manchete.esta-ativa::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
	background: var(--blizi-sobre-primaria); opacity: .5; transform-origin: left center;
	animation: blizi-progresso-destaque var(--blizi-intervalo, 6000ms) linear forwards;
}
@keyframes blizi-progresso-destaque { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.blizi-manchete.esta-ativa {
	background: var(--blizi-primaria);
	border-bottom-color: var(--blizi-primaria);
	border-radius: 2px;
	color: var(--blizi-sobre-primaria);
}
/* Sobre a primaria o horario nao pode ficar na cor de apoio da pagina: ela e
   pensada para o fundo, nao para a cor da marca. */
.blizi-manchete.esta-ativa .blizi-manchete__tempo { color: inherit; opacity: .78; }
.blizi-manchete__titulo {
	font-size: 13px; font-weight: 600; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blizi-manchete__tempo { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--blizi-texto-apoio); }

/* Layout da home --------------------------------------------------------------- */

/*
 * Duas colunas de gutter de 15px: a linha tem 960px, a principal ocupa o que
 * sobra (640px, 610 de conteudo) e a lateral tem 320px (290 de conteudo). Cada
 * coluna leva 15px de padding de cada lado, e por isso o vao visivel entre os
 * dois conteudos e de 30px (15 + 15). Nao usa `gap`: o espaco vem do padding.
 */
.blizi-home {
	display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; align-items: start;
	max-width: 960px; padding-top: 28px; padding-bottom: 48px;
}
.blizi-home__principal, .blizi-home__lateral { padding-inline: 15px; min-width: 0; }
/* Com carrossel, o vao ate as Novidades vem daqui (o destaque nao tem padding
   embaixo); sem ele a home comeca no seu proprio padding de 28px. */
.blizi-destaques + .blizi-home { padding-top: 48px; }
.blizi-home__lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; position: sticky; top: 86px; }

/* Novidades: moram em novidades.css (a lista tambem aparece na aba Noticias do jogo). */

/* Celular: a folga de cima do destaque volta aos 20px de antes. */
@media (max-width: 782px) {
	.blizi-destaques { padding-top: 20px; }
}

/* Responsivo ---------------------------------------------------------------------------- */

/*
 * O container da home tem no maximo 1000px, entao arte + coluna de manchetes
 * (291px) + a lateral de 300px cabem lado a lado bem antes dos 1100px. Com o
 * corte em 1100 a janela de 1081px caia no modo empilhado, com a arte em
 * 960x600 — mais alta que a propria janela. O corte agora e onde de fato falta
 * espaco.
 */
@media (max-width: 900px) {
	.blizi-destaques__interno { grid-template-columns: minmax(0, 1fr); }
	/* Empilhado, a arte 16:10 ficava mais alta que a janela (528px a 899 de
	   largura) e empurrava a faixa de manchetes para fora da tela. 2:1 a mantem
	   inteira na tela em janela baixa; abaixo de 600px volta a 16:10. */
	.blizi-destaque__imagem { aspect-ratio: 2 / 1; }
	/* Deitada, a regua volta ao fluxo normal e rola na horizontal. */
	.blizi-destaques__manchetes { position: static; border-inline-start: 0; }
	/* A faixa horizontal nao tem topo nem fim vertical: as barras nao se aplicam. */
	.blizi-manchetes__seta { display: none; }
	/* Empilhado, as barras de subir/descer nao existem: a faixa de manchetes volta
	   a rolar com o dedo, senao os itens alem da tela ficariam inalcancaveis. O
	   carrossel em si segue movido so por clique. */
	.blizi-manchete::before { display: none; }
	.blizi-manchetes__rolagem { padding-inline-start: 0; inset: auto; }
	.blizi-manchete { overflow: hidden; }
	.blizi-manchetes__rolagem {
		position: static; flex-direction: row;
		overflow-x: auto; overflow-y: visible;
	}

	/* Deitada, a regua troca o filete de baixo pelo de lado. */
	.blizi-manchete {
		flex: 0 0 240px; height: auto; min-height: 75px;
		border-bottom: 0;
		border-inline-end: 1px solid color-mix(in srgb, var(--blizi-sobre-manchetes) 15%, transparent);
	}
	.blizi-manchete.esta-ativa { border-inline-end-color: var(--blizi-primaria); }
	.blizi-home { grid-template-columns: minmax(0, 1fr); }
	.blizi-home__lateral { position: relative; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

@media (max-width: 600px) {
	.blizi-destaque__imagem { aspect-ratio: 16 / 10; }
	.blizi-home__lateral { grid-template-columns: minmax(0, 1fr); }
}

/*
 * A partir de 503px a miniatura de 120px ao lado do texto fica pequena demais
 * para reconhecer a foto e deixa o titulo espremido. O item vira coluna: foto
 * na largura toda em cima, texto embaixo. A marcacao ja tem a imagem primeiro,
 * entao nao precisa reordenar nada. O card largo continua como esta: ele ja e
 * uma foto grande, com o texto sobre ela.
 */
@media (max-width: 503px) {
	/*
	 * O destaque vai de borda a borda da tela. A margem de 20px do container
	 * some so aqui (o resto da home continua com ela), e o bloco perde o canto
	 * arredondado e a sombra, que sem margem so cortariam contra a beira da tela.
	 */
	.blizi-destaques > .blizi-container { padding-inline: 0; max-width: none; }
	.blizi-destaques__interno { border-radius: 0; box-shadow: none; }

	/*
	 * O card grande tambem vai de borda a borda, como o destaque. A margem
	 * negativa de 15px desfaz o padding da coluna principal (a unica coisa que o
	 * separa da beira da tela, ja que o container nao tem padding). Sem cantos
	 * arredondados, que so apareceriam cortados contra a beira; o contorno do
	 * tema claro sai junto.
	 */
	.blizi-home .blizi-novidade--larga { margin-inline: -15px; }
	.blizi-home .blizi-novidade--larga .blizi-novidade__imagem { border-radius: 0; border: 0; }
	.blizi-home .blizi-novidade--larga .blizi-novidade__corpo { border-radius: 0; padding-inline: 20px; }
}

/* Rolagem infinita: os estilos do aviso moram em novidades.css. */