/*
 * Fontinha — Sobre Nós, hero editorial.
 *
 * Figma: banda y 95..687 do frame 4004:2876 (592px de altura). Medidas dos nós,
 * em coordenadas do frame:
 *
 *   padrão       4004:7607   (0.996, 95.378)   1439x1405   #E0CEA9
 *   ilustração   4004:2694   (228.677, 156.331) 465.061x537.143
 *   logo         4004:4011   (1009.63, 187.524) 77x133
 *   texto        4004:2710   (761.81, 355.961)  594 de largura
 *   ABOUT        4004:4012   (98.803, 529.093)  316x70
 *   US           4004:4013   (605.464, 633.909) 110x71
 *
 * As origens dos SVG não são as caixas dos nós: o export acrescenta traço de
 * cada lado e normaliza à sua própria origem. Os valores acima são já os do
 * SVG, lidos no `transform` que o Figma escreve no rect da página.
 *
 * Mobile first. Abaixo de 1240px a composição desmonta-se e tudo empilha — ver
 * "o ponto de desmonte" no CLAUDE.md. Não é o breakpoint do site, que continua
 * nos 1200: é onde ESTA composição deixa de caber.
 */

.sobre-hero.section {
	/* A banda tem 592px e o conteúdo está colocado à mão lá dentro; o padding
	   da .section faria a banda crescer. */
	padding-block: 0;

	background-color: var(--s-bg-cream);
	color: var(--s-text-brown);

	/* Duas peças passam para dentro da banda da galeria — o "US" 17.9px e o
	   canto da ilustração 6.5px — e no frame pintam por cima dela: os nós
	   4004:4013 e 4004:2694 vêm depois do 4004:2632. Sem isto a galeria, que
	   vem a seguir no DOM, tapava-as. É a mesma lição das FAQs sobre os
	   socials. */
	position: relative;
	z-index: 1;
}

/* O padrão de losangos entra por `background-image` e não como elemento: assim
   fica recortado pela caixa da banda sem precisar de `overflow: hidden`, que
   cortaria também o "US" e a ilustração. O SVG tem 1439x1405 e só se vêem os
   primeiros 592. */
.sobre-hero.section {
	background-image: url("../../img/sobre/padrao.svg");
	background-position: top center;

	/* Congelado na largura do desenho e repetido na horizontal. Com
	   `100% auto` os losangos cresciam com o ecrã — foi o defeito que os
	   socials tiveram; com `no-repeat` sobravam 240px de creme liso de cada
	   lado a 1920. O recorte tila sem costura visível: comparei as duas
	   junções a 1920 e a malha atravessa-as sem quebra. Abaixo de 1440 não há
	   nada para repetir, por isso não precisa de media query. */
	background-repeat: repeat-x;
	background-size: 1440px auto;
}

