/*
 * Fontinha — Galeria, a tira de células.
 *
 * Figma: banda 99..1561 em desktop (1462) e 54..1296.47 em telemóvel (1242.47).
 * As medidas dos nós estão no galeria-grelha.php.
 *
 * ============================================================
 * TRÊS LINHAS EM DESKTOP, DUAS EM TELEMÓVEL
 * ============================================================
 *
 * Medido nos pixéis do export, coluna a coluna e linha a linha:
 *
 *   desktop  colunas  108 | 354 | 600 | 846 | 1092   célula 241, intervalo 5
 *            linhas   422.63 | 751.51 | 1081.42      célula 322.41, intervalo 7
 *   mobile   colunas  44 | 337                       célula 278.34, intervalo 11
 *            linhas   354.42 | 751.97                célula 387, intervalo 11
 *
 * A janela de telemóvel (4005:30966) tem 876.98 de altura — **duas linhas e não
 * três**. Confirmado pela altura da banda: com três linhas o conteúdo acabava em
 * 1531 e a banda tem 1296.
 *
 * Mobile first, com o desktop aos 1200.
 */

.galeria.section {
	position: relative;

	padding-block: 0;
	background: var(--s-bg-cream);
}

.galeria__palco {
	position: relative;

	/* A banda de telemóvel: 1242.47 de altura para 375 de largura. */
	aspect-ratio: 375 / 1242.47;
}

/* ============================================================
   O cabeçalho
   ============================================================ */

.galeria__cabecalho {
	position: absolute;
	top: 3.941%;  /* 102.97 - 54, de 1242.47 */
	left: 11.736%; /* 44.01 / 375 */

	width: 75.238%; /* 282.14 / 375 */
}

/* Petrol, como todos os títulos de página do site. */
.galeria__titulo {
	margin: 0;

	color: var(--s-text-petrol);
	font-family: var(--font-title);
	font-size: 22.11px;
	font-weight: var(--fw-display);
	line-height: 0.73; /* 16.13 / 22.11 — a caixa do nó */
	text-transform: uppercase;
}

/*
 * Justificada em telemóvel e centrada em desktop: os dois frames não a alinham
 * da mesma maneira. Em telemóvel são onze linhas todas coladas às duas margens.
 */
.galeria__intro {
	margin: 20.03px 0 0; /* 141.13 - 121.10, do fim da caixa do título */

	color: var(--s-text);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.25; /* passo de 16.2 */
	text-align: justify;
}

/* ============================================================
   A tira
   ============================================================ */

/*
 * **A tira arranca na primeira célula e não na janela do frame.** O nó de
 * recorte de telemóvel (4005:30966) começa em 263.35 mas a primeira linha só
 * em 354.42: são 91 de creme dentro do recorte, e ancorar por ele punha a tira
 * 91 acima do sítio.
 */
.galeria__tira {
	position: absolute;
	top: 24.178%; /* 354.42 - 54, de 1242.47 */
	left: 0;

	width: 100%;
}

/*
 * A janela do carrossel arranca em 9.03 e a primeira célula em 44.93: o
 * `padding` é a diferença, e o `scroll-padding` acompanha-o para o encaixe
 * alinhar pelo início do conteúdo e não pela borda da janela.
 */
.galeria .carousel__viewport {
	padding-inline: 11.973% 2.408%; /* 44.93 / 375  e  9.03 / 375 */
	scroll-padding-inline: 11.973%;
}

/*
 * **O track é uma grelha e não uma fila.** Cada célula leva a sua linha e a sua
 * coluna do PHP; sem isso uma grelha em CSS só preenche por coluna, e o desenho
 * preenche linha a linha.
 */
.galeria .carousel__track {
	display: grid;
	grid-auto-columns: 278.34px;
	grid-auto-flow: row;
	grid-template-rows: repeat(2, 387px);
	gap: 11px 11.16px;
}

/* O `padding-inline-end` não conta para o `scrollWidth`: o calço é conteúdo. */
.galeria .carousel__track::after {
	grid-row: 1;
	grid-column: -1;

	width: calc(2.408vw - 11.16px);

	content: "";
}

.galeria__celula {
	grid-row: var(--rm);
	grid-column: var(--cm);

	position: relative;
	overflow: hidden;
}

.galeria__foto {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
}

/* ============================================================
   O cartão
   ============================================================ */

/*
 * O gradiente é o `--g-gold` da identidade, na horizontal. Medido de ponta a
 * ponta do cartão: #A26850, #B47D5F, #D2A07A, #EABD90, #F1C696 — as cinco
 * paradas do token, a menos de dois pontos por canal.
 */
