/*
 * Fontinha — Eventos, o mosaico.
 *
 * As medidas dos nós estão no eventos-mosaico.php.
 *
 * ============================================================
 * A ÚNICA BANDA DO SITE SEM ALTURA FIXA
 * ============================================================
 *
 * Todas as outras bandas deste tema são palcos com `aspect-ratio` e conteúdo em
 * coordenadas do desenho. Esta não pode ser: o número de cartões é conteúdo, e
 * com nove em vez de seis a banda tem três linhas em vez de duas.
 *
 * Consequência: o fundo orgânico **repete-se** em vez de esticar. Com
 * `100% 100%` as manchas deformavam-se na proporção do que o cliente
 * publicasse; com `repeat-y` ficam sempre à escala do desenho.
 *
 * Mobile first, com o desktop aos 1200.
 */

.eventos-mosaico.section {
	padding-block: 50.69px 54.31px; /* 434.69 - 384  e  o intervalo entre cartões */

	/*
	 * Só se vê se a imagem falhar. O claro do desenho é #FFF8E8 e o
	 * --s-bg-alt é #FDF1E7: dez pontos somados, dois deles no vermelho.
	 * Não vale um token para um recurso.
	 */
	background-color: var(--s-bg-alt);
	background-image: image-set(
		url("../../img/eventos/fundo-mob.jpg") 1x,
		url("../../img/eventos/fundo-mob@2x.jpg") 2x
	);
	background-position: top center;
	background-repeat: repeat-y;
	background-size: 100% auto;
}

/* ============================================================
   A grelha
   ============================================================ */

.eventos-mosaico__grelha {
	display: grid;
	/* Não está centrada: 32.36 à esquerda e 23.96 à direita, colocação à mão. */
	margin: 0 0 0 8.629%; /* 32.36 / 375 */
	padding: 0;
	width: 84.981%; /* 318.68 / 375 */

	gap: 54.31px; /* 1050.25 - 434.69 - 561.25 */
	list-style: none;
}

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

/*
 * **O painel é fluxo, não rácio fixo.** Chegou a ser `aspect-ratio` com os
 * filhos absolutos — os dois frames dão o mesmo rácio (286.59/504.72 =
 * 318.68/561.25 = 0.5678) e as peças caem nas mesmas percentagens, por isso a
 * tentação era grande. **Mas o resumo é campo do cliente:** com quatro linhas
 * em vez das duas do frame de telemóvel, o texto subia por cima do cartaz e
 * lia-se por cima da fotografia.
 *
 * Em fluxo nada se sobrepõe: o cartão cresce com o que lá está. Com o conteúdo
 * do desenho dá exactamente os 504.72 e os 561.25 dos nós — a soma das peças e
 * dos intervalos é essa.
 *
 * **Os intervalos verticais vão em percentagem da LARGURA**, que é contra o que
 * uma percentagem de `margin` e de `padding` resolve, mesmo na vertical. É o
 * que os faz escalar com o cartão sem depender da altura, que agora é variável.
 */
