/*
 * Fontinha — Eventos, o cabeçalho.
 *
 * Banda 95..425 em desktop e 54..384 em telemóvel: **330 nos dois**. Por isso é
 * altura em px e não um palco com `aspect-ratio` — não há nada aqui que escale
 * com a largura.
 *
 * As medidas dos nós estão no eventos-cabecalho.php.
 *
 * Mobile first, com o desktop aos 1200.
 */

.eventos-cabecalho.section {
	padding-block: 0;

	background: var(--s-bg-greige);
}

.eventos-cabecalho__palco {
	position: relative;

	height: 330px;
}

/* ============================================================
   O título
   ============================================================ */

/*
 * Em telemóvel o frame não o tem: fica sem caixa e sem imagem, e sobra o
 * `.screen-reader-text` lá dentro, que é absoluto e não ocupa espaço. **Não
 * leva `display: none`** — isso levava o texto atrás dele.
 */
.eventos-cabecalho__titulo {
	margin: 0;
	height: 0;
}

/* ============================================================
   A introdução
   ============================================================ */

/*
 * Justificada em telemóvel e centrada em desktop — os dois frames alinham-na de
 * maneira diferente. Em telemóvel são onze linhas coladas às duas margens.
 *
 * O corpo não foi lido num nó: em telemóvel a introdução vem em contorno e não
 * tem `font-size`. Sai do passo entre linhas, medido nos pixéis do export —
 * **16.9** — sobre a entrelinha de 1.2 que o nó de desktop dá: 14.08px, que é o
 * 14.101 do resumo do cartão ao centésimo. É a mesma face e o mesmo corpo.
 */
.eventos-cabecalho__intro {
	position: absolute;
	top: 101.57px; /* 155.572 - 54 */
	left: 11.803%; /* 44.262 / 375 */

	margin: 0;
	width: 79.061%; /* 296.48 / 375 */

	color: var(--s-text);
	font-family: var(--font-body);
	font-size: 14.101px;
	font-weight: 300;
	line-height: 1.2; /* passo de 16.92, medido 16.9 */
	text-align: justify;
}

/* ============================================================
   Desktop (1200px e acima)
   ============================================================ */

@media (min-width: 1200px) {

	/*
	 * O título entra por `background-image`, como o "WE HAVE IT" dos perks: a
	 * caixa é a do SVG (570x57), que são os **limites de render** e não os
	 * 565.57x54.82 do nó — o traço de 2.1 com junção em bico sai para lá de
	 * meia espessura, a mesma lição da fita da Pizzeria. A origem lê-se no
	 * `translate` do rect da página que o export traz: (428.523, 183.684).
	 *
	 * **Fica centrado.** O desenho põe-lhe o centro em 713.52, ou seja 6.48 à
	 * esquerda do centro do frame — colocação à mão, como o título do hero dos
	 * Quartos e o botão do hero da Pizzeria. Num cabeçalho fluido o centro é o
	 * que se lê como intenção.
	 */
	.eventos-cabecalho__titulo {
		position: absolute;
		top: 88.684px; /* 183.684 - 95 */
		left: 50%;

		width: 570px;
		height: 57px;

		background-image: url("../../img/eventos/events-and-more.svg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		transform: translateX(-50%);
	}

	.eventos-cabecalho__intro {
		top: 198.361px; /* 293.361 - 95 */
		left: 50%;

		width: 74.028%; /* 1066 / 1440 */

		font-size: 13.719px;
		line-height: 1.2; /* passo de 16.46 */
		text-align: center;
		transform: translateX(-50%);
	}
}