/*
 * Fontinha — Pizzeria, a galeria.
 *
 * Figma: banda 3750..4513 em desktop (763) e 2493..3289 em telemóvel (796).
 * As medidas dos nós estão no pizzeria-galeria.php.
 *
 * ============================================================
 * A BANDA É UM QUADRILÁTERO, E AS ARESTAS NÃO SÃO PARALELAS
 * ============================================================
 *
 * Medido no export por ajuste de mínimos quadrados sobre as duas margens:
 *
 *   desktop  topo   y = 0.05190x + 3750.72   (3750.7 -> 3825.5)
 *            fundo  y = 0.03172x + 4466.07   (4466.1 -> 4511.8)
 *   mobile   topo   y = 0.07500x + 2493.85   (2493.9 -> 2522.0)
 *            fundo  a direito
 *
 * Declives diferentes: não é um rectângulo rodado, é um quadrilátero. Por isso
 * o castanho vai num `::before` com `clip-path`, e não no fundo da secção — as
 * duas pontas que sobram têm de deixar ver as bandas vizinhas.
 *
 * **Só o topo é recortado aqui.** O fundo é a banda da sala de jantar que o
 * cobre, com a ilustração recortada pela MESMA diagonal — ver
 * pizzeria-sala.css. Recortar dos dois lados deixava uma nesga do fundo do body
 * entre as duas, que é o defeito clássico desta costura.
 *
 * Mobile first, com o desktop aos 1200.
 */

.pizzeria-galeria.section {
	/*
	 * A banda tem a altura do desenho e nada mais; o mosaico transborda 43.57
	 * para dentro da banda dos ingredientes, que é onde o desenho o põe.
	 */
	position: relative;
	overflow: visible;

	padding-block: 0;
	background: none;
}

.pizzeria-galeria__palco {
	position: relative;

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

/* O castanho, recortado pelo topo em diagonal. */
.pizzeria-galeria__palco::before {
	position: absolute;
	z-index: -1;
	inset: 0;

	background: var(--s-text-terracota);
	clip-path: polygon(0 0.107%, 100% 3.643%, 100% 100%, 0 100%);
	content: "";
}

/* ============================================================
   O mosaico
   ============================================================ */

/*
 * **É o mesmo mosaico nos dois frames, a escalas diferentes** — 0.892 em
 * telemóvel, medido coluna a coluna. O que muda é a janela: aqui vê-se uma
 * coluna e a seguinte a espreitar, em desktop vêem-se as quatro.
 */
.pizzeria-galeria__mosaico {
	position: absolute;
	top: 3.241%;  /* 2518.80 - 2493, de 796 */
	left: 0;

	width: 100%;
}

/* A janela é o nó de recorte 4005:24332: 26.01..367.61. O `padding` põe a
   primeira coluna em 50.07, que é onde o nó dela está. */
.pizzeria-galeria .carousel__viewport {
	padding-inline: 13.352% 1.971%; /* 50.07 / 375  e  7.39 / 375 */
	scroll-padding-inline: 13.352%;
}

.pizzeria-galeria .carousel__track {
	gap: 3.08px; /* 312.98 - (50.07 + 259.83) */
}

/* O `padding-inline-end` não conta para o `scrollWidth`: o calço é conteúdo. */
.pizzeria-galeria .carousel__track::after {
	flex: 0 0 calc(1.971vw - 3.08px);

	content: "";
}

.pizzeria-galeria__coluna {
	display: flex;
	flex-direction: column;

	/* 551.57 do desenho x 0.892 */
	height: 492px;
}

/*
 * As larguras são as do desenho a 0.892 e vão em px, não em percentagem: dentro
 * de um track de flex uma percentagem é circular — a lição dos reviews.
 */
.pizzeria-galeria__coluna:nth-child(1) { width: 218.17px; }
.pizzeria-galeria__coluna:nth-child(2) { width: 259.83px; }
.pizzeria-galeria__coluna:nth-child(3) { width: 231.99px; }
.pizzeria-galeria__coluna:nth-child(4) { width: 189.02px; }

.pizzeria-galeria__foto {
	position: relative;

	margin: 0;
	overflow: hidden;
}

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

	object-fit: cover;
	object-position: var(--foco-x, 50%) var(--foco-y, 50%);
}

/*
 * As oito caixas têm oito proporções, e a repartição de cada coluna é a do
 * desenho. Em `flex-basis` de percentagem, que numa coluna resolve contra a
 * altura — por isso a coluna tem de ter altura declarada.
 */
