/*
 * Fontinha — secção FAQs.
 *
 * Figma: banda 4001:963, 1441x341, petrol #005470 liso. Ao contrário das bandas
 * de cima não tem textura nem diagonal, por isso é cor e não imagem exportada.
 *
 * Medidas lidas nos nós, com a banda a começar em y=2548.7:
 *
 *   título    4001:964  x  42.4  y  53.0 (rel)   Baro LineTwo 121.949px #80A5B4
 *   bloco 1   4002:121  x 185.9  y  53.1   422.0x78.7
 *   bloco 2   4002:125  x 782.0  y  52.9   418.4x78.7
 *   bloco 3   4002:122  x 185.8  y 180.2   418.4x78.7
 *   bloco 4   4002:128  x 779.5  y 180.1   418.4x78.7
 *   arte      4001:965  x 1202.7 y 195.8   185.8x142.3
 *
 * Dentro de cada bloco, uma coluna com gap de 10: pergunta (Gill Sans Medium
 * 17.172px), régua de 0.8px em #FFFBF8 à largura toda, e resposta (Gill Sans
 * Medium 15.549px, passo de 18.66px = 1.2). Os três tamanhos vão em bruto por
 * serem medição e nenhum estar na escala — como nos reviews.
 *
 * Mobile first. Abaixo de 1200px a grelha passa a uma coluna, o título deixa de
 * ser marca de água e volta ao fluxo, e a arte de linha desaparece.
 */

/* Sobrepõe-se aos reviews em 3px — a costura da tabela "Sobreposições entre
   bandas" do CLAUDE.md, para não aparecer risca entre as duas. Aqui vai em px e
   não em percentagem: os 176.1 dos perks e os 83.9 dos reviews escalam porque
   acompanham um fundo dimensionado à largura, e este é só uma costura de
   hairline sobre cor lisa, que não tem de crescer com o ecrã. */
.faqs.section {
	position: relative;

	/* A banda pinta POR CIMA da dos socials, não por baixo. No frame os nós estão
	   por esta ordem: o fundo dos socials (4001:185) é o primeiro de todos e o
	   fundo das FAQs (4001:963) vem muito depois, logo fica à frente. Sem isto o
	   bege subia 55px e cortava a arte de linha ao meio — o petrol acabava em 285
	   quando o desenho o leva até 341.
	   O conteúdo dos socials não se perde: nos primeiros 55px da banda dele só há
	   fundo, e o título já começa em 123.1. */
	z-index: 1;
	margin-top: -3px;

	/* O título de 121.9px e a arte de linha assentam fora do fluxo; sem isto
	   qualquer um deles podia dar scroll horizontal. */
	overflow: hidden;
}

/* Em empilhado o palco é só o container do tema; a partir de 1200 vira a caixa
   de 1440 do frame, que é o que ancora o título, o chevron e a arte. */
