/*
 * Fontinha — Quartos, a lista.
 *
 * Figma desktop (4004:7172), bandas 855..1627. Mobile (4005:10374), 467..1081.
 *
 * **Uma secção, duas cores, um carrossel.** No frame as fotografias estão na
 * banda cinzenta e os textos na azul, com larguras diferentes — 606.46 com
 * passo 618.43 as fotografias, 467 com passo 587 as colunas de texto. Mas o
 * centro do item actual é o mesmo nos dois (714.2 em desktop, 187.2 em
 * telemóvel): é o mesmo quarto visto em duas alturas. Aqui é um carrossel só,
 * com fotografia e texto dentro do mesmo item, e a costura das duas cores
 * desenhada no fundo da secção com um `linear-gradient` de paragens duras.
 *
 * O custo: as colunas de texto passam a andar ao passo das fotografias
 * (618.43 em vez de 587), o que corta mais 31px das colunas das pontas em
 * desktop. Elas já estão cortadas no desenho — a primeira começa em -106.3 e a
 * última acaba em 1534.7. Ver "Decisões assumidas".
 *
 * Alturas medidas, de cima para baixo:
 *
 *                          desktop (de 855)      mobile (de 467)
 *   costura preta          0 ..    19.75         —
 *   banda #3C3C3B         19.75 .. 450.88        0 .. 290
 *   fotografia            33.64 .. 441.60       11.06 .. 243.62
 *   paginação              —                   265.71 .. 269.42
 *   banda petrol         450.88 .. 772         290 .. 614
 *   texto                 489 .. 689.30        334.95 .. 567.21
 *   barra de progresso   734.30 .. 740.23        —
 *
 * Mobile first, com o desktop aos 1200.
 */

.quartos-lista.section {
	/* A banda tem as medidas todas do desenho lá dentro; o padding da .section
	   somava-lhe altura. */
	padding-block: 0;

	/*
	 * A costura das duas bandas. Em telemóvel são duas cores; em desktop são
	 * três, com os 19.75px pretos do nó 4004:7426 por cima do cinzento.
	 *
	 * Vai no fundo e não em elementos: as paragens ficam ancoradas ao topo da
	 * secção e não se mexem quando o texto de um quarto for mais comprido que
	 * o do mockup.
	 */
	background: linear-gradient(
		to bottom,
		var(--s-bg-dark) 0,
		var(--s-bg-dark) 290px,
		var(--s-bg-petrol) 290px
	);
	color: var(--s-bg-cream);
}

/* ---------- Carrossel ---------- */

/*
 * O item actual ao centro, com os vizinhos a espreitar de cada lado: o padding
 * da janela é o que sobra da largura depois do item. É a mesma conta dos
 * destaques em telemóvel — (375 - 232.56) / 2 = 71.22, contra os 70.89 do nó
 * 4005:11351.
 *
 * Tem de ser `scroll-padding` e não um scrollLeft à mão: com o snap activo,
 * qualquer posição fora do encaixe é puxada de volta.
 */
.quartos-lista .carousel__viewport {
	padding-inline: calc((100% - 232.56px) / 2);
	scroll-padding-inline: calc((100% - 232.56px) / 2);
}

.quartos-lista .carousel__track {
	/* 311.02 - (70.89 + 232.56), nós 4005:11351 e 11356. O resto do track — o
	   flex, as margens e a lista sem marcas — vem do componente. */
	gap: 7.57px;
}

/*
 * Um calço no fim do track, da largura do padding da janela.
 *
 * Sem ele o ÚLTIMO quarto não chegava ao centro: ficava em x=101.4 em vez de
 * 71.2, com o texto 30px à direita dos outros dois. A causa é o
 * `padding-inline-end` da janela não entrar na área de scroll quando um filho
 * transborda — e o texto do quarto transborda 40.56 de cada lado, por ser mais
 * largo que o item. Medido: scrollWidth dava 825 quando devia dar 855.
 *
 *     quarto 1   centro 187.5
 *     quarto 2   centro 187.6
 *     quarto 3   centro 217.7   <- 30.2 fora
 *
 * O calço é conteúdo do track, por isso conta sempre. O `gap` também se lhe
 * aplica, o que dá 7.57 de folga a mais no fim; o snap encaixa no último item
 * na mesma, porque é ele que tem o ponto de encaixe.
 *
 * **`100vw` e não `100%`.** O `100%` resolve contra o track, cuja largura é a
 * caixa de conteúdo da janela — 232.56, exactamente a largura do item — e o
 * calço computava 0. A janela é que tem os 375.
 */
.quartos-lista .carousel__track::after {
	flex: 0 0 calc((100vw - 232.56px) / 2);
	content: "";
}

.quarto {
	display: flex;
	flex-direction: column;
	width: 232.56px;
}

/* ---------- Fotografia ---------- */

.quarto__foto {
	/* 478.06 - 467, do topo da banda ao topo da fotografia. */
	margin-top: 11.06px;

	/* Nó 4005:11351: 232.56x232.56 — quadrada em telemóvel, e 606.46x407.96
	   em desktop. Dois rácios, por isso vive aqui e não no tamanho da imagem. */
	aspect-ratio: 1;
}

