/*
 * Fontinha — Pizzeria, as personagens.
 *
 * Figma: banda 2270..2705 em desktop (435) e 1148..1910 em telemóvel (762).
 * **É a única banda que fica MAIS ALTA em telemóvel** — 1.75x — porque lá as
 * duas personagens empilham em vez de ficar lado a lado.
 *
 * A composição é colocada à mão nos dois frames, como a colagem dos perks: cada
 * peça leva a sua posição por `:nth-child`, em percentagem de um palco com a
 * proporção da banda. As medidas estão no pizzeria-personagens.php.
 *
 * Mobile first, com o desktop aos 1200.
 */

.pizzeria-personagens.section {
	/*
	 * **As personagens transbordam para as bandas vizinhas**, e isso obriga a
	 * três coisas:
	 *
	 * 1. `overflow: visible` — a primeira sobe 128.11 para dentro da banda do
	 *    calendário e a segunda desce 101.80 para dentro da dos ingredientes.
	 *    **E a fita 1 sobe 21.38**, pela dobra de cima: são TRÊS peças a
	 *    atravessar a costura de cima, não uma. Medido na página.
	 * 2. `z-index: 1` — a banda dos ingredientes vem DEPOIS no DOM e tem fundo
	 *    opaco, por isso pintaria por cima da segunda personagem. É a mesma
	 *    lição das FAQs sobre os socials.
	 * 3. `padding: 0` — a banda tem a altura do desenho e nada mais.
	 *
	 * **O que as vizinhas têm de fazer: nada.** Não precisam de saber disto nem
	 * de deixar espaço — basta não levarem `z-index` maior nem `overflow`
	 * escondido. Quando forem construídas, o conteúdo delas é que tem de ficar
	 * fora das faixas de 128 no topo e 102 no fundo, que é o que o desenho já
	 * faz. Verificado na página com `elementFromPoint`: 40px acima da banda quem
	 * recebe o ponto é a ilustração, e 40px abaixo também.
	 */
	position: relative;
	z-index: 1;
	overflow: visible;

	padding-block: 0;
	background: var(--s-text-terracota);
}

