/*
 * Fontinha — Eventos, os related articles.
 *
 * Banda 2502..2921 em desktop (419 visíveis) e 2238..2797 em telemóvel (559).
 * As medidas dos nós estão no eventos-relacionados.php.
 *
 * Como o mosaico, esta banda **cresce com o conteúdo** em telemóvel: lá os três
 * artigos empilham-se, e na maqueta o segundo está cortado a meio para a banda
 * fechar no número.
 *
 * Mobile first, com o desktop aos 1200.
 */

.eventos-relacionados.section {
	padding-block: 27.52px 122.36px; /* 2265.52 - 2238  e  2797 - 2674.64 */

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

/*
 * O palco é a coluna do CONTEÚDO — 295.52 a partir de 43.30, que é a caixa da
 * fotografia. A régua que fecha a banda é mais larga do que ela (328.06 a
 * partir de 22.82) e sai por fora, com margem negativa.
 */
.eventos-relacionados__palco {
	margin: 0 0 0 11.547%; /* 43.30 / 375 — não está centrado: sobra 43.30 à
	                          esquerda e 36.18 à direita */
	width: 78.805%; /* 295.52 / 375 */
}

/* ============================================================
   O rótulo
   ============================================================ */

/*
 * Baro Plain com a entrelinha a 0.7, como os outros rótulos em caixa alta do
 * tema — o nó dá 11/16.012 = 0.687.
 *
 * A régua por baixo é o nó 4005:36269: 204.40 de 328.06, ou seja 62.3% do
 * palco, encostada à esquerda e não à largura toda.
 */
.eventos-relacionados__rotulo {
	/*
	 * **A régua é `::after` do rótulo, por isso a margem dela conta DENTRO da
	 * caixa dele.** Os 21.92 do desenho são do topo do rótulo à régua; como a
	 * caixa do rótulo já tem 11.21 (16.012 x 0.7), sobram 10.71 para a régua.
	 * E o que fica por baixo é a régua até à fotografia, 15.75 menos o pixel
	 * do traço. Somar os 21.92 dos dois lados punha a fotografia 18 abaixo.
	 */
	margin: 0 0 14.75px; /* 2303.19 - 2288.44 */

	color: var(--s-text-on-media);
	font-family: var(--font-display);
	font-size: 16.012px;
	font-weight: var(--fw-display);
	letter-spacing: 0.04em;
	line-height: 0.7;
	text-transform: uppercase;
}

.eventos-relacionados__rotulo::after {
	display: block;
	margin-top: 10.71px; /* 21.92 - 11.21, a caixa do rótulo */
	width: 69.166%; /* 204.40 / 295.52 */
	height: 1px;

	background: var(--s-text-on-media);
	content: "";
}

/* ============================================================
   A lista
   ============================================================ */

.eventos-relacionados__lista {
	display: grid;
	margin: 0;
	padding: 0;

	gap: 27.48px; /* 2535.73 - 2508.25, do fim do texto ao topo da fotografia seguinte */
	list-style: none;
}

/*
 * **A fotografia muda de forma entre os frames**: 295.52x140.86 deitada em
 * telemóvel e 189.15 quadrada em desktop. Não é a mesma caixa mais estreita.
 */
.eventos-relacionados__foto {
	display: block;
	margin-bottom: 10.82px; /* 2454.87 - 2444.05 */
	width: 100%;

	aspect-ratio: 295.52 / 140.86;
	object-fit: cover;
}

.eventos-relacionados__titulo {
	margin: 0 0 6.24px; /* 2475.33 - 2469.09 */

	color: var(--s-text-on-media);
	font-family: var(--font-display);
	font-size: 14.218px;
	font-weight: var(--fw-display);
	line-height: 0.7;
	text-transform: uppercase;
}

.eventos-relacionados__texto {
	margin: 0;

	color: var(--s-text-on-media);
	font-family: var(--font-body);
	font-size: 14.101px;
	font-weight: 300;
	line-height: 1.2; /* passo de 16.92 */
}

/* ============================================================
   O botão
   ============================================================ */

/*
 * **É de contorno, não o dourado do mosaico.** Medido nos pixéis: o interior é
 * a própria banda (`#3C3C3B`) e a borda soma 0.87px de branco — um traço de 1px
 * em `--s-text-on-media`, o mesmo branco do rótulo.
 *
 * Em telemóvel leva uma régua por cima (nó 4005:35880, 328.06 de largura, a
 * largura toda do palco). O frame de desktop não a tem.
 */
.eventos-relacionados__mais {
	display: grid;
	place-items: center;
	margin: 30.51px auto 0; /* 2641.61 - 2611.10 */
	width: 47.675%; /* 140.89 / 295.52 */
	aspect-ratio: 140.89 / 33.03;

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

/* A régua que fecha a banda, só em telemóvel. */
.eventos-relacionados__lista::after {
	margin-top: 74.37px; /* 2611.10 - 2536.73, do topo do último artigo */
	margin-inline: -6.930% -4.081%; /* 43.30 - 22.82  e  350.88 - 338.82 */
	height: 1px;

	background: var(--s-text-on-media);
	content: "";
}

@media (prefers-reduced-motion: no-preference) {
	.eventos-relacionados__mais {
		transition: background-color 0.15s ease, color 0.15s ease;
	}
}

.eventos-relacionados__mais:hover,
.eventos-relacionados__mais:focus-visible {
	background: var(--s-text-on-media);
	color: var(--s-bg-dark);
}

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

@media (min-width: 1200px) {

	.eventos-relacionados.section {
		padding-block: 49.28px 45.97px; /* 2551.28 - 2502  e  2921 - 2875.03 */
	}

	/*
	 * O palco arranca em 401.32 e acaba em 1008.08 — **não está centrado**,
	 * sobra 401 à esquerda e 432 à direita. Colocação à mão, como a grelha do
	 * mosaico. Fica na posição do desenho.
	 */
	.eventos-relacionados__palco {
		margin: 0 0 0 27.870%; /* 401.32 / 1440 */
		width: 42.136%; /* 606.76 / 1440 */
	}

	.eventos-relacionados__rotulo {
		margin-bottom: 12.90px; /* 2579.19 - 2565.29, menos o pixel do traço */

		font-size: 10.237px;
	}

	.eventos-relacionados__rotulo::after {
		margin-top: 6.84px; /* 14.01 - 7.17, a caixa do rótulo */
		width: 21.526%; /* 130.61 / 606.76 */
	}

	.eventos-relacionados__lista {
		grid-template-columns: repeat(3, 1fr);

		column-gap: 3.239%; /* 19.655 / 606.76 */
		row-gap: 0;
	}

	.eventos-relacionados__foto {
		margin-bottom: 14.03px; /* 2782.37 - 2768.34 */

		aspect-ratio: 1;
	}

	.eventos-relacionados__titulo {
		margin-bottom: 6.09px; /* 2794.46 - 2788.37 */

		font-size: 8.134px;
	}

	.eventos-relacionados__texto {
		font-size: 8.134px;
		line-height: 1.2; /* passo de 9.76 */
	}

	/* A régua que fecha a banda não existe no frame de desktop. */
	.eventos-relacionados__lista::after {
		display: none;
	}

	.eventos-relacionados__mais {
		margin-top: 31.66px; /* 2845.64 - 2813.98, do fim das duas linhas ao botão */
		width: 20.664%; /* 125.38 / 606.76 */
		aspect-ratio: 125.38 / 29.39;

		font-size: 10.237px;
	}
}