/*
 * Fontinha — Pizzeria, o calendário de reservas.
 *
 * Figma: banda 1361..2270 em desktop (909) e 735..1148 em telemóvel (413).
 * As medidas dos nós estão no pizzeria-calendario.php.
 *
 * A banda é creme liso (`--s-bg-sand`) com o pergaminho por cima; o widget vive
 * numa caixa com a posição e o tamanho do desenho, e o que lá está dentro —
 * maqueta ou widget do TheFork — não mexe na banda.
 *
 * Mobile first, com o desktop aos 1200.
 */

.pizzeria-calendario.section {
	position: relative;

	padding-block: 0;

	/*
	 * A banda é `#EFDFD1` no frame e o pergaminho por cima é `#FDECDC`: treze
	 * pontos por canal, que é pouco mas é o que faz o pergaminho existir. Com a
	 * banda em `--s-bg-sand` — a mesma cor do pergaminho — só se viam as dobras.
	 * Token novo, autorizado: ver tokens.css.
	 */
	background: var(--s-bg-linho);
}

.pizzeria-calendario__palco {
	position: relative;

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

/* ============================================================
   O pergaminho
   ============================================================ */

/* 4005:22359 e companhia — (6.63, 769.81) 368.36x350.43 */
.pizzeria-calendario__pergaminho {
	position: absolute;
	top: 8.428%;  /* 769.81 - 735, de 413 */
	left: 1.768%; /* 6.63 / 375 */

	display: block;
	width: 98.229%; /* 368.36 / 375 */
}

.pizzeria-calendario__pergaminho img {
	display: block;
	width: 100%;
	height: auto;
}

/* ============================================================
   A caixa do widget
   ============================================================ */

/*
 * x 59.04..313.31 e y 818.98..1083.54 em telemóvel: a fila dos campos em cima,
 * o "Powered by" em baixo, e a grelha entre os dois.
 */
.pizzeria-calendario__widget {
	position: absolute;
	top: 20.334%;  /* 818.98 - 735, de 413 */
	left: 15.744%; /* 59.04 / 375 */

	width: 67.805%; /* 254.27 / 375 */

	color: var(--s-text-terracota);
	font-family: "Poppins", var(--font-body);
}

/* ============================================================
   A maqueta
   ============================================================ */

.pizzeria-calendario__campos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	border: 1px solid var(--s-bg-beige);
}

.pizzeria-calendario__campo {
	padding: 1.9px 0;

	font-size: 12.7px;
	font-weight: 300;
	line-height: 1.15;
	text-align: center;
}

.pizzeria-calendario__campo + .pizzeria-calendario__campo {
	border-left: 1px solid var(--s-bg-beige);
}

/* 4005:22397 — (146.08, 848.15), 29.17 abaixo do topo da caixa */
.pizzeria-calendario__mes {
	margin: 7.3px 0 0;

	font-size: 11.4px;
	font-weight: 500;
	text-align: center;
}

/* 4005:22398 — (58.20, 865.71) */
.pizzeria-calendario__semana {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-top: 2.1px;

	font-size: 9.8px;
	font-weight: 300;
	text-align: center;
}

.pizzeria-calendario__dia-longo {
	display: none;
}

/*
 * A grelha: células de 25.47 com passo de 38.13 na horizontal e 36.99 na
 * vertical — 12.66 e 11.52 de intervalo. **Em percentagem e não em `fr`:** o
 * `gap` não aceita `fr`, e com `repeat(7, 25.47fr)` mais um `gap` inválido as
 * colunas comiam o intervalo todo e a célula saía 60 em vez de 42.
 *
 * Os números são os mesmos nos dois frames — 10.016% de coluna, 4.982% de
 * intervalo — porque a grelha é a mesma a duas escalas.
 */
.pizzeria-calendario__grelha {
	display: grid;
	grid-template-columns: repeat(7, 10.016%);
	gap: 4.531% 4.979%;
	grid-template-rows: repeat(5, 1fr);
	margin-top: 5.7px;

	/*
	 * A altura tem de ser declarada: com `aspect-ratio: 1` nas células a linha
	 * pedia a altura à célula e a célula pedia-a à linha — circular, e o que
	 * ficava era a altura do texto. Aqui a grelha tem a proporção do desenho
	 * (418.94 x 285.68 em desktop, 254.25 x 173.43 em telemóvel: o mesmo
	 * 1.4665) e as cinco linhas repartem-na.
	 */
	width: 99.99%;
	aspect-ratio: 418.94 / 285.68;
}

.pizzeria-calendario__dia,
.pizzeria-calendario__vazio {
	display: grid;
	place-items: center;

	font-size: 8.6px;
	font-weight: 300;
}

.pizzeria-calendario__dia {
	border: 1px solid var(--s-bg-beige);
}

.pizzeria-calendario__dia.is-marcado {
	border-color: var(--s-text-terracota);
	background: var(--s-text-terracota);
	color: var(--s-bg-sand);
}

/* 4005:22457 — (60.37, 1072.54) */
.pizzeria-calendario__powered {
	margin: 13.8px 0 0;

	font-size: 7.7px;
	font-weight: 500;
}

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

@media (min-width: 1200px) {

	.pizzeria-calendario__palco {
		aspect-ratio: 1440 / 909;
	}

	.pizzeria-calendario__pergaminho {
		top: 11.752%;  /* 1467.83 - 1361, de 909 */
		left: 13.067%; /* 188.157 / 1440 */

		width: 72.708%; /* 1047 / 1440 */
	}

	.pizzeria-calendario__widget {
		top: 25.670%;  /* 1594.34 - 1361, de 909 */
		left: 34.447%; /* 496.04 / 1440 */

		width: 29.239%; /* 421.04 / 1440 */
	}

	.pizzeria-calendario__campos {
		margin-left: 0.976%; /* 500.15 - 496.04, de 421.04 */

		width: 99.024%; /* 416.93 / 421.04 */
	}

	.pizzeria-calendario__campo {
		padding: 7.7px 0;

		font-size: 13.1px;
	}

	.pizzeria-calendario__mes {
		margin-top: 16.7px; /* 1643.53 - 1626.84 */

		font-size: 18.7px;
	}

	.pizzeria-calendario__semana {
		margin-top: 5.9px;

		font-size: 13.5px;
	}

	/* Em desktop os dias da semana vêm por extenso; em telemóvel abreviados. */
	.pizzeria-calendario__dia-longo {
		display: inline;
	}

	.pizzeria-calendario__dia-curto {
		display: none;
	}

	/* Células de 41.96 com passo de 62.83 e 60.93 — as mesmas percentagens. */
	.pizzeria-calendario__grelha {
		margin-top: 5.3px;
	}

	.pizzeria-calendario__dia,
	.pizzeria-calendario__vazio {
		font-size: 14px;
	}

	.pizzeria-calendario__powered {
		margin-top: 22.75px;

		font-size: 11.7px;
	}
}