/*
 * Fontinha — Contactos, a banda de localização.
 *
 * Banda 937..1661 em desktop (724) e 575..1159 em telemóvel (584).
 * As medidas dos nós estão no contacto-localizacao.php.
 *
 * Mobile first, com o desktop aos 1200.
 */

.contacto-localizacao.section {
	padding-block: 0;

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

.contacto-localizacao__palco {
	position: relative;

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

/* ============================================================
   O wordmark
   ============================================================ */

/*
 * "FONTINHA HOTEL" em Baro LineTwo com o `.text-gold` do tema. O corpo é
 * aferido pela LARGURA da tinta — 280.44 em telemóvel e 387.28 em desktop —
 * porque os nós são vectores e não têm `font-size`. É o método do wordmark da
 * Pizzeria, e fica trocável por SVG quando a designer agrupar os treze.
 */
.contacto-localizacao__wordmark {
	position: absolute;
	top: 10.440%; /* 635.97 - 575, de 584 */
	left: 14.275%; /* 53.53 / 375 */

	margin: 0;

	font-family: var(--font-title);
	font-size: 31.33px; /* aferido pela largura da tinta: 280.44 */
	font-weight: var(--fw-display);
	letter-spacing: 0.02em;
	line-height: 0.7;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ============================================================
   Os dados
   ============================================================ */

.contacto-localizacao__dados {
	position: absolute;
	top: 78.929%; /* 1035.94 - 575, de 584 */
	left: 12.905%; /* 48.39 / 375 */

	width: 87.095%;
}

.contacto-localizacao__morada {
	margin: 0;

	color: var(--s-text-pedra);
	font-family: var(--font-body);
	font-size: 14.24px; /* passo de 17.09 sobre a entrelinha de 1.2 */
	font-weight: 300;
	line-height: 1.2;
}

/*
 * O "T:" arranca uma linha em branco depois da morada — no frame o passo entre
 * "Amarante, Porto" e "T:" é 34.18, ou seja o dobro dos 17.09 normais.
 */
.contacto-localizacao__linhas {
	display: grid;
	justify-items: start;
	margin: 17.09px 0 0;
}

.contacto-localizacao__linha {
	color: var(--s-text-pedra);
	font-family: var(--font-body);
	font-size: 14.24px;
	font-weight: 500; /* as duas linhas de baixo são Gill Sans Medium */
	line-height: 1.2;
	text-decoration: none;
}

.contacto-localizacao__linha:hover,
.contacto-localizacao__linha:focus-visible {
	text-decoration: underline;
}

/*
 * **Em telemóvel o botão fica AO LADO do T:/E:**, não por baixo: o nó está em
 * (195.49, 1085.96) e as duas linhas ocupam 1033..1067. Por isso os dados são
 * uma grelha de duas colunas nesta largura.
 */
/*
 * **Em telemóvel o botão fica ao lado do T:/E: — mas cede a linha quando não
 * cabe.** O x dele é do desenho (195.49, encostado à direita de uma caixa de
 * 286.98) e não pode depender do comprimento do email; mas o email é conteúdo,
 * e o das Definições do site — info@casadaslerias.com — é seis caracteres mais
 * comprido que o da maqueta. Com uma grelha de duas colunas fixas partia a
 * meio, a deixar "E:" numa linha e o endereço na seguinte.
 *
 * Com `flex-wrap` o botão desce inteiro quando o texto cresce, em vez de o
 * espremer. Com o email do desenho ficam lado a lado, como no frame.
 */
.contacto-localizacao__dados {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	width: 76.528%; /* 335.37 - 48.39, de 375 */
}

.contacto-localizacao__morada {
	flex: 1 0 100%;
}

.contacto-localizacao__linhas {
	flex: 0 1 auto;
}

/*
 * O botão dourado, a terceira variante do tema — a mesma do "book now" dos
 * quartos e do BOOK dos eventos.
 */
.contacto-localizacao__cta {
	display: grid;
	place-items: center;
	width: 139.88px;
	aspect-ratio: 139.88 / 32.79;

	flex: 0 0 auto;
	margin-left: auto;

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

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

.contacto-localizacao__cta:hover,
.contacto-localizacao__cta:focus-visible {
	opacity: 0.85;
}

/* ============================================================
   O mapa
   ============================================================ */

/*
 * A moldura é dourada e a fotografia fica lá dentro, com um recuo desigual:
 * 7.53 à esquerda e 8.44 em cima, contra 8.36 e 6.20 do outro lado. Vai em
 * percentagem da moldura.
 */
.contacto-localizacao__mapa {
	position: absolute;
	top: 19.418%; /* 688.40 - 575, de 584 */
	left: 12.267%; /* 46 / 375 */

	width: 76.792%; /* 287.97 / 375 */
	aspect-ratio: 287.97 / 337.55;
	/*
	 * **Uma percentagem de `padding` resolve contra a LARGURA nos quatro lados**,
	 * o vertical incluído. Os valores são todos sobre os 287.97 da moldura; com
	 * a altura no numerador a moldura saía mais grossa em cima.
	 */
	padding: 2.931% 2.903% 2.153% 2.615%; /* 8.44, 8.36, 6.20 e 7.53 de 287.97 */

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

.contacto-localizacao__mapa picture,
.contacto-localizacao__mapa-foto {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
}

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

@media (min-width: 1200px) {

	.contacto-localizacao__palco {
		aspect-ratio: 1440 / 724;
	}

	.contacto-localizacao__wordmark {
		top: 42.790%; /* 1246.80 - 937, de 724 */
		left: 8.428%; /* 121.37 / 1440 */

		font-size: 43.25px; /* aferido pela largura da tinta: 387.28 */
	}

	/*
	 * Em desktop volta a ser uma coluna: morada, linha em branco, T:/E:, e o
	 * botão por baixo.
	 */
	.contacto-localizacao__dados {
		top: 49.767%; /* 1297.31 - 937, de 724 */
		left: 8.144%; /* 117.27 / 1440 */

		display: block;
		width: 24.861%; /* 358 / 1440 */
	}

	.contacto-localizacao__morada {
		font-size: 19.799px;
		line-height: 1.2; /* passo de 23.76 */
	}

	.contacto-localizacao__linhas {
		margin-top: 23.76px; /* uma linha em branco: 47.50 - 23.74 */
	}

	.contacto-localizacao__linha {
		font-size: 19.799px;
	}

	.contacto-localizacao__cta {
		margin: 25.20px 0 0 -3.11px; /* o botão fica 3.11 à esquerda do bloco de texto */
		width: 150.85px;

		aspect-ratio: 150.85 / 35.36;
		font-size: 14.337px;
	}

	.contacto-localizacao__mapa {
		top: 32.222%; /* 1170.29 - 937, de 724 */
		left: 49.125%; /* 707.40 / 1440 */

		width: 43.086%; /* 620.44 / 1440 */
		aspect-ratio: 620.44 / 358.90;
		padding: 1.544% 2.837% 2.237% 1.797%; /* 9.58, 17.60, 13.88 e 11.15 de 620.44 */
	}
}