/*
 * Fontinha — Offers, a banda em xadrez com o carrossel de ofertas.
 *
 * Banda 95..1086 (991) no frame de desktop. As medidas dos nós estão no
 * ofertas-mosaico.php.
 *
 * ============================================================
 * NÃO HÁ FRAME MOBILE PARA ESTA PÁGINA
 * ============================================================
 *
 * Confirmado listando os 28 frames de topo do ficheiro: existem sete `- mob` e
 * a Offers não é um deles. **O telemóvel desta página é decidido em código** —
 * a composição desmonta-se numa coluna, como os perks fazem abaixo dos 1200,
 * porque as posições do xadrez só fazem sentido na largura para que foram
 * desenhadas. Está na lista da designer.
 *
 * Por isso este ficheiro é, excepcionalmente, **desktop-first**: a composição é
 * a base e o empilhamento entra numa `max-width`. Escrever ao contrário
 * obrigava a desfazer todas as posições absolutas dentro da media query, que é
 * o defeito que o `booking-bar.css` já tinha tido.
 */

.ofertas.section {
	padding-block: 0;

	background: var(--s-bg-cream-text);
}

.ofertas__palco {
	position: relative;

	max-width: 1440px;
	margin-inline: auto;
	aspect-ratio: 1440 / 991;
}

/* ============================================================
   O xadrez
   ============================================================ */

/*
 * Dois blocos escuros, cada um com uma "sombra" dourada atrás — no Figma são
 * dois vectores sobrepostos por bloco. Traçado ao pixel:
 *
 *   dourado A   x  720..1438   y   96..773
 *   escuro  A   (720,96) (769,160) (1373,160) (1373,773) (720,773)
 *   dourado B   x    0..717    y  773..1086
 *   escuro  B   (0,774) (48,830) (644,830) (644,1086) (0,1086)
 *
 * **Os cantos são diagonais rectas, não arredondados.** O declive é 0.77 no
 * bloco A e 0.89 no B, medido coluna a coluna — o raio 0 do projecto mantém-se.
 * Por isso isto é `clip-path` e não imagem: um quadrilátero de cor lisa é coisa
 * que o CSS faz exactamente, e assim escala com a banda sem reamostrar nada.
 */
.ofertas__palco::before,
.ofertas__palco::after {
	position: absolute;
	z-index: 0;

	content: "";
	pointer-events: none;
}

/*
 * **Os dois blocos do xadrez são decoração e têm de ficar POR BAIXO.** Um
 * pseudo-elemento entra como primeiro e último filho: o `::before` calhava
 * debaixo do conteúdo por acaso, mas o `::after` — que é o bloco de baixo à
 * esquerda — pintava por cima e **os contactos de reserva desapareciam**. Não
 * se via na medição, que dava o bloco no sítio certo e com altura; só na
 * fotografia da banda.
 */
.ofertas__titulo,
.ofertas__intro,
.ofertas__tira,
.ofertas__contactos,
.ofertas__condicoes,
.ofertas .carousel__progresso {
	z-index: 1;
}

/*
 * **A diagonal do canto é um `linear-gradient` com paragem dura, não um
 * `clip-path`.** Um gradiente `to bottom left` com as duas paragens em 50%
 * parte a caixa exactamente pela diagonal de cima-esquerda a baixo-direita —
 * que é a aresta que se mediu — e deixa o dourado a ver-se do outro lado. Com
 * `clip-path` seria preciso um elemento por camada, e são quatro.
 *
 * Cada bloco é **um** pseudo-elemento com a caixa do DOURADO, e o escuro entra
 * em duas camadas de fundo por cima: o triângulo do canto e o rectângulo.
 */

