/*
 * Seção "Vídeos" da home (partes/home-videos.php): o canal do Blizi no YouTube, abaixo das novidades.
 *
 * Uma sala de cinema: faixa de borda a borda na cor que fica atrás de toda arte do tema (--blizi-moldura) e,
 * por trás de tudo, a capa do vídeo em destaque borrada, como o "modo ambiente" do YouTube — a luz da tela
 * se espalha pela sala. O vermelho fica só onde age: o Play do destaque e o botão de inscrição. Como a faixa
 * é escura em qualquer paleta, os tokens de texto são redefinidos dentro dela (--blizi-sobre-moldura).
 * Por dentro, a linha de 960px com 15px de gutter (610 + 30 + 290, como a home).
 * O player é o do trailer do jogo (.blizi-video / .blizi-trailer, em portal.css).
 */
.blizi-videos {
	--blizi-texto: var(--blizi-sobre-moldura);
	--blizi-texto-apoio: color-mix(in srgb, var(--blizi-sobre-moldura) 64%, transparent);
	--blizi-videos-filete: color-mix(in srgb, var(--blizi-sobre-moldura) 12%, transparent);
	position: relative; overflow: hidden; isolation: isolate;
	padding: 56px 0 64px;
	background: var(--blizi-moldura);
	color: var(--blizi-texto);
}

/* Luz ambiente: a capa borrada e saturada, com a sala escurecendo em volta (mais embaixo, onde ficam os Shorts). */
.blizi-videos__luz {
	position: absolute; inset: -12%; z-index: -2;
	width: 124%; height: 124%; object-fit: cover;
	filter: blur(72px) saturate(1.5);
	opacity: .55;
	pointer-events: none;
}
.blizi-videos::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(120% 70% at 30% 20%, transparent 0%, color-mix(in srgb, var(--blizi-moldura) 55%, transparent) 70%),
		linear-gradient(to bottom, color-mix(in srgb, var(--blizi-moldura) 35%, transparent) 0%, color-mix(in srgb, var(--blizi-moldura) 20%, transparent) 40%, color-mix(in srgb, var(--blizi-moldura) 88%, transparent) 100%);
}
.blizi-videos__interno { padding-inline: 15px; }

/* Chamada: título e frase à esquerda, botões à direita. */
.blizi-videos__chamada {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px;
	margin-bottom: 32px;
}
.blizi-videos__chamada-texto { flex: 1 1 380px; }
.blizi-videos__chamada-titulo {
	display: flex; align-items: center; gap: 12px; margin: 0;
	font-size: var(--blizi-letra-32); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance;
}
.blizi-videos__chamada-titulo i { font-size: .8em; color: var(--blizi-primaria); }
.blizi-videos__chamada-apoio { margin: 10px 0 0; max-width: 52ch; font-size: var(--blizi-letra-15); line-height: 1.6; color: var(--blizi-texto-apoio); text-wrap: pretty; }
.blizi-videos__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.blizi-videos__botao {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 20px; border: 1px solid var(--blizi-primaria); border-radius: var(--blizi-arredondamento);
	background: var(--blizi-primaria); color: var(--blizi-sobre-primaria);
	font-size: var(--blizi-letra-14); font-weight: 700; text-decoration: none;
	box-shadow: 0 8px 22px color-mix(in srgb, var(--blizi-primaria) 32%, transparent);
	transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.blizi-videos__botao:hover { text-decoration: none; color: var(--blizi-sobre-primaria); transform: translateY(-1px); box-shadow: 0 12px 28px color-mix(in srgb, var(--blizi-primaria) 42%, transparent); }
.blizi-videos__botao--vazado {
	border-color: color-mix(in srgb, var(--blizi-sobre-moldura) 26%, transparent);
	background: color-mix(in srgb, var(--blizi-sobre-moldura) 6%, transparent); color: var(--blizi-texto); box-shadow: none;
}
.blizi-videos__botao--vazado:hover {
	color: var(--blizi-texto); border-color: color-mix(in srgb, var(--blizi-sobre-moldura) 50%, transparent);
	background: color-mix(in srgb, var(--blizi-sobre-moldura) 12%, transparent); box-shadow: none;
}
.blizi-videos__botao:focus-visible,
.blizi-videos a:focus-visible { outline: 2px solid var(--blizi-sobre-moldura); outline-offset: 3px; }

/* Vídeo mais recente: o player na coluna principal (610), o texto embaixo, à direita, como uma legenda de cartaz. */
.blizi-videos__destaque { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 30px; align-items: end; }
.blizi-videos__player {
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px var(--blizi-videos-filete);
}
.blizi-videos__destaque-texto { padding-bottom: 4px; }
.blizi-videos__tempo { display: block; font-size: var(--blizi-letra-12); font-weight: 500; letter-spacing: -0.03em; color: var(--blizi-texto-apoio); }
.blizi-videos__titulo { margin: 8px 0 0; font-size: var(--blizi-letra-22); line-height: 1.227; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.blizi-videos__titulo a,
.blizi-videos__short-titulo a { color: var(--blizi-texto); transition: color .2s ease; }
.blizi-videos__titulo a:hover,
.blizi-videos__short-titulo a:hover { color: var(--blizi-primaria-clara); text-decoration: none; }
.blizi-videos__no-youtube {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
	font-size: var(--blizi-letra-13); font-weight: 600; color: var(--blizi-texto-apoio); text-decoration: none;
	transition: color .2s ease, gap .2s cubic-bezier(.16, 1, .3, 1);
}
.blizi-videos__no-youtube:hover { color: var(--blizi-texto); gap: 12px; text-decoration: none; }

/* Shorts: título com filete fino até a borda, como os títulos de seção. */
.blizi-videos__subtitulo {
	display: flex; align-items: center; gap: 14px; margin: 48px 0 16px;
	font-size: var(--blizi-letra-14); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--blizi-texto-apoio);
}
.blizi-videos__subtitulo::after { content: ""; flex: 1; height: 1px; background: var(--blizi-videos-filete); }
.blizi-videos__shorts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.blizi-videos__short { min-width: 0; }

/* Duas classes: precisa vencer o 16:9 de .blizi-video (portal.css, carregado depois). */
.blizi-video.blizi-video--vertical {
	aspect-ratio: 9 / 16;
	box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .8), 0 0 0 1px var(--blizi-videos-filete);
	transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}