.galeria__cartao {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 3.61% 5.75% 5.71%; /* 13.95 / 386.47 e 15.99 / 278.34 */

	background: var(--g-gold);
}

/* 4005:31088 — (60.92, 368.37) 246.88x223.65 dentro do cartão. Só em telemóvel:
   o cartão do frame de desktop é gradiente liso. */
.galeria__cartao-foto {
	display: block;
	width: 100%;
	height: auto;

	aspect-ratio: 246.88 / 223.65;
	object-fit: cover;
}

/*
 * O número e o nome partilham a linha, encostados às pontas. O número é Baro
 * LineTwo — o "0" traz a barra que se vê no desenho — e o nome é Gill Sans
 * Light em petrol.
 */
.galeria__cartao-cabeca {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: auto 0 0;
}

.galeria__numero {
	color: var(--s-text);
	font-family: var(--font-title);
	font-size: 54.78px;
	font-weight: var(--fw-display);
	line-height: 0.7;
}

.galeria__nome {
	color: var(--s-text-petrol);
	font-family: var(--font-body);
	font-size: 34.55px;
	font-weight: 300;
	line-height: 0.8;
}

/* A régua do nó 4005:30959: 239.71 de 278.34, ou seja 86.1% do cartão. */
.galeria__cartao-texto {
	margin: 14.62px 0 0; /* 683.47 - 668.85, da régua ao texto */
	padding-top: 16.43px;

	border-top: 1px solid var(--s-text);
	color: var(--s-text);
	font-family: var(--font-body);
	font-size: 11.63px;
	font-weight: 300;
	line-height: 1.203; /* passo de 14 */
}

/* ============================================================
   A barra de progresso
   ============================================================ */

/*
 * Só em telemóvel: o frame de desktop tem setas e não barra. Calha em
 * (48.08, 1165.80) 269.04x6.28 e cursor de 46.06x8.21 — **o cursor é mais alto
 * que a calha**, como na galeria da Sobre Nós.
 */
.galeria .carousel__progresso {
	position: absolute;
	top: 89.483%; /* 1165.80 - 54, de 1242.47 */
	left: 12.821%; /* 48.08 / 375 */

	margin: 0;
	width: 71.744%; /* 269.04 / 375 */
	height: 6.28px;

	/*
	 * **A calha é escura, não bege.** Amostrada no export a `#4D4D4D`, que é o
	 * `--s-bg-dark` (`#3C3C3B`) esbatido pelo creme da banda — o mesmo valor e
	 * a mesma leitura da barra das características do pop-up dos quartos.
	 * Tinha ficado em `--s-bg-beige` (#DDCDA8), que é a cor por baixo do
	 * cursor no desenho do Instagram e não tem nada que ver com esta.
	 */
	background: var(--s-bg-dark);
}

/*
 * **A classe é `carousel__progresso__cursor` e não `carousel__cursor`.** Com o
 * nome errado a regra não pegava e o cursor ficava com o do `sobre-galeria.css`,
 * que não leva prefixo de secção e por isso é global: 5.02px de altura em vez
 * de 8.21 e `top: 0.63px` em vez de transbordar a calha. É o mesmo tipo de fuga
 * que as regras de `.carousel__pagina` do socials.css tinham trazido para a
 * galeria da Pizzeria — só que aqui era a minha regra que não aplicava.
 */
.galeria .carousel__progresso__cursor {
	top: 0;
	height: 8.21px;

	background: var(--g-gold);
	transform: translateY(-0.97px);
}

/* As setas não existem em telemóvel. */
.galeria .carousel__btn {
	display: none;
}

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

