/*
 * Fontinha — Quartos, amenities.
 *
 * Figma desktop (4004:7172), banda 1627..1943, creme #F7E9CA.
 * Mobile (4005:10374), banda 1081..1268.
 *
 *                        desktop (de 1627)        mobile (de 1081)
 *   título               (598.65, 1680)  +53      (114.84, 1103.25) +22.25
 *   caixas               y 1742.66      +115.66   — não há —
 *   ícones               fundo a ~1797             fundo a ~1168     +87
 *   legendas             y 1805.35      +178.35    y 1179.40         +98.40
 *   nota                 (26.05, 1847.19) +220.19  (48.76, 1213.83) +132.83
 *   fim da banda         1943                      1268
 *
 * **Em telemóvel não há caixas.** As oito molduras de desktop desaparecem e
 * ficam ícone e legenda, três de cada vez, entre duas réguas verticais
 * (nós 4005:10341 e 10343, x 21.13 e 354.86, 131.62 de altura) com setas por
 * fora delas. É a única banda desta página em que o desenho pede setas.
 *
 * A mesma marcação serve as duas larguras: em telemóvel é carrossel, em desktop
 * a janela volta a `overflow: visible` e as oito caixas repartem a linha.
 *
 * Mobile first, com o desktop aos 1200.
 */

.quartos-amenities.section {
	/* As medidas do desenho estão todas dentro da banda. */
	padding-block: 0;

	background: var(--s-bg-cream);

	/* Petrol como cor de texto sobre o creme, como o "OUR PERKS" dos perks. */
	color: var(--s-link);

	/*
	 * O alvo de toque da seta da direita transborda 9.5px — a seta está em
	 * 362.50 e a caixa de 44x44 acaba em 384.5 —, e isso dava 385 de
	 * `scrollWidth` numa página de 375. `clip` e não `hidden`: o `hidden`
	 * criava um contentor de scroll, e a janela do carrossel aqui dentro tem
	 * o seu. Só o alvo invisível é cortado; o triângulo fica inteiro.
	 */
	overflow-x: clip;
}

.quartos-amenities__palco {
	position: relative;
	max-width: 1440px;
	margin-inline: auto;

	/* 1268 - 1242.65, do fim da nota ao fim da banda. */
	padding-top: 22.25px;  /* 1103.25 - 1081 */
	padding-bottom: 25.35px;
}

/*
 * As duas réguas verticais. São do desenho de telemóvel e desaparecem em
 * desktop, onde o que separa as amenities são as molduras das caixas.
 *
 * Vão de +25.30 a +156.92 da banda, ou seja começam logo abaixo do título e
 * passam por baixo das legendas — a nota fica entre elas.
 */
.quartos-amenities__palco::before,
.quartos-amenities__palco::after {
	position: absolute;
	top: 25.30px;    /* 1106.30 - 1081 */
	width: 1px;
	height: 131.62px;
	background: currentcolor;
	content: "";
}

.quartos-amenities__palco::before {
	left: 21.13px;
}

.quartos-amenities__palco::after {
	right: 20.14px; /* 375 - 354.86 */
}

/* ---------- Título ---------- */

.quartos-amenities__titulo {
	margin: 0;

	/* Nó 4005:10336, Baro LineTwo 15.436px. */
	font-size: 15.436px;
	line-height: 0.7;
	text-align: center;
}

/* ---------- A fila ---------- */

/*
 * O topo da fila é calculado de trás para a frente: os ícones estão alinhados
 * pelo FUNDO — no desenho os oito acabam todos a ~1797, com alturas entre 33.45
 * e 47.22 —, e é esse fundo que tem de cair em +87 da banda.
 *
 * A caixa do título rende 10.80 e não os 11 do nó, por isso o intervalo é
 * medido e não deduzido: 87 - 32.76 (altura da fila) - 33.05 (fim do título)
 * = 21.19. Estava em 26.54, deduzido dos 11 do nó, e punha os ícones 4.70
 * abaixo do desenho.
 */
.quartos-amenities__lista {
	margin-top: 21.19px;
}

/*
 * A janela é a caixa ENTRE as duas réguas, por margem e não por padding.
 *
 * Com padding a caixa continuava a ter os 375 e a quarta amenity espreitava
 * 20px para lá da régua da direita — no frame não há nada ali. Com margem a
 * caixa passa a ter os 333.73 das réguas e o recorte do scroll acontece
 * exactamente nelas.
 */
.quartos-amenities .carousel__viewport {
	margin-inline: 21.13px 20.14px;
	padding-inline: 0;
	scroll-padding-inline: 0;
}

.quartos-amenities .carousel__track {
	gap: 0;
}

.quartos-amenity {
	display: flex;
	flex-direction: column;
	align-items: center;

	/* (354.86 - 21.13) / 3, a caixa entre as réguas repartida em três. */
	width: 111.243px;
}

/* ---------- Ícone e número ---------- */

