/* -----------------------------------------------------------------------------
   Cabecalho de pagina (o "hero") — ajustes da Weblink.
   -----------------------------------------------------------------------------

   ATENCAO: as regras deste ficheiro sao NOSSAS. Nao vieram do template de
   origem. Carregado em includes/header.php DEPOIS da folha de cada pagina,
   pelo mesmo motivo do menu.css: as 114 folhas de pagina repetem regras de
   layout, e uma folha carregada antes delas nao muda um pixel.
   ----------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Imagem do hero atras do texto, no telemovel
   ---------------------------------------------------------------------------
   O hero e sempre duas colunas: `.re-col-p2` com o texto, `.re-col_4` com a
   imagem. E o padrao de 71 paginas do site.

   Num ecra estreito as colunas empilham, e a imagem cai POR BAIXO do texto --
   fora do primeiro ecra, onde ninguem a ve, e a empurrar o conteudo util para
   baixo. Vale o peso do download e nao dá nada em troca.

   Aqui a imagem passa a preencher o hero por tras do texto. O fundo do hero
   e o gradiente escuro de `.re-banner` (main-style.css) e o texto e branco,
   por isso a imagem entra a 18% de opacidade: chega para dar contexto e
   profundidade, e nao chega para roubar contraste ao texto. Nao ha aqui uma
   escolha de gosto entre 18% e 40% -- e o que separa um titulo legivel de um
   titulo que se le mal, e o titulo ganha.

   `pointer-events: none` para o que esta por tras nao apanhar toques
   destinados aos botoes. Sobre `contain` vs `cover`, ver o comentario junto a
   regra da imagem, mais abaixo.

   O 768px e o ponto em que o `.wv-col-6` do template passa a 100% e as colunas
   empilham; acima disso a imagem continua ao lado do texto, como deve. */
@media (max-width: 768px) {
	.re-banner {
		position: relative;
		overflow: hidden;
	}

	/* Sem posicionamento em `.wv-container` nem em `.wv-row`, o absoluto abaixo
	   mede-se pela seccao inteira e nao so pela area do texto. */
	.re-banner .re-col_4 {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		width: auto;
		padding: 0;
		margin: 0;
		pointer-events: none;
	}

	.re-banner .re-col_4 .re-banner-image {
		width: 100%;
		height: 100%;
		margin: 0;
	}

	/* `contain` e nao `cover`.
	   -----------------------------------------------------------------------
	   As duas preenchem a caixa; a diferenca e o que fazem quando a proporcao
	   nao bate certo. As imagens de hero sao quase quadradas (~607x603) e a
	   caixa no telemovel e estreita e alta (~375x620). Com `cover`, a imagem
	   e ampliada ate cobrir a altura e corta-se mais de um terco da largura:
	   ficava so um pedaco do meio, com a pessoa cortada pelos lados.

	   `contain` mostra a imagem inteira, centrada, e o gradiente do hero
	   preenche o que sobra em cima e em baixo -- que e o que se quer, ja que a
	   imagem entra a 20% e o fundo e que manda. */
	.re-banner .re-col_4 img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: contain;
		object-position: center;
		opacity: .2;
	}

	/* O texto sobe para cima da imagem. Sem isto ficaria por baixo: os dois sao
	   irmaos, e o que tem z-index ganha. */
	.re-banner .re-col-p2 {
		position: relative;
		z-index: 1;
	}
}