/*
 * Fontinha — Sobre Nós, galeria em faixa.
 *
 * Figma: banda y 687..1267 do frame 4004:2876, 580px de altura, petrol-mid
 * (nó 4004:2632). Medidas dos nós, em coordenadas do frame:
 *
 *   janela      350.35x272.12, primeira em (115.26, 770.28)
 *   passo       359.71  ->  intervalo de 9.36
 *   barra       4004:4014  (252.89, 1132.14)  965.69x5.64
 *   cursor      4004:2819  (277.72, 1132.77)  127.35x5.02
 *
 * A quarta fotografia é cortada pela margem direita — o nó de recorte tem
 * 244.38 de largura em vez de 350.35. É o corte que diz que há mais, como nos
 * destaques da homepage.
 *
 * Mobile first. Abaixo de 1240px a faixa passa a fluxo. O limiar acompanha o do
 * hero: a página desmonta-se toda de uma vez, senão entre 1200 e 1239 ficava com
 * o hero empilhado e esta banda ainda em coordenadas do desenho.
 */

.sobre-galeria.section {
	/* A banda tem altura fixa e o conteúdo está colocado à mão lá dentro. */
	padding-block: 0;
	background: var(--s-bg-petrol-mid);
}

.sobre-galeria__palco {
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
}

/* ---------- Fotografias ---------- */

.sobre-galeria__foto {
	/* 350.35 do desenho. O limite por viewport é o padrão dos outros
	   carrosséis: uma largura em % dentro de um track flex é circular. */
	width: 350.35px;
	max-width: calc(100vw - var(--gutter) * 2);
}

.sobre-galeria__imagem {
	display: block;
	width: 100%;
	aspect-ratio: 350.35 / 272.12;
	object-fit: cover;

	/* Os dois pares vêm do repeater, em variáveis, e a media query de mobile
	   troca de par — ver o bloco de telemóvel no fim do ficheiro. */
	object-position: var(--foco-x, 50%) var(--foco-y, 50%);
}

/* As setas desta banda foram removidas: eram nossas, o desenho não as tem, e a
   navegação por rato passou a ser o arrastar-para-rolar do componente — ver
   ligarArrasto() em assets/js/carousel.js. O intervalo entre o fundo das
   fotografias (355.4 da banda) e o topo da barra (445.14) volta a ser o vazio
   de 89.7px do desenho. */

/* ---------- Barra de progresso ---------- */

.carousel__progresso {
	position: relative;
	width: 100%;
	height: 5.64px;
	background: var(--s-bg-dark);
}

/* O cursor é construído pelo JS. Largura e posição vêm da fracção do carrossel
   que está à vista, por isso não há valores de desenho aqui: no frame ele tem
   127.35 de 965.69, ou seja 13.2%, que é o que se veria com as fotografias que
   lá estão. */
.carousel__progresso__cursor {
	position: absolute;
	top: 0.63px; /* 1132.77 - 1132.14 */
	left: 0;
	height: 5.02px;
	background: var(--g-gold);
}

@media (prefers-reduced-motion: no-preference) {
	.carousel__progresso__cursor {
		transition: left 0.15s ease, width 0.15s ease;
	}
}

/* ---------- Empilhado (até 1239px) ---------- */

@media (max-width: 1239px) {
	.sobre-galeria.section {
		padding-block: var(--section-y);
	}

	.sobre-galeria .carousel__viewport {
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
	}

	.sobre-galeria .carousel__track {
		gap: var(--card-gap);
	}

	.carousel__progresso {
		margin-top: var(--sp-8);
		margin-inline: var(--gutter);
		width: auto;
	}

}

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