.pizzeria-galeria__coluna:nth-child(1) .pizzeria-galeria__foto:nth-child(1) { flex: 0 0 49.709%; } /* 274.18 */
.pizzeria-galeria__coluna:nth-child(1) .pizzeria-galeria__foto:nth-child(2) { flex: 0 0 49.155%; } /* 271.13 */
.pizzeria-galeria__coluna:nth-child(2) .pizzeria-galeria__foto:nth-child(1) { flex: 0 0 32.837%; } /* 181.12 */
.pizzeria-galeria__coluna:nth-child(2) .pizzeria-galeria__foto:nth-child(2) { flex: 0 0 66.283%; } /* 365.61 */
.pizzeria-galeria__coluna:nth-child(3) .pizzeria-galeria__foto:nth-child(1) { flex: 0 0 43.204%; } /* 238.29 */
.pizzeria-galeria__coluna:nth-child(3) .pizzeria-galeria__foto:nth-child(2) { flex: 0 0 56.177%; } /* 309.86 */
.pizzeria-galeria__coluna:nth-child(4) .pizzeria-galeria__foto:nth-child(1) { flex: 0 0 52.093%; } /* 287.32 */
.pizzeria-galeria__coluna:nth-child(4) .pizzeria-galeria__foto:nth-child(2) { flex: 0 0 46.615%; } /* 257.11 */

/* O intervalo entre as duas fotografias da mesma coluna: 4.00 / 4.30 / 3.42 /
   5.99 no desenho, um por coluna. O `gap` fica com o que sobra da repartição. */
.pizzeria-galeria__coluna { justify-content: space-between; }

/* ============================================================
   A paginação
   ============================================================ */

/*
 * Três pontos no frame (4005:24208..24210), 12.22 de diâmetro com passo 33.9.
 * O componente faz um por coluna — quatro — porque nunca cria mais do que os
 * itens que existem, e quatro colunas é o que o mosaico tem. O grupo não está
 * centrado: o centro dos três do desenho cai 5.27 à esquerda do centro do frame.
 */
.pizzeria-galeria .carousel__paginacao {
	position: absolute;
	/* O carrossel é o bloco de contenção e tem a altura do mosaico (492), não a
	   da banda: 3068.09 - 2518.80 = 549.29. */
	top: 111.644%;
	left: 0;

	display: flex;
	justify-content: center;
	gap: 21.68px; /* 33.9 de passo menos os 12.22 do ponto */
	width: 100%;
	padding-right: 10.54px; /* o desvio do grupo, ao dobro */
}

/*
 * **As regras de `.carousel__pagina` do socials.css são globais** — não levam
 * prefixo de secção — e trazem para cá o quadrado de 13px, a tinta escura e o
 * número por baixo. Aqui o desenho pede círculos de 12.22 em creme e sem
 * número, por isso vão todos desfeitos, com a especificidade da secção.
 */
.pizzeria-galeria .carousel__pagina {
	width: 12.22px;
	height: 12.22px;
	padding: 0;

	border: 1.2px solid var(--s-text-on-dark);
	border-radius: 50%;
	background: none;
	color: var(--s-text-on-dark);
}

.pizzeria-galeria .carousel__pagina.is-atual {
	width: 12.22px;
	height: 12.22px;

	border-color: var(--s-text-on-dark);
	background: var(--s-text-on-dark);
}

.pizzeria-galeria .carousel__pagina [aria-hidden="true"] {
	display: none;
}

/* ============================================================
   Os ornamentos das pontas
   ============================================================ */

/*
 * O da direita é o da esquerda espelhado: no desenho o ponto do ornamento fica
 * do lado do mosaico nos dois. **Não existem em telemóvel** — o frame de lá não
 * os tem.
 */
.pizzeria-galeria__ornamento {
	display: none;
}

/* ============================================================
   O texto
   ============================================================ */

/*
 * Poppins Light. O corpo não foi lido no Dev Mode: foi resolvido a partir do
 * AVANÇO das linhas do frame, que é o que se pode medir num nó de texto — as
 * oito linhas de telemóvel dão 9.87 a 9.96 e as quatro de desktop 14.65 a
 * 14.68. Ver o CLAUDE.md.
 */
