/*
Theme Name: GBParis
Description: Thème sur-mesure pour Gracie Barra Paris. Deux pages : accueil et horaires. Polices auto-hébergées, sans dépendance externe.
Author: Mateus
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gbparis
Tags: custom-theme
*/

html,
body {
	margin: 0;
	padding: 0;
}

:root {
	--primary: #bb0013; /*before ed1c24*/
	--secondary: #003366;
	--neutral: #f5f5f5;

	--hero-title-height: 3rem;

	--light-grey-bg: #f3f3f3;

	/* Tokens de la planche de blocs. Repris tels quels dans theme.json
	   (les presets WP ne peuvent pas lire ces variables) : garder les deux
	   fichiers synchronises. */
	--ink: #0a0a0a;
	--text-soft: #555555;
	--rule: #e5e5e5;

	--direction-col-mobile: column;

	--max-container-width: 80rem;
	/* Retrait horizontal du .container du hero (content-box) */
	--container-padding-x: 1.5rem;
}

body {
	font-family: Epilogue, sans-serif;
}

a {
	text-decoration: none;
	color: inherit;
}

/* WordPress outputs width/height attributes on <img>. Without height: auto
   those attributes win over CSS sizing (aspect-ratio included) and stretch
   the image to its intrinsic height. */
img {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
p {
	margin: 0;
}

.container {
	max-width: var(--max-container-width);
	margin-left: auto;
	margin-right: auto;
}

button {
	border: none;
	cursor: pointer;
}

.d-row {
	display: flex;
	flex-direction: row;
}

.d-column {
	display: flex;
	flex-direction: column;
}

.btn {
	padding: 0.625rem 1.5rem;

	cursor: pointer;

	font-size: 0.75rem;
	line-height: 1rem;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.05em;
	box-sizing: border-box;

	box-shadow: 0 0 0 0 rgb(0 0 0 / 0);
	transition: box-shadow 0.2s ease;

	&:hover,
	&:focus-visible {
		box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
	}

	&.btn-primary {
		background-color: var(--primary);
		color: white;
		border: 1px solid var(--primary);
	}

	&.btn-outline {
		border: 1px solid white;
		background-color: transparent;
		color: inherit;

		/* Ce bouton est posé sur le hero sombre : une ombre noire y serait
		   invisible, on utilise donc un halo clair. */
		&:hover,
		&:focus-visible {
			box-shadow: 0 4px 14px rgb(255 255 255 / 0.3);
		}
	}
}

.tag {
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1rem;
	font-size: 0.65rem;

	border-radius: 0.75rem;

	background-color: var(--secondary);
	color: white;

	padding: 0.25rem 0.75rem;

	&.tag-sharp {
		border-radius: 0;
	}

	&.tag-primary {
		background-color: #bb0013;
		color: white;
	}
}

.text-red {
	color: #bb0013;
}

.text-italic {
	font-style: italic;
}

nav {
	.container {
		padding: 1rem 1.5rem;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.nav-left {
			order: 1;
			.menu-title {
				font-weight: 700;
				font-size: 1.25rem;
				line-height: 1.75rem;
				letter-spacing: -0.05em;

				color: var(--primary);
			}
		}

		.nav-center {
			order: 3;
			flex-basis: 100%;

			display: none;
		}

		.nav-right {
			order: 2;
		}
	}
}

.section {
	padding: 2rem 1.5rem;
}

/* Fallback pages: 404 and any page without a dedicated template */
.simple-page {
	.container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;

		padding-top: 4rem;
		padding-bottom: 4rem;

		.title {
			text-transform: uppercase;
			font-weight: 900;
			font-size: 2.25rem;
			line-height: 1;
			letter-spacing: -0.06rem;
		}

		.text {
			line-height: 1.875rem;
			font-weight: 300;
			font-size: 1.125rem;

			font-family: Manrope, sans-serif;
		}
	}
}

