/* ==========================================================================
   Paginas de plataforma (PC, PlayStation, Xbox, Nintendo)

   Cada familia tem a sua identidade: cor de marca e uma decoracao propria no topo. As
   cores vem de PHP (inc/plataformas.php) nas variaveis --blizi-plataforma e
   --blizi-plataforma-2, postas no style da pagina; este arquivo so as le. O texto do
   topo e sempre claro (o fundo e a moldura preta misturada com a cor da marca).
   ========================================================================== */

.blizi-plataforma-topo {
	--blizi-texto: var(--blizi-sobre-moldura);
	--blizi-texto-apoio: color-mix(in srgb, var(--blizi-sobre-moldura) 72%, transparent);
	--blizi-borda: color-mix(in srgb, var(--blizi-sobre-moldura) 22%, transparent);

	/* Topo de borda a borda: linha de identidade (52px) + linha de 3 cartões de notícia. */
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-block: 24px 30px; color: var(--blizi-sobre-moldura);
	background:
		radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--blizi-plataforma) 55%, transparent) 0%, transparent 60%),
		linear-gradient(135deg, color-mix(in srgb, var(--blizi-plataforma) 46%, var(--blizi-moldura)) 0%, var(--blizi-moldura) 78%);
}
.blizi-plataforma-topo::after {
	/* Filete de marca na base do topo. */
	content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px;
	background: linear-gradient(90deg, var(--blizi-plataforma), var(--blizi-plataforma-2) 55%, var(--blizi-plataforma));
}
.blizi-plataforma-topo__decoracao { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blizi-plataforma-topo__marca-dagua {
	position: absolute; z-index: -1; pointer-events: none; inset-inline-end: 3%; top: 50%;
	transform: translateY(-50%) rotate(-8deg);
	font-size: min(200px, 30vw); line-height: 1; color: var(--blizi-plataforma-2); opacity: .11;
}

/* Decoracao de cada familia ------------------------------------------------------------ */

/* PlayStation: faixas de luz em diagonal. */
.blizi-plataforma-topo--playstation .blizi-plataforma-topo__decoracao {
	background:
		repeating-linear-gradient(115deg, transparent 0 70px, color-mix(in srgb, var(--blizi-plataforma-2) 20%, transparent) 70px 72px),
		radial-gradient(50% 90% at 82% 20%, color-mix(in srgb, var(--blizi-plataforma-2) 30%, transparent) 0%, transparent 70%);
}
/* Xbox: esfera brilhante com aneis concentricos. */
.blizi-plataforma-topo--xbox .blizi-plataforma-topo__decoracao {
	background:
		repeating-radial-gradient(circle at 84% 42%, transparent 0 46px, color-mix(in srgb, var(--blizi-plataforma-2) 26%, transparent) 47px 48px),
		radial-gradient(38% 80% at 84% 42%, color-mix(in srgb, var(--blizi-plataforma-2) 32%, transparent) 0%, transparent 72%);
}
/* Nintendo: as duas laterais (vermelho e azul, como os controles) e uma trama de pontos. */
.blizi-plataforma-topo--nintendo .blizi-plataforma-topo__decoracao {
	background:
		radial-gradient(color-mix(in srgb, var(--blizi-sobre-moldura) 16%, transparent) 2px, transparent 2.5px) 0 0 / 26px 26px,
		linear-gradient(90deg, color-mix(in srgb, var(--blizi-plataforma) 46%, transparent) 0%, transparent 34%, transparent 66%, color-mix(in srgb, var(--blizi-plataforma-2) 40%, transparent) 100%);
}
/* PC: grade de circuito e um brilho frio. */
.blizi-plataforma-topo--windows .blizi-plataforma-topo__decoracao {
	background:
		linear-gradient(color-mix(in srgb, var(--blizi-plataforma-2) 18%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
		linear-gradient(90deg, color-mix(in srgb, var(--blizi-plataforma-2) 18%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
		radial-gradient(60% 100% at 88% 0%, color-mix(in srgb, var(--blizi-plataforma-2) 26%, transparent) 0%, transparent 65%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 55%); mask-image: linear-gradient(90deg, transparent 0%, black 55%);
}

/* Conteudo do topo ----------------------------------------------------------------------- */

.blizi-plataforma-topo__interno { position: relative; width: 100%; max-width: 960px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-inline: 15px; }
.blizi-plataforma-topo__titulo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.blizi-plataforma-topo__icone {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 52px; height: 52px;
	border-radius: var(--blizi-arredondamento); font-size: 24px;
	background: var(--blizi-plataforma); color: var(--blizi-sobre-moldura);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--blizi-plataforma) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.blizi-plataforma-topo__texto { min-width: 0; }
.blizi-plataforma-topo h1 { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--blizi-texto); }
/* Números numa linha: pequenos, caixa alta, espaçados (o mesmo tratamento do total de /jogos/). */
.blizi-plataforma-topo__numeros { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 5px 0 0; }
.blizi-plataforma-topo__numeros span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blizi-texto-apoio); white-space: nowrap; }

/* Troca rapida entre plataformas: chips de vidro na mesma linha. */
.blizi-plataforma-troca { display: flex; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
.blizi-plataforma-troca a {
	display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; white-space: nowrap;
	border: 1px solid var(--blizi-borda); border-radius: var(--blizi-arredondamento);
	font-size: 13px; font-weight: 700; color: var(--blizi-texto);
	background: color-mix(in srgb, var(--blizi-sobre-moldura) 10%, transparent);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: background .2s ease, border-color .2s ease;
}
.blizi-plataforma-troca a i { font-size: 13px; opacity: .85; }
.blizi-plataforma-troca a:hover { background: color-mix(in srgb, var(--blizi-sobre-moldura) 20%, transparent); text-decoration: none; }
.blizi-plataforma-troca a.esta-ativa { background: var(--blizi-plataforma); border-color: color-mix(in srgb, var(--blizi-sobre-moldura) 50%, transparent); }

/* Quando o titulo e os chips nao cabem lado a lado, empilham. */
@media (max-width: 800px) {
	.blizi-plataforma-topo { padding-block: 18px 22px; }
	.blizi-plataforma-topo__interno { flex-direction: column; align-items: flex-start; gap: 12px; }
	.blizi-plataforma-troca { flex-wrap: wrap; justify-content: flex-start; }
}

/* Linha de 3 cartoes com as noticias em destaque da plataforma: arte com o titulo por cima (sobre foto o texto e sempre claro). */
.blizi-plataforma-topo__destaques { position: relative; width: 100%; max-width: 960px; padding-inline: 15px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.blizi-plataforma-destaque { min-width: 0; }
.blizi-plataforma-destaque__link {
	position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3;
	border-radius: var(--blizi-arredondamento); background: var(--blizi-moldura); color: #fff;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 14px 32px rgba(0, 0, 0, .4);
}
.blizi-plataforma-destaque__link:hover { text-decoration: none; color: #fff; }
.blizi-plataforma-destaque__imagem { position: absolute; inset: 0; display: block; line-height: 0; }
.blizi-plataforma-destaque__imagem img { width: 100%; height: 100%; object-fit: cover; filter: url(#blizi-nitidez); transition: opacity .3s ease-in-out; }
/* Hover igual ao da lista de Novidades da home: a imagem vai a 50% sobre a moldura preta. */
.blizi-plataforma-destaque__link:hover .blizi-plataforma-destaque__imagem img { opacity: .5; }
.blizi-plataforma-destaque__corpo {
	position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: 6px; padding: 56px 16px 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .55) 55%, transparent 100%);
}
.blizi-plataforma-destaque__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.blizi-plataforma-destaque__jogo {
	padding: 3px 7px; border-radius: var(--blizi-arredondamento); background: var(--blizi-plataforma); color: var(--blizi-sobre-moldura);
	font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.blizi-plataforma-destaque__tempo { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.blizi-plataforma-destaque__titulo {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
	font-size: 1.05rem; font-weight: 800; line-height: 1.22; letter-spacing: -.02em;
}
@media (max-width: 800px) {
	/* No celular os cartoes viram uma fileira que rola de lado, um por vez e meio, como um carrossel de dedo. */
	.blizi-plataforma-topo__destaques { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
	.blizi-plataforma-topo__destaques::-webkit-scrollbar { display: none; }
	.blizi-plataforma-destaque { flex: 0 0 78%; scroll-snap-align: start; }
}

/* Cinema & TV: filete de perfuracao de filme nas bordas e um facho de luz (so CSS). */
.blizi-plataforma-topo--cinema-e-tv .blizi-plataforma-topo__decoracao {
	background:
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--blizi-sobre-moldura) 20%, transparent) 0 14px, transparent 14px 30px) 0 10px / 100% 8px no-repeat,
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--blizi-sobre-moldura) 20%, transparent) 0 14px, transparent 14px 30px) 0 calc(100% - 18px) / 100% 8px no-repeat,
		radial-gradient(45% 110% at 82% 10%, color-mix(in srgb, var(--blizi-plataforma-2) 28%, transparent) 0%, transparent 70%);
}
/* Animes & Mangas: linhas de velocidade do quadrinho saindo da direita e uma trama de pontos (halftone) nas pontas. */
.blizi-plataforma-topo--animes-e-mangas .blizi-plataforma-topo__decoracao {
	background:
		repeating-conic-gradient(from 0deg at 88% 50%, color-mix(in srgb, var(--blizi-sobre-moldura) 13%, transparent) 0deg 1.4deg, transparent 1.4deg 9deg),
		radial-gradient(color-mix(in srgb, var(--blizi-sobre-moldura) 20%, transparent) 1.5px, transparent 2px) 0 0 / 14px 14px,
		radial-gradient(45% 110% at 88% 50%, color-mix(in srgb, var(--blizi-plataforma-2) 30%, transparent) 0%, transparent 70%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 45%); mask-image: linear-gradient(90deg, transparent 0%, black 45%);
}
/* eSports: grade de arena em perspectiva, varredura de linhas (scanlines) e um facho de luz na direita. */
.blizi-plataforma-topo--esports .blizi-plataforma-topo__decoracao {
	background:
		repeating-linear-gradient(0deg, color-mix(in srgb, var(--blizi-sobre-moldura) 6%, transparent) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--blizi-plataforma-2) 20%, transparent) 0 1px, transparent 1px 56px),
		radial-gradient(50% 130% at 90% 40%, color-mix(in srgb, var(--blizi-plataforma-2) 32%, transparent) 0%, transparent 70%);
}
/* "Mais lida" no primeiro cartao do topo. */
.blizi-plataforma-destaque__selo {
	position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
	border-radius: var(--blizi-arredondamento); background: var(--blizi-primaria); color: var(--blizi-sobre-primaria);
	font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

/* Total ao lado de cada opcao do filtro de Cinema & TV. */
.blizi-plataforma-troca__total { margin-inline-start: 2px; padding: 1px 6px; border-radius: var(--blizi-arredondamento); background: color-mix(in srgb, var(--blizi-sobre-moldura) 16%, transparent); font-size: 11px; font-weight: 800; }

/* Aviso curto quando tudo o que a secao tem ja esta nos cartoes do topo. */
.blizi-secao-aviso { margin: 0; padding: 0; font-size: 15px; color: var(--blizi-texto-apoio); }

/* Corpo ------------------------------------------------------------------------------------ */

/* Lancamentos do mes: faixa de 100% da caixa (930 de conteudo), 6 cards por linha no desktop. O seletor
   leva o pai porque o portal.css (com a grade padrao) carrega depois deste arquivo. */
.blizi-plataforma-lancamentos { max-width: 960px; padding: 40px 15px 0; }
.blizi-plataforma-lancamentos .blizi-grade-jogos--lancamentos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .blizi-plataforma-lancamentos .blizi-grade-jogos--lancamentos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .blizi-plataforma-lancamentos .blizi-grade-jogos--lancamentos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.blizi-plataforma-lancamentos + .blizi-plataforma-corpo { padding-top: 44px; }
.blizi-plataforma-lancamentos .blizi-secao-cabecalho__titulo::before { background: var(--blizi-plataforma); }

/*
 * Duas colunas como na home: conteudo (640) + lateral (320), cada uma com 15px de gutter dos
 * dois lados (610 e 290 de conteudo, 30 entre eles). A lateral gruda ao rolar. Abaixo de 900px
 * a lateral desce para depois do conteudo.
 */
.blizi-plataforma-corpo {
	display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start;
	max-width: 960px; padding-block: 40px 56px;
}
.blizi-plataforma-principal, .blizi-plataforma-lateral { padding-inline: 15px; min-width: 0; }
.blizi-plataforma-principal { display: grid; gap: 44px; }
.blizi-plataforma-lateral { display: grid; gap: 24px; align-content: start; position: sticky; top: 86px; }
.admin-bar .blizi-plataforma-lateral { top: 118px; }
@media (max-width: 900px) {
	.blizi-plataforma-corpo { grid-template-columns: minmax(0, 1fr); }
	.blizi-plataforma-lateral { position: static; margin-top: 44px; }
}
/* Os titulos de secao pegam a cor da plataforma na barrinha. */
.blizi-plataforma-corpo .blizi-secao-cabecalho__titulo::before { background: var(--blizi-plataforma); }

@media (max-width: 600px) {
	.blizi-plataforma-topo { padding-top: 22px; }
	.blizi-plataforma-topo__icone { width: 60px; height: 60px; font-size: 28px; border-radius: 18px; }
	.blizi-plataforma-topo__numeros > div { min-width: 0; flex: 1 1 30%; padding: 9px 12px; }
	.blizi-plataforma-topo__numeros dd { font-size: 24px; }
	.blizi-plataforma-corpo { padding-block: 28px 44px; }
	.blizi-plataforma-principal { gap: 34px; }
}