/*
 * Fontinha — Eventos, a banda de detalhe com o formulário.
 *
 * Banda 1651..2502 em desktop (851) e 1197..2238 em telemóvel (1040.94), sobre
 * o `--s-bg-petrol-mid` (#4E8599). As medidas dos nós estão no
 * eventos-detalhe.php.
 *
 * Mobile first, com o desktop aos 1200.
 */

.evento-detalhe.section {
	padding-block: 0;

	background: var(--s-bg-petrol-mid);
}

/* O foco vai para a banda quando se escolhe um evento na grelha; o anel não
   pode ficar invisível sobre o petrol. */
.evento-detalhe.section:focus-visible {
	outline: 2px solid var(--s-text-paper);
	outline-offset: -4px;
}

.evento-detalhe__palco {
	position: relative;

	/* **De 375 e não de 1040.94.** Uma percentagem de `padding` resolve contra a
	   LARGURA do bloco de contenção, nos quatro lados — dividir pela altura da
	   banda dava 6.79 onde o nó pede 18.95, e a fotografia entrava 12px acima. */
	padding-block: 5.053% 0; /* 18.95 / 375 */
}

/* ============================================================
   O evento
   ============================================================ */

/*
 * **A ordem muda entre os frames.** Em telemóvel a fotografia vem primeiro, com
 * as setas por cima dela, e só depois o título; em desktop é título, data,
 * fotografia. O DOM fica na ordem de leitura — nome, quando, imagem — e o
 * `order` trata do resto.
 */
.evento-detalhe__evento {
	/* `relative` para o botão de "ler mais" se ancorar AO EVENTO e não ao palco.
	   A navegação não é afectada: é irmã dos artigos, não filha. */
	position: relative;

	display: flex;
	flex-direction: column;
}

/*
 * **O `[hidden]` perde para qualquer regra de `display` numa classe.** O
 * atributo vale `display: none` na folha do browser, que é a de menor
 * prioridade: com `.evento-detalhe__evento { display: flex }` os seis eventos
 * ocupavam espaço todos e a banda passava de 851 para 3856. Tem de ser dito
 * explicitamente, e depois das duas regras de `display`.
 */
.evento-detalhe__evento[hidden] {
	display: none;
}

.evento-detalhe__media {
	order: -1;

	margin-inline: 2.859%; /* 10.72 / 375 */
}

.evento-detalhe__foto {
	display: block;
	width: 100%;
	height: auto;

	aspect-ratio: 352 / 223.74;
	object-fit: cover;
}

/*
 * O título leva a régua vertical à esquerda — nó 4005:36277, 5.53x73.74 em
 * telemóvel e 7.73x103.19 em desktop.
 */
.evento-detalhe__titulo {
	position: relative;

	/* 10.16 e não 25.68: a margem conta do FUNDO da fotografia (1439.69) ao
	   topo do título (1449.85), e não de dois topos de caixa. */
	margin: 10.16px 0 0 14.72%; /* 1449.85 - 1439.69  e  55.21 / 375 */

	color: var(--s-text-paper);
	font-family: var(--font-title);
	font-size: 50px; /* aferido contra a tinta do frame */
	font-weight: var(--fw-display);
	line-height: 0.7;
	text-transform: uppercase;
}