.slide-up-text {
	list-style: none;
	padding: 0;
	margin: 0;
	height: var(--hero-title-height);
	line-height: var(--hero-title-height);
	overflow-y: hidden;
	flex-grow: 3;

	li {
		white-space: nowrap;
	}

	/* Les paliers d'une @keyframes ne peuvent pas être calculés : il faut donc
	   une animation par nombre de lieux. Le gabarit écrit ce nombre dans
	   data-slides, ce qui rend l'ajout ou le retrait d'une académie purement
	   éditorial. Chaque item est affiché ~2,5 s. */
	&[data-slides="1"] li {
		transform: translateY(0%);
	}

	&[data-slides="2"] li {
		animation: slide-up-2 5s infinite;
	}

	&[data-slides="3"] li {
		animation: slide-up-3 7.5s infinite;
	}

	&[data-slides="4"] li {
		animation: slide-up-4 10s infinite;
	}
}

@keyframes slide-up-2 {
	0%,
	40% {
		transform: translateY(0%);
	}

	50%,
	90% {
		transform: translateY(-100%);
	}
}

@keyframes slide-up-3 {
	0%,
	25% {
		transform: translateY(0%);
	}

	33%,
	58% {
		transform: translateY(-100%);
	}

	66%,
	91% {
		transform: translateY(-200%);
	}
}

@keyframes slide-up-4 {
	0%,
	19% {
		transform: translateY(0%);
	}

	25%,
	44% {
		transform: translateY(-100%);
	}

	50%,
	69% {
		transform: translateY(-200%);
	}

	75%,
	94% {
		transform: translateY(-300%);
	}
}

/* Le texte défile hors du champ de vision : sans animation, on s'en tient au
   premier lieu. */
@media (prefers-reduced-motion: reduce) {
	.slide-up-text li {
		animation: none;
		transform: translateY(0%);
	}
}

.hero {
	background-color: black;
	color: white;
	.container {
		.content-left {
			gap: 2rem;

			.tag {
				align-self: flex-start;
			}

			.title {
				font-weight: 900;
				letter-spacing: -0.125rem;
				line-height: var(--hero-title-height);
				font-size: var(--hero-title-height);
				text-transform: uppercase;
				font-style: italic;
			}

			.description-text {
				line-height: 1.875rem;
				font-weight: 300;
				font-size: 1.125rem;

				font-family: Manrope, sans-serif;
			}

			.actions {
				display: flex;
				flex-direction: var(--direction-col-mobile);
				align-items: flex-start;
				gap: 1rem;
			}
		}
	}
}

.hero-schedule {
	.container {
		position: relative;
		overflow: hidden;

		padding: 2rem var(--container-padding-x);

		border-radius: 0.5rem;

		.hero-schedule-background {
			position: absolute;
			inset: 0;

			width: 100%;
			height: 100%;

			object-fit: cover;

			z-index: 0;

			filter: grayscale(100%) brightness(0.4);
		}

		&::after {
			content: "";

			position: absolute;
			inset: 0;

			background-color: rgb(58 95 148 / 0.7);

			z-index: 1;
		}

		.title-container {
			position: relative;
			z-index: 3;

			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			color: white;
			.title {
				font-weight: 900;
				font-size: 3rem;
				line-height: 1;
				font-family: Epilogue;
				text-transform: uppercase;

				letter-spacing: -0.15rem;
			}
			.description-text {
				font-size: 1.125rem;
				line-height: 1.75rem;
				font-weight: lighter;
				font-family: Manrope;
			}
		}
	}
}

