/*
 * Fontinha — Quartos, hero.
 *
 * Figma desktop (4004:7172), banda 82..855. Mobile (4005:10374), banda 54..467.
 *
 *                    desktop (de 1440x773)        mobile (de 375x413)
 *   fotografia       (0, 82)     1440x773         (0, 54)      375x413
 *   título           (579.15, 316.5)  225x42      (130.56, 181.96) 104x20
 *   botão            (624.15, 407.65) 138.76x27.55 (127.83, 225.59) 110.03x21.84
 *   barra            (335, 676)  698.44x48.79     (25, 294)    325.91x58.28
 *   introdução       (303, 750)  835x34           (41.29, 368.72) 288x60
 *
 * Mobile first, com o desktop aos 1200 — o breakpoint do projecto.
 *
 * **A fotografia começa depois do header, e no frame começa 13px antes dele
 * acabar.** No frame de desktop o header é 0..95 e a fotografia 82..855: os
 * últimos 13px da barra escura ficam tapados pela fotografia. Aqui a barra é o
 * componente partilhado, com a altura em `--header-h`, e não se corta por causa
 * de uma página. A página fica 13px mais alta que o frame. Em telemóvel o
 * problema não existe: a fotografia começa exactamente nos 54 do header.
 *
 * **Título, botão e barra ficam centrados, e no frame não estão.** Medida a
 * tinta no render do frame: o "ROOMS" tem o centro em 693.0, o botão em 693.5 e
 * a barra em ~682, contra os 720 do meio do frame — 27 a 38px à esquerda. A
 * introdução, essa, está centrada (720.5). Em telemóvel a mesma deriva aparece
 * com outra proporção (4.9px de 375 no título, contra 27 de 1440), o que é a
 * assinatura de colocação à mão e não de uma regra. Num hero fluido, sobre
 * fotografia e sem nada por onde alinhar, o centro é o que se lê como intenção.
 * Ver "Decisões assumidas".
 */

.quartos-hero {
	/* Bloco de referência da barra de reservas e das peças sobrepostas. */
	position: relative;

	/* Contexto de empilhamento próprio, para o `mix-blend-mode` do véu ficar
	   confinado ao hero e não ir buscar o que está por baixo da página. */
	isolation: isolate;
}

/*
 * O véu sobre a fotografia. Não é decoração nossa: é um nó do frame, e sem ele
 * o hero fica visivelmente mais claro que o desenho — foi o que a fotografia da
 * banda mostrou, com o creme do título e da introdução a perder-se nas zonas
 * claras da fotografia.
 *
 * **Os dois frames desenham-no de maneira diferente**, e cada um fica como
 * está medido:
 *
 *   desktop  4004:7473  #3C3C3B a 25% com `mix-blend-mode: multiply`
 *   mobile   4005:11210 preto   a 25%, sem modo de mistura
 *
 * As duas contas não dão o mesmo — o multiply do #3C3C3B a 25% deixa a base a
 * 80.9% e o preto normal a 25% deixa-a a 75% — mas é o que os nós dizem, e a
 * diferença é de 6% de luminância.
 *
 * Vai num `::before` e não num `::after`: os pseudo-elementos entram como
 * primeiro e último filho, e o título, a barra e a introdução são posicionados.
 * Como `::after` o véu pintava-se por cima deles.
 */
.quartos-hero::before {
	position: absolute;
	z-index: 0;
	inset: 0;

	background: var(--s-bg-black);
	opacity: 0.25;
	content: "";

	/* O véu cobre a fotografia toda, incluindo a área do botão e da barra. */
	pointer-events: none;
}

.quartos-hero__imagem {
	display: block;
	width: 100%;

	/* Nó 4005:11209: 375x413 abaixo do header. Em proporção, para acompanhar
	   ecrãs mais estreitos ou mais largos. */
	aspect-ratio: 375 / 413;

	/*
	 * O travão do intervalo sem frame (768–1199).
	 *
	 * O rácio de telemóvel é 0.908 — quase quadrado — e a 1199 dava **1320.5px
	 * de hero**. O travão é a proporção de desktop, 773/1440 = 53.6806vw, e
	 * nunca abaixo dos 413 do desenho:
	 *
	 *    375   rácio 413.0   travão 413.0   ->  413.0   o desenho
	 *    768   rácio 845.8   travão 413.0   ->  413.0
	 *    900   rácio 991.2   travão 483.1   ->  483.1
	 *   1199   rácio 1320.5  travão 643.5   ->  643.5
	 *   1200   (bloco de desktop)           ->  644.2   sem salto
	 *
	 * Acima de 1200 fica inerte: lá o rácio é o de desktop e dá o mesmo número.
	 * A composição não se descola — o título, a barra e a introdução estão em
	 * percentagem da altura do hero, seja ela qual for.
	 */
	max-height: max(413px, 53.6806vw);
	object-fit: cover;
}

/* ---------- Título e botão ---------- */

/*
 * Os dois numa coluna só: no desenho o botão fica logo por baixo do título e
 * partilham o centro. Ancorados ao topo da fotografia, que é onde o desenho os
 * põe — 127.96 do topo da banda, ou 30.98% dos 413.
 */