@media (min-width: 1200px) {

	/*
	 * **Só em desktop:** o header acaba em 95 e o nó do creme começa em 99 —
	 * quatro pixéis de costura, e é o que põe todas as coordenadas da banda no
	 * sítio. O frame de telemóvel não tem folga nenhuma: a banda começa nos 54
	 * do header.
	 */
	.galeria.section {
		padding-block: 4px 0;
	}

	.galeria__palco {
		aspect-ratio: 1440 / 1462;
	}

	.galeria__cabecalho {
		top: 7.615%; /* 210.34 - 99, de 1462 */
		left: 0;

		width: 100%;

		text-align: center;
	}

	.galeria__titulo {
		font-size: var(--fs-h1);
		line-height: 0.71; /* 40 / 56 — a caixa do nó */
	}

	.galeria__intro {
		margin: 51.04px auto 0; /* 300.18 - 249.14 */
		width: 61.458%; /* 885 / 1440 */

		font-size: 10.71px;
		line-height: 1.204; /* passo de 12.89 */
		text-align: center;
	}

	.galeria__tira {
		top: 22.136%; /* 422.63 - 99, de 1462 */
	}

	.galeria .carousel__controls {
		position: static;
	}

	.galeria .carousel__viewport {
		padding-inline: 7.5%; /* 108 / 1440 */
		scroll-padding-inline: 7.5%;
	}

	.galeria .carousel__track {
		grid-auto-columns: 241px;
		grid-template-rows: repeat(3, 322.41px);
		gap: 6.99px 5px;
	}

	.galeria .carousel__track::after {
		width: calc(7.5vw - 5px);
	}

	.galeria__celula {
		grid-row: var(--rd);
		grid-column: var(--cd);
	}

	/* O cartão é 232x316.16 dentro de uma célula de 241x322.41: centrado. */
	.galeria__celula--cartao {
		display: grid;
		place-items: center;
	}

	.galeria__cartao {
		width: 232px;
		height: 316.16px;
		padding: 0 7.33% 6.98%; /* 16.99 / 232 e 22.08 / 316.16 */
	}

	/* O frame de desktop não tem fotografia no cartão. */
	.galeria__cartao-foto {
		display: none;
	}

	.galeria__numero {
		font-size: 45.5px;
	}

	.galeria__nome {
		font-size: 28.7px;
	}

	.galeria__cartao-texto {
		margin-top: 13.63px; /* 273.58 - 259.95 */
		padding-top: 13.63px;

		font-size: 9.67px;
		line-height: 1.203; /* passo de 11.63 */
	}

	/*
	 * As setas: círculo cheio em tinta com o chevron em papel, ao contrário das
	 * do pop-up dos quartos, que são contorno em petrol. Centradas na tira e
	 * fora dela — 84.65 e 1354.32 de centro, simétricas em 719.5.
	 */
	.galeria .carousel__btn {
		position: absolute;
		/* O centro da seta cai em 893.25 da banda; a tira começa em 422.63 e tem
		   981.21, por isso 455.13 / 981.21 do topo dela. */
		top: 46.384%;

		display: grid;
		place-items: center;
		width: 30.98px;
		height: 30.98px;
		padding: 0;

		border: 0;
		border-radius: 50%;
		background: var(--s-bg-dark);
		color: var(--s-text-paper);
		cursor: pointer;
	}

	/*
	 * **Com o conteúdo da maqueta as setas ficam desactivadas, e isso está
	 * certo.** A grelha tem uma coluna por cada três células: com as 15 do
	 * frame (4 cartões e 11 fotografias) dá 5 colunas, ou seja 5x241 mais 4
	 * intervalos = 1225, contra os 1224 da janela. Não sobra nada para rolar.
	 * As setas existem no desenho porque a galeria a sério tem mais do que
	 * cabe num ecrã; entram em funcionamento à 16.ª célula. É a mesma situação
	 * da barra de avançar dos socials com as cinco fotografias do desenho.
	 *
	 * Por isso o estado desactivado sobe de 35% para 60%, como lá e como as
	 * setas das miniaturas do pop-up: é o estado que se vê quase sempre.
	 * Medido sobre o creme da banda (#F6E8C9):
	 *
	 *   35%   rgb(181,172,151)   1.88:1   abaixo dos 3:1 de componente
	 *   60%   rgb(134,129,116)   3.20:1   cumpre
	 *
	 * e o chevron dentro dela fica a 3.50:1 sobre o círculo.
	 */
	.galeria .carousel__btn[disabled] {
		opacity: 0.6;
	}

	.galeria .carousel__btn--prev {
		left: 4.803%; /* 69.16 / 1440 */
	}

	.galeria .carousel__btn--next {
		right: 4.874%; /* 1440 - 1338.83 - 30.98, de 1440 */
	}

	/*
	 * O glifo de texto do componente sai e entra o chevron do desenho
	 * (4005:26377), por `background-image` — a mesma via dos reviews. O nome
	 * acessível continua no `.screen-reader-text` que o helper imprime.
	 */
	.galeria .carousel__btn [aria-hidden="true"] {
		display: none;
	}

	.galeria .carousel__btn::before {
		width: 13.72px;
		height: 15.97px;

		background-image: url("../../img/galeria/chevron.svg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		content: "";
	}

	.galeria .carousel__btn--next::before {
		transform: rotate(180deg);
	}

	.galeria .carousel__progresso {
		display: none;
	}
}