.section.calendar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 3rem;
	.calendar-filter {
		/* Aligné sur le bord du bloc bleu du hero. Celui-ci est un
		   .container en content-box : sa boîte visible mesure donc
		   max-width + ses deux retraits horizontaux. */
		width: 100%;
		max-width: calc(
			var(--max-container-width) + 2 * var(--container-padding-x)
		);
		margin-left: auto;
		margin-right: auto;

		.venue-selector {
			display: inline-flex;
			flex-direction: row;
			align-items: center;
			background-color: rgb(243 243 243 / var(--tw-bg-opacity, 1));

			padding: 0.5rem;
			border-radius: 0.5rem;
			gap: 0.5rem;

			.venue-item {
				position: relative;
				text-transform: uppercase;
				font-weight: 700;
				font-size: 0.875rem;
				line-height: 1.25rem;
				font-family: Epilogue;
				padding: 0.75rem 1.5rem; /* Should be 2 on the x-axis */
				border-radius: 0.25rem;
				cursor: pointer;
				color: rgb(58 95 148 / var(--tw-text-opacity, 1));

				/* Le bouton radio est masqué visuellement mais reste dans le
				   flux de tabulation : « display: none » le retirerait de
				   l'arbre d'accessibilité et empêcherait tout changement de
				   salle au clavier. */
				input {
					position: absolute;
					width: 1px;
					height: 1px;
					margin: -1px;
					padding: 0;
					border: 0;
					overflow: hidden;
					clip-path: inset(50%);
					white-space: nowrap;
				}

				label {
					cursor: pointer;
				}

				&:has(input:checked) {
					background-color: rgb(187 0 19 / var(--tw-bg-opacity, 1));
					color: white;
				}

				/* Le champ étant invisible, c'est la pilule qui doit porter
				   l'anneau de focus. */
				&:has(input:focus-visible) {
					outline: 2px solid var(--primary);
					outline-offset: 2px;
				}
			}
		}
	}

	.table-container {
		.sportigo-container {
			width: 100%;

			&.is-hidden {
				display: none;
			}

			/* Message de repli. Masqué tant que le script n'a pas conclu à un
			   échec : le widget met quelques secondes à monter, et voir passer
			   une erreur pendant ce temps serait pire que rien. Lorsqu'il
			   monte, il vide le conteneur et supprime ce bloc de lui-même. */
			.sportigo-fallback {
				display: none;
				flex-direction: column;
				align-items: flex-start;
				gap: 1rem;

				/* Aligné sur le hero, comme le sélecteur de salles. Le widget,
				   lui, garde toute la largeur : seul le message se recadre.
				   border-box pour que le retrait interne soit compris dans la
				   largeur max, sinon la boîte déborderait de 2 rem de chaque
				   côté. */
				width: 100%;
				max-width: calc(
					var(--max-container-width) + 2 * var(--container-padding-x)
				);
				margin-left: auto;
				margin-right: auto;
				box-sizing: border-box;

				padding: 3rem 2rem;
				border-radius: 0.5rem;

				background-color: rgb(243 243 243 / var(--tw-bg-opacity, 1));

				.title {
					text-transform: uppercase;
					font-weight: 900;
					font-size: 1.5rem;
					line-height: 1.2;
					letter-spacing: -0.03rem;
				}

				.text {
					max-width: 42rem;

					line-height: 1.75rem;
					font-weight: 300;
					font-size: 1.125rem;
					font-family: Manrope, sans-serif;
				}
			}

			&.has-failed .sportigo-fallback {
				display: flex;
			}
		}
	}

	.label-container {
		display: flex;
		flex-direction: column;
		padding: 2rem;
		border-radius: 0.5rem;

		background-color: rgb(243 243 243 / var(--tw-bg-opacity, 1));
		.label-title-container {
			display: flex;
			align-items: center;
			gap: 0.5rem;

			svg {
				width: 24px;
				height: 24px;

				display: block;
				flex-shrink: 0;
				position: relative;
				top: -2px;
			}

			.label-title {
				margin: 0;

				font-family: Epilogue;
				font-size: 1.125rem;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: -0.028rem;

				line-height: 1;
			}
		}

		.label-list {
			list-style: none;
			margin: 1.5rem 0 0;
			padding: 0;

			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 0.75rem 2rem;

			.label-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 0.5rem;

				.label-color {
					width: 0.75rem;
					height: 0.75rem;
					border-radius: 0.125rem;
					flex-shrink: 0;
				}

				.label-name {
					font-family: Manrope, sans-serif;
					font-size: 0.875rem;
					line-height: 1.25rem;
				}
			}
		}
	}
}

