/*
 * Fontinha — Pizzeria, a sala de jantar.
 *
 * Figma: banda 4512..5150 em desktop (638) e 3288..3689 em telemóvel (401).
 * As medidas dos nós estão no pizzeria-sala.php.
 *
 * ============================================================
 * A COSTURA COM A GALERIA
 * ============================================================
 *
 * No frame a ilustração começa em 4398.36 e o castanho da galeria tapa-a até à
 * diagonal dele — a ordem dos nós põe o 19999 depois do 18449. No DOM a galeria
 * vem ANTES, por isso a ordem natural é a contrária.
 *
 * Podia resolver-se com `z-index` na galeria. **Fica ao contrário:** a secção
 * sobe 46.93 para dentro da galeria e é a ILUSTRAÇÃO que leva o recorte da mesma
 * diagonal. O resultado pintado é o mesmo, e evita o defeito da outra via — com
 * a galeria recortada em cima e em baixo, e a sala a começar onde a galeria
 * acaba, sobrava uma nesga do fundo do body entre as duas por arredondamento.
 *
 * A diagonal é a mesma recta, medida no export da galeria:
 * y = 0.03172x + 4466.07, ou seja de (0, 4466.07) a (1440, 4511.75). Sobre um
 * palco que arranca em 4466.07 e tem 683.93, dá 0% à esquerda e 6.679% à
 * direita.
 *
 * **Em telemóvel não há diagonal nenhuma:** lá o fundo da galeria é a direito
 * (medido: 3287/3288 de ponta a ponta), e a sala encosta-lhe.
 *
 * Mobile first, com o desktop aos 1200.
 */

.pizzeria-sala.section {
	position: relative;

	padding-block: 0;
	background: none;
}

.pizzeria-sala__palco {
	position: relative;
	overflow: hidden;

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

/* ============================================================
   A ilustração
   ============================================================ */

/*
 * 4005:22326, (0, 3289.57) 376x426.73 — começa 1.57 abaixo da banda e passa
 * 27.3 para dentro da banda do mapa, que a tapa. Aqui é o `overflow: hidden` do
 * palco que corta, com o mesmo resultado.
 */
.pizzeria-sala__ilustracao {
	position: absolute;
	top: 0.392%;  /* 1.57 / 401 */
	left: 0;

	display: block;
	width: 100.267%; /* 376 / 375 */
	height: 106.417%; /* 426.73 / 401 */
}

.pizzeria-sala__ilustracao img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
}

/* ============================================================
   Os rótulos
   ============================================================ */

/*
 * O mesmo componente do botão do hero: ornamento de quatro peças de cada lado,
 * régua em cima e em baixo, letra ao meio. A régua mede **81.78%** da caixa, o
 * mesmo número dos botões das personagens — não é parecença, é a mesma peça.
 *
 * Em telemóvel os dois empilham; em desktop ficam nas pontas da banda.
 */
.pizzeria-sala__rotulo {
	position: absolute;

	display: flex;
	align-items: stretch;
	justify-content: space-between;

	aspect-ratio: 282.48 / 47.37;

	color: var(--s-text-on-dark);
	text-decoration: none;
}

.pizzeria-sala__rotulo:nth-of-type(1) {
	top: 9.868%;   /* 3327.57 - 3288, de 401 */
	left: 12.763%; /* 47.86 / 375 */

	width: 75.328%; /* 282.48 / 375 */
}

.pizzeria-sala__rotulo:nth-of-type(2) {
	top: 24.753%;  /* 3387.26 - 3288, de 401 */
	left: 12.219%; /* 45.82 / 375 */

	width: 75.328%;
}

/* As duas réguas. A de cima em 0.59 de 47.37 e a de baixo em 44.90. */
.pizzeria-sala__rotulo::before,
.pizzeria-sala__rotulo::after {
	position: absolute;
	left: 50%;

	width: 81.78%; /* 231.03 / 282.48 */
	height: 2px;

	background: currentcolor;
	content: "";
	transform: translateX(-50%);
}

.pizzeria-sala__rotulo::before {
	top: 1.25%;
}

.pizzeria-sala__rotulo::after {
	bottom: 1.25%;
}

/* O ornamento é 8.94% da caixa — 25.42 de 282.48 a 0.884 de escala. */
.pizzeria-sala__orn {
	flex: 0 0 8.94%;

	display: block;
	align-self: stretch;
}

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

.pizzeria-sala__orn--dir {
	transform: rotate(180deg);
}

.pizzeria-sala__meio {
	display: flex;
	align-items: center;
	gap: 4.5%;
}

.pizzeria-sala__label {
	font-family: "Brevis", var(--font-display);
	font-size: 14.71px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* 29.01 de 282.48 */
.pizzeria-sala__icone {
	display: block;
	flex: 0 0 auto;
	width: 29.01px;
}

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

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

@media (min-width: 1200px) {

	/*
	 * A secção sobe para dentro da galeria: 4513 - 4466.07 = 46.93. Em
	 * percentagem da largura, para acompanhar o ecrã como a sobreposição dos
	 * perks.
	 */
	.pizzeria-sala.section {
		margin-top: -3.259%; /* 46.93 / 1440 */
	}

	.pizzeria-sala__palco {
		/* 4466.07..5150 */
		aspect-ratio: 1440 / 683.93;

		/* A diagonal da galeria, a mesma recta. */
		clip-path: polygon(0 0, 100% 6.679%, 100% 100%, 0 100%);
		overflow: visible;
	}

	/* 4005:18449 — (-1, 4398.36) 1443x829.81, ou seja 67.71 acima do palco. */
	.pizzeria-sala__ilustracao {
		top: -9.900%;     /* -67.71 / 683.93 */
		left: -0.069%;    /* -1 / 1440 */

		width: 100.208%;  /* 1443 / 1440 */
		height: 121.330%; /* 829.81 / 683.93 */
	}

	.pizzeria-sala__rotulo {
		aspect-ratio: 320.19 / 53.69;
	}

	.pizzeria-sala__rotulo:nth-of-type(1) {
		top: 49.896%;  /* 4807.32 - 4466.07, de 683.93 */
		left: 4.542%;  /* 65.40 / 1440 */

		width: 22.235%; /* 320.19 / 1440 */
	}

	.pizzeria-sala__rotulo:nth-of-type(2) {
		top: 51.218%;   /* 4816.36 - 4466.07, de 683.93 */
		left: 70.395%;  /* 1013.69 / 1440 */

		width: 22.235%;
	}

	.pizzeria-sala__rotulo::before,
	.pizzeria-sala__rotulo::after {
		width: 81.78%; /* 261.86 / 320.19 */
		height: 2.3px;
	}

	.pizzeria-sala__orn {
		flex: 0 0 7.94%; /* 25.42 / 320.19 */
	}

	.pizzeria-sala__label {
		font-size: 16.63px;
	}

	.pizzeria-sala__icone {
		width: 32.88px;
	}
}