/*
| LISTAGEM DE EMPREENDIMENTOS
|
| Regras que antes ficavam num <style> dentro do proprio template.
| Carregado so nesta pagina, via add_style() em template/empreendimentos.php.
|
| NAO e gerado pelo sass: escrito a mao e nao e tocado quando o
| style.min.css e recompilado. Editar direto aqui.
*/


/* ===== bloco 1 de 1 ===== */

/* Mobile: não existe a versão "-mobile" deste banner, então reaproveitamos
   a imagem de desktop com background cover para exibir um banner também no
   mobile (igual à home), mantendo o mesmo texto. */
@media only screen and (min-width: 577px) and (max-width: 768px){
	.banner-sub.banner-emp{
		background-size: cover;
		background-position: center top;
		min-height: 61vw;
	}
	.banner-sub.banner-emp .txt{
		top: 25vw;
		bottom: auto;
		left: 15%;
		width: 55vw;
	}
	/* Mesma escala/peso do título do banner da home (mobile). */
	.banner-sub.banner-emp .txt .h1{
		font-size: 4.5vw;
		line-height: 1.08;
		letter-spacing: 0;
		font-weight: 300;
		overflow-wrap: break-word;
	}
	.banner-sub.banner-emp .txt .h1 span{ display: block; }
	.banner-sub.banner-emp .vk{ display: none; }

	/* Transição da seção branca na escala do mobile (igual à home/rodapé),
	   para o canto arredondado e o triangle-curve-right caírem na junção
	   certa abaixo do título, e não no meio do banner. */
	.section-empreendimentos.section-bottom-banner{
		border-radius: 35px 0 0 0;
	}
	.section-empreendimentos .triangle-curve-right{
		top: -40px;
	}
}

@media only screen and (max-width: 576px){
	.banner-sub.banner-emp{
		background-size: cover;
		background-position: center;
		min-height: 130vw;
	}
	.banner-sub.banner-emp .txt{
		top: 140px;
		bottom: auto;
		left: 4vw;
		width: 92vw;
	}
	.banner-sub.banner-emp .txt .h1{
		font-size: 3.8em;
		line-height: 1.15;
		letter-spacing: 0;
		font-weight: 300;
		overflow-wrap: break-word;
	}
	.banner-sub.banner-emp .txt .h1 span{ display: block; }
	.banner-sub.banner-emp .vk{ display: none; }
	.section-empreendimentos.section-bottom-banner{
		border-radius: 35px 0 0 0;
	}
	.section-empreendimentos .triangle-curve-right{
		top: -40px;
	}
}


/* ---------------------------------------------------------------------------
| LARGURA DOS CARDS — faixas que ficaram sem regra
|
| O card usa "is-3-fullhd is-4-widescreen is-4-desktop", classes do Bulma que
| so valem de 1024px para cima. De 577 a 768px o mobile.scss fixa 25%. Sobravam
| duas faixas sem largura nenhuma, e nelas a coluna cai no "flex: 1 1 0%" do
| Bulma: os cards deixam de ter largura propria e dividem a linha entre si.
|
| O efeito medido no site:
|   375px  -> 2 por linha (~160px), mas o ultimo sozinho ficava com 319px
|   820px  -> 7 cards na mesma linha, com 74, 130, 88, 132... px
|
| Fixando a largura, um card sozinho na ultima linha fica do mesmo tamanho
| dos demais em vez de esticar.
--------------------------------------------------------------------------- */

/* Celular: 2 por linha, como ja acontecia na pratica. */
@media only screen and (max-width: 576px){
	.section-empreendimentos.page-empreendimentos .list-emp > .column{
		flex: 0 0 50%;
		width: 50%;
		max-width: 50%;
	}
}

/* Tablet: 3 por linha, continuando o mesmo ritmo do desktop (is-4 = 33%). */
@media only screen and (min-width: 769px) and (max-width: 1023px){
	.section-empreendimentos.page-empreendimentos .list-emp > .column{
		flex: 0 0 33.3333%;
		width: 33.3333%;
		max-width: 33.3333%;
	}
}