.section.description {
	background-color: var(--light-grey-bg);
	.container {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;

		.left-content {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			.title {
				text-transform: uppercase;
				font-weight: 700;
				font-size: 2.25rem;
				line-height: 2.5rem;
				letter-spacing: -0.06rem;
			}

			.text {
				line-height: 1.875rem;
				font-weight: 300;
				font-size: 1.125rem;

				font-family: Manrope, sans-serif;
			}
		}

		.right-content {
			.stats {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.stat-item {
					text-align: center;
					.number {
						font-size: 3rem;
						font-weight: 900;
						color: var(--primary);
					}
					.name {
						font-weight: 300;
						font-size: 0.75rem;
						line-height: 1rem;
						text-transform: uppercase;
						letter-spacing: 0.08rem;
					}
				}
			}
		}
	}
}

.spaces {
	.container {
		display: flex;
		flex-direction: column;
		gap: 4rem;

		.content-title {
			display: flex;
			flex-direction: var(--direction-col-mobile);
			gap: 1.5rem;
			.title {
				letter-spacing: -0.125rem;
				font-size: 3rem;
				font-weight: 900;
				text-transform: uppercase;
			}
			.subtitle {
				color: var(--secondary);
				letter-spacing: 0.075rem;
			}
		}

		.spaces-grid {
			display: flex;
			flex-direction: var(--direction-col-mobile);
			gap: 1.5rem;
			flex-wrap: wrap;

			.card {
				flex-basis: 33%;
				flex-grow: 3;

				&:nth-child(3n) {
					flex-basis: 100%;
					flex-shrink: 0;
				}

				display: flex;
				flex-direction: column;
				justify-content: flex-end;

				position: relative;
				height: 25rem;
				overflow: hidden;
				cursor: pointer;

				.background-image {
					position: absolute;
					object-fit: cover;
					width: 100%;
					height: 100%;
					max-width: 100%;
				}

				.background-filter {
					background-image: linear-gradient(
						to top,
						rgba(0, 0, 0, 0.8),
						rgba(0, 0, 0, 0)
					);
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
				}

				.content {
					position: relative;
					display: flex;
					flex-direction: column;
					row-gap: 0.5rem;
					align-items: flex-start;

					padding: 2rem;
					.tag {
						margin-bottom: 0.5rem;
					}

					.title {
						color: white;
						text-transform: uppercase;
						font-weight: 700;
						font-size: 1.875rem;
						line-height: 2.25rem;
						white-space: normal;
						overflow-wrap: normal;

						span {
							white-space: nowrap;
						}
					}
					.description-text {
						line-height: 1.5rem;
						color: white;
						font-weight: 400;
						font-family: Manrope, sans-serif;
						opacity: 0.85;

						margin-bottom: 1rem;
					}
					.link {
						color: white;
						letter-spacing: 0.06rem;
						font-size: 0.75rem;
						line-height: 1rem;
						font-family: Manrope, sans-serif;
						font-weight: 700;
						text-transform: uppercase;
						border-color: var(--primary);
						border-bottom-width: 2px;
						border-bottom-style: solid;
						padding-bottom: 0.25rem;
					}

					/* Instagram / Maps : visibles au survol de la carte.
					   Par défaut (tactile, sans survol) ils restent affichés. */
					.card-links {
						display: flex;
						flex-direction: row;
						gap: 1.5rem;

						/* Espace avant « Explorer le lieu » uniquement s'il est présent */
						&:not(:last-child) {
							margin-bottom: 1rem;
						}

						.card-link {
							color: white;
							letter-spacing: 0.06rem;
							font-size: 0.75rem;
							line-height: 1rem;
							font-family: Manrope, sans-serif;
							font-weight: 700;
							text-transform: uppercase;
							border-color: var(--primary);
							border-bottom-width: 2px;
							border-bottom-style: solid;
							padding-bottom: 0.25rem;

							&:hover,
							&:focus-visible {
								color: var(--primary);
							}
						}
					}
				}
			}
		}
	}
}