/* Bloco A — superior direito. Dourado x 720..1438, y 96..773 (718x677). */
.ofertas__palco::before {
	top: 0.101%;  /*  96 - 95, de 991 */
	right: 0;     /* o dourado vai até à aresta do frame */
	left: 50%;    /* 720 / 1440 */

	/* **Sem `width`**: com o `left` e a largura declarados os dois, o `right`
	   fica sem efeito e sobravam dois pixéis de creme na aresta do frame. */
	height: 68.315%; /* 677 / 991 */

	background:
		/* O triângulo e o rectângulo **sobrepõem-se uma linha**: encostados ao
		   pixel deixavam passar um risco dourado de 1px entre os dois. */
		linear-gradient(to bottom left, transparent 50%, var(--s-bg-dark) 50%)
			no-repeat 0 0 / 6.806% 9.453%,   /* o triângulo: 49x64 de 720 */
		linear-gradient(var(--s-bg-dark) 0 0)
			no-repeat 0 100% / 90.833% 90.694%, /* o rectângulo: 654x614 de 720 */
		var(--g-gold);
}

/* Bloco B — inferior esquerdo. Dourado x 0..717, y 773..1086 (717x313). */
.ofertas__palco::after {
	top: 68.416%; /* 773 - 95, de 991 */
	left: 0;

	width: 49.792%;  /* 717 / 1440 */
	height: 31.584%; /* 313 / 991 */

	background:
		linear-gradient(to bottom left, transparent 50%, var(--s-bg-dark) 50%)
			no-repeat 0 0 / 6.695% 17.891%,  /* o triângulo: 48x56 */
		linear-gradient(var(--s-bg-dark) 0 0)
			no-repeat 0 100% / 90.098% 82.109%, /* o rectângulo: 646x257 */
		var(--g-gold);
}

/* ============================================================
   Título e abertura
   ============================================================ */

.ofertas__titulo {
	position: absolute;
	top: 6.055%; /* 154.93 - 95, de 991 */
	left: 3.657%; /* 52.66 / 1440 */

	margin: 0;
	width: 34.465%; /* 496.29 / 1440 */

	color: var(--s-text-brown);
	font-family: var(--font-title);
	/* Aferido pela largura da TINTA: 477 no frame, contra 369 que os 47.08 da
	   caixa do nó davam. É o mesmo desvio de todos os títulos em Baro LineTwo —
	   os glifos do desenho são mais largos que os da face. */
	font-size: 60.86px;
	font-weight: var(--fw-display);
	line-height: 0.7;
	text-transform: uppercase;
}

.ofertas__intro {
	position: absolute;
	top: 12.928%; /* 223.11 - 95, de 991 */
	left: 3.537%; /* 50.93 / 1440 */

	margin: 0;
	width: 31.736%; /* 457 / 1440 */

	color: var(--s-text);
	font-family: var(--font-body);
	/*
	 * 14.081px, lido no nó 4005:39006. **Dá quatro linhas onde o frame tem
	 * três, e é conteúdo e não layout:** as três linhas do desenho são nós
	 * soltos, `nowrap` e **sem espaços** — "Loremipsumdolorsitamet,…" — com as
	 * quebras postas à mão. A nossa é uma só cadeia com espaços a sério, e
	 * quebra onde couber. A largura da mancha bate: 456 nos dois.
	 */
	font-size: 14.081px;
	font-weight: 300;
	line-height: 1.2;
}

/* ============================================================
   A tira de ofertas
   ============================================================ */

.ofertas__tira {
	position: absolute;
	top: 22.502%; /* 317.92 - 95, de 991 */
	left: 0;

	width: 100%;
}

/*
 * A janela arranca em 123.47 e o passo entre cartões é 281.2, dos quais 263.87
 * são cartão — sobram 17.33 de intervalo.
 */
.ofertas .carousel__viewport {
	padding-inline: 8.574%; /* 123.47 / 1440 */
	scroll-padding-inline: 8.574%;
}

.ofertas .carousel__track {
	gap: 17.33px; /* 281.2 - 263.87 */
}

.ofertas__item {
	flex: 0 0 263.87px;
	max-width: calc(100vw - var(--gutter) * 2);
}

