/* tela-notebook.css — [2026-10-19] Notebook 1366×768 (e telas baixas parecidas) + menu da foto sem corte.
   Pedido: em 1366×768 o site parecia "com zoom", e o menu da foto (Trocar de conta + carteira + itens) passava do fim
   da tela e era cortado. No Chrome dessa tela sobram cerca de 1345×600 px para a página.
   Medido no Blog (1345×600): o destaque ficava com 691×718 px, MAIS ALTO que a área visível inteira, e os títulos
   em 46/38 px.
   O que este arquivo faz (carregado no index.php DEPOIS dos outros; não edita nenhum arquivo compartilhado):
     1) menu da foto: nunca passa do fim da tela. Ganha altura máxima e rolagem própria (em qualquer tela);
     2) só em computador com tela BAIXA (≥ 992 px de largura e ≤ 820 px de altura), as peças que mais pesavam ficam mais
        compactas: menu da foto, destaque e topo do Blog e título da Home. Monitores grandes e celular não mudam.
   Nada de zoom/transform na página: jogos, mascote e janelas continuam com as mesmas coordenadas.
   Para desfazer: tirar o <link> deste arquivo do index.php. */

/* ---------------------------------------------------------------- 1) menu da foto: sem corte */
html:not(#tvnb):not(#tvnb):not(#tvnb) #header .profile-image .dropdown-menu {
	/* topo do menu ≈ cabeçalho + 15 px de distância + 6 px de margem; folga de 12 px no pé */
	max-height: calc(100vh - var(--cnvs-header-height, 60px) - 34px);
	max-height: calc(100dvh - var(--cnvs-header-height, 60px) - 34px);
	/* [2026-10-19 b] !important: o universo.css tem "#header .dropdown-menu { overflow: visible !important }" (sub-menus
	   do menu principal) — sem vencer aquilo, a caixa ficava com a altura certa e os itens vazavam por baixo dela */
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;          /* rolar o menu não rola a página de trás */
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--tv-texto) 28%, transparent) transparent;
}
html:not(#tvnb):not(#tvnb):not(#tvnb) #header .profile-image .dropdown-menu::-webkit-scrollbar { width: 6px; }
html:not(#tvnb):not(#tvnb):not(#tvnb) #header .profile-image .dropdown-menu::-webkit-scrollbar-thumb { border-radius: 6px; background: color-mix(in srgb, var(--tv-texto) 28%, transparent); }

/* ---------------------------------------------------------------- 2) computador com tela baixa (notebook 1366×768, 1280×720, 1440×900…) */
@media (min-width: 992px) and (max-height: 820px) {

	/* menu da foto mais justo (cabe inteiro na maioria dos casos; se não couber, rola — regra 1) */
	html:not(#tvnb):not(#tvnb):not(#tvnb) #header .profile-image .dropdown-item { padding-top: 6px; padding-bottom: 6px; font-size: .88rem; }

	/* Blog: topo */
	html:not(#tvnb) .tvbn-topo { padding-top: 12px; }
	html:not(#tvnb) .tvbn-topo-linha { padding-bottom: 8px; }
	html:not(#tvnb) .tvbn-marca { font-size: clamp(28px, 2.9vw, 38px); }
	html:not(#tvnb) .tvbn-editorias a { padding-top: 8px; padding-bottom: 9px; }
	html:not(#tvnb) .tvbn-pagina { padding-top: 16px !important; }

	/* Blog: destaque + 2 chamadas em ~540 px (antes ~718 px) — cabe na tela ao rolar até ele */
	html:not(#tvnb) .tvbn-capa { gap: 14px; margin-bottom: 28px; }
	html:not(#tvnb) .tvbn-chamadas { gap: 12px; }
	html:not(#tvnb) .tvbn-manchete { min-height: 400px; }
	html:not(#tvnb) .tvbn-manchete-txt { gap: 8px; padding: 22px 24px; }
	html:not(#tvnb) .tvbn-manchete h2 { font-size: clamp(22px, 2.3vw, 30px); }
	html:not(#tvnb) .tvbn-manchete p { font-size: 14.5px; }
	html:not(#tvnb) .tvbn-chamada-img { aspect-ratio: 16 / 5.6; }
	html:not(#tvnb) .tvbn-chamada-txt { gap: 6px; padding: 11px 14px 13px; }
	html:not(#tvnb) .tvbn-chamada h3 { font-size: 15.5px; -webkit-line-clamp: 2; }

	/* Home: título de boas-vindas */
	html:not(#tvnb) .tvh-titulo { font-size: clamp(34px, 4.2vw, 52px); }
}