/* ==================================================
   HOME HERO
================================================== */


/*
 * Fond noir extérieur.
 *
 * Le groupe est constrained exactement comme
 * .site-topbar et .site-navbar.
 */
.home-hero {
	width: 100%;
	margin: 0;

	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}


/*
 * Zone contenant réellement l'image.
 *
 * Comme .home-hero est en layout constrained,
 * cet élément reprend la même largeur de contenu
 * que les inner du header.
 */
.home-hero__inner {
	position: relative;

	width: 100%;
	min-height: 0;

	background-image:
		url("../images/background-hero-shot.webp");

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}


/*
 * IMPORTANT :
 *
 * exactement le même padding horizontal
 * que :
 *
 * .site-topbar__inner
 * .site-navbar__inner
 *
 * => texte Hero aligné avec logo / topbar.
 */
.home-hero__content {
	width: 100%;
	box-sizing: border-box;

	padding:
		128px
		64px
		64px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	gap: 64px;
}


/* ==================================================
   TEXT
================================================== */

.home-hero__text {
	width: min(100%, 720px);

	display: flex;
	flex-direction: column;

	gap: 16px;
}


.home-hero__title {
	margin: 0;

	color: inherit;

	font-family: var(--wp--preset--font-family--geist);
	font-weight: 900;

	line-height: 0.95;
}


.home-hero__description {
	width: min(100%, 600px);

	margin: 0;

	color: inherit;

	line-height: 1.4;
}


/* ==================================================
   BUTTONS
================================================== */

.home-hero__buttons {
	margin: 0;
}


.home-hero__button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 14px 22px;

	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--dark-violet);

	border-radius: 999px;

	font-family: var(--wp--preset--font-family--geist);
	font-weight: 700;
	line-height: 1;

	text-decoration: none;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 782px) {

	.home-hero__inner {

		/*
		 * On garde la partie sombre à gauche
		 * pour assurer la lisibilité du texte,
		 * tout en ramenant les personnes dans
		 * le cadre à droite.
		 *
		 * On ajustera cette valeur précisément
		 * avec ton image si nécessaire.
		 */
		background-position: center right;

	}


	.home-hero__content {
		padding:
			96px
			20px
			48px;

		gap: 48px;
	}


	.home-hero__text {
		width: min(100%, 520px);
	}


	.home-hero__description {
		width: 100%;
	}

}