/*
 * Fontinha — Contactos, a FAQ sobre a fotografia.
 *
 * Banda 95..937 em desktop (842) e 54..574 em telemóvel (520).
 * As medidas dos nós estão no contacto-faq.php.
 *
 * Mobile first, com o desktop aos 1200.
 */

.contacto-faq.section {
	position: relative;
	z-index: 1; /* o painel transborda para a banda de baixo; ver mais abaixo */

	padding-block: 0;

	background-color: var(--s-bg-alt);
	background-image: image-set(
		url("../../img/contacto/faq-fundo-mob.jpg") 1x,
		url("../../img/contacto/faq-fundo-mob@2x.jpg") 2x
	);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* A banda: 520 para 375 de largura. */
.contacto-faq__palco {
	position: relative;

	aspect-ratio: 375 / 520;
}

/* ============================================================
   O painel
   ============================================================ */

/*
 * A segunda fotografia, com o conteúdo por cima. Em telemóvel fica toda dentro
 * da banda (115.01..446.50 de 520); em desktop transborda 101.41 para o petrol.
 */
.contacto-faq__painel {
	position: absolute;
	top: 11.732%;  /* 61.01 / 520 */
	left: 6.392%;  /* 23.97 / 375 */

	width: 87.976%; /* 329.91 / 375 */
	height: 63.748%; /* 331.49 / 520 */
}

.contacto-faq__painel-foto {
	position: absolute;
	inset: 0;

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

	object-fit: cover;
}

/*
 * O conteúdo e o recorte vão por cima da fotografia do painel. O recorte vem
 * depois no DOM mas fica ATRÁS do texto, como no frame — daí o z-index de 1 no
 * conteúdo e nenhum nele.
 */
.contacto-faq__conteudo {
	position: relative;
	z-index: 1;

	height: 100%;
}

/* ============================================================
   O título
   ============================================================ */

/*
 * Baro LineTwo com a entrelinha a 0.7, como todos os títulos do tema: o nó de
 * desktop dá 40/57.045 = 0.701.
 */
.contacto-faq__titulo {
	position: absolute;
	top: 8.242%; /* 88.33 - 61.01, de 331.49 */
	left: 0;

	margin: 0;
	width: 100%;

	color: var(--s-text-on-dark);
	font-family: var(--font-title);
	font-size: 23.13px; /* 16.218 / 0.701, a caixa do nó */
	font-weight: var(--fw-display);
	line-height: 0.7;
	text-align: center;
	text-transform: uppercase;
}

/* ============================================================
   As perguntas
   ============================================================ */

.contacto-faq__lista {
	position: absolute;
	top: 22.150%; /* 134.44 - 61.01, de 331.49 */
	left: 5.268%; /* 41.35 - 23.97, de 329.91 */

	display: grid;
	width: 88.760%; /* 292.83 / 329.91 */

	gap: 7.07px; /* média dos três intervalos do frame: 5.94, 8.88 e 6.40 */
}

/*
 * **`<details name>` e não JavaScript.** O atributo `name` faz o browser fechar
 * a irmã aberta, que é o que o Ricardo decidiu. Sem suporte, cada uma abre por
 * si — degradação, não avaria.
 */
.contacto-faq__item {
	padding: 8.93px 17.28px 8.60px; /* 33.75 de altura menos a caixa da pergunta */

	background: var(--s-bg);
}

.contacto-faq__pergunta {
	color: var(--s-text-muted);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 14.56px; /* a caixa do nó, 16.218, sobre a entrelinha de 1.114 */
	font-weight: 300;
	line-height: 1.114; /* 19 / 17.053, a caixa do nó de desktop */
	list-style: none;
}

/* O triângulo nativo sai: o desenho não tem marcador nenhum. */
.contacto-faq__pergunta::-webkit-details-marker {
	display: none;
}

.contacto-faq__pergunta::marker {
	content: "";
}

.contacto-faq__pergunta:focus-visible {
	outline: 2px solid var(--s-text-muted);
	outline-offset: 2px;
}

/*
 * A resposta fica a **3.07:1** sobre a caixa branca e tem 12.658px — abaixo dos
 * 4.5:1 que texto normal pede. É o valor do desenho, mantido por decisão do
 * Ricardo, como o rótulo do botão da barra de reservas. Está na lista da
 * designer.
 */
.contacto-faq__resposta {
	margin: 12.65px 0 0; /* 204.70 - 192.05, do fim da pergunta à resposta */

	color: var(--s-text-areia);
	font-family: var(--font-body);
	font-size: 12.658px;
	font-weight: 300;
	line-height: 1.2; /* passo de 15.19 */
}

/* ============================================================
   O recorte
   ============================================================ */

.contacto-faq__recorte {
	position: absolute;
	top: 83.360%; /* 337.83 - 61.01, de 331.49 */
	left: 83.061%; /* 297.99 - 23.97, de 329.91 */

	display: block;
	width: 19.441%; /* 64.14 / 329.91 */
	height: auto;

	aspect-ratio: 167.72 / 433.30;
	object-fit: contain;
}

/* ============================================================
   "You have a different question?"
   ============================================================ */

/*
 * **Em telemóvel fica FORA do painel**, por baixo dele e sobre a fotografia da
 * parede; em desktop está lá dentro, à direita. Por isso é absoluto em
 * coordenadas do palco e não do painel.
 */
.contacto-faq__outra {
	position: absolute;
	top: 80.363%; /* 417.89 / 520 */
	left: 6.371%; /* 23.89 / 375 */

	width: 65.507%; /* 245.65 / 375 */
}

.contacto-faq__outra-titulo {
	margin: 0;

	color: var(--s-text-on-dark);
	font-family: var(--font-title);
	/*
	 * **Aferido pelo AVANÇO e não pela caixa.** A caixa do nó dava 14.58 (10 /
	 * 0.686) e a essa medida a linha pedia 251.17 numa caixa de 245.65 —
	 * partia em duas. A 14.26 o avanço cabe **e** a caixa fecha nos 10 do nó:
	 * as duas medidas batem ao mesmo tempo, que é a confirmação de que é este
	 * o corpo.
	 */
	font-size: 14.26px;
	font-weight: var(--fw-display);
	line-height: 0.7;
	text-transform: uppercase;
	/* O nó é `nowrap` — é uma linha só no desenho, e a 14.26 o avanço fica a
	   0.02 da caixa. Sem isto perdia por essa fracção e partia em duas. */
	white-space: nowrap;
}

.contacto-faq__outra-texto {
	margin: 17.72px 0 0; /* 445.61 - 427.89 */

	color: var(--s-text-on-media);
	font-family: var(--font-body);
	font-size: 12.23px; /* passo de 14.68 sobre a entrelinha de 1.2 */
	font-weight: 300;
	line-height: 1.2;
}

/*
 * **O botão não existe em telemóvel** — o frame não o tem. Em desktop fica no
 * canto inferior direito do painel, já dentro da faixa que transborda.
 */
.contacto-faq__cta {
	display: none;
}

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

@media (min-width: 1200px) {

	.contacto-faq.section {
		background-image: image-set(
			url("../../img/contacto/faq-fundo.jpg") 1x,
			url("../../img/contacto/faq-fundo@2x.jpg") 2x
		);
	}

	.contacto-faq__palco {
		aspect-ratio: 1440 / 842;
	}

	/*
	 * **O painel sai da banda em 101.41.** Vai de 329.04 a 1038.41 e a banda
	 * acaba em 937. É a altura do painel que passa dos 100% do palco: 709.37 de
	 * 842 são 84.25%, e o topo em 234.04 são 27.80% — somados dão 112%.
	 *
	 * Quem deixa passar é a banda, que não leva `overflow` e vai com `z-index`
	 * de 1 para pintar sobre o petrol. A banda de baixo não tem de fazer nada,
	 * só não levar z-index maior — é a mesma arrumação das personagens da
	 * Pizzeria.
	 */
	.contacto-faq__painel {
		top: 27.796%;  /* 329.04 - 95, de 842 */
		left: 12.758%; /* 183.71 / 1440 */

		width: 74.001%;  /* 1065.61 / 1440 */
		height: 84.248%; /* 709.37 / 842 */
	}

	.contacto-faq__titulo {
		top: 10.381%; /* 402.68 - 329.04, de 709.37 */

		font-size: 57.045px;
	}

	.contacto-faq__lista {
		top: 42.500%; /* 630.52 - 329.04, de 709.37 */
		left: 9.575%; /* 285.74 - 183.71, de 1065.61 */

		width: 48.234%; /* 513.99 / 1065.61 */
		gap: 11.09px; /* média de 11.12, 10.15 e 11.99 */
	}

	.contacto-faq__item {
		padding: 20.58px 31.50px 23.76px; /* 63.34 de altura menos a caixa da pergunta */
	}

	.contacto-faq__pergunta {
		font-size: 17.053px;
	}

	.contacto-faq__resposta {
		margin-top: 13.32px; /* 769.90 - 756.58 */

		font-size: 13.58px; /* passo de 16.30 sobre a entrelinha de 1.2 */
	}

	.contacto-faq__recorte {
		top: 27.680%; /* 525.28 - 329.04, de 709.37 */
		left: 67.874%; /* 906.96 - 183.71, de 1065.61 */

		width: 15.740%; /* 167.72 / 1065.61 */
	}

	/*
	 * Em desktop entra para dentro do painel, à direita. O bloco não está
	 * centrado no painel — o desenho põe-lhe o centro em 989, e o do painel
	 * está em 716.52.
	 */
	.contacto-faq__outra {
		top: 51.137%; /* 525.57 - 95, de 842 */
		left: 55.249%; /* 795.59 / 1440 */

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

		text-align: center;
	}

	.contacto-faq__outra-titulo {
		font-size: 21.877px;
	}

	.contacto-faq__outra-texto {
		margin-top: 29.01px; /* 569.58 - 540.57 */

		font-size: 15.429px;
	}

	/*
	 * O botão é de contorno com a borda no gradiente dourado — não é o
	 * `.btn--ghost`, que é traço liso. A borda entra por máscara, como a moldura
	 * dos itens do menu de telemóvel: assim é mesmo o gradiente e não uma cor
	 * aproximada.
	 */
	.contacto-faq__cta {
		position: absolute;
		top: 93.252%; /* 990.53 - 329.04, de 709.37 */
		left: 69.030%; /* 919.30 - 183.71, de 1065.61 */

		display: grid;
		place-items: center;
		width: 12.741%; /* 135.77 / 1065.61 */
		aspect-ratio: 135.77 / 31.83;

		color: var(--s-text-paper);
		font-family: var(--font-display);
		font-size: 11.363px;
		font-weight: var(--fw-display);
		letter-spacing: 0.04em;
		line-height: 1;
		text-decoration: none;
		text-transform: uppercase;
	}

	.contacto-faq__cta::before {
		position: absolute;
		inset: 0;

		padding: 1px;

		background: var(--g-gold);
		content: "";
		mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		mask-composite: exclude;
	}

	@media (prefers-reduced-motion: no-preference) {
		.contacto-faq__cta {
			transition: color 0.15s ease;
		}
	}

	.contacto-faq__cta:hover,
	.contacto-faq__cta:focus-visible {
		color: var(--s-text-on-dark);
	}
}