/*
 * Fontinha — secção Hero da homepage.
 * Figma: frame desktop 1440 x 522. Imagem a toda a largura, sem texto sobreposto.
 *
 * Mobile first. Três patamares de altura, definidos pelo Ricardo (o frame
 * mobile do Figma não cota o hero e não há frame de tablet):
 *
 *   até 767px    proporção 375x351.22, do nó 4002:291 do frame Home - mob
 *   768–1199px   50vh, nunca abaixo de 360px (não há frame para este intervalo)
 *   1200px+      proporção 1440x522, do frame desktop
 *
 * O breakpoint de 768px é a única exceção ao breakpoint único de 1200px do
 * projeto, e existe só por causa destes três patamares.
 *
 * O .hero não leva padding vertical: a separação para a secção seguinte vem do
 * padding-block da .section, como no resto do tema.
 */

/* Bloco de referência da barra de reservas sobreposta — ver booking-bar.css. */
.hero {
	position: relative;
}

.hero__image {
	width: 100%;

	/* Mobile: o nó 4002:291 do frame Home - mob põe a fotografia em 47..405.22,
	   ou seja 351.22 visíveis abaixo do header, numa largura de 375. Em
	   proporção, para acompanhar ecrãs mais estreitos ou mais largos.

	   Estava em `65vh` entre 380 e 560, que era valor meu de quando não se
	   tinha ido ao frame mobile — e dava 433.6 num telemóvel de 667. */
	aspect-ratio: 375 / 351.22;
	object-fit: cover;
}

@media (min-width: 768px) {
	.hero__image {
		/* O intervalo 768–1199 não tem frame: fica no valor de sempre. */
		aspect-ratio: auto;
		height: 50vh;
		min-height: 360px;
		max-height: none;
	}
}

@media (min-width: 1200px) {
	.hero__image {
		/* O Figma dá 522px de imagem num frame de 1440. O que se mantém é a
		   proporção, não a altura: num ecrã mais largo o hero cresce na mesma
		   medida. A 1440 dá exatamente os 522px do design. */
		height: auto;
		aspect-ratio: 1440 / 522;

		/* O min-height de 360px do patamar de tablet fica inerte aqui:
		   a proporção nunca desce abaixo de 435px a partir de 1200. */
	}
}

/*
 * Mobile — a fotografia é outra, e tem escala e enquadramento próprios.
 *
 * No frame Home - mob a janela do hero (nó 4002:291) é 377.301x358.216 e a
 * caixa da fotografia lá dentro (nó 4002:288) é 543.072x369.029, encostada a
 * (0.700, -1.370) do canto da janela. Descontando o corte que o próprio Figma
 * faz para encher essa caixa, a fotografia rende 553.544 de largura: 1.4671
 * vezes a janela, com 3.37% do excesso à esquerda e nada em cima.
 *
 * Era isto que faltava, e o que se via não era o enquadramento — era o
 * ficheiro. O desenho usa uma fotografia diferente da de desktop: a mesma
 * cena, mas 2880x1920 em vez dos 2560x934, que é uma fatia em faixa. Com a de
 * desktop, o `cover` numa janela quase quadrada mostrava 39% da largura e o
 * azulejo ficava em "ME AWAY / HOME". É o campo `hero_imagem_mobile`, que
 * existia e estava vazio.
 *
 * Só aqui. Acima de 767px nada disto se aplica e o hero fica como estava.
 */
@media (max-width: 767px) {
	/* A janela passa a ser o <picture>: a fotografia tem de poder ser maior
	   que ela para haver enquadramento. */
	.hero__picture {
		display: block;
		position: relative;
		overflow: hidden;
		aspect-ratio: 375 / 351.22;
	}

	.hero__image {
		position: absolute;

		/* p% da janela menos p% da própria fotografia dá p x (janela -
		   fotografia), que é a conta do object-position. É o que permite ao
		   foco ser uma percentagem qualquer e não uma de nove âncoras — a
		   granularidade que faltou aos perks e custou 25px lá. */
		top: calc(var(--hero-foco-y, 50) * 1%);
		left: calc(var(--hero-foco-x, 50) * 1%);
		transform: translate(
			calc(var(--hero-foco-x, 50) * -1%),
			calc(var(--hero-foco-y, 50) * -1%)
		);

		aspect-ratio: auto;
		width: calc(var(--hero-escala, 1) * 100%);
		height: auto;

		/* O `img { max-width: 100% }` do base.css travava a largura na da
		   janela e a escala nunca saía do 1. Mesma armadilha dos perks. */
		max-width: none;

		/* Rede, para nunca sobrar fundo por baixo: com a fotografia do desenho
		   não entra — 366.8 de altura contra 351.2 de janela. */
		min-height: 100%;
		object-fit: cover;
	}
}