.quartos-amenity__topo {
	display: flex;

	/* Os ícones alinham pelo fundo, não pelo topo: no desenho é a base deles
	   que é comum, e as alturas é que variam. */
	align-items: flex-end;
	justify-content: center;

	/* A altura do ícone mais alto (47.2153) à escala de telemóvel. */
	height: 32.76px;
}

/*
 * Cada ícone sai do Figma com o seu tamanho no próprio ficheiro — de
 * 43.71x33.45 a 48.24x47.22 —, e o SVG entra inline com esses atributos, por
 * isso rende ao tamanho do desenho sem CSS nenhum.
 *
 * Em telemóvel os oito encolhem pelo mesmo factor: os nós de lá (4005:11745,
 * 11746 e 11747) são exactamente 0.6939 dos de desktop, nos dois eixos. Um
 * `transform` e não uma largura, para não ser preciso repetir aqui os oito
 * tamanhos — a caixa da fila já tem altura fixa e o ícone está centrado, por
 * isso a escala não mexe no layout.
 */
.quartos-amenity__icone {
	display: block;
	transform: scale(0.6939);
	transform-origin: bottom center;
}

.quartos-amenity__icone svg {
	display: block;
}

/* O número só existe em desktop, dentro da caixa. */
.quartos-amenity__numero {
	display: none;
}

/* ---------- Legenda ---------- */

.quartos-amenity__label {
	/* 98.40 - 87, do fundo dos ícones ao topo da legenda. */
	margin-top: 11.4px;

	font-family: var(--font-body);

	/* Nó 4005:10319, Gill Sans Medium 9.872px. */
	font-size: 9.872px;
	font-weight: var(--fw-body-strong);
	line-height: normal;
	text-align: center;
	text-transform: uppercase;
}

/* ---------- Setas ---------- */

/*
 * Triângulos cheios de 8.85x10.30, nós 4005:10340 e 10342, por fora das
 * réguas. Feitos com bordas e não exportados: um triângulo cheio é uma forma
 * que o CSS reproduz exactamente, ao contrário da arte de linha dos ícones.
 *
 * A caixa do botão é o alvo de toque de 44x44 e o triângulo vive num `::after`
 * centrado nela, como nos outros controlos do tema.
 */
.quartos-amenities .carousel__controls {
	display: contents;
}

/*
 * O bloco de referência das setas tem de ser o PALCO, não o `.carousel`.
 *
 * O base.css dá `position: relative` ao `.carousel`, e era contra ele que o
 * `top` resolvia: as setas caíam no centro **147.78** da banda em vez dos
 * 93.55 do nó — 54px abaixo, que é exactamente onde o carrossel começa.
 *
 * `static` aqui é seguro: o que o `.carousel` ancora são a paginação e a barra
 * de progresso, e esta banda não tem nenhuma delas.
 */
.quartos-amenities .carousel {
	position: static;
}

.quartos-amenities .carousel__btn {
	position: absolute;
	top: 93.55px; /* 1174.55 - 1081, o centro da seta */
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 0;
	background: none;
}

.quartos-amenities .carousel__btn--prev {
	left: 13.49px;
	margin-left: -22px;
}

.quartos-amenities .carousel__btn--next {
	right: 12.50px; /* 375 - 362.50 */
	margin-right: -22px;
}

/* O glifo de texto do componente não tem sítio aqui. */
.quartos-amenities .carousel__btn [aria-hidden="true"] {
	display: none;
}

.quartos-amenities .carousel__btn::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -5.15px 0 0 -4.43px;
	border-block: 5.15px solid transparent;
	content: "";
}

.quartos-amenities .carousel__btn--prev::after {
	border-right: 8.85px solid currentcolor;
}

.quartos-amenities .carousel__btn--next::after {
	border-left: 8.85px solid currentcolor;
	margin-left: -4.42px;
}

.quartos-amenities .carousel__btn[disabled] {
	opacity: 0.35;
}

/* ---------- Nota ---------- */

.quartos-amenities__nota {
	/* Do fundo da legenda a duas linhas (+122.78) ao topo da nota (+132.83). */
	margin-top: 10.05px;

	width: 74.13%; /* 278 / 375 */
	margin-inline: auto;

	font-family: var(--font-body);

	/* Nós 4005:10337/10338, Gill Sans Light 13.232px — e sem caixa alta, ao
	   contrário do desktop. */
	font-size: 13.232px;
	font-weight: var(--fw-body);
	line-height: normal;
	text-align: center;
}

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