/* O `padding-inline-end` não conta para o `scrollWidth`: o calço é conteúdo. */
.ofertas .carousel__track::after {
	flex: 0 0 calc(8.574vw - 17.33px);

	content: "";
}

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

.ofertas__cartao {
	position: relative;

	display: block;
	aspect-ratio: 263.87 / 320.59;
	overflow: hidden;

	color: var(--s-text-on-media);
	text-decoration: none;
}

.ofertas__foto {
	position: absolute;
	inset: 0;

	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
}

/*
 * **O texto do cartão foi aferido na tinta, não em nós.** Os quatro cartões do
 * frame são arte achatada — o título, a descrição e o preço vêm pintados dentro
 * do ficheiro, e o `rawImage` do nó de um cartão é byte a byte igual ao do frame
 * inteiro. Medido no cartão 1, com o critério de branco quase puro:
 *
 *   DIA DOS NAMORADOS   y 357..366   alt 10   larg 176   centro 256.5
 *   NO FONTINHA HOTEL   y 378..387   alt 10   larg 167   centro 255.0
 *   NOITE ROMÂNTICA     y 432..439   alt  8   larg 122   centro 254.5
 *   JANTAR PARA DOIS    y 464..472   alt  9   larg 118   centro 256.5
 *
 * O centro do cartão é 255.0 — estão todas centradas. A altura de maiúscula é
 * 10 no nome e 8–9 na descrição, que em Gill Sans dá ~14.1px e ~12px de corpo.
 */
.ofertas__texto {
	position: absolute;
	top: 12.163%; /* 357 - 318, de 320.59 */
	right: 0;
	left: 0;

	display: grid;
	justify-items: center;
	padding-inline: 6.442%; /* 17 / 263.87 */

	text-align: center;
}

.ofertas__nome {
	font-family: var(--font-body);
	font-size: 14.1px; /* altura de maiúscula 10 sobre 0.71 de Gill Sans */
	font-weight: 500;
	line-height: 1.489; /* passo de 21 */
	text-transform: uppercase;
}

.ofertas__descricao {
	margin-top: 32.61px; /* 432 - 399.39, do fim do nome à descrição */

	font-family: var(--font-body);
	font-size: 12px; /* altura de maiúscula 8.5 sobre 0.71 */
	font-weight: 500;
	line-height: 2.667; /* passo de 32 */
	text-transform: uppercase;
}

.ofertas__preco {
	margin-top: 8px;

	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
}

/*
 * **A estrela do badge não existe como nó.** No frame ela vem pintada dentro da
 * arte achatada do cartão, tal como o título e o preço — não há vector que se
 * exporte. Em vez de a aproximar com um `polygon()` inventado, o badge usa o
 * idioma que o site já tem: o gradiente dourado com o rótulo em tinta, o mesmo
 * do "book now" dos quartos e do BOOK dos eventos.
 *
 * Está na lista da designer: se a estrela é para ficar, precisa de sair da arte
 * e vir como nó próprio.
 */
.ofertas__badge {
	position: absolute;
	top: 5.3%;
	right: 5.3%;
	z-index: 1;

	display: grid;
	place-items: center;
	max-width: 52%;
	padding: 0.5em 0.9em;

	background: var(--g-gold);
	color: var(--s-text);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
}

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

/*
 * Calha em `--c-petrol-pale`, amostrado `#C5D4D8`, e o cursor no gradiente
 * dourado. O cursor arranca 1.09 à ESQUERDA da calha e é 0.63 mais baixo — é o
 * desenho, não arredondamento.
 */