.faqs__palco {
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.faqs__titulo {
	margin: 0 0 var(--sp-8);
	color: var(--s-text-faint);
	font-size: var(--fs-h1);
	text-transform: uppercase;
}

/* O `display` não vem daqui: em mobile é o flex do componente que manda e em
   desktop volta a ser grelha, no bloco dos 1200. Declará-lo aqui punha os itens
   empilhados dentro da janela do carrossel. */
.faqs .carousel__track {
	gap: var(--sp-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.faq {
	display: flex;
	flex-direction: column;

	/* O gap do flex no Figma. Fora da escala (8 ou 16), mas é medição. */
	gap: 10px;
	align-items: flex-start;
}

/* A régua é a borda da pergunta, e não um elemento à parte: assim o par
   pergunta+régua fica junto e o gap de 10 do flex dá o espaço até à resposta,
   igual ao desenho. O padding repõe os outros 10, do texto até à linha. */
.faq__pergunta {
	width: 100%;
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 0.8px solid var(--s-line-on-dark);
	font-family: var(--font-body);
	font-size: 17.172px;
	font-weight: var(--fw-body-strong);
	line-height: normal;
	text-transform: none;
}

.faq__resposta {
	margin: 0;
	font-family: var(--font-body);
	font-size: 15.549px;
	font-weight: var(--fw-body-strong);

	/* 18.66 de passo sobre 15.549 de corpo, lido nos nós 4001:967 e 4001:968. */
	line-height: 1.2;
}

/* ---------- Chevron ----------
   Nó 4001:982, traçado a #FFF8F0, 22.5x46.7 em (1369.6, 138.6). É um link e não
   decoração, por isso existe em todas as larguras: escondê-lo em mobile tirava
   uma navegação, não um enfeite.

   A caixa é maior que o glifo para dar os 44x44 de alvo de toque — o glifo tem
   24.5 de largura. O desenho não tem estados; o hover e o foco são derivados. */
.faqs__cta {
	display: block;
	width: 44px;
	height: 52px;
	margin-left: auto;
	margin-top: var(--sp-8);
	background-image: url("../../img/icons/faqs-chevron.svg");
	background-repeat: no-repeat;
	background-position: center;

	/* Tamanho explícito e não `contain`: com a caixa a 44x52 o `contain`
	   esticava o glifo até encher, e ele tem 24.462x47.957. */
	background-size: 24.462px 47.957px;
	transition: opacity 0.2s ease;
}

.faqs__cta:hover {
	opacity: 0.7;
}

.faqs__cta:focus-visible {
	outline: 2px solid var(--s-text-paper);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.faqs__cta {
		transition: none;
	}
}

@media (min-width: 1200px) {
	/* Em desktop não há carrossel: os quatro blocos estão todos abertos, como o
	   nó manda. O markup é o mesmo e é aqui que a janela deixa de recortar e o
	   track volta a ser grelha. */
	.faqs .carousel__viewport {
		overflow: visible;
		scroll-snap-type: none;
		padding-inline: 0;
	}

	.faqs .carousel__paginacao {
		display: none;
	}

	/* A banda tem 341px: 53.1 do topo à primeira linha de blocos e 82.1 do fim
	   dos de baixo ao fim da banda. O --section-y de 96 não cabia. */
	.faqs.section {
		padding-top: 53.1px;
		padding-bottom: 82.1px;
	}

	/* O palco reproduz o frame de 1440 e é o que ancora o título e a arte. */
	.faqs__palco {
		position: relative;
		max-width: 1440px;
		margin-inline: auto;
		padding-inline: 0;
	}

	/* Marca de água: fica por trás do primeiro bloco, como no desenho. Vem
	   primeiro no HTML e não leva z-index — a lista, que é `relative`, pinta-se
	   por cima por ordem de documento. */
	.faqs__titulo {
		position: absolute;
		top: -25.87px; /* põe o topo dos GLIFOS em 53.0 — ver Decisões assumidas */
		/* 42.4 é onde a TINTA começa no desenho; a caixa do texto arranca 8.04px
		   antes, que é o avanço à esquerda do primeiro glifo. */
		left: 2.382%; /* (42.4 - 8.04) / 1440 */
		margin: 0;
		font-size: 121.949px;
		line-height: normal;
	}

	/* Duas colunas de 418.4 com 176.5 de intervalo. O bloco não está centrado no
	   frame: arranca em 185.85 e sobra mais à direita (240.85) do que à esquerda.
	   A margem vai em percentagem do palco, que está travado nos 1440 — assim dá
	   os 185.85 exactos a 1440 e para cima, e encolhe com o ecrã abaixo disso.
	   Centrar era mais simples mas punha os blocos 27.5px à direita do desenho. */
	.faqs .carousel__track {
		display: grid;
		position: relative;

		/* Acima das duas decorações. Sem isto o ::after da arte de linha, que
		   vem depois no palco, pintava-se por cima do texto — a 1440 não se
		   nota porque não há cruzamento, mas entre 1200 e 1400 há. */
		z-index: 1;
		grid-template-columns: repeat(2, 418.4px);
		justify-content: start;
		margin-left: 12.906%; /* 185.85 / 1440 */
		column-gap: 176.5px;
		row-gap: 48.4px;
	}

	/* Posicionado pelo GLIFO e não pela caixa: a caixa tem 44x52 e o glifo
	   24.462x47.957 centrado nela, ou seja 9.769 de folga de cada lado e 2.02 em
	   cima. O desenho põe o glifo com a aresta direita em 1393.15 e o topo em
	   137.7, por isso a caixa fica 9.769 mais à direita e 2.02 mais acima. */
	.faqs__cta {
		position: absolute;
		top: 82.58px;  /* 84.6 - 2.02 */
		right: 2.575%; /* (46.85 - 9.769) / 1440 */
		z-index: 1;
		margin: 0;
	}

	/* A arte de linha do canto. Ancorada ao fundo e à direita do palco, e não em
	   percentagem da altura: a banda cresce se o cliente escrever respostas mais
	   longas, e o desenho põe-na a 2.9px do fim da banda. */
	.faqs__palco::after {
		position: absolute;
		right: 3.58%;     /* 51.55 / 1440 */
		bottom: -79.2px;  /* 82.1 de padding menos os 2.9 do desenho */
		width: 185.753px;
		height: 142.307px;
		background-image: url("../../img/icons/faqs-linhas.svg");
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		pointer-events: none;
	}
}

/* ============================================================
   Mobile — até 1199px. Frame Home - mob (4002:171), banda 1618..1808.
   ============================================================

   Medidas dos nós, em coordenadas da banda (topo 1618):

     FAQ'S       4002:865   ( 92.56,  12.00)  Baro LineTwo 68.572px, #80A5B4
     pergunta    4002:867   ( 43.78,  73.39)  227 de largura
     resposta    4002:998   ( 43.78,  98.70)  297, Gill Sans Medium 13.968px
     arte        4002:866   (282.62, 127.01)  81.71 x 62.59

   Estava tudo nos valores de desktop — título a 121.949px e corpo a 17.172 e
   15.549 — o que dava 661.25 de banda contra os 190 do desenho.

   **O desenho mostra UMA pergunta; nós mostramos as quatro.** A banda fica mais
   alta por isso, não por espaçamento: com a tipografia certa, quatro perguntas
   dão ~415 contra os 190 de uma. Mostrar só a primeira em mobile é decisão de
   conteúdo e não a tomei sozinho. */

@media (max-width: 1199px) {
	.faqs__palco {
		max-width: 375px;
		padding-inline: 0;
	}

	/* O padding da .section punha 48 em cima e 48 em baixo; o desenho tem 12
	   até ao título e 58 do fim do conteúdo ao fim da banda. */
	.faqs.section {
		/* Em baixo eram 58, de quando a banda acabava na resposta. Com os
		   traços em fluxo o desenho deixa ~27 do fim deles (165.32) ao fim da
		   banda (192.29). */
		padding-block: 12px 30px;
	}

	.faqs__titulo {
		margin: 0;
		padding-left: 24.6827%; /* 92.56 / 375 */
		font-size: 68.572px;

		/* A caixa à medida da tinta do nó: 48 de altura para 68.572 de corpo.
		   O `normal` da Baro LineTwo dava 82. */
		line-height: 0.7;
	}

	/* Uma pergunta de cada vez. A janela leva o padding do desenho: 43.78 à
	   esquerda e o que sobra à direita depois dos 297 da resposta. */
	.faqs .carousel {
		margin-top: 13.39px; /* 1691.39 - (1618 + 12 + 48) */
	}

	.faqs .carousel__viewport {
		padding-inline: 43.78px 34.22px;
		scroll-padding-inline: 43.78px;
	}

	/* 34.22 e não os 24 do --sp-6: a janela tem 43.78 de padding à esquerda e o
	   item 297, logo o seguinte arrancava em 364.78 e espreitava 10.23. No
	   frame não se vê nada da pergunta seguinte — a caixa da resposta acaba em
	   340.78 e não há mais nada. Com 34.22, que é o padding direito da janela,
	   o item seguinte começa exactamente em 375. */
	.faqs .carousel__track {
		gap: 34.22px;
		padding-inline: 0;
	}

	.faqs .carousel__item {
		width: 297px; /* a caixa da resposta, nó 4002:998 */
		max-width: calc(100vw - 43.78px - 34.22px);
	}

	/* Os seis traços do desenho — nós 4002:1005..1010, 35.64x3.51 com passo de
	   ~43.1, ou seja 7.46 de intervalo. Brancos, e o activo a #3D3D3C:
	   amostrado no export, (255,255,255) nos cinco e (61,61,60) no segundo.

	   O componente cria um por pergunta e nunca mais do que as que existem, por
	   isso com quatro perguntas saem quatro traços, não seis. */
	.faqs .carousel__paginacao {
		/* O `display` não vem do componente — cada secção põe o seu, como nos
		   socials. Sem ele os traços empilhavam-se em coluna. */
		display: flex;
		justify-content: center;

		/* O centro do grupo no nó é 190.60, ou seja 3.10 à direita do centro do
		   frame — daí o padding de 6.20 sobre um flex centrado. Centrado sem
		   ele o grupo caía em 187.49. */
		padding-left: 6.20px;
		gap: 7.46px;
		margin-top: 26.64px; /* 159.10 - 132.46 */
	}

	.faqs .carousel__pagina {
		display: block;
		width: 35.64px;
		height: 3.51px;
		padding: 0;
		border: 0;

		/* Sem isto o botão herda a linha do texto e a fila de traços fica com
		   18px de altura em vez de 3.51. */
		line-height: 0;
		background: var(--c-white);
	}

	.faqs .carousel__pagina.is-atual {
		width: 35.64px;
		height: 3.51px;
		border: 0;
		background: var(--s-bg-dark);
	}

	/* O número visível não existe aqui: o traço é a peça, e o nome acessível
	   continua no .screen-reader-text que o componente põe dentro do botão. */
	.faqs .carousel__pagina [aria-hidden="true"] {
		display: none;
	}

	/*
	 * O chevron NÃO sai em mobile. DECIDIDO pelo Ricardo, e contraria a decisão
	 * anterior de o manter em todas as larguras.
	 *
	 * O frame mobile não o tem nesta banda, e no canto inferior direito ele
	 * caía por cima da resposta: media 323..367 em x e 106.30..158.30 em y,
	 * contra a resposta em 43.77..340.77 e 98.67..132.17 — cortava-a ao meio.
	 * Em fluxo somava 52px à banda; não havia sítio para ele.
	 *
	 * A navegação em mobile fica pelos traços e pelo arrasto do componente.
	 */
	.faqs__cta {
		display: none;
	}

	/* A arte de linha do canto — nó 4002:866, 81.71x62.59 em (282.62, 127.01)
	   da banda. */
	.faqs__palco::after {
		position: absolute;
		top: 127.01px;
		left: 75.3653%; /* 282.62 / 375 */
		width: 81.71px;
		height: 62.59px;
		background-image: url("../../img/icons/faqs-linhas.svg");
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		pointer-events: none;
	}

	.faqs__palco {
		position: relative;
	}

	/*
	 * A caixa da pergunta é 227x17 (nó 4002:867) e não 297x30. Os 297 são a
	 * largura da RESPOSTA (4002:998); a pergunta é mais estreita. E os 13 de
	 * altura a mais eram os 10 de padding até à régua mais 10 do flex.
	 *
	 * Em mobile não há régua: entre a pergunta (acaba a 92.88) e a resposta
	 * (101.19) vão 8.31 de vazio. Confirmado por pixéis — a tinta da pergunta
	 * vai de 78 a 88 e a da resposta de 103 a 113, e não há uma única linha de
	 * pixéis claros pelo meio.
	 */
	/* 8.31 entre a pergunta e a resposta (92.88 -> 101.19), contra os 10 do
	   desktop. */
	.faq {
		gap: 8.31px;
	}

	.faq__pergunta {
		width: 227px;
		max-width: 100%;
		padding-bottom: 0;
		border-bottom: 0;
		/*
		 * 14.012px, e não os 15.427 que aqui estavam. Aqueles eram DERIVADOS —
		 * "o mesmo rácio pergunta/resposta do desktop" — e não medidos.
		 *
		 * O nó 4002:867 dá a caixa 227x17 e a string. Resolvendo para o corpo
		 * que põe esta string exactamente em 227 de avanço saem 14.012, e a
		 * caixa de linha que daí resulta mede 17.00 — os dois números do nó,
		 * um deles por confirmação independente. A 15.427 o texto media 249.92
		 * e partia em duas linhas dentro dos 227.
		 *
		 * Fica em 14 e não em 14.012 porque a 14.012 o avanço dá 227.06 e não
		 * cabe nos 227 da caixa por seis centésimos — partia na mesma. A 14
		 * mede 226.87.
		 */
		font-size: 14px;
	}

	.faq__resposta {
		font-size: 13.968px; /* nó 4002:998 */
	}
}