.quarto__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * O ícone de expandir sobre a fotografia, nó 4005:11368 — 37.15x37.14 em
 * (250.53, 493.94), ou seja a 15.93 da aresta direita da fotografia e a 15.88
 * do topo dela. É o segundo gatilho do pop-up de detalhe; o primeiro é o
 * "details" da banda azul.
 *
 * Só em telemóvel: o frame de desktop não o tem.
 */
.quarto__foto {
	position: relative;
}

.quarto__expandir {
	position: absolute;
	z-index: 1;
	top: 6.83%;   /* (493.94 - 478.06) / 232.56 */
	right: 6.85%; /* (303.45 - 287.68) / 232.56 */

	width: 15.97%; /* 37.15 / 232.56 */
	aspect-ratio: 1;

	background: url("../../img/quartos/expandir.svg") no-repeat center / contain;
}

.quarto__expandir:hover,
.quarto__expandir:focus-visible {
	filter: brightness(1.2);
}

/* ---------- Texto ---------- */

/*
 * Mais largo que o item: 313.68 contra 232.56, o que o faz transbordar 40.56px
 * para cada lado. É o que o nó 4005:11382 tem, e não colide com nada porque em
 * telemóvel só o item actual mostra o texto. A janela do carrossel não o corta:
 * o recorte é na caixa de padding, que é a largura toda dos 375.
 */
.quarto__texto {
	display: flex;
	flex-direction: column;
	align-items: center;

	/* 801.95 - 710.62: do fim da fotografia ao topo do título. Lá pelo meio
	   passam a paginação e a costura das bandas, que não estão no fluxo. */
	margin-top: 91.33px;

	width: 313.68px;
	margin-inline: calc((232.56px - 313.68px) / 2);

	/* 25px em todos os intervalos da coluna, nos dois frames. Está entre o
	   --sp-6 (24) e o --sp-8 (32), e é medição e não escolha: do fim do título
	   ao início da descrição, dela ao botão e do botão ao preço. */
	gap: 25px;

	text-align: center;
}

.quarto__titulo {
	margin: 0;

	/* Nó 4005:11383, Baro LineTwo 15.436px. */
	font-size: 15.436px;

	/* 11 de caixa para 15.436 de corpo, como o título do hero. */
	line-height: 0.7;
	color: var(--s-bg-cream);
}

.quarto__descricao {
	margin: 0;
	font-family: var(--font-body);

	/* Nó 4005:11384 — o parágrafo vem do Figma em contorno, não em texto vivo,
	   por isso o corpo saiu da medição: o passo entre linhas é 15.88 e as
	   hastes ascendentes medem 9.03, o que dá 13.232px de Gill Sans Light. É o
	   mesmo corpo que a nota das amenities (nó 4005:10337), que é texto a
	   sério e diz 13.232 no Dev Mode — confirma a conta. */
	font-size: 13.232px;
	font-weight: var(--fw-body);

	/* `normal` e não 1.6: é o `leading-normal` do Figma, que nesta fonte mede
	   1.2. Ver "Entrelinha: os dois sítios onde o `normal` afastava do Figma". */
	line-height: normal;
}