.evento-detalhe__titulo::before {
	position: absolute;
	top: 5.73px; /* 1455.58 - 1449.85 */
	left: -14.7px; /* 55.21 - 40.51 */

	width: 5.53px;
	height: 73.74px;

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

.evento-detalhe__quando {
	/* 19.92 e não 9.19: do FUNDO da caixa do título (1449.85 + 35) ao topo
	   desta (1504.77). O mesmo erro de base do título. */
	margin: 19.92px 0 0 16.29%; /* 1504.77 - 1484.85  e  61.10 / 375 */

	color: var(--s-text-paper);
	font-family: var(--font-display);
	font-size: 15.71px; /* caixa de 11 sobre a entrelinha de 0.7 */
	font-weight: var(--fw-display);
	line-height: 0.7;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* O "ler mais" é de telemóvel; o frame de desktop não tem chevron nesta banda.
   O `:not([hidden])` mais abaixo é que o mostra. */
.evento-detalhe__ler-mais {
	display: none;
}

.evento-detalhe__descricao {
	margin: 32.83px 10.80% 0; /* 1548.79 - 1515.96  e  40.50 / 375 */

	color: var(--s-text-paper);
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.42; /* passo de 19.15 */
	text-align: justify;
}

.evento-detalhe__descricao > * {
	margin-block: 0 var(--sp-2);
}

.evento-detalhe__descricao > :last-child {
	margin-bottom: 0;
}

/*
 * **Os dois botões não existem no frame de telemóvel.** Lá reserva-se pelo
 * botão que cada cartão da grelha já tem. Não foram inventados.
 */
.evento-detalhe__accoes {
	display: none;
}

/* ============================================================
   As setas e o contador
   ============================================================ */

/*
 * Em telemóvel ficam SOBRE a fotografia, centradas — nós 4005:36274 e 36272,
 * 38.82 de diâmetro em (145.04, 1378.53) e (197.49, 1378.74), ou seja 181.43 e
 * 181.64 do topo da banda.
 */
.evento-detalhe__navegacao {
	position: absolute;
	top: 17.430%; /* 181.43 / 1040.94 */
	left: 0;

	display: flex;
	justify-content: center;
	margin: 0;
	width: 100%;

	gap: 13.63px; /* 197.49 - 145.04 - 38.82 */
}

/*
 * **As duas setas não têm a mesma cor no desenho.** Amostradas: a de recuar é um
 * círculo branco com o glifo escuro (#FFFFFF e #686868) e a de avançar é o
 * contrário (#3C3C3B e #F9F9F2). Reproduz-se como está desenhado.
 */
.evento-detalhe__seta {
	display: grid;
	place-items: center;
	width: 38.82px;
	height: 38.82px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.evento-detalhe__seta--ant {
	background: var(--s-text-on-media);
	color: var(--s-btn-alt-bg);
}

.evento-detalhe__seta--seg {
	background: var(--s-bg-dark);
	color: var(--s-text-paper);
}

/*
 * **O `::before` precisa de `display: block`.** Um pseudo-elemento com `content`
 * é inline por omissão, e a largura e a altura não se aplicam a um inline — o
 * glifo não aparecia e ficava só o círculo.
 */
.evento-detalhe__seta::before {
	display: block;
	width: 17.2px;
	height: 20.02px;

	background-color: currentcolor;
	content: "";
	mask: url("../../img/galeria/chevron.svg") no-repeat center / contain;
}

.evento-detalhe__seta--seg::before {
	transform: rotate(180deg);
}

.evento-detalhe__seta:hover,
.evento-detalhe__seta:focus-visible {
	opacity: 0.85;
}

/* O rótulo "+ eventos" só existe no frame de desktop. */
.evento-detalhe__contador {
	display: none;
}

/* ============================================================
   O formulário
   ============================================================ */

/*
 * A régua e o chevron que o frame põe entre a descrição e o formulário — nós
 * 4005:36270 (328.05 de largura) e 36271 (26.94x10.65).
 */
.evento-form {
	position: relative;

	margin-top: 28.28px; /* 1729.84 - 1701.56 */
	padding-top: 54.59px; /* 1784.43 - 1729.84 */
}

.evento-form::before {
	position: absolute;
	top: 0;
	left: 50%;

	width: 87.480%; /* 328.05 / 375 */

	border-top: 1px solid var(--s-line-on-petrol);
	content: "";
	transform: translateX(-50%);
}

/*
 * O chevron do nó 4005:36271. **Não é pista de scroll: é o "ler mais" da
 * descrição**, que o frame mostra cortada a 8 linhas.
 *
 * Passou de `::after` do formulário a botão dentro do próprio evento, para ser
 * o controlo do texto que está ao lado dele no documento. Fica fora do fluxo,
 * na posição do nó: 28.28 da descrição à régua mais 8.86 da régua ao chevron.
 * Assim a geometria não muda, e quando o texto abre o evento cresce e leva o
 * botão e o formulário atrás.
 */
.evento-detalhe__ler-mais:not([hidden]) {
	position: absolute;
	/* O botão cai na faixa do formulário, que é irmão SEGUINTE e por isso pinta
	   por cima: sem o z-index o clique ia parar ao `.evento-form`. Apanhado com
	   `elementFromPoint` antes de clicar. */
	z-index: 1;
	top: calc(100% + 37.14px); /* 28.28 + 8.86 */
	left: 50%;

	display: block;
	width: 26.94px;
	height: 10.65px;
	color: var(--s-text-paper);
	transform: translateX(-50%);
}

.evento-detalhe__ler-mais .ler-mais__glifo {
	mask-image: url("../../img/sobre/chevron-scroll.svg");
}

/*
 * **O mesmo título tem DUAS faces, uma por frame.** Em desktop é Baro LineTwo,
 * de contorno; em telemóvel é Gill Sans, lisa — confirmado ampliando os dois
 * exports lado a lado. É o mesmo caso das etiquetas dos perks, douradas em
 * desktop e escuras em telemóvel: são dois desenhos da mesma peça.
 *
 * O corpo vem do AVANÇO da tinta, 204px no nó 4005:36247, e não da caixa. O
 * peso do desenho fica ENTRE os dois que temos — a cobertura de tinta dá 0.74x
 * com a Light e 1.19x com a Medium, ou seja é uma Regular (400) que o projecto
 * não tem licenciada. Fica a Medium, que erra menos e é a regra do projecto
 * para texto sobre fundo escuro. Está na lista da designer.
 *
 * E é branco puro, não o paper: amostrado, #FFFFFF aqui contra #F9F9F2 no
 * título do evento e na descrição, na mesma banda.
 */
.evento-form__titulo {
	margin: 0 0 0 6.037%; /* 22.64 / 375 */

	color: var(--s-text-on-media);
	font-family: var(--font-body);
	font-size: 22.012px; /* 204 de avanço na Gill Sans Medium */
	font-weight: 500;
	line-height: 1.227; /* caixa de 27, a do nó */
	text-transform: uppercase;
}

.evento-form__form {
	/* 15.06 e não 42.06: os 42.06 são de TOPO a TOPO das duas caixas (1826.49 -
	   1784.43) e uma margem conta a partir do FUNDO do título, que tem 27. */
	margin-top: 15.06px;
	padding-inline: 6.675%; /* 25.03 / 375 */
}

.evento-form__campo {
	position: relative;

	margin: 0 0 16.2px; /* 1876.21 - 1860.01 */
}

/*
 * **O rótulo vive DENTRO do campo**, como no desenho: os nós dos rótulos caem
 * em cima das caixas, não acima delas. É `position: absolute` e o campo leva o
 * recuo — assim continua a ser um `<label>` a sério, associado ao controlo.
 */
.evento-form__rotulo {
	position: absolute;
	top: 6.29px; /* 1832.78 - 1826.49 */
	left: 11.91px; /* 36.39 - 24.48 */

	/* Branco puro pela mesma razão do aviso de privacidade: sobre o petrol-mid
	   o `--s-text-paper` dá 3.88:1 e o branco 4.09, que é o tecto. */
	color: var(--s-text-on-media);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.214; /* caixa de 17 */
	pointer-events: none;
}

.evento-form__entrada {
	display: block;
	width: 100%;
	height: 33.52px;
	padding: 6.29px 11.91px 0;

	border: 0;
	border-radius: 0;
	background: var(--s-bg-petrol-soft);
	color: var(--s-text);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 300;
}

/* A caixa da mensagem: 182.37 contra os 33.52 dos outros. */
.evento-form__entrada--area {
	height: 182.37px;
	padding-top: 22px;

	resize: vertical;
}

/*
 * O rótulo sai quando o campo tem conteúdo ou o foco — sem isto o texto de quem
 * escreve ficava por baixo dele.
 *
 * **É por isto que os quatro campos levam `placeholder=" "` no template.** O
 * `:placeholder-shown` só casa com um controlo que TENHA placeholder e esteja
 * vazio; sem o atributo nunca casa, e o `:not()` fica sempre verdadeiro — os
 * quatro rótulos ficavam a `opacity: 0` desde o carregamento e as caixas saíam
 * vazias em telemóvel. O espaço é o placeholder mais discreto que serve, e o
 * rótulo continua a ser o texto de repouso.
 */
.evento-form__entrada:focus {
	outline: 2px solid var(--s-text-paper);
	outline-offset: 2px;
}

.evento-form__entrada:focus + .evento-form__rotulo,
.evento-form__campo:has(.evento-form__entrada:not(:placeholder-shown)) .evento-form__rotulo {
	opacity: 0;
}

/* A armadilha dos robôs: fora do ecrã, nunca `display: none` — há robôs que
   ignoram os campos escondidos assim. */
.evento-form__armadilha {
	position: absolute;
	left: -9999px;

	width: 1px;
	height: 1px;
	overflow: hidden;
}

.evento-form__submeter {
	margin: var(--sp-4) 0 0;
}

/*
 * A linha de privacidade entra SEM a banda crescer.
 *
 * O espaço vem da folga que o próprio botão trouxe: o frame não tem botão de
 * enviar nem esta linha, e os 42px entre o botão e os contactos são invenção
 * nossa. A linha custa 4 de margem mais 16 de caixa, e os contactos descontam
 * exactamente esses 20.
 *
 * **A margem de cima do botão não serve para isto.** O campo anterior tem
 * `margin-bottom` de 30.61 em desktop e 16.2 em telemóvel, e numa colapsagem
 * entre irmãos ganha a maior: baixar a do botão não o mexia um pixel. Medido.
 */
.evento-form__privacidade {
	margin-top: 4px;
	/* Branco puro e sem esbater: é o tecto do contraste sobre o petrol-mid.
	   O `--s-text-paper` a 85% dava 3.28:1 e a 100% dá 3.88; o branco dá
	   **4.09:1**, que é o máximo possível — para 4.5 fazia falta uma cor com
	   luminância 1.106 e o branco tem 1.000. O que falta é a cor da banda, e
	   isso é do desenho: ver a lista da designer. */
	color: var(--s-text-on-media);
}

.evento-form__botao {
	display: block;
	width: 100%;
	padding: 10px;

	border: 0;
	background: var(--g-gold);
	color: var(--s-text);
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: var(--fw-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.evento-form__aviso {
	margin: var(--sp-4) 6.675% 0;
	padding: var(--sp-3);

	color: var(--s-text);
	font-family: var(--font-body);
	font-size: 14px;
}

.evento-form__aviso--ok {
	background: var(--s-bg-petrol-soft);
}

.evento-form__aviso--erro {
	background: var(--s-bg-sand);
}

/* ============================================================
   Os contactos, no fim
   ============================================================ */

.evento-form__contactos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* 22 e não 42: os 20 da linha de privacidade saem daqui. */
	margin: 22px 0 0;
	padding: 0 6.675% 48px;

	gap: var(--sp-4);
}

.evento-form__contacto {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	color: var(--s-text-paper);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 300;
	text-decoration: none;
}

.evento-form__contacto svg {
	display: block;
	flex: 0 0 auto;
	width: 17.37px;
	height: 17.37px;
}

.evento-form__contacto:hover span,
.evento-form__contacto:focus-visible span {
	text-decoration: underline;
}

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

@media (min-width: 1200px) {

	/*
	 * Duas colunas: o evento à esquerda e o formulário à direita, com a régua
	 * do nó 4005:35223 a atravessar as duas em 1860.14 — 209.14 do topo.
	 */
	.evento-detalhe__palco {
		display: grid;
		grid-template-columns: 50.694% 49.306%; /* 730 e 710, de 1440 */
		margin-inline: auto;
		max-width: 1440px;
		padding-block: 0;
	}

	.evento-detalhe__coluna {
		position: relative;

		padding: 84.71px 0 0; /* 1735.71 - 1651 */
	}

	.evento-detalhe__evento {
		display: block;
	}

	.evento-detalhe__evento[hidden] {
		display: none;
	}

	.evento-detalhe__media {
		/* Os intervalos saem da distância entre nós, não da régua: 1882.74 menos
		   o fim da caixa da data (1812.56 + 16). */
		margin: 54.18px 0 0 15.677%; /* 114.44 / 730 */

		width: 84.223%; /* 614.83 / 730 */
	}

	.evento-detalhe__foto {
		aspect-ratio: 614.83 / 285.93;
	}

	.evento-detalhe__titulo {
		/* **As percentagens desta coluna são dos 730 dela, não dos 1440 do
		   frame.** Com a base errada o título caía em 68.4 em vez de 135.01. */
		margin: 0 0 0 18.494%; /* 135.01 / 730 */

		font-size: 68.57px; /* caixa de 48 sobre a entrelinha de 0.7 */
	}

	.evento-detalhe__titulo::before {
		top: 8.02px; /* 1743.73 - 1735.71 */
		left: -20.57px; /* 135.01 - 114.44 */

		width: 7.73px;
		height: 103.19px;
	}

	.evento-detalhe__quando {
		margin: 28.85px 0 0 19.623%; /* 1812.56 - 1783.71  e  143.25 / 730 */

		font-size: 22.86px; /* caixa de 16 sobre 0.7 */
	}

	.evento-detalhe__descricao {
		margin: 14.75px 0 0 15.541%; /* 2183.42 - 2168.67, do fim da fotografia */

		width: 75.205%; /* 549 / 730 */
	}

	/* A régua de 1263.29 que atravessa as duas colunas. */
	.evento-detalhe__coluna::after {
		position: absolute;
		top: 209.14px; /* 1860.14 - 1651 */
		left: 15.297%; /* 111.67 / 730 */

		width: 173.053%; /* 1263.29 / 730 — passa para a coluna do lado */
		height: 1px;

		background: var(--s-line-on-petrol);
		content: "";
	}

	/* Os dois botões, que só existem aqui. */
	.evento-detalhe__accoes {
		position: relative;

		display: flex;
		margin: 19.5px 0 0 62.948%; /* 2390.07 - 2370.57  e  459.52 / 730 */
		padding-top: 19.5px;

		gap: 10.26px; /* 600.47 - 459.52 - 130.69 */
	}

	/* A régua por cima deles: nó 4005:35224, 617.93 em x 111.34. */
	.evento-detalhe__accoes::before {
		position: absolute;
		top: 0;
		left: -1093.5%; /* 111.34 - 459.52, sobre os 130.69 do primeiro botão */

		width: 617.93px;

		border-top: 1px solid var(--s-line-on-petrol);
		content: "";
	}

	.evento-detalhe__cta {
		display: grid;
		place-items: center;
		width: 130.69px;
		height: 34.12px;

		font-family: var(--font-display);
		font-size: 15.71px;
		font-weight: var(--fw-display);
		letter-spacing: 0.04em;
		text-decoration: none;
		text-transform: uppercase;
	}

	.evento-detalhe__cta--book {
		background: var(--g-gold);
		color: var(--s-text);
	}

	/* O segundo é cinzento, não dourado — amostrado no frame. */
	.evento-detalhe__cta--menu {
		/* O cinzento do frame é #686868, que é o --c-grey — e já tem semântico
		   de botão: o --s-btn-alt-bg dos CTAs do header. Sem token novo. */
		background: var(--s-btn-alt-bg);
		color: var(--s-text-on-dark);
	}

	/*
	 * As setas passam para o lado do título, e o "+ eventos" aparece por baixo
	 * delas: nós em (668.40, 1773.02) e (704.47, 1773.15), o rótulo em
	 * (622.15, 1807.65).
	 */
	.evento-detalhe__navegacao {
		top: 122.02px; /* 1773.02 - 1651 */
		left: 91.562%; /* 668.40 / 730 */

		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;

		/*
		 * **A largura tem de ser declarada, e transborda a coluna de propósito.**
		 * Com `width: auto` um absoluto encolhe ao que sobra do bloco de
		 * contenção: 730 - 668.40 = 61.60, e as duas setas mais o intervalo
		 * pedem 62.77. Faltava 1.17px, e o `flex-wrap` — que está aqui para o
		 * "+ eventos" cair na linha de baixo — transformava isso numa PILHA:
		 * uma seta por linha, contra as duas lado a lado do desenho.
		 *
		 * No frame elas acabam em 730.47 numa coluna de 730, ou seja o desenho
		 * também transborda. Reproduz-se isso.
		 */
		width: 8.599%; /* (704.47 + 26.70 - 668.40) / 730 */

		gap: 9.37px; /* 704.47 - 668.40 - 26.70 */
	}

	.evento-detalhe__seta {
		width: 26.7px;
		height: 26.7px;

		vertical-align: top;
	}

	.evento-detalhe__seta::before {
		width: 11px;
		height: 13px;
	}

	.evento-detalhe__contador {
		display: block;
		flex: 0 0 100%;
		margin: 8.63px 0 0 -46.25px; /* 1807.65 - 1799.02  e  622.15 - 668.40 */

		color: var(--s-text-paper);
		font-family: var(--font-body);
		font-size: 22px;
		font-weight: 300;
		line-height: 1;
		white-space: nowrap;
	}

	/* ---------- o formulário ---------- */

	.evento-form {
		margin: 0;
		padding: 160.36px 0 0; /* 1811.36 - 1651 */
	}

	/* A régua e o chevron são de telemóvel. */
	.evento-form::before {
		display: none;
	}

	.evento-detalhe__ler-mais:not([hidden]) {
		display: none;
	}

	/* As percentagens desta coluna são dos 710 dela. */
	/* Em desktop o título volta à Baro LineTwo de contorno, que é o que o
	   frame de desktop mostra. */
	.evento-form__titulo {
		margin-left: 44.692%; /* 1047.31 - 730, de 710 */

		color: var(--s-text-paper);
		font-family: var(--font-title);
		font-size: 32.86px; /* caixa de 23 sobre 0.7 */
		font-weight: var(--fw-display);
		line-height: 0.7;
	}

	.evento-form__form {
		/* 42.58 e não 66.63: com o rótulo POR CIMA, o parágrafo começa nele
		   (1876.94) e não na caixa (1900.99). */
		margin: 42.58px 0 0 9.878%; /* 1876.94 - 1834.36  e  800.13 - 730, de 710 */
		padding-inline: 0;
		width: 81.170%; /* 576.31 / 710 */
	}

	/*
	 * **Em desktop o rótulo fica POR CIMA do campo, e em telemóvel dentro
	 * dele.** Não é escolha: o nó NAME está em 1876.94 e a caixa em 1900.99 —
	 * 24 acima — enquanto no frame de telemóvel o rótulo cai dentro da caixa.
	 * São dois desenhos do mesmo campo.
	 */
	.evento-form__rotulo {
		position: static;

		display: block;
		margin-bottom: 5.05px; /* 1900.99 - 1895.94 */

		font-size: 15.71px; /* caixa de 19 sobre 1.21 */
	}

	.evento-form__campo {
		margin-bottom: 30.61px; /* 1967.17 - 1936.06 */
	}

	.evento-form__entrada {
		height: 35.07px;
		padding-top: 0;
	}

	.evento-form__entrada--area {
		height: 235.13px;
		padding-top: 10px;
	}

	/* Com o rótulo fora da caixa, não há nada para esconder ao escrever. */
	.evento-form__entrada:focus + .evento-form__rotulo,
	.evento-form__campo:has(.evento-form__entrada:not(:placeholder-shown)) .evento-form__rotulo {
		opacity: 1;
	}

	.evento-form__contactos {
		justify-content: flex-start;
		/* 12 e não 32, pela mesma razão do bloco de telemóvel. */
		margin-top: 12px;
		padding: 0 0 48px;

		gap: 0 var(--sp-12);
	}

	.evento-form__aviso {
		margin-inline: 0;
	}
}