/*
 * Fontinha — Pizzeria, o mapa.
 *
 * Figma: banda 5149..5874 em desktop (725) e 3688..4300 em telemóvel (612).
 * As medidas dos nós estão no pizzeria-mapa.php.
 *
 * O creme é o mesmo nó que serve o footer (4005:20440, 5149..6107), por isso a
 * costura com o footer não tem nada a fazer: é a mesma cor dos dois lados.
 *
 * Mobile first, com o desktop aos 1200.
 */

.pizzeria-mapa.section {
	position: relative;

	/*
	 * O mapa ilustrado acaba em 1442 e o rótulo "ITALY" arranca em 1438.13: os
	 * dois passam a aresta do frame, e é assim no desenho. `clip` e não
	 * `hidden` — o `hidden` faz da secção um contentor de scroll, que é o que
	 * partiu as amenities dos quartos.
	 */
	overflow-x: clip;

	padding-block: 0;
	background: var(--s-bg-sand);
}

.pizzeria-mapa__palco {
	position: relative;

	/* A banda de telemóvel: 612 de altura para 375 de largura. */
	aspect-ratio: 375 / 612;
}

/* ============================================================
   O mapa ilustrado — desktop-only
   ============================================================ */

/*
 * 175.6 KB de SVG (62 KB na linha). Em telemóvel o `<source media>` não pega e
 * o `<img>` fica com um GIF transparente de 43 bytes: **o browser não chega a
 * pedir o ficheiro**, que é o ponto. Um `display: none` não evitaria o pedido.
 */
.pizzeria-mapa__europa {
	display: none;
}

/* ============================================================
   A rosa-dos-ventos e as ondinhas
   ============================================================ */

.pizzeria-mapa__bussola {
	position: absolute;
	top: 81.273%; /* 4185.39 - 3688, de 612 */
	left: 18.267%; /* 68.50 / 375 */

	display: block;
	width: 14.872%; /* 55.77 / 375 */

	color: var(--s-text-terracota);
}

.pizzeria-mapa__bussola {
	height: auto;
}

.pizzeria-mapa__onda svg {
	display: block;
	width: 100%;
	height: auto;
}

.pizzeria-mapa__onda {
	position: absolute;

	display: block;

	color: var(--s-text-terracota);
}

/* Em telemóvel só há uma, a 4005:24338. */
.pizzeria-mapa__onda--1 {
	top: 81.894%;  /* 4189.19 - 3688, de 612 */
	left: 68.336%; /* 256.26 / 375 */

	width: 16.045%; /* 60.17 / 375 */
}

.pizzeria-mapa__onda--2,
.pizzeria-mapa__onda--3 {
	display: none;
}

/* ============================================================
   O mapa embutido
   ============================================================ */

/* Enche o palco, para as percentagens dos filhos resolverem contra a banda e
   não contra uma caixa a meio dela. */
.pizzeria-mapa__local {
	position: absolute;
	inset: 0;
}

.pizzeria-mapa__logo {
	position: absolute;
	top: 6.784%;  /* 3729.52 - 3688, de 612 */
	left: 9.291%; /* 34.84 / 375 */

	display: block;
	width: 34.323%; /* 128.71 / 375 */
}

.pizzeria-mapa__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * A moldura: um fio de 1px em terracota. **Em telemóvel não há folga entre o
 * fio e a imagem** — medido nos pixéis, a 24.5 está o fio e a 26 já é o mapa —
 * e em desktop há 5.28/4.32 de um bege mais quente. Ver o bloco de desktop.
 */
.pizzeria-mapa__moldura {
	position: absolute;
	top: 15.613%; /* 3783.55 - 3688, de 612 */
	left: 6.315%; /* 23.68 / 375 */

	display: block;
	width: 86.776%; /* 325.41 / 375, o fio incluído */

	border: 1px solid var(--s-text-terracota);
}

/* A tinta castanha do desenho — ver a matriz no pizzeria-mapa.php. */
.pizzeria-mapa__imagem {
	display: block;
	width: 100%;
	height: auto;

	aspect-ratio: 323.41 / 367.82;
	filter: url("#pizzeria-mapa-sepia");
	object-fit: cover;
}

.pizzeria-mapa__filtro {
	position: absolute;

	width: 0;
	height: 0;
}

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