.sobre-hero__palco {
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---------- Título ---------- */

.sobre-hero__titulo {
	margin: 0;
}

/* As duas palavras pintam POR CIMA da ilustração, e isso vale nos dois frames.
   No desktop a ordem dos nós é 4004:2694 (ilustração), depois 4004:4013 (US) e
   por fim 4004:4012 (ABOUT). No mobile as caixas cruzam-se da mesma maneira: a
   ilustração 4004:6009 ocupa x 179..346.96 / y 70.87..264.87, o "US" 4004:6655
   entra-lhe pelo canto de baixo (x 308.72..348.43, y 247.50..272.79) e o
   "ABOUT" 4004:6654 pela aresta esquerda (x 122.04..236.87, y 208.82..233.77).

   No DOM o <h1> vem primeiro, porque é o título da página e tem de vir antes do
   resto para quem lê o documento por ordem; a ilustração vem depois e, sendo
   também posicionada, tapava-o. O z-index desfaz essa ordem só na pintura.

   Fica AQUI, fora das media queries. Esteve só no bloco dos 1240 e acima, e o
   mobile ficou com as duas palavras por trás da ilustração. */
.sobre-hero__palavra {
	z-index: 1;
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
}

.sobre-hero__palavra--about {
	background-image: url("../../img/sobre/about.svg");
	aspect-ratio: 316 / 70;
}

.sobre-hero__palavra--us {
	background-image: url("../../img/sobre/us.svg");
	aspect-ratio: 110 / 71;
}

/* ---------- Ilustração ---------- */

.sobre-hero__ilustracao {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Logo vertical ---------- */

.sobre-hero__logo {
	display: block;
	aspect-ratio: 77 / 133;
	background-image: url("../../img/sobre/logo-vertical.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

/* ---------- Texto ---------- */

/* O botão de "ler mais" é só de telemóvel — o frame de desktop não tem chevron
   nenhum neste hero. O `:not([hidden])` do bloco de mobile é que o mostra, para
   o atributo continuar a mandar enquanto o JS não mede. */
.sobre-hero__ler-mais {
	display: none;
}

.sobre-hero__texto {
	font-family: var(--font-body);

	/* 14.285px e não o --fs-small de 14: é medição do nó 4004:2710, como os
	   valores em bruto dos reviews e das FAQs. */
	font-size: 14.285px;
	font-weight: var(--fw-body);

	/* `normal` e não o --lh-body de 1.6. O Figma tem `leading-normal` e o passo
	   entre linhas mede 17.15px, que é 1.2 sobre os 14.285. Com o token o bloco
	   ficava um terço mais alto. É a mesma correcção que se fez no parágrafo
	   dos perks. */
	line-height: normal;
}

.sobre-hero__texto p {
	/* No desenho as linhas seguem-se sem intervalo dentro de cada bloco: o
	   passo é sempre 17.15, também entre parágrafos. */
	margin: 0;
}

/* O intervalo entre os dois blocos é uma linha em branco: do fim do texto_1 ao
   início do texto_2 vão 34.29px, ou seja dois passos em vez de um. */
.sobre-hero__bloco + .sobre-hero__bloco {
	margin-top: 17.15px;
}

/* ---------- Mobile — até 1239px ----------
   Figma: frame About us - mob (4004:4759), banda 55..483.9. Também aqui é uma
   composição, não um empilhamento — foi isso que fez a nossa banda ter 1218.95
   contra os 428.9 do desenho:

     ilustração  4004:6009  (179.00,  70.87)  167.96 x 194
     logótipo    4004:6659  ( 27.73,  90.27)   80.45 x 139.56
     ABOUT       4004:6654  (122.04, 208.82)  114.83 x 24.95
     US          4004:6655  (308.72, 247.50)   39.71 x 25.29
     texto       4004:6010  ( 24.90, 282.05)  326.71 x 138.92

   O logótipo fica à ESQUERDA e a ilustração à DIREITA — ao contrário do
   desktop, onde estão trocados.

   A composição vai num palco com `aspect-ratio`, do topo da banda ao topo do
   texto (227.05 a 375 de largura), com tudo em percentagem dele. O texto fica
   em fluxo por baixo: é campo do cliente e não tem altura previsível. */

@media (max-width: 1239px) {
	/*
	 * O padrão à escala de mobile.
	 *
	 * Estava nos `1440px auto` de desktop, ou seja o recorte de desktop: a 375
	 * via-se a fatia esquerda da malha de 1440 e os losangos saíam ~4x mais
	 * grossos. Medido o passo das linhas numa fila do topo: **16.7 no site
	 * contra 4.1 no frame**, e 1440/375 = 3.84.
	 *
	 * No frame o nó do padrão (4004:6002) tem 373.71 de largura: é a malha
	 * inteira comprimida para a largura do ecrã, não uma fatia dela. Daí o
	 * `100% auto`.
	 *
	 * O `repeat-y` é nosso: o SVG é 1439x1405 e a 375 rende 366 de altura, mas
	 * a nossa banda tem 697 por o texto ser mais comprido que o do mockup. Sem
	 * ele sobravam 331px de creme liso.
	 */
	.sobre-hero.section {
		background-repeat: repeat;
		background-size: 100% auto;
	}

	.sobre-hero.section {
		padding-block: 0;
	}

	.sobre-hero__palco {
		padding-inline: 0;
	}

	/* A composição. 227.05 = 282.05 (topo do texto) - 55 (topo da banda). */
	.sobre-hero__titulo,
	.sobre-hero__ilustracao,
	.sobre-hero__logo {
		position: absolute;
	}

	.sobre-hero__titulo {
		position: static;
	}

	.sobre-hero__palco::before {
		display: block;
		aspect-ratio: 375 / 228.05;
		content: "";
	}

	.sobre-hero__ilustracao {
		top: 4.4987vw;   /*  (70.87 - 54) / 375 */
		left: 47.7333%;  /* 179.00 / 375 */
		width: 44.7893%; /* 167.96 / 375 */
	}

	.sobre-hero__logo {
		top: 9.6720vw;   /*  (90.27 - 54) / 375 */
		left: 7.3947%;   /*  27.73 / 375 */
		width: 21.4533%; /*  80.45 / 375 */
	}

	.sobre-hero__palavra {
		position: absolute;
		max-width: none;
	}

	.sobre-hero__palavra--about {
		top: 41.2853vw;  /* (208.82 - 54) / 375 */
		left: 32.5440%;  /* 122.04 / 375 */
		width: 30.6213%; /* 114.83 / 375 */
	}

	.sobre-hero__palavra--us {
		top: 51.6000vw;  /* (247.50 - 54) / 375 */
		left: 82.3253%;  /* 308.72 / 375 */
		width: 10.5893%; /*  39.71 / 375 */
	}

	/* O texto em fluxo, na caixa do nó 4004:6010. */
	.sobre-hero__texto {
		position: relative;
		width: 87.1227%;   /* 326.71 / 375 */
		margin-inline: 6.64%; /* 24.90 / 375 */

		/* A régua e o chevron por baixo, e a folga até ao fim da banda:
		   do fim do texto (420.97) à régua vão 14.85, da régua ao chevron 8.9,
		   e do fim do chevron (455.42) ao fim da banda 28.48. */
		padding-bottom: 13.8213%; /* (14.85 + 10.7 + 8.9 + 28.48) / 375 */
	}

	/* A régua do nó 4004:6585: 329.58 de largura, ou seja 0.88% mais larga que a
	   caixa do texto de cada lado. */
	.sobre-hero__texto::after {
		position: absolute;
		bottom: 12.6613%; /* (10.7 + 8.9 + 28.48) / 375 -> do fim da caixa */
		left: -0.4392%;
		width: 100.8785%; /* 329.58 / 326.71 */
		height: 1px;
		background: var(--s-text-brown);
		content: "";
		opacity: 0.35;
	}

	/* O chevron do nó 4004:6586, 27.06x10.70, centrado em 186.72 — 1.28px à
	   esquerda do centro dos 375, colocação à mão. **Não é pista de scroll: é o
	   "ler mais" deste texto**, que o desenho mostra cortado a 8 linhas. */
	.sobre-hero__ler-mais:not([hidden]) {
		position: absolute;
		bottom: 7.5947%; /* 28.48 / 375 */
		left: 45.4022%;  /* (173.19 - 24.90) / 326.71 */
		display: block;
		width: 8.2825%;  /* 27.06 / 326.71 */
		aspect-ratio: 27.06 / 10.7;
		color: var(--s-text-brown);
	}

	.sobre-hero__ler-mais .ler-mais__glifo {
		mask-image: url("../../img/sobre/chevron-scroll.svg");
	}
}

/* ---------- Composição (1240px e acima) ---------- */

@media (min-width: 1240px) {
	/* A banda tem 592px a 1440 e a composição escala como um todo abaixo disso,
	   pelo `aspect-ratio` — é o que os perks fazem.

	   Estava com `height: 592px` fixo e o x em percentagem, e isso partia a
	   costura: a figura encolhia com a largura mas o topo dela não subia, por
	   isso a aresta de baixo — que é reta, porque a fotografia está cortada aí —
	   deixava de entrar no azul e assentava no creme. Media -83.1px a 1200 e
	   -21.2 a 1366, contra os +6.4 do desenho. Lia-se como se a figura fosse
	   cortada pela aresta do hero. */
	.sobre-hero__palco {
		aspect-ratio: 1440 / 592;
		padding-inline: 0;
	}

	/* Tudo o que segue está em posição absoluta e em percentagem do palco, nos
	   dois eixos, para a composição escalar sem se descolar. Os denominadores
	   são 1440 e 592, a caixa do desenho. */
	.sobre-hero__ilustracao,
	.sobre-hero__logo,
	.sobre-hero__palavra,
	.sobre-hero__texto {
		position: absolute;
	}

	.sobre-hero__ilustracao {
		top: 10.36%;     /* 61.331 / 592 */
		left: 15.8804%;  /* 228.677 / 1440 */
		width: 32.2959%; /* 465.061 / 1440 */
	}

	.sobre-hero__logo {
		top: 15.6291%;   /* 92.524 / 592 */
		left: 70.1132%;  /* 1009.63 / 1440 */
		width: 5.3472%;  /* 77 / 1440 */
	}

	.sobre-hero__texto {
		top: 44.0813%;   /* 260.961 / 592 */
		left: 52.9035%;  /* 761.81 / 1440 */
		width: 41.25%;   /* 594 / 1440 */
	}

	.sobre-hero__palavra--about {
		top: 73.3265%;   /* 434.093 / 592 */
		left: 6.8613%;   /* 98.803 / 1440 */
		width: 21.9444%; /* 316 / 1440 */
	}

	/* Passa 17.9px para dentro da banda da galeria, como no desenho. */
	.sobre-hero__palavra--us {
		top: 91.0319%;   /* 538.909 / 592 */
		left: 42.0461%;  /* 605.464 / 1440 */
		width: 7.6389%;  /* 110 / 1440 */
	}
}