@media (hover: hover) {
	.section.spaces .container .spaces-grid .card {
		.content .card-links {
			opacity: 0;
			transform: translateY(0.5rem);
			transition:
				opacity 0.25s ease,
				transform 0.25s ease;
		}

		/* Léger zoom de la photo de fond */
		.background-image {
			transform: scale(1);
			transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
		}

		&:hover .content .card-links,
		&:focus-within .content .card-links {
			opacity: 1;
			transform: translateY(0);
		}

		&:hover .background-image,
		&:focus-within .background-image {
			transform: scale(1.08);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.section.spaces .container .spaces-grid .card {
		.content .card-links {
			transform: none;
			transition: opacity 0.25s ease;
		}

		/* Pas de zoom si l'utilisateur préfère limiter les animations */
		.background-image,
		&:hover .background-image,
		&:focus-within .background-image {
			transform: none;
			transition: none;
		}
	}
}

.section.testimonials {
	background-color: var(--light-grey-bg);
	padding-top: 6rem;
	padding-bottom: 6rem;
	.container {
		.left-content {
			position: relative;
			.quote {
				color: rgb(187 0 19 / 0.1);
				font-size: 8rem;
				line-height: 1;
				top: -2.5rem;
				left: -2.5rem;
				position: absolute;
				font-weight: 900;
			}
			.testimonials-list {
				margin: 0;
				padding: 0;
				list-style: none;
				row-gap: 3rem;

				.item {
					opacity: 0.5;
					padding: 0.5rem 0 0.5rem 2rem;
					border-left: 4px solid var(--primary);

					row-gap: 1rem;

					.testimonial-text {
						font-weight: 700;
						line-height: 1.25;

						font-size: 1.25rem;
						font-style: italic;
						color: rgb(26, 28, 28);
					}

					.testimonial-author {
						.author-name {
							letter-spacing: -0.025rem;
							font-size: 0.875rem;
							line-height: 1.25rem;
							text-transform: uppercase;
							font-weight: 700;
							color: rgb(26, 28, 28);
							font-family: Manrope, sans-serif;
						}
					}

					&.active {
						opacity: 1;
						.testimonial-text {
							font-size: 1.5rem;
						}
					}
				}
			}
		}

		.right-content {
			display: none;
		}
	}
}

.section.start-today {
	padding-top: 6rem;
	padding-bottom: 6rem;
	.container {
		gap: 3rem;
		.content-title {
			gap: 2rem;
			.title {
				letter-spacing: -0.125rem;
				line-height: 1;
				text-transform: uppercase;
				font-size: 3rem;
				font-weight: 900;
				text-align: center;
			}
			.subtitle {
				font-weight: 500;
				font-size: 1.125rem;
				line-height: 1.75rem;
				text-align: center;
				font-family: Manrope, sans-serif;
			}
		}

		.content-action {
			gap: 1.5rem;
			align-items: stretch;
			.action-form {
				display: flex;
				justify-content: center;
				/* Extract into btn large? */
				.btn {
					padding: 1rem 2.5rem;
					font-size: 0.875rem;
					line-height: 1.25rem;
					letter-spacing: 0.07rem;
					flex-grow: 0;
				}
			}

			.observation {
				color: rgba(26, 28, 28, 0.4);
				text-align: center;
				font-size: 0.63rem;
				letter-spacing: 0.06rem;
				font-family: Manrope, sans-serif;
				font-weight: 700;
				text-transform: uppercase;
			}
		}
	}
}

.footer {
	background-color: rgb(232, 232, 232);

	.container {
		.description {
			padding: 3rem 2rem;
			.title {
				color: rgb(17, 24, 39);
				text-transform: uppercase;
				font-weight: 900;
				font-size: 1.125rem;
				line-height: 1.75rem;
			}
			.content-text {
				font-size: 0.875rem;
				line-height: 1.25rem;
				font-family: Manrope, sans-serif;
				max-width: 20rem;
				color: rgb(107, 114, 128);
			}
		}

		.legal-mention {
			padding: 1.5rem 2rem;
			padding-top: 0;
			display: flex;
			align-items: center;
			flex-direction: var(--direction-col-mobile);
			gap: 1rem;

			.legal-mention-text {
				color: rgb(156, 163, 175);
				letter-spacing: 0.02rem;
				font-family: Manrope, sans-serif;
				font-size: 0.75rem;
				line-height: 1rem;
				text-transform: uppercase;
			}
			.quality-mention {
				display: flex;
				align-items: center;
				flex-direction: row;
				gap: 0.25rem;

				font-weight: 700;
				text-transform: uppercase;
				color: rgb(187 0 19);
				font-size: 0.64rem;
				letter-spacing: 0.01rem;
			}
		}
	}
}

/* Fenêtre du cours d'essai. <dialog> natif : le fond, le piège de focus et
   la fermeture par Échap viennent du navigateur. */
.trial-modal {
	width: auto;
	max-width: min(48rem, 92vw);
	max-height: 92vh;

	padding: 0;
	border: none;
	border-radius: 0.5rem;

	background-color: transparent;
	overflow: hidden;

	&::backdrop {
		background-color: rgb(0 0 0 / 0.8);
	}

	.trial-modal-image {
		display: block;

		width: 100%;
		height: auto;
		max-height: 92vh;

		object-fit: contain;
		border-radius: 0.5rem;
	}

	/* Le dialogue est en position: fixed, il sert donc de référence
	   au positionnement absolu sans avoir à toucher à sa position. */
	.trial-modal-close {
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
		z-index: 1;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 2.25rem;
		height: 2.25rem;

		color: white;
		background-color: rgb(0 0 0 / 0.55);
		border-radius: 9999px;

		transition: background-color 0.2s ease;

		&:hover,
		&:focus-visible {
			background-color: var(--primary);
		}
	}
}

/* showModal() rend l'arrière-plan inerte mais ne bloque pas son défilement */
body:has(.trial-modal[open]) {
	overflow: hidden;
}

/* Page d'attente (mode maintenance) */
.maintenance-page {
	background-color: black;
	color: white;
}

.maintenance {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 100vh;
	min-height: 100svh;
	padding: 2rem 1.5rem;
	box-sizing: border-box;

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.75rem;

		max-width: 42rem;
		text-align: center;

		/* Filet rouge au-dessus du titre */
		.rule {
			width: 4rem;
			height: 4px;

			background-color: var(--primary);
		}

		.title {
			text-transform: uppercase;
			font-weight: 900;
			/* Suit la largeur de l'écran : à 3.5rem le titre déborderait sur
			   mobile, où il occupe presque toute la ligne. */
			font-size: clamp(2.25rem, 8vw, 3.5rem);
			line-height: 1;
			letter-spacing: -0.05rem;
		}

		.text {
			line-height: 1.875rem;
			font-weight: 300;
			font-size: 1.125rem;

			font-family: Manrope, sans-serif;

			color: rgb(255 255 255 / 0.65);
		}

		.signature {
			margin-top: 0.75rem;

			text-transform: uppercase;
			font-weight: 500;
			font-size: 0.8125rem;
			letter-spacing: 0.15rem;

			font-family: Manrope, sans-serif;

			color: rgb(255 255 255 / 0.4);
		}
	}
}

/* Base = mobile */
@media (min-width: 768px) {
	:root {
		--hero-title-height: 6rem;
		--direction-col-mobile: row;
	}
	nav {
		.container {
			.nav-left {
				order: 1;
			}

			.nav-center {
				order: 2;
				flex-basis: unset;

				display: block;
				.nav-center-list {
					display: flex;
					flex-direction: row;
					list-style: none;
					gap: 2rem;
					align-items: center;
					margin: 0;
					padding: 0;

					li {
						font-weight: 500;
						font-size: 0.875rem;
						line-height: 1.25rem;
						font-family: Manrope, sans-serif;
						padding-top: 0.25rem;
						padding-bottom: 0.25rem;

						cursor: pointer;

						border-bottom: 2px solid transparent;
						color: rgb(75, 85, 99);
						/* current-menu-item comes from wp_nav_menu,
						   current_page_item from the wp_list_pages fallback */
						&.current-menu-item,
						&.current_page_item,
						&:hover {
							border-bottom-color: var(--primary);
							color: var(--primary);
						}
					}
				}
			}

			.nav-right {
				order: 3;
			}
		}
	}

	.section.description {
		.container {
			.right-content {
				.stats {
					max-width: 32rem;
				}
			}
		}
	}

	.section.spaces {
		.container {
			.content-title {
				justify-content: space-between;
				align-items: center;
			}
		}
	}

	.footer {
		.container {
			.legal-mention {
				justify-content: space-between;
			}
		}
	}
}

@media (min-width: 1280px) {
	.section.hero {
		padding: 6rem 1.5rem;

		.container {
			.content-left {
				max-width: 80rem;
				padding-left: 1.5rem;
				padding-right: 1.5rem;
				box-sizing: border-box;
				.description-text {
					max-width: 40rem;
				}

				.actions {
					.btn {
						padding: 1rem 2rem;
					}
				}
			}
		}
	}

	.section.description {
		padding: 3rem 1.5rem;
		.container {
			flex-direction: row;
			align-items: center;
			gap: 3rem;

			.right-content {
				flex-shrink: 0;
				flex-basis: 40%;
			}
		}
	}

	.section.spaces {
		padding: 6rem 1.5rem;

		.container {
			.spaces-grid {
				.card {
					flex-basis: 25%;
				}
			}
		}
	}

	.section.testimonials {
		.container {
			display: flex;
			flex-direction: row;
			align-items: flex-start;

			gap: 3rem;

			.left-content {
				align-self: center;
			}

			.right-content {
				display: unset;
				position: relative;
				min-height: 200px;
				flex-basis: 45%;

				display: flex;
				flex-direction: row;
				justify-content: flex-end;

				flex-shrink: 0;

				padding-bottom: 10rem;

				.back-image {
					width: 80%;

					aspect-ratio: 1 / 1;
					object-fit: cover;
				}

				.front-image {
					width: 50%;

					position: absolute;
					bottom: -0;
					left: -0;

					transform: rotate(3deg);
					line-height: 0;
					padding: 1rem;
					background-color: white;

					img {
						width: 100%;
						object-fit: cover;
						aspect-ratio: 1 / 1;
						object-position: top;
					}
				}
			}
		}
	}

	.section.start-today {
		.container {
			margin: auto;
			max-width: 56rem;
		}
	}
}

/* ---------- Maintenance page (standalone, full viewport) ---------- */

.maintenance-body {
	background-color: #0b0b0b;
	color: #fff;
}

.maintenance {
	width: 100vw;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.5rem;
	box-sizing: border-box;
	background-color: #0b0b0b;
	text-align: center;
}

.maintenance-inner {
	max-width: 40rem;
}

.maintenance-rule {
	display: block;
	width: 3.5rem;
	height: 3px;
	margin: 0 auto 2rem;
	background-color: #ee2233;
}

.maintenance-title {
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 1.5rem;
}

.maintenance-title .text-red {
	color: #ee2233;
}

.maintenance-text {
	font-family: Manrope, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #b8b8b8;
	margin-bottom: 3rem;
}

.maintenance-signature {
	font-family: Manrope, sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	color: #6b6b6b;
}