/* Classes utilitárias e ajustes específicos do index */
.hero-title{color:#ffffff}
.news-modal-overlay{z-index:9999}
.poster-portrait{aspect-ratio:9/16;height:auto}

/* Forçar layout lado-a-lado dos cartões de "Próximos Programas" no mobile
   para que fiquem iguais ao modo desktop (imagem à esquerda e texto à direita). */
@media (max-width: 640px) {
	/* Certificar que o contêiner do cartão mantenha a linha */
	#programs .program-card .p-6 > .flex {
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 0.75rem;
	}

	/* Tornar a imagem maior na coluna esquerda e evitar quebrar linha */
	#programs .program-card .poster-portrait {
		width: 5.25rem !important; /* 84px */
		height: 7.5rem !important; /* 120px */
		flex: 0 0 auto;
	}

	/* Garantir que o bloco de texto ocupe o restante do espaço */
	#programs .program-card .flex-1 {
		min-width: 0; /* allow truncation instead of expanding */
	}

	/* Exibir chips (categoria / horário) ao lado do conteúdo como no desktop */
	#programs .program-card .md\:hidden { display: none !important; }
	#programs .program-card .hidden.md\:flex { display: flex !important; }
}