/* O botão dourado, como o do hero. Nós 4005:11741 (caixa) e 11742 (rótulo). */
.quarto__cta {
	width: 84.96px;
	height: 27.919px;
	min-height: 0;
	padding: 0;

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

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

.quarto__preco {
	margin: 0;

	/* Baro PLAIN, não LineTwo — nó 4005:11743. O título do quarto por cima é
	   que leva a LineTwo. */
	font-family: var(--font-display);
	font-size: 16.171px;
	font-weight: var(--fw-display-strong);
	line-height: 0.7;
	color: var(--s-bg-cream);
}

/*
 * Só o quarto actual mostra o texto. No frame de telemóvel há um Frame 51 e
 * não três: os quartos dos lados são só fotografia a espreitar.
 *
 * `visibility` e não `display`: a tirá-los do fluxo, a altura da banda passava
 * a saltar consoante o quarto em que se estivesse, porque as descrições não
 * têm todas o mesmo número de linhas. É a mesma lição dos destaques.
 *
 * A marca `is-ligado` é do componente e só entra quando o JS pega. Sem ela,
 * sem JavaScript nenhum item era o actual e escondia-se o texto de todos.
 */
.carousel.is-ligado .quarto:not(.is-atual) .quarto__texto {
	visibility: hidden;
}

/* ---------- Paginação (só telemóvel) ---------- */

/*
 * Os traços do nó 4005:11361: 36x3.71 com passo 43.15, ou seja 7.15 de
 * intervalo. Brancos, e o actual com o gradiente dourado — amostrado no export,
 * (168,112,85) a (238,194,147) ao longo dos 36px do próprio traço.
 *
 * O grupo tem 250.48 e seis traços; o componente faz um por item, por isso com
 * três quartos saem três, não seis. Mesma nota das FAQs.
 */
.quartos-lista .carousel__paginacao {
	position: absolute;
	top: 265.71px; /* 732.71 - 467 */
	right: 0;
	left: 0;

	display: flex;
	justify-content: center;
	gap: 7.15px;
}

.quartos-lista .carousel__pagina {
	display: block;
	width: 36px;
	height: 3.71px;
	padding: 0;
	border: 0;

	/* Sem isto o botão herda a linha do texto e a fila fica com 18px de
	   altura em vez de 3.71. */
	line-height: 0;

	/* Branco puro, amostrado no export. O --s-text-on-media é o token do
	   branco sobre fotografia e sobre a barra escura, que é o que isto é —
	   as FAQs usam o --c-white em bruto aqui, e não deviam. */
	background: var(--s-text-on-media);
}

.quartos-lista .carousel__pagina.is-atual {
	background: var(--g-gold);
}

/* O número que o componente imprime dentro do botão não tem sítio aqui. */
.quartos-lista .carousel__pagina [aria-hidden="true"] {
	display: none;
}

/* ---------- Barra de progresso (só desktop) ---------- */

/* O sobre-galeria.css declara a `.carousel__progresso` sem prefixo de secção,
   por isso ela chegaria aqui com o desenho da Sobre Nós. Fica fora em
   telemóvel, que é onde o indicador desta banda é a paginação. */
.quartos-lista .carousel__progresso {
	display: none;
}

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

@media (min-width: 1200px) {
	.quartos-lista.section {
		background: linear-gradient(
			to bottom,
			var(--s-bg-black) 0,
			var(--s-bg-black) 19.75px,
			var(--s-bg-dark) 19.75px,
			var(--s-bg-dark) 450.88px,
			var(--s-bg-petrol) 450.88px
		);
	}

	/* (1440 - 606.46) / 2 = 416.77, contra os 411.02 do nó 4004:7429. */
	.quartos-lista .carousel__viewport {
		padding-inline: calc((100% - 606.46px) / 2);
		scroll-padding-inline: calc((100% - 606.46px) / 2);
	}

	/* 1029.45 - (411.02 + 606.46), a largura do separador do nó 4004:7472. */
	.quartos-lista .carousel__track {
		gap: 11.97px;
	}

	.quarto {
		width: 606.46px;
	}

	.quartos-lista .carousel__track::after {
		flex-basis: calc((100vw - 606.46px) / 2);
	}

	.quarto__foto {
		margin-top: 33.64px; /* 888.64 - 855 */
		aspect-ratio: 606.46 / 407.96;
	}

	.quarto__texto {
		/* 1344 - 1296.6, do fim da fotografia ao topo do título. */
		margin-top: 47.4px;

		/* Nó 4004:7890. Aqui cabe dentro do item, ao contrário do telemóvel. */
		width: 467px;
		margin-inline: auto;
	}

	.quarto__titulo {
		font-size: 23.585px; /* nó 4004:7446 */
	}

	.quarto__descricao {
		font-size: 10.776px; /* nó 4004:7447 */
	}

	.quarto__cta {
		/* Nós 4004:7464 e 7465. */
		width: 138.76px;
		height: 27.546px;
		font-size: 12.202px;
	}

	.quarto__preco {
		font-size: 24.708px; /* nó 4004:7470 */
	}

	/* O ícone de expandir é do desenho de telemóvel. */
	.quarto__expandir {
		display: none;
	}

	/* Em desktop vêem-se as três colunas de texto, como no frame. */
	.carousel.is-ligado .quarto:not(.is-atual) .quarto__texto {
		visibility: visible;
	}

	.quartos-lista .carousel__paginacao {
		display: none;
	}

	/*
	 * A barra de progresso, nós 4004:7480 (calha, 359.51x5.934) e 4004:7481
	 * (cursor, 86.64x6.28). A calha está em y 1589.30, 45px abaixo do fim das
	 * colunas — o `gap` do Frame 47.
	 *
	 * O cursor é construído pelo JS e a largura vem da fracção do carrossel
	 * que está à vista, por isso não há aqui valor de desenho: os 86.64 de 359.51
	 * do frame são os que se veriam com os quartos que lá estão.
	 */
	/* O `:not([hidden])` é preciso: o componente esconde a barra pondo
	   `hidden` no elemento quando não há nada para rolar, e um `display`
	   declarado numa classe ganha ao `[hidden]` do browser. */
	.quartos-lista .carousel__progresso:not([hidden]) {
		display: block;
		position: relative;
		width: 24.966%; /* 359.51 / 1440 */
		height: 5.934px;
		margin: 45px auto 0;
		background: var(--s-line-on-petrol);
	}

	.quartos-lista .carousel__progresso__cursor {
		top: 0;
		height: 5.934px;
		background: var(--g-gold);
	}
}

/* A folga até ao fim da banda: 1627 - 1595.23 em desktop, 1081 - 1034.21 em
   telemóvel. Fica no fim para não ser desfeita pelos blocos acima. */
.quartos-lista.section {
	padding-bottom: 46.79px;
}

@media (min-width: 1200px) {
	.quartos-lista.section {
		padding-bottom: 31.77px;
	}
}