.eventos-mosaico__cartao {
	display: flex;
	flex-direction: column;
	padding: 5.058% 0 6.449%; /* 16.12 / 318.68  e  20.55 / 318.68 */

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

.eventos-mosaico__cartao--evento {
	background: var(--s-bg-petrol-soft);
}

/*
 * Baro LineTwo com a entrelinha a 0.7, como todos os títulos deste tema: o
 * `normal` da face dá 1.2 e o nó dá 34/48.594 = 0.6997.
 */
.eventos-mosaico__titulo {
	margin: 0;

	color: var(--s-text);
	font-family: var(--font-title);
	font-size: 54.041px;
	font-weight: var(--fw-display);
	line-height: 0.7;
	text-align: center;
	text-transform: uppercase;
}

.eventos-mosaico__cartaz {
	display: block;
	margin: 10.955% auto 0; /* 88.86 - 16.12 - 37.83, a caixa do título */
	width: 91.647%; /* 292.06 / 318.68 */

	aspect-ratio: 292.06 / 346.44;
	object-fit: cover;
}

/*
 * O rodapé é o resto do fluxo. O `margin-top: auto` empurra-o para baixo quando
 * o cartão é esticado pela grelha — numa linha de desktop todos ficam com a
 * altura do mais alto, e é o botão que tem de continuar encostado ao fundo.
 */
.eventos-mosaico__rodape {
	margin: auto auto 0;
	width: 78.161%; /* 224 / 286.59 */

	text-align: center;
}

.eventos-mosaico__resumo {
	margin: 5.171% 0 10.277%; /* 12.88 e 25.60, de 249.06 (a largura do rodapé) */

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

/*
 * O botão é a terceira variante — gradiente dourado com o rótulo claro — a
 * mesma do "book now" dos quartos e do submeter da barra de reservas. Não é o
 * `.btn` primário nem o `.btn--alt` do header, e por isso vive aqui e não no
 * base.css. Se aparecer numa quarta página, aí vale um `.btn--gold`.
 */
.eventos-mosaico__cta {
	display: grid;
	place-items: center;
	margin-inline: auto;
	/*
	 * **A percentagem resolve contra o rodapé, não contra o cartão.** O
	 * rodapé tem 78.161% do painel, por isso os 37.593% que o botão mede
	 * no desenho são 48.096% aqui dentro — com o número do painel o botão
	 * saía a 93.6 em vez de 119.8.
	 */
	width: 48.096%; /* 119.80 / 318.68 / 0.78161 */
	aspect-ratio: 119.80 / 33.08;

	background: var(--g-gold);
	color: var(--s-text-paper);
	font-family: var(--font-display);
	font-size: 13.171px;
	font-weight: var(--fw-display);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
	.eventos-mosaico__cta {
		transition: opacity 0.15s ease;
	}
}

.eventos-mosaico__cta:hover,
.eventos-mosaico__cta:focus-visible {
	opacity: 0.85;
}

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

@media (min-width: 1200px) {

	/*
	 * O `padding-bottom` leva os 41.87 de folga que o desenho deixa por baixo
	 * das colunas 1 e 3 **mais** os 88.25 com que a coluna do meio desce: sem
	 * eles a banda fechava em cima do último cartão dela.
	 */
	.eventos-mosaico__cartao {
		padding: 5.059% 0 6.445%; /* 14.50 / 286.59  e  18.47 / 286.59 */
	}

	.eventos-mosaico.section {
		padding-block: 125.85px 130.12px; /* 550.85 - 425  e  41.87 + 88.25 */

		background-image: image-set(
			url("../../img/eventos/fundo-desk.jpg") 1x,
			url("../../img/eventos/fundo-desk@2x.jpg") 2x
		);
	}

	/*
	 * Três colunas de 286.59 com 75.155 de intervalo, num bloco de 1010.08 que
	 * arranca em 224.04. **Não está centrado** — sobra mais à esquerda (224.04)
	 * do que à direita (205.88), colocação à mão como a grelha das FAQs. Fica
	 * ancorado à esquerda, que é onde o desenho o põe.
	 *
	 * O intervalo é a média dos dois que o frame tem — 360.40 e 363.09 de passo
	 * — e põe a coluna do meio a 1.35 do desenho.
	 */
	.eventos-mosaico__grelha {
		grid-template-columns: repeat(3, 1fr);
		margin: 0 0 0 15.558%; /* 224.04 / 1440 */
		width: 70.144%; /* 1010.08 / 1440 */

		column-gap: 7.441%; /* 75.155 / 1010.08 */
		row-gap: 48.84px; /* 1104.41 - 550.85 - 504.72 */
	}

	/*
	 * **A coluna do meio desce 88.25, e por `transform` e não por `margin`.**
	 * Num item de grelha a margem entra na altura da linha: a primeira linha
	 * passava a 592.97 e empurrava a segunda 39 abaixo do desenho. O
	 * `transform` desloca a pintura e deixa a grelha quieta — a linha 2 da
	 * coluna do meio cai em 1192.66 contra os 1194.14 do nó.
	 */
	.eventos-mosaico__cartao:nth-child(3n+2) {
		transform: translateY(88.25px); /* 639.10 - 550.85 */
	}

	.eventos-mosaico__titulo {
		font-size: 48.594px;
	}

	.eventos-mosaico__cartaz {
		margin-top: 10.949%; /* 79.90 - 14.50 - 34.02, a caixa do título */
		width: 92.958%; /* 266.41 / 286.59 */

		aspect-ratio: 266.41 / 316.01;
	}

	.eventos-mosaico__resumo {
		margin: 3.643% 0 8.348%; /* 8.16 e 18.70, de 224 */

		font-size: 9.467px;
		line-height: 1.2; /* passo de 11.36 */
	}

	.eventos-mosaico__cta {
		width: 48.097%; /* 107.74 / 286.59 / 0.78161 */
		aspect-ratio: 107.74 / 29.75;
	}
}