/*
 * Fontinha — Pizzeria, os ingredientes.
 *
 * Figma: banda 2705..3754 em desktop (1049) e 1911..2495 em telemóvel (584).
 * As medidas dos nós estão no pizzeria-ingredientes.php.
 *
 * ============================================================
 * OS DOIS FRAMES SÃO COMPOSIÇÕES DIFERENTES
 * ============================================================
 *
 * Em desktop é uma colagem: o título em cima à esquerda e os três ingredientes
 * espalhados pela página, cada um com a sua fotografia. Em telemóvel é uma
 * coluna: os ingredientes primeiro, sem fotografia nenhuma, e o "our
 * ingredients" no fim — **mais pequeno que o título de cada ingrediente**,
 * 12.24 contra 18.69.
 *
 * Por isso o telemóvel é fluxo e o desktop é posição absoluta sobre um palco,
 * como os perks. É a mesma marcação.
 *
 * Mobile first, com o desktop aos 1200.
 */

.pizzeria-ingredientes.section {
	position: relative;

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

/*
 * O fundo desenhado. É uma camada exportada do frame — vinte e tal desenhos de
 * linha — com o creme tirado por alfa, para assentar sobre a cor da banda. Não
 * repete: fica no topo, com a largura da banda, e o que sobrar por baixo é
 * creme liso.
 */
.pizzeria-ingredientes__palco {
	position: relative;

	min-height: calc(584 / 375 * 100vw);
	padding: 39.47px 0 0; /* 1950.47 - 1911 */

	background-image: url("../../img/pizzeria/ingredientes-fundo-mob.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

/* ============================================================
   Os ingredientes
   ============================================================ */

.pizzeria-ingredientes__foto {
	display: none;
}

.pizzeria-ingredientes__nome {
	margin: 0;

	font-family: "Brevis", var(--font-display);
	font-size: 18.69px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.pizzeria-ingredientes__texto {
	margin: 11px auto 0;
	width: 88%; /* 330 / 375 */

	font-family: "Poppins", var(--font-body);
	font-size: 11.97px;
	font-weight: 300;
	line-height: 1.5;
	text-align: center;
}

.pizzeria-ingredientes__item + .pizzeria-ingredientes__item {
	margin-top: 28px;
}

/* ============================================================
   Os ornamentos
   ============================================================ */

/*
 * O mesmo par da banda da galeria (4005:20082), aqui a 71.44 em vez de 99.12 —
 * 0.72 — e lado a lado ao centro em vez de nas pontas. O da direita é o da
 * esquerda espelhado.
 */
.pizzeria-ingredientes__orn {
	position: absolute;
	top: 65.594%; /* 2294.07 - 1911, de 584 */

	display: block;
	width: 19.051%; /* 71.44 / 375 */
}

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

.pizzeria-ingredientes__orn--esq {
	left: 27.363%; /* 102.61 / 375 */
}

.pizzeria-ingredientes__orn--dir {
	left: 51.597%; /* 193.49 / 375 */

	transform: scaleX(-1);
}

/* ============================================================
   O título e a abertura
   ============================================================ */

.pizzeria-ingredientes__intro {
	position: absolute;
	top: 76.310%; /* 2356.65 - 1911, de 584 */
	left: 0;

	width: 100%;
}

.pizzeria-ingredientes__titulo {
	margin: 0;

	font-family: "Brevis", var(--font-display);
	font-size: 12.24px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.pizzeria-ingredientes__abertura {
	margin: 12.4px auto 0; /* 2390.31 - 2377.65 */
	width: 86.133%; /* 323 / 375 */

	font-family: "Poppins", var(--font-body);
	font-size: 12.36px;
	font-weight: 300;
	line-height: 1.205; /* passo de 14.90 */
	text-align: center;
}

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

@media (min-width: 1200px) {

	.pizzeria-ingredientes__palco {
		min-height: 0;
		padding: 0;

		aspect-ratio: 1440 / 1049;
		background-image: url("../../img/pizzeria/ingredientes-fundo.png");
	}

	/* A colagem: cada peça na coordenada do seu nó. */
	.pizzeria-ingredientes__item {
		position: absolute;
	}

	.pizzeria-ingredientes__item + .pizzeria-ingredientes__item {
		margin-top: 0;
	}

	/*
	 * **O `max-width: 100%` do base.css apanha a `<picture>`**, não só a `<img>`:
	 * as fotografias são mais largas que a coluna de texto a que estão ancoradas
	 * — 351.28 para 301 — e ficavam todas travadas na largura da coluna. É a
	 * mesma armadilha que travou a escala dos perks.
	 */
	.pizzeria-ingredientes__foto {
		position: absolute;

		display: block;
		max-width: none;
	}

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

	.pizzeria-ingredientes__nome {
		font-size: 22.6px;
		text-align: left;
	}

	.pizzeria-ingredientes__texto {
		margin: 10.3px 0 0; /* 3041.53 - 3031.24 */
		width: 100%;

		font-size: 14.68px;
		line-height: 1.205; /* passo de 17.70 */
		text-align: left;
	}

	/* grana padano — o título em (458.83, 2993.49) e a fotografia à direita. */
	.pizzeria-ingredientes__item--1 {
		top: 27.501%;  /* 2993.49 - 2705, de 1049 */
		left: 31.863%; /* 458.83 / 1440 */

		width: 20.903%; /* 301 / 1440 */
	}

	.pizzeria-ingredientes__item--1 .pizzeria-ingredientes__foto {
		top: -102.55px;  /* 2890.94 - 2993.49, o topo do item */
		left: 105.810%;  /* 777.32 - 458.83 = 318.49, de 301 */

		width: 116.70%;  /* 351.28 / 301 */
	}

	/* mortandella — título em (1078.17, 3259.93), fotografia à esquerda. */
	.pizzeria-ingredientes__item--2 {
		top: 52.901%;   /* 3259.93 - 2705 */
		left: 74.873%;  /* 1078.17 / 1440 */

		width: 20.972%; /* 302 / 1440 */
	}

	.pizzeria-ingredientes__item--2 .pizzeria-ingredientes__foto {
		top: -2.76px;    /* 3257.17 - 3259.93 */
		left: -125.36%;  /* 699.59 - 1078.17, de 302 */

		width: 110.87%;  /* 334.84 / 302 */
	}

	/* prosciutto — título em (184.37, 3402.51), fotografia por cima. */
	.pizzeria-ingredientes__item--3 {
		top: 66.493%;   /* 3402.51 - 2705 */
		left: 12.803%;  /* 184.37 / 1440 */

		width: 26.181%; /* 377 / 1440 */
	}

	.pizzeria-ingredientes__item--3 .pizzeria-ingredientes__foto {
		top: -229.05px;  /* 3173.46 - 3402.51 */
		left: 5.42%;     /* 204.81 - 184.37, de 377 */

		width: 83.27%;   /* 313.91 / 377 */
	}

	.pizzeria-ingredientes__orn {
		top: 39.560%;   /* 3119.98 - 2705, de 1049 */

		width: 6.883%;  /* 99.12 / 1440 */
	}

	.pizzeria-ingredientes__orn--esq {
		left: 8.666%; /* 124.79 / 1440 */
	}

	.pizzeria-ingredientes__orn--dir {
		top: 40.511%;  /* 3129.96 - 2705 */
		left: 82.810%; /* 1192.47 / 1440 */
	}

	.pizzeria-ingredientes__intro {
		top: 6.734%;   /* 2775.64 - 2705, de 1049 */
		left: 9.068%;  /* 130.57 / 1440 */

		width: 34.583%; /* 498 / 1440 */
	}

	.pizzeria-ingredientes__titulo {
		margin-left: 0.32%; /* 132.17 - 130.57, de 498 */

		font-size: 42.25px;
		text-align: left;
	}

	.pizzeria-ingredientes__abertura {
		margin: 22.5px 0 0; /* 2839.81 - 2817.31 */
		width: 100%;

		font-size: 16.36px;
		line-height: 1.206; /* passo de 19.73 */
		text-align: left;
	}
}