.blizi-video.blizi-video--vertical:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -16px rgba(0, 0, 0, .9), 0 0 0 1px color-mix(in srgb, var(--blizi-sobre-moldura) 24%, transparent); }
/* Nos Shorts o Play é discreto (vidro escuro, sem anel pulsando) e só vira vermelho no hover: o único Play que chama é o do destaque. */
.blizi-video.blizi-video--vertical .blizi-trailer__play {
	width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: var(--blizi-letra-16);
	background: rgba(0, 0, 0, .45); color: var(--blizi-sobre-moldura);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.blizi-video.blizi-video--vertical .blizi-trailer__play::before { display: none; }
.blizi-video--vertical .blizi-trailer__play i { margin-inline-start: 3px; }
.blizi-video.blizi-video--vertical .blizi-trailer__capa:hover .blizi-trailer__play,
.blizi-video.blizi-video--vertical .blizi-trailer__capa:focus-visible .blizi-trailer__play {
	background: var(--blizi-primaria); color: var(--blizi-sobre-primaria); box-shadow: none;
}
.blizi-videos__short-titulo {
	margin: 12px 0 0; font-size: var(--blizi-letra-14); line-height: 1.3; font-weight: 600; letter-spacing: -0.02em;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.blizi-video.blizi-video--vertical,
	.blizi-video.blizi-video--vertical:hover { transition: none; transform: none; }
}

@media (max-width: 900px) {
	.blizi-videos__destaque { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Celular: botões de largura cheia e Shorts numa fileira que rola de lado, de borda a borda. */
@media (max-width: 782px) {
	.blizi-videos { padding: 40px 0 44px; }
	.blizi-videos__chamada-titulo { font-size: var(--blizi-letra-28); }
	.blizi-videos__acoes { width: 100%; }
	.blizi-videos__botao { flex: 1 1 auto; }
	.blizi-videos__titulo { font-size: var(--blizi-letra-18); line-height: 1.111; }
	.blizi-videos__subtitulo { margin-top: 36px; }
	.blizi-videos__shorts {
		display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
		margin-inline: -15px; padding: 0 15px 8px; scrollbar-width: none;
	}
	.blizi-videos__shorts::-webkit-scrollbar { display: none; }
	.blizi-videos__short { flex: 0 0 42%; scroll-snap-align: start; }
}