/*
 * Fontinha — secção Instagram, a última banda da homepage.
 *
 * Figma: banda 1441x830 a começar em y=2834.7. Medidas lidas nos nós, relativas
 * ao topo da banda:
 *
 *   título       4001:1001   x 401.9  y 123.1   642x40   Baro LineTwo 57.038px
 *   fotografias  4001:187..191, 235.6x296.3 cada, em arco:
 *                x  105.2  y 365.4      x  352.1  y 328.3
 *                x  600.2  y 274.7      x  847.8  y 326.3
 *                x 1089.8  y 369.6
 *   avançar      4002:131    x 599.4  y 573.0   238x30.3
 *   paginação    quadrados 13x13 em x 673.9 / 695.9 / 719.4 / 742.9, y 647.9
 *                números Baro Plain 19.357px, y 665
 *   cartão       4001:1006   x 1157.7 y 710.2   280.9x84.2
 *                avatar      x 1167.7 y 721.9   62.1x62.1
 *                glifo       x 1264.6 y 742.5   24.3x24.4
 *                nome        x 1300.5 y 740.3   Gill Sans Medium 20.828px
 *
 * Mobile first. Abaixo de 1200px o arco desfaz-se: as fotografias ficam todas à
 * mesma altura e o carrossel mostra uma de cada vez.
 */

/* Sobrepõe-se às FAQs em 55px — "Sobreposições entre bandas" no CLAUDE.md. Em
   percentagem, como nos perks e nos reviews: 55 / 1440 = 3.82%. */