.ofertas .carousel__progresso {
	position: absolute;
	top: 58.123%; /* 671.26 - 95, de 991 */
	left: 12.734%; /* 183.37 / 1440 */

	margin: 0;
	width: 66.886%; /* 963.16 / 1440 */
	height: 5.63px;

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

.ofertas .carousel__progresso__cursor {
	top: 0.62px; /* 671.88 - 671.26 */

	height: 5px;

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

/* ============================================================
   Contactos de reserva
   ============================================================ */

/*
 * **O rótulo fica POR BAIXO dos valores**, ao contrário do bloco das condições.
 * Não é engano: o nó dos valores está em 917.35 e o do rótulo em 949.31. O
 * `order` inverte a ordem visual sem mexer na de leitura — quem ouve a página
 * ouve primeiro o que aquilo é.
 */
.ofertas__contactos {
	position: absolute;
	top: 83.148%; /* 917.35 - 95, de 991 */
	left: 5.189%; /* 74.73 / 1440 */

	display: flex;
	flex-direction: column;
	width: 50%;
}

.ofertas__contactos-titulo {
	order: 2;

	margin: 3.1px 0 0 23.38px; /* 949.31 - 946.35, e o recuo do rótulo */

	color: var(--s-text-on-dark);
	font-family: var(--font-title);
	/* Aferido pela largura da tinta: 411 no frame, contra 287.2 que os 24 da
	   caixa do nó davam. A Baro LineTwo é mais estreita que o contorno do
	   desenho, como em todos os títulos desta família. */
	font-size: 34.35px;
	font-weight: var(--fw-display);
	line-height: 0.7;
	text-transform: uppercase;
}

.ofertas__contactos-linhas {
	order: 1;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;

	column-gap: 26.4px; /* 346.06 - 319.66, do fim do email ao ícone seguinte */
}

.ofertas__contacto {
	display: inline-flex;
	align-items: baseline;
	gap: 12.9px; /* 110.51 - 97.39, do fim do ícone ao texto */

	color: var(--s-text-on-media);
	font-family: var(--font-body);
	/*
	 * **Aferido pela tinta, não por um nó.** O frame tem o email e o telefone
	 * num só nó de texto (4005:39017, 404 de largura) com os dois ícones
	 * desenhados POR CIMA dele — o segundo cai em cima do "+". A tinta do email
	 * mede 217 e a nossa dava 144.8 a 16px, o que põe o corpo em 24.
	 */
	font-size: 24px;
	font-weight: 300;
	line-height: 1.2;
	text-decoration: none;
}

.ofertas__contacto svg {
	display: block;
	flex: 0 0 auto;
	width: 22.66px;
	height: 22.6px;

	/* O nó do ícone está em 917.87 e o do texto em 917.35: encostam pelo topo,
	   não pelo centro da linha. */
	align-self: flex-start;
	transform: translateY(0.5px);

	/* O ícone é creme, não branco: no frame o disco é `#FEE2BD`. O texto ao
	   lado é que é branco, por isso a cor não pode vir por herança. */
	color: var(--s-text-on-dark);
}

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

/* ============================================================
   Condições promocionais
   ============================================================ */

.ofertas__condicoes {
	position: absolute;
	top: 74.017%; /* 828.38 - 95, de 991 */
	left: 57.552%; /* 828.74 / 1440 */

	width: 32.153%; /* 463 / 1440 */
	padding-top: 62.98px; /* 891.36 - 828.38, do título ao texto */
}

.ofertas__condicoes-titulo {
	/*
	 * **O título tem caixa própria e mais larga que o bloco.** O nó dele
	 * (4005:39007) é 485 em x=844.45 e o do texto (4005:39015) é 463 em
	 * x=828.74: no desenho o título passa a aresta direita do parágrafo. Sem
	 * isto partia em duas linhas.
	 */
	position: absolute;
	top: 0;
	left: 3.393%; /* 844.45 - 828.74, de 463 — a percentagem é do BLOCO */

	margin: 0;
	width: 485px;

	white-space: nowrap;

	color: var(--s-text-brown);
	font-family: var(--font-title);
	/* Tinta de 483 no frame, contra 336 aos 24 da caixa do nó. */
	font-size: 34.5px;
	font-weight: var(--fw-display);
	line-height: 0.7;
	text-transform: uppercase;
}

.ofertas__condicoes-texto {
	margin: 0;

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

/* ============================================================
   Abaixo de 1200 — a composição desmonta-se
   ============================================================ */

/*
 * **Isto não é o desenho: é decisão de código, por não haver frame.** O xadrez,
 * as posições absolutas e as duas colunas do fundo só fazem sentido na largura
 * para que foram desenhados; abaixo disso vira uma coluna, com a tira de
 * ofertas a rolar como nas outras páginas.
 */
@media (max-width: 1199px) {

	.ofertas__palco {
		aspect-ratio: auto;
		padding-block: var(--section-y);
	}

	.ofertas__titulo,
	.ofertas__intro,
	.ofertas__tira,
	.ofertas__contactos,
	.ofertas__condicoes,
	.ofertas .carousel__progresso {
		position: static;

		width: auto;
	}

	/*
	 * **O título das condições também tem de ser desfeito.** Em desktop é
	 * absoluto com 485px fixos e `nowrap`, porque no desenho passa a aresta
	 * direita do parágrafo; deixado assim em telemóvel dava **498 de
	 * `scrollWidth` numa página de 375**. Não se via na banda — só na medição
	 * do scroll horizontal.
	 */
	.ofertas__condicoes {
		padding-top: 0;
	}

	.ofertas__condicoes-titulo {
		position: static;

		margin-left: 0;
		width: auto;

		white-space: normal;
	}

	.ofertas__condicoes-texto {
		margin-top: var(--sp-4);
	}

	.ofertas__titulo {
		font-size: var(--fs-h2);
	}

	/*
	 * **Os dois rótulos de secção cabem numa linha a 23.5px.** Aos 28 do
	 * `--fs-h2` o "CONTACTOS DE RESERVA" pedia 335.1 numa caixa de 335 — perdia
	 * por um décimo — e o "CONDIÇÕES PROMOCIONAIS" pedia 393.4, que não cabe de
	 * maneira nenhuma. O que manda é o segundo: 28 x 335/393.4 = 23.84, e 23.5
	 * deixa folga para a fonte ser substituída sem voltar a partir.
	 *
	 * Com a entrelinha a 0.7, a segunda linha do primeiro encostava à aresta de
	 * baixo do bloco escuro — a tinta desce abaixo da caixa de linha. Numa linha
	 * só o problema deixa de existir.
	 */
	.ofertas__contactos-titulo,
	.ofertas__condicoes-titulo {
		font-size: 23.5px;
	}

	.ofertas__contactos-titulo {
		margin-left: 0;
	}

	.ofertas__contacto {
		font-size: var(--fs-body);
	}

	/* **Os DOIS blocos do xadrez saem**, não só o primeiro: com o `::after` a
	   pintar, o bloco dourado tapava o título das condições. */
	.ofertas__palco::before,
	.ofertas__palco::after {
		display: none;
	}

	.ofertas__titulo,
	.ofertas__intro,
	.ofertas__condicoes,
	.ofertas__contactos {
		padding-inline: var(--gutter);
	}

	.ofertas__intro {
		margin-top: var(--sp-4);
	}

	.ofertas__tira {
		margin-top: var(--sp-8);
	}

	.ofertas .carousel__viewport {
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
	}

	.ofertas .carousel__progresso {
		margin: var(--sp-4) var(--gutter) 0;
		width: auto;
	}

	/*
	 * Os dois blocos de baixo passam a ter fundo próprio, porque o xadrez que
	 * lhes dava contraste saiu. O dos contactos é escuro, como era; o das
	 * condições fica sobre o creme da banda.
	 */
	.ofertas__contactos {
		margin-top: var(--sp-8);
		padding-block: var(--sp-6);

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

	.ofertas__condicoes {
		margin-top: var(--sp-6);
	}
}