@media (min-width: 1200px) {
	.quartos-amenities__palco {
		padding-top: 53px;    /* 1680 - 1627 */
		padding-bottom: 82.81px; /* 1943 - 1860.19 */
	}

	/* As réguas são do desenho de telemóvel. */
	.quartos-amenities__palco::before,
	.quartos-amenities__palco::after {
		display: none;
	}

	.quartos-amenities__titulo {
		font-size: 23.585px; /* nó 4004:7584 */
	}

	/*
	 * A fila das oito caixas. No frame ocupa 1373.30 de 1440 — 25.52 de margem
	 * à esquerda e 41.36 à direita —, e aqui fica centrada: são 8px de cada
	 * lado de diferença, e a assimetria do desenho é colocação à mão.
	 *
	 * As caixas repartem a largura em vez de terem os 166.57 fixos, para a
	 * fila continuar a caber abaixo de 1440. A 1440 dá os 166.57 exactos.
	 */
	.quartos-amenities__lista {
		margin-top: 45.66px; /* 1742.66 - 1697 */
		width: 95.368%;      /* 1373.30 / 1440 */
		margin-inline: auto;
	}

	/* Sem janela de scroll: as oito cabem na linha. */
	.quartos-amenities .carousel__viewport {
		overflow: visible;
		margin-inline: 0;
	}

	.quartos-amenities .carousel__track {
		gap: 5.82px; /* 172.39 - 166.57 */
	}

	.quartos-amenity {
		flex: 1 1 0;
		width: auto;

		/* Nó 4004:7536: 166.57x86.92, moldura de 1px em petrol. O `min-height`
		   e não `height` porque uma legenda de duas linhas — o
		   "HDTV WI/ CHROMECASTBEDS" já vai lá perto a 1440 — tem de caber. */
		min-height: 86.92px;
		border: 1px solid var(--s-bg-petrol);
	}

	.quartos-amenity__topo {
		align-items: flex-end;
		justify-content: space-between;
		width: 100%;

		/* Cresce até à legenda; o ícone e o número encostam-se-lhe. */
		flex: 1 1 auto;
		height: auto;

		/*
		 * 18 da aresta esquerda ao ícone e 15 do número à direita — médias dos
		 * oito, que no desenho vão de 12.2 a 22.3 e de 13.1 a 17.2.
		 *
		 * **Em cima são 7.5 e não os 3.35 do nó**, e a diferença é a caixa de
		 * linha. Com `line-height: 0.7` o entrelinha fica negativo e o glifo
		 * sobe 1.52px acima do topo da caixa do <span>; a caixa do nó, essa,
		 * fica ~3.5px acima da tinta dele. Somando, com os 3.35 do nó a nossa
		 * tinta caía a 1.87 do topo da moldura contra os 6.97 do desenho.
		 *
		 * Medido na tinta dos oito, no export e no site — é o que se vê, e é
		 * a mesma lição do título das FAQs e das etiquetas dos perks:
		 *
		 *              figma   site (antes)   site (agora)
		 *   folga topo   6.97       1.87           6.97
		 *   folga dir   16.53      17.26          17.26
		 *
		 * A folga da direita já estava: os 15px de padding batem com os 14.73
		 * de média do nó, e na tinta ficamos 0.72 mais afastados da aresta —
		 * ou seja com mais ar, não menos.
		 *
		 * Os 7.5 vão na margem do NÚMERO e não no padding desta linha: aqui
		 * empurravam também o ícone, e a caixa passava de 86.92 para 89.78. No
		 * desenho o que desce é só o número — o ícone é ancorado em baixo.
		 */
		padding: 0 15px 0 18px;
	}

	.quartos-amenity__icone {
		/* Tamanho natural do ficheiro, que é o do nó. */
		transform: none;

		/* 1829.58 - 1797.5: do fundo dos ícones ao fundo da caixa, menos a
		   legenda e o intervalo dela. */
		margin-bottom: 7.85px;
	}

	.quartos-amenity__numero {
		display: block;

		/* Nó 4004:7541, Baro LineTwo 35.484px. */
		font-family: var(--font-title);
		font-size: 35.484px;
		font-weight: var(--fw-display);

		/* 25 de caixa para 35.484 de corpo, nó 4004:7541. */
		line-height: 0.7;

		/* Encostado ao topo da caixa, não ao fundo como o ícone. Os 7.5 são a
		   folga que põe a TINTA a 6.97 do topo da moldura, que é a média dos
		   oito nós — ver o comentário do padding, acima. */
		align-self: flex-start;
		margin-top: 7.5px;
	}

	.quartos-amenity__label {
		/* Já não vem do fundo dos ícones: a caixa é que a ancora. */
		margin-top: 0;
		margin-bottom: 11.23px; /* 1829.58 - 1818.35 */

		/* Nó 4004:7546, Gill Sans Medium 11.034px. */
		font-size: 11.034px;
	}

	/* Em desktop o desenho não tem setas: cabem as oito. */
	.quartos-amenities .carousel__btn {
		display: none;
	}

	/*
	 * A nota alinha pela aresta esquerda da fila (26.05 contra os 25.52 da
	 * primeira caixa) e sai em caixa alta, ao contrário do telemóvel.
	 */
	.quartos-amenities__nota {
		margin-top: 17.61px; /* 1847.19 - 1829.58 */
		width: 95.368%;
		font-size: 11.034px;
		font-weight: var(--fw-body-strong);
		text-align: left;
		text-transform: uppercase;
	}
}