.socials.section {
	position: relative;
	margin-top: -3.82%;
	padding-block: var(--section-y);

	/* Cor lisa do nó 4001:185 e, por cima, o padrão de arcos e linhas recortado
	   do nó 4001:186. O padrão é transparente: a cor tem de ficar por baixo. */
	background-color: var(--s-bg-beige);
	background-image: url("../../img/socials-fundo.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	/* Acima de 1440 o tamanho é congelado e o padrão passa a repetir — ver a
	   media query no fim do ficheiro. */
	color: var(--s-text);
}

.socials__palco {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.socials__titulo {
	margin: 0 0 var(--sp-8);
	font-size: var(--fs-h1);
	text-align: center;
	text-transform: uppercase;
}

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

/* Cada fotografia tem o seu tamanho. Eu tinha-as todas a 235.6x296.3, que é a
   medida dos nós `Vector` (4001:187..191) — mas esses são uma forma uniforme por
   trás; as fotografias são os `Rectangle` (4001:996..1000), e variam. Foi isso
   que deixou a barra de avançar mais larga que a fotografia do meio e a 2px do
   fundo dela, quando no desenho tem a mesma largura e encosta. */
.socials__foto {
	width: 236.5px;
	max-width: calc(100vw - var(--gutter) * 2);
}

.socials__foto:nth-child(5n + 1) { width: 236.5px; }
.socials__foto:nth-child(5n + 2) { width: 239.2px; }
.socials__foto:nth-child(5n + 3) { width: 238.3px; }
.socials__foto:nth-child(5n + 4) { width: 236.2px; }
.socials__foto:nth-child(5n + 5) { width: 234.7px; }

.socials__foto a {
	display: block;
}

.socials__imagem {
	display: block;
	width: 100%;
	aspect-ratio: 236.5 / 297.7;
	object-fit: cover;
}

.socials__foto:nth-child(5n + 2) .socials__imagem { aspect-ratio: 239.2 / 298.6; }
.socials__foto:nth-child(5n + 3) .socials__imagem { aspect-ratio: 238.3 / 299.2; }
.socials__foto:nth-child(5n + 4) .socials__imagem { aspect-ratio: 236.2 / 296.2; }
.socials__foto:nth-child(5n + 5) .socials__imagem { aspect-ratio: 234.7 / 295.8; }

/* ---------- Cartão da conta ---------- */

/* O cartão tem a geometria do nó 4001:1006 e o conteúdo em coordenadas dele:
   avatar em (10, 11.7), glifo em (106.9, 32.3) e nome em (142.8, 30.1). Com
   flex e padding o fundo saía espremido — o SVG é uma forma composta, um círculo
   colado a uma barra, e não estica bem. */
.socials__conta {
	position: relative;
	display: block;
	width: 280.88px;
	height: 84.19px;
	margin-top: var(--sp-8);
	margin-left: auto;
	background-image: url("../../img/icons/instagram-cartao.svg");
	background-repeat: no-repeat;
	background-size: contain;
	color: var(--s-text-paper);
	text-decoration: none;

	/* Contexto de empilhamento próprio, para o ::after da barra ficar por baixo
	   do glifo e do handle e não por cima deles. */
	z-index: 0;
}

/*
 * A barra sangra até à aresta do ecrã.
 *
 * O SVG (280.882x84.1919) é uma peça só — círculo mais barra — e entra a
 * `contain`, por isso pára onde o seu rácio manda. O ::after prolonga a barra
 * dali até onde for preciso, com a mesma cor e na mesma banda vertical:
 * 25.1663..61.0581 de 84.1919, ou seja 29.892% do topo e 42.631% de altura.
 *
 * Arranca em `left` igual à altura da caixa, que é onde o círculo acaba
 * (84.19 de 84.1919), para nunca lhe tocar.
 */
.socials__conta::after {
	position: absolute;
	z-index: -1;
	top: 29.892%;
	height: 42.631%;
	background: var(--s-bg-petrol);
	content: "";
}

.socials__avatar {
	position: absolute;
	top: 11.7px;
	left: 10px;
	display: block;
	width: 62.1px;
	height: 62.1px;

	/* O único redondo do site. O raio 0 do CLAUDE.md é para botões e cartões;
	   aqui é uma fotografia de perfil, e o desenho tem-na redonda. */
	border-radius: 50%;
	object-fit: cover;
}

.socials__nome {
	position: absolute;
	top: 30.1px;
	left: 142.8px;
	font-family: var(--font-body);
	font-size: 20.828px;
	font-weight: var(--fw-body-strong);
	line-height: normal;
	white-space: nowrap;
}

/* O glifo do Instagram, nó 4001:1016. */
.socials__nome::before {
	position: absolute;
	top: 2.2px;
	left: -35.9px; /* 142.8 - 106.9 */
	width: 24.31px;
	height: 24.37px;
	background-image: url("../../img/icons/instagram-glifo.svg");
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
}

a.socials__conta:hover .socials__nome,
a.socials__conta:focus-visible .socials__nome {
	text-decoration: underline;
}

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

/* ---------- Controlos ----------
   O desenho não tem seta para trás: tem a barra de avançar (4002:131) e os
   números. Ir para trás faz-se pelos números ou pelas setas do teclado, que a
   janela do carrossel já aceita. */

.socials .carousel__btn--prev {
	display: none;
}

/* A barra taupe com as setas em ciclo, do nó 4002:131. É o "avançar": no
   desenho é o único glifo de navegação, e tem uma seta.

   Vive DENTRO da terceira fotografia — ver o template — e toma a largura dela,
   com `left` e `right` a zero em vez de uma largura fixa. É a fotografia que
   manda, e não coordenadas da secção: assim qualquer ajuste à fotografia leva a
   barra atrás. No desenho a barra tem 238 contra os 238.3 da fotografia e
   encosta-lhe ao fundo, sobrepondo-se 1.1px.

   `background-size: 100% 100%` e não `contain`: é um rectângulo com um glifo ao
   centro e tem de acompanhar a largura da fotografia, seja ela qual for. */
.socials .carousel__btn--next {
	position: absolute;
	top: calc(100% - 1.1px);
	right: 0;
	left: 0;
	width: auto;
	height: 30.34px;
	background-image: url("../../img/icons/socials-avancar.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.socials .carousel__btn--next [aria-hidden="true"] {
	display: none;
}

/* A barra é SEMPRE opaca, em qualquer estado. Com `opacity` na peça toda o
   padrão de arcos do fundo transparecia por ela e lia-se como defeito de
   renderização, não como estado. Os estados fazem-se com uma camada de cor
   POR CIMA da barra opaca: a peça continua a tapar o fundo, e o que muda é o
   tom dela.

   A camada é `--s-bg-beige`, a cor da própria banda, para o resultado ser o
   mesmo tom que a transparência dava — 40% de bege sobre a barra é o que os
   60% de opacidade produziam — mas pintado, não vazado. */
.socials .carousel__btn--next:hover:not(:disabled) {
	background-image:
		linear-gradient(
			color-mix(in srgb, var(--s-text) 12%, transparent),
			color-mix(in srgb, var(--s-text) 12%, transparent)
		),
		url("../../img/icons/socials-avancar.svg");
}

/* Desactivada: um tom mais claro na barra, não transparência. Com as cinco
   fotografias do desenho o carrossel não tem nada para rolar, por isso é este o
   estado que se vê quase sempre — e era aqui que o padrão do fundo transparecia.
   A 35% do componente a barra esbatia-se ao ponto de parecer erro; o tom aqui é
   o equivalente aos 60% que estavam, agora opaco. */
.socials .carousel__btn--next:disabled {
	opacity: 1;
	background-image:
		linear-gradient(
			color-mix(in srgb, var(--s-bg-beige) 40%, transparent),
			color-mix(in srgb, var(--s-bg-beige) 40%, transparent)
		),
		url("../../img/icons/socials-avancar.svg");
}

/* Paginação numerada. Os quadrados do desenho têm 13px com passo de 23 — nós
   4001:1002..1005 — e os números por baixo, a 17.1px do topo do quadrado.

   O alvo de toque de 44x44 é um ::after invisível centrado no botão, e **não**
   espaçamento: assim os quadrados ficam juntos como no desenho e os alvos podem
   sobrepor-se ao do vizinho. Antes o alvo era a própria caixa do botão, o que
   espalhava os quatro por 206px em vez de 82. */
.socials .carousel__paginacao {
	display: flex;
	gap: 10px; /* 23 de passo menos os 13 do quadrado */
	margin-top: var(--sp-6);
}

.carousel__pagina {
	position: relative;
	width: 13px;
	height: 13px;
	padding: 0;
	border: 1px solid var(--s-text);
	background: none;
	color: var(--s-text);
	cursor: pointer;
}

/* O quadrado da página actual é petrol, não tinta — nó 4001:1003, `#005470`.
   E é maior que os vazios: 13.47 contra 13. A borda passa a petrol também, para
   o quadrado cheio não ficar com um anel escuro à volta. */
.carousel__pagina.is-atual {
	width: 13.47px;
	height: 13.47px;
	border-color: var(--s-bg-petrol);
	background: var(--s-bg-petrol);
}

/* O número, fora do fluxo para não alargar o botão para além dos 13px. */
.carousel__pagina [aria-hidden="true"] {
	position: absolute;
	top: 17.1px; /* 665 - 647.9 do desenho */
	left: 50%;
	font-family: var(--font-display);
	font-size: 19.357px;
	font-weight: var(--fw-display);
	line-height: 1;
	transform: translateX(-50%);
}

/* O alvo de toque. Invisível, centrado, e pode sobrepor-se ao vizinho. */
.carousel__pagina::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	content: "";
	transform: translate(-50%, -50%);
}

.carousel__pagina:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
}

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

@media (min-width: 1200px) {
	/*
	 * O nó 4001:1006 acaba em 1438.56 num frame de 1440: a barra sangra até à
	 * aresta. A 1440 o nosso bate (1157.69..1438.56), mas acima disso o palco
	 * centra-se e o chip fica a (100vw - 1440) / 2 da aresta — a 1920 são 240px
	 * de bege à direita dele.
	 *
	 * O `right` negativo leva a barra até ao ecrã: a 1440 dá -1.44, que é
	 * exactamente a folga que o nó deixa.
	 */
	.socials__conta::after {
		left: 84.19px; /* a altura da caixa: onde o círculo acaba */
		right: calc((1440px - 100vw) / 2 - 1.44px);
	}

	/* A banda tem 830px fixos e o conteúdo dentro dela está colocado à mão. O
	   palco reproduz essa caixa e tudo lá dentro assenta em coordenadas do
	   desenho; o padding da .section sai, senão a banda cresceria. */
	.socials.section {
		padding-block: 0;
	}

	.socials__palco {
		position: relative;
		height: 830px;
		max-width: 1440px;
		padding-inline: 0;
	}

	/* O `top` alinha o topo dos GLIFOS, que no desenho estão em 123.1 — ver
	   Decisões assumidas. */
	.socials__titulo {
		position: absolute;
		top: 110.74px; /* põe o topo dos glifos em 123.1 */

		/* O desenho não centra o título: a caixa começa em 401.9 e o centro cai
		   em 722.9, 2.9px à direita do centro do frame. Abrir 5.8px à esquerda
		   desloca o centro esses 2.9. */
		left: 5.8px;
		right: 0;
		margin: 0;
		font-size: 57.038px;
		line-height: normal;
	}

	/* O topo do carrossel é o da fotografia mais alta, a do meio. As outras
	   descem a partir daqui pelo arco. */
	.socials__carrossel {
		position: absolute;
		top: 274.9px;
		left: 0;
		right: 0;
	}

	/* 105.2 é onde a primeira fotografia começa no desenho, e 114.6 é o que
	   sobra à direita depois da quinta. */
	.socials .carousel__viewport {
		padding-inline: 105.3px 114.7px;
		scroll-padding-inline: 105.3px;
	}

	.socials .carousel__track {
		align-items: flex-start;

		/* Sem `gap`: os quatro intervalos do desenho são diferentes uns dos
		   outros — 11.3, 12.5, 12.0 e 6.4 — por colocação à mão. Um valor
		   uniforme de 12 acumulava e deixava a quinta 7.6px à direita. */
		gap: 0;
	}

	.socials__foto:nth-child(5n + 2) {
		margin-left: 8.5px;
	}

	.socials__foto:nth-child(5n + 3) {
		margin-left: 9.9px;
	}

	.socials__foto:nth-child(5n + 4) {
		margin-left: 9.1px;
	}

	.socials__foto:nth-child(5n + 5) {
		margin-left: 7.6px;
	}

	/* A sexta reinicia o ciclo: precisa do intervalo que separaria dois grupos. */
	.socials__foto:nth-child(5n + 6) {
		margin-left: 12px;
	}

	/* O arco. As alturas são as do desenho, medidas a partir da fotografia do
	   meio, e repetem-se de cinco em cinco se o repeater trouxer mais. */
	.socials__foto:nth-child(5n + 1) {
		margin-top: 90.8px; /* 365.7 - 274.9 */
	}

	.socials__foto:nth-child(5n + 2) {
		margin-top: 53.6px; /* 328.5 - 274.9 */
	}

	.socials__foto:nth-child(5n + 3) {
		margin-top: 0;
	}

	.socials__foto:nth-child(5n + 4) {
		margin-top: 53.3px; /* 328.2 - 274.9 */
	}

	.socials__foto:nth-child(5n + 5) {
		margin-top: 97.4px; /* 372.3 - 274.9 */
	}

	/* Os quatro quadrados ocupam 82px — 4x13 mais 3x10 — e o desenho põe-nos de
	   673.9 a 755.9. Ancorados aí e não centrados: o desenho tem o grupo 5.1px à
	   esquerda do centro do frame, por colocação à mão. */
	.socials .carousel__paginacao {
		position: absolute;
		top: 373px;    /* 647.9 - 274.9 */
		left: 46.799%; /* 673.9 / 1440 */
		margin: 0;
	}

	.socials__conta {
		position: absolute;
		top: 710.2px;
		left: 80.396%; /* 1157.7 / 1440 */
		margin: 0;
	}
}

/* Acima de 1440 o padrão para de esticar. Com `100% auto` os arcos cresciam com
   o ecrã — a 1920 a imagem renderizava 1920x1108 numa banda de 830, ou seja 33%
   maiores e com o quarto de baixo cortado. Congelado nos 1440 do desenho e
   repetido na horizontal: o recorte tila sem costura, confirmado a 1920. */
@media (min-width: 1441px) {
	.socials.section {
		background-repeat: repeat-x;
		background-size: 1440px auto;
	}
}

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

   Composição própria: **uma fotografia grande** e outra cortada à direita, e o
   cartão da conta por baixo. **Não há título, nem paginação numerada, nem barra
   de avançar** — o desenho mobile não os tem. O nosso era o arco de cinco do
   desktop com os quatro números, e dava 660.84 contra os 458 do desenho.

   Coordenadas relativas à banda:

     fotografia    4002:999   ( 57.01,  38.67)  255.15 x 318.48
     a cortada     4002:1004  (314.97,  23.45)   60.14 x 362.77
     cartão        4002:1011  ( 52.31, 367.94)  322.69 x 77.69
       avatar      4002:1016  ( 61.59, 378.75)   57.31 x 57.31
       glifo       4002:1017  (140.56, 397.48)   22.44 x 22.49
       handle      4002:1021  (173.67, 395.07)  113 x 23

   Simplificação assumida: no desenho a segunda fotografia é mais alta que a
   primeira e começa 15.22 acima — é o mesmo arco do desktop, colocado à mão.
   Aqui todas ficam com a geometria da primeira; só se vê um pedaço da segunda,
   e o degrau não se lê. */

@media (max-width: 1199px) {
	/* Em mobile a caixa é 322.69x77.69 (rácio 4.15) e o SVG 3.336: a `contain`
	   rende 259.18 de largura e sobram 63.51 por pintar dentro da própria
	   caixa. O ::after cobre-os. A caixa já acaba em 375, por isso aqui basta
	   `right: 0`. */
	.socials__conta::after {
		left: 77.69px; /* a altura da caixa em mobile */
		right: 0;
	}

	/*
	 * Fundo próprio de mobile.
	 *
	 * O padrão é o nó 4002:854 (375.17x458.37) e a cor por baixo é o 4002:172,
	 * um rectângulo liso de #DDCDA8 — que é o --s-bg-beige que já lá está.
	 *
	 * O `socials-fundo.png` de desktop tem 1438x830 e a 375 de largura rendia
	 * 375x216.5 numa banda de 458: a partir de band-rel ~216 ficava bege liso.
	 * Amostrado numa faixa livre de conteúdo (x 2..50), a amplitude do vermelho
	 * caía de 23 para 0 a partir de +250, e no frame dá 18 a 22 até ao fim.
	 * A escala horizontal é que estava certa — o passo das riscas verticais dá
	 * 6.3 nos dois.
	 *
	 * O export veio opaco, como todos os outros. Resolvido pelo mesmo chroma do
	 * de desktop: a cor do traço é (246, 232, 201) — a mesma —, o fundo é
	 * branco puro, e o alfa sai de (255 - p) / (255 - S) pelo canal azul, que é
	 * o de maior contraste com 54. Ficam 18.5% dos pixéis com tinta.
	 */
	.socials.section {
		background-image: url("../../img/socials-fundo-mobile.png");
		background-size: 100% auto;

		/* Em mobile as duas bandas encostam: o fundo das FAQs (4002:864) acaba
		   em 1807.80 e o dos socials (4002:854) começa em 1807.43 — 0.37 de
		   costura. Os 3.82% são a sobreposição de desktop (55 em 1440) e a 375
		   davam 14.33; como as FAQs pintam por cima, a fotografia aparecia
		   ~14px mais alta em relação ao início visível da banda. */
		margin-top: -0.0987%; /* 0.37 / 375 */
	}

	.socials.section {
		padding-block: 0;
	}

	.socials__palco {
		position: relative;
		height: 458px;
		max-width: 375px;
		margin-inline: auto;
		padding-inline: 0;
	}

	.socials__titulo,
	.socials .carousel__paginacao,
	.socials .carousel__btn--next {
		display: none;
	}

	.socials__carrossel {
		position: absolute;
		top: 38.67px;
		left: 0;
		right: 0;
	}

	.socials .carousel__viewport {
		padding-inline: 15.2027% 0; /* 57.01 / 375 */
		scroll-padding-inline: 15.2027%;
	}

	/* 11.53 entre a primeira fotografia, que acaba em 312.16 (nó 4002:999), e a
	   segunda, que começa em 323.69 (nó 4002:1001). Estava em 2.81, medido do
	   nó de RECORTE da segunda (4002:1002, x=314.97) e não da fotografia — o
	   recorte começa 8.72 antes dela. */
	.socials .carousel__track {
		gap: 11.53px;
		align-items: flex-start;
	}

	.socials__foto,
	.socials__foto:nth-child(5n + 1),
	.socials__foto:nth-child(5n + 2),
	.socials__foto:nth-child(5n + 3),
	.socials__foto:nth-child(5n + 4),
	.socials__foto:nth-child(5n + 5) {
		width: 255.15px;
		max-width: calc(100vw - 57.01px);
		margin: 0;
	}

	.socials__imagem,
	.socials__foto:nth-child(5n + 2) .socials__imagem,
	.socials__foto:nth-child(5n + 3) .socials__imagem,
	.socials__foto:nth-child(5n + 4) .socials__imagem,
	.socials__foto:nth-child(5n + 5) .socials__imagem {
		aspect-ratio: 255.15 / 318.48;
	}

	/* O cartão da conta: 322.69x77.69, com os filhos em coordenadas dele. */
	.socials__conta {
		position: absolute;
		top: 367.94px;
		left: 13.9493%; /* 52.31 / 375 */
		width: 322.69px;
		height: 77.69px;
		margin: 0;
	}

	.socials__avatar {
		top: 10.81px;  /* 378.75 - 367.94 */
		left: 9.28px;  /*  61.59 -  52.31 */
		width: 57.31px;
		height: 57.31px;
	}

	.socials__nome {
		top: 27.13px;  /* 395.07 - 367.94 */
		left: 121.36px;/* 173.67 -  52.31 */
		font-size: 17.5px;
	}

	.socials__nome::before {
		top: 2.41px;   /* 397.48 - 395.07 */
		left: -33.11px;/* 140.56 - 173.67 */
		width: 22.44px;
		height: 22.49px;
	}
}