.quartos-hero__topo {
	position: absolute;
	top: 30.98%;
	right: 0;
	left: 0;

	display: flex;
	flex-direction: column;
	align-items: center;

	/* 225.59 - (181.96 + 20): do fim da caixa do título ao topo do botão. */
	gap: 23.63px;
}

.quartos-hero__titulo {
	margin: 0;

	/* Nó 4005:11211, Baro LineTwo 27.857px. O --fs-h1 de mobile são 34px. */
	font-size: 27.857px;

	/* A caixa de linha à medida do nó, como nos títulos dos destaques: o
	   `normal` da Baro LineTwo dá 1.2 e o nó dá 0.70 — 42 para 60.237 aqui,
	   17 para 23.585 no título do quarto, 25 para 35.484 no número das
	   amenities. Sem isto sobravam 30px de folga por baixo do título e tudo o
	   que vinha a seguir descia. */
	line-height: 0.7;
	color: var(--s-bg-cream);
	text-align: center;
}

/*
 * O botão dourado. É a terceira variante do site e não entra no base.css: o
 * gradiente já existe em `--g-gold` e a barra de reservas em telemóvel usa-o
 * da mesma maneira, directamente na secção. Ver booking-bar.css, .booking__submit.
 *
 * Medidas do nó 4005:11212, e o rótulo do 4005:11213 (Baro Plain 10.794px,
 * #3C3C3B, que é o --s-text).
 */
.quartos-hero__cta {
	width: 110.03px;
	height: 21.84px;
	min-height: 0;
	padding: 0;

	background: var(--g-gold);
	color: var(--s-text);
	font-size: 10.794px;
	letter-spacing: 0;
}

.quartos-hero__cta:hover,
.quartos-hero__cta:focus-visible {
	background: var(--g-gold);
	color: var(--s-text);
	filter: brightness(1.08);
}

/* ---------- Barra de reservas ---------- */

/*
 * A barra é a da homepage, sem alteração nenhuma ao booking-bar.css. O que
 * muda é só a âncora: lá fica a 41.615px do fundo da fotografia, aqui a
 * 114.72 (352.28 contra 467), porque tem a introdução por baixo.
 *
 * Em percentagem da banda e não em px: a altura da fotografia acompanha a
 * largura do ecrã pelo `aspect-ratio`, e um valor em px descolava-se dela.
 */
.quartos-hero .booking {
	bottom: 27.78%; /* (467 - 352.28) / 413 */
}

/* ---------- Introdução ---------- */

/*
 * Ancorada ao TOPO e não ao fundo, ao contrário do que aqui estava.
 *
 * Estive a prendê-la ao fim da fotografia — 38.28px acima dela — para crescer
 * para dentro dela. Medido: com o texto do mockup a nossa caixa dá 75 de altura
 * contra os 60 do nó (cinco linhas em vez de quatro, porque o nó tem o texto em
 * contorno e com os espaços comidos), e ao crescer para cima ficava a **1.44px**
 * da barra de reservas — encostada.
 *
 * Ancorada ao topo, o intervalo até à barra é o do desenho (16.44 em telemóvel,
 * 25.21 em desktop) e o que cresce é a folga que sobra por baixo: 38.28 no
 * desenho, 23.28 com o texto que temos. É lá que há espaço.
 */
.quartos-hero__intro {
	position: absolute;
	right: 0;
	top: 76.20%; /* (352.28 + 16.44 - 54) / 413 */
	left: 0;

	width: 76.8%; /* 288 / 375 */
	margin-inline: auto;

	color: var(--s-bg-cream);
	font-family: var(--font-body);

	/* Nó 4005:11241: Gill Sans Light 13.232px, entrelinha normal. */
	font-size: 13.232px;
	font-weight: var(--fw-body);
	line-height: normal;
	text-align: center;
}

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

@media (min-width: 1200px) {
	.quartos-hero__imagem {
		/* Nó 4004:7423, 1440x773. */
		aspect-ratio: 1440 / 773;
	}

	/* Nó 4004:7473: aqui o véu é #3C3C3B em multiply, não preto liso. */
	.quartos-hero::before {
		background: var(--s-bg-dark);
		mix-blend-mode: multiply;
	}

	.quartos-hero__topo {
		top: 30.34%; /* (316.5 - 82) / 773 */

		/* 407.65 - (316.5 + 42). */
		gap: 49.15px;
	}

	.quartos-hero__titulo {
		/* Nó 4004:7477, Baro LineTwo 60.237px. */
		font-size: 60.237px;
	}

	.quartos-hero__cta {
		/* Nó 4004:7478 e rótulo 4004:7479, Baro Plain 12.202px. */
		width: 138.76px;
		height: 27.55px;
		font-size: 12.202px;
	}

	.quartos-hero .booking {
		bottom: 16.85%; /* (855 - 724.79) / 773 */
	}

	.quartos-hero__intro {
		top: 86.42%;      /* (724.79 + 25.21 - 82) / 773 */
		width: 57.986%;   /* 835 / 1440 */

		/* Nó 4004:7475, Gill Sans Light 14.98px. */
		font-size: 14.98px;
	}
}