@media (min-width: 1200px) {

	.pizzeria-mapa__palco {
		aspect-ratio: 1440 / 725;
	}

	/* 4005:20441 — (632, 5167) 810x714 */
	.pizzeria-mapa__europa {
		position: absolute;
		top: 2.483%;   /* 5167 - 5149, de 725 */
		left: 43.889%; /* 632 / 1440 */

		display: block;
		width: 56.250%; /* 810 / 1440 */
	}

	.pizzeria-mapa__europa img {
		display: block;
		width: 100%;
		height: auto;
	}

	.pizzeria-mapa__bussola {
		top: 13.230%;  /* 5244.91 - 5149, de 725 */
		left: 49.307%; /* 710.02 / 1440 */

		width: 6.749%; /* 97.19 / 1440 */
	}

	.pizzeria-mapa__onda--1 {
		top: 11.563%;  /* 5232.83 */
		left: 11.919%; /* 171.64 */

		width: 7.910%; /* 113.90 */
	}

	.pizzeria-mapa__onda--2,
	.pizzeria-mapa__onda--3 {
		display: block;
	}

	.pizzeria-mapa__onda--2 {
		top: 34.498%;  /* 5399.11 */
		left: 47.257%; /* 680.50 */

		width: 6.799%; /* 97.91 */
	}

	.pizzeria-mapa__onda--3 {
		top: 90.797%;  /* 5807.28 */
		left: 19.827%; /* 285.51 */

		width: 7.104%; /* 102.29 */
	}

	.pizzeria-mapa__logo {
		top: 17.395%; /* 5275.07 - 5149, de 725 */
		left: 6.901%; /* 99.38 / 1440 */

		width: 13.474%; /* 194.03 / 1440 */
	}

	/*
	 * Em desktop a moldura tem folga entre o fio e a imagem — 5.28 de lado e
	 * 4.32 em cima, num bege mais quente que o creme da banda. O valor do frame
	 * é `#E4C6AC`; fica no `--s-bg-beige` (`#DDCDA8`), que é o mais perto que a
	 * paleta tem — sete pontos por canal, que não se veem num filete de 5px.
	 */
	.pizzeria-mapa__moldura {
		top: 24.204%; /* 5324.48 - 5149, de 725 */
		left: 6.196%; /* 89.22 / 1440 */

		width: 37.398%; /* 538.53 / 1440 */
		/* **A percentagem de um `padding` resolve contra a largura do BLOCO DE
		   CONTENÇÃO, não contra a do próprio elemento** — que aqui é o palco, de
		   1440. Com 5.27/538.53 a folga saía 14 em vez de 5.3. */
		padding: 0.300% 0.366%; /* 4.32 e 5.27 de 1440 */

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

	.pizzeria-mapa__imagem {
		aspect-ratio: 527.98 / 432.12;
	}
}

/* ============================================================
   O caminho de Itália até ao Porto
   ============================================================ */

/*
 * Nós 4005:21080 e 4005:21079, irmãos do mapa no frame — não vêm no export
 * dele, e por isso faltavam desde que a banda foi construída.
 *
 * As posições são as dos nós, em percentagem dos 810x714 do mapa, e a largura é
 * a do viewBox do export: o Figma arredonda a caixa para cima (154x89 para um nó
 * de 153.5x88.8), e a folga fica à direita e em baixo, não na origem.
 */
.pizzeria-mapa__rota {
	display: none;
}

@media (min-width: 1200px) {

	.pizzeria-mapa__rota {
		position: absolute;

		display: block;
	}

	.pizzeria-mapa__rota img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* 4005:21081 — (644.52, 5660.45) 15.32x13.66, ou seja (12.52, 493.45) */
	.pizzeria-mapa__rota--ponta {
		top: 70.062%;   /* afinado no centro da tinta, contra o frame */
		left: 44.758%;  /* 644.52 / 1440 */

		width: 1.111%;  /* 16 / 1440 */
	}

	/* 4005:21080 — (661.906, 5585.82) 153.5x88.8, ou seja (29.91, 418.82) do mapa */
	.pizzeria-mapa__rota--arco {
		top: 60.044%;   /* afinado no centro da tinta, contra o frame */
		left: 45.965%;  /* 661.906 / 1440 */

		width: 10.694%; /* 154 / 1440 */
	}

	/* 4005:21079 — (815.66, 5579.32) 25.41x25.40, ou seja (183.66, 412.32) */
	.pizzeria-mapa__rota--x {
		top: 58.871%;   /* afinado no centro da tinta, contra o frame */
		left: 56.643%;  /* 815.66 / 1440 */

		width: 1.806%;  /* 26 / 1440 */
	}
}

/* ============================================================
   Os nomes dos países — texto vivo por cima do mapa
   ============================================================ */

/*
 * O mapa instalado é o nó 6188:2869, o mesmo desenho SEM os oito rótulos que se
 * veem. Eles entram aqui como texto, para a página poder ser traduzida.
 *
 * `container-type: inline-size` faz de 1cqw 1% da largura do MAPA, e é isso que
 * põe os corpos a escalar com ele — 810px a 1440 e 1080 a 1920.
 *
 * A face do desenho é uma decorativa condensada que o projecto não tem: pede
 * maiúsculas de 17.9 para um avanço de 162 em "MEDITERRANEAN", e a melhor das
 * nossas (Brevis) dá 15.5. Ficou a Brevis, com o corpo aferido pelo AVANÇO de
 * cada palavra, para cada nome ocupar a mesma pegada do desenho. Está na lista
 * da designer.
 */
.pizzeria-mapa__nomes {
	display: none;
}

@media (min-width: 1200px) {

	.pizzeria-mapa__nomes {
		position: absolute;
		top: 2.483%;   /* o mesmo do mapa */
		left: 43.889%;

		display: block;
		width: 56.250%;
		aspect-ratio: 810 / 714;

		container-type: inline-size;
		pointer-events: none;
	}

	.pizzeria-mapa__nome {
		position: absolute;

		color: var(--s-text-terracota);
		font-family: "Brevis", var(--font-display);
		font-weight: 400;
		line-height: 1;
		text-align: center;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.pizzeria-mapa__nome--belgica {
		top: 3.363%;     /* 24.01 / 714, centrado na tinta do frame */
		left: 67.516%;   /* 546.88 / 810 */
		width: 6.667%;  /* 54 */
		font-size: 1.2000cqw; /* 9.72px a 810 */
	}

	.pizzeria-mapa__nome--luxemburgo {
		top: 9.141%;     /* 65.27 / 714, centrado na tinta do frame */
		left: 76.077%;    /* 616.22 / 810, afinado */
		width: 10.247%;  /* 83 */
		font-size: 1.2123cqw; /* 9.82px a 810 */
	}

	.pizzeria-mapa__nome--liechtenstein {
		top: 23.602%;     /* 168.52 / 714, afinado contra o frame */
		left: 90.267%;    /* 731.16 / 810, afinado */
		width: 8.889%;  /* 72 */
		font-size: 1.0173cqw; /* 8.24px a 810 */
	}

	.pizzeria-mapa__nome--franca {
		top: 25.615%;     /* 182.89 / 714, centrado na tinta do frame */
		left: 60.741%;   /* 492.0 / 810 */
		width: 9.383%;  /* 76 */
		font-size: 2.0654cqw; /* 16.73px a 810 */
	}

	.pizzeria-mapa__nome--suica {
		top: 26.564%;     /* 189.67 / 714, centrado na tinta do frame */
		left: 80.248%;   /* 650.01 / 810 */
		width: 10.370%;  /* 84 */
		font-size: 1.2123cqw; /* 9.82px a 810 */
	}

	.pizzeria-mapa__nome--espanha {
		top: 63.084%;     /* 450.42 / 714, centrado na tinta do frame */
		left: 39.722%;   /* 321.75 / 810 */
		width: 7.160%;  /* 58 */
		font-size: 2.0222cqw; /* 16.38px a 810 */
	}

	.pizzeria-mapa__nome--mediterraneo {
		top: 91.727%;     /* 654.93 / 714, centrado na tinta do frame */
		left: 44.681%;   /* 361.92 / 810 */
		width: 20.370%;  /* 165 */
		font-size: 1.9827cqw; /* 16.06px a 810 */
	}

	/* **O PORTUGAL está rodado, e a caixa do nó não serve.** Para um nó de texto
	   rodado o Figma dá a caixa por rodar: diz (183.58, 552.42) 30x99 e a tinta
	   está medida em y 458..549 no render. Vai pela tinta. */
	.pizzeria-mapa__nome--portugal {
		top: 63.053%;     /* 450.20 / 714, afinado contra o frame */
		left: 25.062%;  /* 203 / 810 */
		width: 12.745%; /* 103 */
		font-size: 1.8000cqw; /* 14.58px a 810 — o avanço do frame é 90.3 */

		transform-origin: left top;
		transform: rotate(90deg);
	}
}