/*
 * Fontinha — Pizzeria, hero.
 *
 * Figma: Pizzeria (4005:18164) banda 95..784, e Pizzeria - mob (4005:25566)
 * banda 54..376.
 *
 *              desktop          mobile         mobile / desktop
 *   banda      1440 x 689       375 x 322            —
 *   botão      264.16 x 55.06   155.4 x 32.4       0.588
 *   régua      205.43 x 2.60    120.89 x 1.53      0.588
 *   ornamento  26.27 de largo   15.44 de largo     0.588
 *
 * O botão inteiro escala por 0.588 e as proporções internas não mudam: a régua
 * é 77.77% da largura do bloco nos dois frames e o ornamento 9.94% nos dois.
 * Por isso o botão está escrito UMA vez, com tudo em percentagem do bloco, e só
 * a largura do bloco muda no breakpoint.
 *
 * Mobile first, com o desktop aos 1200.
 */

.pizzeria-hero {
	position: relative;

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

	/*
	 * **O travão do intervalo sem frame.** O rácio de telemóvel é 375/322, quase
	 * quadrado: a 1199 dava uma banda de 1029.5 e, ao passar para o bloco de
	 * desktop, caía para 574.2 — um salto de 455px. Medido:
	 *
	 *    768   659.5     1100   944.5
	 *    900   772.8     1199  1029.5   ->  1200: 574.2
	 *
	 * O tecto é a proporção de desktop, 689/1440 = 47.847vw, e nunca abaixo dos
	 * 322 do desenho de telemóvel. A 1199 dá 573.7 contra os 574.2 do bloco de
	 * desktop: a costura fecha. É o mesmo travão do hero dos Quartos.
	 */
	max-height: max(322px, 47.847vw);

	background-color: var(--s-bg-dark);
	overflow: hidden;
}

/*
 * A media, na caixa do NÓ e não a toda a largura.
 *
 * **É a mesma caixa para imagem e para vídeo.** A `.__media` tem a geometria do
 * nó e o filho — `<img>` ou `<video>` — enche-a com `object-fit: cover`. Trocar
 * um pelo outro não mexe em mais nada: nem no botão, nem na altura da banda,
 * nem na costura com a história.
 *
 * Chegou a ir em `cover` sobre a banda inteira, por eu ter lido as margens
 * brancas do frame de desktop — 6.5 à esquerda e 7.46 à direita — como camada
 * empurrada. **A medição desmentiu-me:** encher a banda obriga a ampliar
 * 1440/1426.04 = 1.0098, e essa fracção acumula 6.5px do topo ao fundo dos 689
 * da banda. A correlação cruzada contra o frame dava o melhor encaixe em
 * dy = -3, ou seja a ilustração fora do sítio. As margens ficam.
 *
 * Em telemóvel o nó (4005:22335) está em (0, 47.1) — 6.9 acima da banda, que
 * começa em 54 — e acaba em 378.16 contra os 376 dela: sangra 2.16 em baixo. Os
 * dois cortados pelo `overflow: hidden` da secção.
 */
.pizzeria-hero__media {
	position: absolute;
	top: -2.1429%; /* -6.9 / 322 */
	left: 0;

	width: 100%;
	aspect-ratio: 375 / 331.06;
}

.pizzeria-hero__poster,
.pizzeria-hero__video {
	position: absolute;
	inset: 0;

	display: block;
	width: 100%;
	height: 100%;
}

.pizzeria-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pizzeria-hero__video {
	object-fit: cover;

	/*
	 * O vídeo nasce invisível e só aparece quando começa mesmo a tocar — o JS
	 * põe `is-a-tocar` na `.__media` ao ouvir o evento `playing`.
	 *
	 * Sem isto havia um fotograma preto entre o poster e o arranque: o
	 * atributo `poster` não se usa aqui, porque é um URL só e o desenho tem
	 * dois enquadramentos. Quem faz de poster é a `<picture>` por baixo, que
	 * escolhe o certo por `media`.
	 *
	 * Com `prefers-reduced-motion` ou sem JavaScript a classe nunca entra, e o
	 * que se vê é a imagem — que é exactamente a banda desenhada.
	 */
	opacity: 0;
}