.pizzeria-personagens__palco {
	position: relative;

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

/* ============================================================
   A estrela de marca de água
   ============================================================ */

/*
 * É um grupo só no frame de telemóvel (4005:22749) e vectores soltos no de
 * desktop — o mesmo desenho a dois tamanhos. Fica por baixo de tudo: é a
 * primeira do palco e não precisa de z-index.
 *
 * Caixa: 343.07x313.44 em (564.34, 2336.16) em desktop, ou seja banda-rel
 * y 66.16; 320.05x292.40 em (24.02, 1383.86) em telemóvel, banda-rel 235.86.
 */
.pizzeria-personagens__estrela {
	position: absolute;
	top: 30.953%;  /* 235.86 / 762 */
	left: 6.406%;  /* 24.02 / 375 */

	display: block;
	width: 85.345%; /* 320.05 / 375 */
	aspect-ratio: 320.046 / 292.399;

	background-image: url("../../img/pizzeria/estrela.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* ============================================================
   As ilustrações
   ============================================================ */

.pizzeria-personagens__figura {
	position: absolute;

	margin: 0;
}

/* A `<picture>` é inline por omissão e a caixa da figura passava a caixa de
   linha dela; a ilustração de telemóvel entra por `<source>`. */
.pizzeria-personagens__figura picture {
	display: block;
}

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

/* 4005:23198 — (30.73, 1153.07) 309.09x319.01 */
.pizzeria-personagens__figura:nth-of-type(1) {
	top: 0.665%;  /* 5.07 / 762 */
	left: 8.195%; /* 30.73 / 375 */

	width: 82.424%; /* 309.09 / 375 */
}

/* 4005:24173 — (80.68, 1500.95) 239.39x274.89 */
.pizzeria-personagens__figura:nth-of-type(2) {
	top: 46.319%;  /* 352.95 / 762 */
	left: 21.515%; /* 80.68 / 375 */

	width: 63.837%; /* 239.39 / 375 */
}

/* ============================================================
   A fita de citação
   ============================================================ */

/*
 * O desenho da fita é um SVG composto de três nós — corpo, dobra de cima e
 * dobra de baixo. Ver o ficheiro.
 *
 * **A caixa é a dos limites de render, não a dos nós:** 406x218.414, contra
 * 403.18x122.28 do corpo. As duas dobras saem para fora dele em cima e em
 * baixo, e o traço tem mitra, que passa de meia espessura.
 *
 * **A fita 2 é a fita 1 ESPELHADA na horizontal.** Não é parecença: as
 * máscaras do bege dão IoU de 0.96 na dobra de cima e 0.98 na de baixo contra
 * o espelho, e 0.00 sem ele; o corpo dá 0.92 contra 0.51. A inclinação
 * confirma-o — a fita 1 sobe para a direita (-32 em 360) e a fita 2 desce
 * (+31 em 360).
 *
 * Por isso o desenho vai num `::before` e não na própria caixa: é ele que se
 * espelha, e o texto por cima fica direito. Um `scaleX(-1)` na caixa espelhava
 * as letras com ela.
 */
.pizzeria-personagens__fita {
	position: absolute;

	margin: 0;
	aspect-ratio: 406 / 218.414;

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

.pizzeria-personagens__fita::before {
	position: absolute;
	inset: 0;

	background-image: url("../../img/pizzeria/fita-citacao.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
}

.pizzeria-personagens__fita:nth-of-type(2)::before {
	transform: scaleX(-1);
}

/* 4005:23225 — corpo em (35.03, 1384.26); caixa pintada em (34.18, 1341.46) */
.pizzeria-personagens__fita:nth-of-type(1) {
	top: 25.388%; /* 193.46 / 762 */
	left: 9.114%; /* 34.18 / 375 */

	width: 78.936%; /* 296.01 / 375 */
}

/* 4005:24262 — corpo em (50.71, 1714.87); caixa pintada em (49.86, 1672.07) */
.pizzeria-personagens__fita:nth-of-type(2) {
	top: 68.774%;  /* 524.07 / 762 */
	left: 13.295%; /* 49.86 / 375 */

	width: 78.936%;
}

/*
 * O texto acompanha a inclinação da fita. O ângulo sai da linha de base das
 * letras do frame: de (487.07, 2370.12) a (814.69, 2337.58), ou seja
 * -32.54 em 327.62 — **-5.67 graus**.
 *
 * Na fita 2 o sinal troca, porque o desenho está espelhado e a inclinação com
 * ele: lido no frame, o corpo da fita 1 sobe para a direita e o da fita 2
 * desce.
 */
.pizzeria-personagens__citacao,
.pizzeria-personagens__autor {
	position: absolute;
	left: 8%;

	margin: 0;
	width: 84%;

	text-align: center;
	transform-origin: 50% 0;
	transform: rotate(-5.67deg);
}

.pizzeria-personagens__fita:nth-of-type(2) .pizzeria-personagens__citacao,
.pizzeria-personagens__fita:nth-of-type(2) .pizzeria-personagens__autor {
	transform: rotate(5.67deg);
}

/* As aspas são do desenho e não do conteúdo: o campo guarda a frase, e elas
   entram por CSS — como a caixa alta. */
.pizzeria-personagens__citacao::before {
	content: "\201C";
}

.pizzeria-personagens__citacao::after {
	content: "\201D";
}

.pizzeria-personagens__citacao {
	top: 43.620%; /* aferido pela TINTA contra o frame */

	white-space: nowrap;

	font-family: "Brevis", var(--font-display);
	font-size: 12.4px;
	line-height: 1.1;
	text-transform: uppercase;
}

/*
 * O autor não está centrado: no frame acaba onde a citação acaba — tinta em
 * x 663.64..814.44 contra 487.07..824.18 da citação. E fica logo por baixo
 * dela, a 106.41 de 218.41, e não meia fita abaixo como estava.
 */
.pizzeria-personagens__autor {
	top: 52.380%; /* aferido pela TINTA contra o frame */

	white-space: nowrap;
	text-align: right;

	font-family: "Poppins", var(--font-body);
	font-size: 8.7px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.1;
}

/* ============================================================
   Os botões
   ============================================================ */

/*
 * O mesmo componente do "BOOK A TABLE" do hero, com o mesmo ornamento. Só a
 * proporção da caixa muda: aqui a régua é 81.78% da largura (210.44 de 257.32)
 * e lá é 77.77%.
 */
.pizzeria-personagens__cta {
	position: absolute;

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

	aspect-ratio: 257.32 / 43.16;

	color: var(--c-white);
	text-decoration: none;
}

/* botão 1 — (166.93, 1464.92) 174.20x29.22 */
.pizzeria-personagens__cta:nth-of-type(1) {
	top: 41.590%;  /* 316.92 / 762 */
	left: 44.515%; /* 166.93 / 375 */

	width: 46.453%; /* 174.20 / 375 */
}

/* botão 2 — (39.49, 1795.87) 159.46x26.75 */
.pizzeria-personagens__cta:nth-of-type(2) {
	top: 85.022%;  /* 647.87 / 762 */
	left: 10.531%; /* 39.49 / 375 */

	width: 42.523%; /* 159.46 / 375 */
}

.pizzeria-personagens__cta::before,
.pizzeria-personagens__cta::after {
	position: absolute;
	left: 50%;

	width: 81.78%; /* 210.44 / 257.32 */
	height: 1.38px;

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

.pizzeria-personagens__cta::before {
	top: 2.33%; /* 1.0 / 43.16 */
}

.pizzeria-personagens__cta::after {
	bottom: 2.33%;
}

.pizzeria-personagens__cta-label {
	align-self: center;

	font-family: "Brevis", var(--font-display);
	font-size: 10.5px;
	line-height: 0.7;
	text-transform: uppercase;
	white-space: nowrap;
}

/* O ornamento é 9.94% da caixa, como no hero — é a mesma peça. */
.pizzeria-personagens__orn {
	flex: 0 0 9.94%;

	display: block;
	align-self: stretch;
}

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

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

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

@media (min-width: 1200px) {

	.pizzeria-personagens__palco {
		aspect-ratio: 1440 / 435;
	}

	.pizzeria-personagens__estrela {
		top: 15.209%;  /* 66.16 / 435 */
		left: 39.190%; /* 564.34 / 1440 */

		width: 23.824%; /* 343.07 / 1440 */
	}

	/* 4005:18577 — (92.42, 2141.89) 423.93x437.56; sobe 128.11 acima da banda */
	.pizzeria-personagens__figura:nth-of-type(1) {
		top: -29.451%; /* -128.11 / 435 */
		left: 6.418%;  /* 92.42 / 1440 */

		width: 29.440%; /* 423.93 / 1440 */
	}

	/* 4005:19001 — (958.28, 2364.09) 400.02x443.10; desce 102.19 abaixo */
	.pizzeria-personagens__figura:nth-of-type(2) {
		top: 21.630%;  /* 94.09 / 435 */
		left: 66.547%; /* 958.28 / 1440 */

		width: 27.779%; /* 400.02 / 1440 */
	}

	/* A caixa arranca 21.38 ACIMA da banda: a dobra de cima entra na banda do
	   calendário, como a primeira personagem. */
	.pizzeria-personagens__fita:nth-of-type(1) {
		top: -4.915%;  /* -21.38 / 435 */
		left: 31.170%; /* 448.85 / 1440 */

		width: 28.194%; /* 406 / 1440 */
	}

	.pizzeria-personagens__fita:nth-of-type(2) {
		top: 54.083%;  /* 235.26 / 435 */
		left: 41.807%; /* 602.02 / 1440 */

		width: 28.194%;
	}

	.pizzeria-personagens__cta:nth-of-type(1) {
		top: 62.621%;  /* 272.40 / 435 */
		left: 10.225%; /* 147.24 / 1440 */

		width: 17.869%; /* 257.32 / 1440 */
	}

	.pizzeria-personagens__cta:nth-of-type(2) {
		top: 21.575%;  /* 93.85 / 435 */
		left: 73.456%; /* 1057.77 / 1440 */

		width: 17.869%;
	}

	.pizzeria-personagens__cta::before,
	.pizzeria-personagens__cta::after {
		height: 2.05px;
	}

	.pizzeria-personagens__citacao {
		font-size: 17px;
	}

	.pizzeria-personagens__autor {
		font-size: 16.6px;
	}

	.pizzeria-personagens__cta-label {
		font-size: 15.6px;
	}
}