/**
 * Page d'atterrissage « Bienvenue chez Baba » (/pages/landing-page-baba).
 *
 * Mesures relevées sur la référence à 1440px et 375px, et les paliers
 * vérifiés un à un entre les deux (scripts/inspect-landing-ref.mjs) :
 * la colonne de texte passe de 819px à 525px sous 990px, puis suit la
 * largeur de l'écran sous 750px.
 */

/* ------------------------------------------------------------------ */
/* Conteneur                                                           */
/* ------------------------------------------------------------------ */

/* Astra plafonne son conteneur à 1240px et lui pose 60px de marge
   verticale par une règle en ligne, plus spécifique que la nôtre : d'où
   l'ID doublé, comme sur les autres gabarits (voir page.css). */
body.baba-landing .ast-container.ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

body.baba-landing #primary#primary {
	margin-top: 0;
	margin-bottom: 0;
}

/* Le conteneur d'Astra est en flex : sans largeur explicite, cette page se
   réduit à la largeur de son bloc de texte et le bandeau cesse de faire
   toute la largeur. Le sélecteur vise bien la div — le corps de page porte
   la même classe, et c'est lui que rendrait un « .baba-landing » seul. */
div.baba-landing {
	width: 100%;
}

body.baba-landing #primary#primary > .ast-article-single {
	width: 100%;
	padding: 0;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Bandeau                                                             */
/* ------------------------------------------------------------------ */

/* Hauteur fixe, et non proportionnelle : vérifié de 990 à 1920px, elle ne
   bouge pas. La teinte est celle que la référence laisse voir — elle n'a
   jamais mis d'image ici. */
.baba-landing__banner {
	height: 588px;
	background-color: rgba(0, 0, 0, 0.1);
}

.baba-landing__banner--image {
	overflow: hidden;
}

.baba-landing__banner-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Bloc central                                                        */
/* ------------------------------------------------------------------ */

.baba-landing__section {
	padding: 40px 0 52px;
	background-color: var(--baba-color-bg);
}

.baba-landing__inner {
	max-width: 1575px;
	margin: 0 auto;
	padding: 0 31.5px;
}

.baba-landing__blocks {
	max-width: 819px;
	margin: 0 auto;
	text-align: center;
}

.baba-landing__title.baba-landing__title {
	margin: 0;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: 62px;
	line-height: 80.6px;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
	text-align: center;
	text-transform: none;
}

.baba-landing__text {
	margin-top: 21px;
	font-family: var(--baba-font-body);
	font-weight: var(--baba-font-weight-normal);
	font-size: var(--baba-text-base);
	line-height: 29.6px;
	letter-spacing: var(--baba-nav-letter-spacing);
	color: var(--baba-color-text);
	text-align: center;
}

.baba-landing__text p {
	margin: 16.8px 0;
}

.baba-landing__text > *:first-child {
	margin-top: 0;
}

.baba-landing__text > *:last-child {
	margin-bottom: 0;
}

.baba-landing__buttons {
	margin-top: 21px;
}

/* ------------------------------------------------------------------ */
/* Tablette                                                            */
/* ------------------------------------------------------------------ */

@media (max-width: 989px) {
	.baba-landing__blocks {
		max-width: 525px;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 749px) {
	.baba-landing__banner {
		height: 357px;
	}

	.baba-landing__section {
		padding: 30px 0 39px;
	}

	/* 41px, soit les 20px du conteneur extérieur de la référence plus les
	   21px de son conteneur de section — deux niveaux imbriqués là-bas,
	   un seul ici. */
	.baba-landing__inner {
		padding: 0 41px;
	}

	.baba-landing__blocks {
		max-width: none;
	}

	.baba-landing__title.baba-landing__title {
		font-size: 20px;
		line-height: 26px;
	}

	.baba-landing__text {
		font-size: var(--baba-text-md);
		line-height: 27.75px;
	}

	.baba-landing__text p {
		margin: 15.75px 0;
	}

	.baba-landing__buttons {
		margin-top: 42px;
	}

	/* Le bouton prend toute la colonne en mobile, comme sur la référence.
	   Le libellé y reste sur une ligne — la référence ne le renvoie pas à
	   la ligne, même quand il déborde de ses marges intérieures. */
	.baba-landing__button.baba-landing__button {
		display: flex;
		width: 100%;
	}
}

/* Astra rétrécit son conteneur à 0.54em de marge sous 544px par une règle
   qui vise un ID (#content) : aucune combinaison de classes ne passe
   devant, il faut viser le même ID. */
@media (max-width: 544px) {
	body.baba-landing #content .ast-container.ast-container {
		padding-left: 0;
		padding-right: 0;
	}
}