.pizzeria-galeria__texto {
	position: absolute;
	top: 76.382%;  /* tinta da primeira linha em 3101, de 796 */
	left: 3.733%;  /* 14 / 375 */

	margin: 0;
	width: 93.067%; /* 349 / 375 */

	color: var(--s-text-on-dark);
	font-family: "Poppins", var(--font-body);
	font-size: 9.9px;
	font-weight: 300;
	line-height: 1.515; /* passo de 15 */
	text-align: center;
}

/* ============================================================
   A régua e o triângulo de scroll
   ============================================================ */

/* Só em telemóvel: o frame de desktop não os tem. */
.pizzeria-galeria__scroll {
	position: absolute;
	top: 94.334%;  /* 3243.90 - 2493, de 796 */
	left: 45.672%; /* 171.27 / 375 */

	display: block;
	width: 7.093%; /* 26.60 / 375 */

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

/* A régua do nó 4005:24307: (24.46, 3235.42) 323.99 de largura. Vai no palco e
   não no triângulo — ancorada ao triângulo, a percentagem resolvia contra os
   26.6 dele e a régua saía 65px para fora da página. */
.pizzeria-galeria__palco::after {
	position: absolute;
	top: 93.269%;  /* 3235.42 - 2493, de 796 */
	left: 6.523%;  /* 24.46 / 375 */

	width: 86.397%; /* 323.99 / 375 */
	height: 1px;

	background: var(--s-text-on-dark);
	content: "";
}

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

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

@media (min-width: 1200px) {

	.pizzeria-galeria__palco {
		aspect-ratio: 1440 / 763;
	}

	.pizzeria-galeria__palco::before {
		clip-path: polygon(0 0.094%, 100% 9.901%, 100% 100%, 0 100%);
	}

	/*
	 * O mosaico deixa de rolar e as quatro colunas ficam lado a lado. Transborda
	 * 43.57 acima da banda, que é onde o desenho o põe: as fotografias entram na
	 * banda dos ingredientes.
	 */
	.pizzeria-galeria__mosaico {
		top: -5.710%;   /* 3706.43 - 3750, de 763 */
		left: 14.710%;  /* 211.82 / 1440 */

		width: 70.911%; /* 1021.12 / 1440 */
	}

	.pizzeria-galeria .carousel__viewport {
		overflow: visible;
		padding-inline: 0;
	}

	.pizzeria-galeria .carousel__track {
		gap: 0.431%; /* 4.405 / 1021.12, a média dos três intervalos */
	}

	.pizzeria-galeria .carousel__track::after {
		display: none;
	}

	/* A altura do mosaico é a do desenho: 551.57 para 1021.12 de largura. */
	.pizzeria-galeria__mosaico {
		aspect-ratio: 1021.12 / 551.57;
	}

	.pizzeria-galeria .carousel,
	.pizzeria-galeria .carousel__viewport,
	.pizzeria-galeria .carousel__track,
	.pizzeria-galeria__coluna {
		height: 100%;
	}

	/* As larguras passam a percentagem do mosaico, para escalar com o palco. */
	.pizzeria-galeria__coluna:nth-child(1) { width: 23.951%; } /* 244.58 */
	.pizzeria-galeria__coluna:nth-child(2) { width: 28.532%; } /* 291.35 */
	.pizzeria-galeria__coluna:nth-child(3) { width: 25.470%; } /* 260.08 */
	.pizzeria-galeria__coluna:nth-child(4) { width: 20.752%; } /* 211.90 */

	.pizzeria-galeria .carousel__paginacao {
		display: none;
	}

	.pizzeria-galeria__ornamento {
		position: absolute;
		top: 31.636%; /* 3991.38 - 3750, de 763 */

		display: block;
		width: 6.883%; /* 99.12 / 1440 */

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

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

	.pizzeria-galeria__ornamento--esq {
		left: 6.241%; /* 89.87 / 1440 */
	}

	.pizzeria-galeria__ornamento--dir {
		left: 87.219%; /* 1255.96 / 1440 */

		transform: scaleX(-1);
	}

	.pizzeria-galeria__texto {
		top: 72.101%;   /* 4300.13 - 3750, de 763 */
		left: 14.468%;  /* 208.33 / 1440 */

		width: 71.250%; /* 1026 / 1440 */

		font-size: 14.67px;
		line-height: 1.206; /* passo de 17.698 */
	}

	.pizzeria-galeria__scroll,
	.pizzeria-galeria__palco::after {
		display: none;
	}
}