.pizzeria-hero__media.is-a-tocar .pizzeria-hero__video {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {

	.pizzeria-hero__video {
		transition: opacity 0.3s ease;
	}
}

/* ============================================================
   O botão
   ============================================================ */

/*
 * Âncora em baixo e não em cima: em desktop a régua de cima começa a 80.13% da
 * banda e em telemóvel a 76.55%, mas medidas a partir do FUNDO dão 12.02% e
 * 13.56% — e a diferença que sobra é a altura do próprio bloco, que muda de
 * proporção. Ancorar em baixo mantém o botão à mesma distância da costura com
 * a banda seguinte, que é o que o desenho fixa.
 */
.pizzeria-hero__cta {
	position: absolute;
	bottom: 13.56%; /* (376 - 332.33) / 322 */
	left: 50%;

	display: flex;
	align-items: stretch;

	/*
	 * `space-between` e não `center`: os ornamentos são as ARESTAS do bloco e
	 * têm de lá ficar. Com `center` o grupo inteiro centrava-se e eles entravam
	 * 32px para dentro. Sendo iguais nos dois lados, o rótulo continua ao meio.
	 */
	justify-content: space-between;

	width: 41.44%;    /* 155.4 / 375 */
	aspect-ratio: 155.4 / 32.4;

	color: var(--c-white);
	text-decoration: none;
	transform: translateX(-50%);
}

/*
 * As duas réguas. São `::before` e `::after` do próprio botão e não elementos:
 * atravessam-no de ponta a ponta e não têm de participar no flex.
 *
 * No frame são um par de nós concêntricos — 120.17x0.81 de eixo mais uma banda
 * de 0.721 — que é a assinatura de um traço alinhado POR FORA. O que se pinta é
 * a caixa de FORA: 1.53 em telemóvel, 2.60 em desktop, confirmado na tinta do
 * export. Aqui é uma linha cheia dessa espessura, que dá o mesmo.
 */
.pizzeria-hero__cta::before,
.pizzeria-hero__cta::after {
	position: absolute;
	left: 50%;

	width: 77.79%; /* 120.89 / 155.4 */
	height: 1.53px;

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

.pizzeria-hero__cta::before {
	top: 1.23%; /* (300.5 - 300.1) / 32.4 */
}

.pizzeria-hero__cta::after {
	bottom: 0.53%; /* (332.5 - 332.33) / 32.4 */
}

/*
 * O rótulo. Baro LineTwo, como os títulos dos Quartos, e `line-height: 0.7`
 * pela mesma razão: a caixa de linha da fonte é muito mais alta que a tinta e
 * sem isto o botão cresce por dentro.
 */
.pizzeria-hero__cta-label {
	align-self: center;

	/* A mesma Brevis da história: no frame o rótulo é arte de contorno, mas as
	   formas são as dela — o "A" de uma perna só e o "R" de perna curva. */
	font-family: "Brevis", var(--font-title);

	/*
	 * Aferido pelo AVANÇO do texto, não por um corpo lido no nó: a letra do
	 * frame é arte de contorno e não tem `font-size`. Os dez glifos ocupam
	 * 100.81 (nós 4005:22337..22346, de 137.1 a 237.91). Com a Brevis
	 * instalada o avanço passou a 119.64 a 13.88px, e a regra de três dá 11.69.
	 */
	font-size: 11.69px;
	line-height: 0.7;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * Os ornamentos. Um ficheiro só: o da direita é o da esquerda rodado meia
 * volta. A altura é a do bloco inteiro — o ornamento vai de aresta a aresta.
 */
.pizzeria-hero__orn {
	flex: 0 0 9.94%; /* 15.44 / 155.4 */

	display: block;
	align-self: stretch;
}

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

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

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

@media (min-width: 1200px) {

	.pizzeria-hero {
		aspect-ratio: 1440 / 689;
	}

	/*
	 * A caixa do nó 4005:18443: 1426.04x698.07 em (6.5, 92.7). A banda começa
	 * em 95 — daí o topo negativo de 2.3, que o `overflow: hidden` corta.
	 */
	/* A caixa do nó 4005:18443: 1426.04x698.07 em (6.5, 92.7). A banda começa
	   em 95 — daí o topo negativo de 2.3, que o `overflow: hidden` corta. */
	.pizzeria-hero__media {
		top: -0.3338%;  /* -2.3 / 689 */
		left: 0.4514%;  /* 6.5 / 1440 */

		width: 99.0306%; /* 1426.04 / 1440 */
		aspect-ratio: 1426.04 / 698.07;
	}

	.pizzeria-hero__cta {
		bottom: 12.02%; /* (784 - 701.2) / 689 */

		width: 18.344%; /* 264.16 / 1440 */
		aspect-ratio: 264.16 / 55.06;
	}

	.pizzeria-hero__cta::before,
	.pizzeria-hero__cta::after {
		width: 77.77%; /* 205.43 / 264.16 */
		height: 2.60px;
	}

	.pizzeria-hero__cta::before {
		top: 1.27%; /* (647.1 - 646.4) / 55.06 */
	}

	.pizzeria-hero__cta::after {
		bottom: 0.47%; /* (701.46 - 701.2) / 55.06 */
	}

	.pizzeria-hero__cta-label {
		/* Mesmo método: os dez glifos do frame ocupam 171.20 (nós
		   4005:18456..18465, de 628.5 a 799.70), e com a Brevis o avanço dava
		   203.16 a 23.57px. */
		font-size: 19.86px;
	}

	.pizzeria-hero__orn {
		flex-basis: 9.944%; /* 26.27 / 264.16 */
	}
}