@media (min-width: 1240px) {
	.sobre-galeria__palco {
		height: 580px; /* 1267 - 687 */
	}

	.sobre-galeria__carrossel {
		position: absolute;
		top: 83.28px; /* 770.28 - 687 */
		left: 0;
		right: 0;
	}

	/* 115.26 é onde a primeira fotografia começa. À direita não há folga: a
	   quarta sai da margem, e é isso que o desenho mostra. */
	.sobre-galeria .carousel__viewport {
		padding-inline: 8.0042% 0; /* 115.26 / 1440 */
		scroll-padding-inline: 8.0042%;
	}

	.sobre-galeria .carousel__track {
		gap: 9.36px; /* passo 359.71 menos a janela 350.35 */
	}


	.sobre-galeria .carousel__progresso {
		position: absolute;
		top: 445.14px;   /* 1132.14 - 687 */
		left: 17.5618%;  /* 252.89 / 1440 */
		width: 67.0618%; /* 965.69 / 1440 */
	}
}


/* ---------- Telemóvel (até 767px) — a composição do About us - mob ----------
 *
 * Abaixo de 768 a banda deixa de ser a de desktop mais estreita: é outra
 * composição, medida no frame 4004:4759. Em coordenadas da banda, que vai de
 * 484.39 a 849.63 (365.24 de altura, nó de fundo 4004:6003):
 *
 *   foto 1   4004:6579   x  71.73  y  29.17   225.84 x 281.89
 *   foto 2   4004:6584   x 309.98  y  29.28   224.95 x 282.46
 *   recorte  4004:6580   x 302.26  y  15.71    71.64 x 321.09
 *   barra    4004:6651   x  69.50  y 337.42   238.38 x   5.56
 *   cursor   4004:6652   x  69.92  y 336.44    40.81 x   7.28
 *
 * A janela é **retrato** (0.801) e a de desktop é paisagem (1.288). Não é a
 * mesma caixa mais estreita — é outra forma, e por isso as fotografias precisam
 * de enquadramento próprio: os campos foco_x_mobile e foco_y_mobile.
 *
 * O intervalo 768–1239 não tem frame e fica no empilhado de sempre, que é o
 * bloco de cima. Este vem depois para o vencer.
 */

@media (max-width: 767px) {
	.sobre-galeria.section {
		/* 29.17 do topo da banda à fotografia; em baixo, o que sobra do fim da
		   barra (342.98) ao fim da banda (365.24). */
		padding-block: 29.17px 22.26px;
	}

	/* 71.73 à esquerda e nada à direita: a segunda fotografia é cortada pela
	   margem, e é esse corte que diz que há mais. No frame ficam 63.92 dela à
	   vista (309.98 até ao recorte em 373.90). */
	.sobre-galeria .carousel__viewport {
		padding-inline: 71.73px 0;
		scroll-padding-inline: 71.73px;
	}

	.sobre-galeria .carousel__track {
		gap: 12.41px; /* 309.98 - 297.57 */
	}

	.sobre-galeria__foto {
		width: 225.84px;

		/* A rede do costume: uma largura em % dentro de um track flex é
		   circular. Num ecrã mais estreito que 375 encolhe o que for preciso. */
		max-width: calc(100vw - 71.73px);
	}

	.sobre-galeria__imagem {
		aspect-ratio: 225.84 / 281.89;
		object-position: var(--foco-x-mob, 50%) var(--foco-y-mob, 50%);
	}

	/* A barra não ocupa a margem: tem 238.38 e arranca 2.23 à ESQUERDA da
	   fotografia (69.50 contra 71.73), acabando 10.31 à direita dela. */
	.sobre-galeria .carousel__progresso {
		margin-top: 26.36px; /* 337.42 - 311.06, o fundo da fotografia */
		margin-inline: 69.50px 0;
		width: 238.38px;
		max-width: calc(100vw - 69.5px);
		height: 5.56px;
	}

	/* Ao contrário do desktop, aqui o cursor é MAIS ALTO que a barra: 7.28
	   contra 5.56, a transbordar 0.98 em cima e 0.74 em baixo. */
	.sobre-galeria .carousel__progresso__cursor {
		top: -0.98px;
		height: 7.28px;
	}
}