/**
 * Bandeau hero de page.
 * Emplacement : assets/css/components/page-hero.css
 */

/* ============================================================
   Socle — mobile first
   ============================================================ */

.page-hero {
	position: relative;
	z-index: 3; /* au-dessus de .section-programme (z-index:2) — le hero couvre la partie haute de l'anneau, comme dans Figma */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: clamp(300px, 33vw, 480px); /* variante inner — défaut */
	background-color: var(--color-bg-inverse);
}

/* Image de fond */
.page-hero__bg {
	position: absolute;
	inset: 0;
}

/* object-position au tiers supérieur et non au centre : le bandeau intérieur
   est un 3:1 taillé dans des photos en 3:2, et un recadrage centré coupe la
   tête des personnes — c'est là qu'elles se tiennent. Les visuels composés
   pour le format n'y perdent rien, leur sujet occupant toute la hauteur. */
.page-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
}

/* Voile sombre — dense à gauche (côté texte), atténué à ~1/3 vers 70 %, transparent ensuite.
   Intensité pilotée par --hero-overlay (0–80, unitless), défini en style inline.
   Défaut 45 si la variable est absente. */
.page-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to right,
		rgb(0 0 0 / calc(var(--hero-overlay, 45) * 1%))        0%,
		rgb(0 0 0 / calc(var(--hero-overlay, 45) * 1%))       30%,
		rgb(0 0 0 / calc(var(--hero-overlay, 45) * 0.33%))    70%,
		rgb(0 0 0 / 0%)                                       100%
	);
}

/* Bloc de contenu */
.page-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	padding-block: var(--space-7);
}

/* Surtitre */
.page-hero__surtitre {
	margin-block-end: var(--space-3);
	/* Eigerdals, comme le titre : la note de tokens.css qui déconseillait les
	   capitales visait l'extrait de démonstration livré au départ, remplacé
	   depuis par les trois graisses complètes. */
	font-family: var(--font-display);
	font-size: var(--fs-h3);        /* clamp 20→24 px */
	font-weight: var(--fw-medium);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-text-inverse);
}

/* Titre principal */
.page-hero__title {
	margin-block-end: var(--space-5);
	font-family: var(--font-display);
	font-size: var(--fs-hero);      /* clamp 36→64 px */
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);   /* Figma : 1.16–1.21, --lh-tight = 1.10 */
	color: var(--color-text-inverse);
}

/* Sous-titre / accroche */
.page-hero__lead {
	max-width: 45ch;
	margin-block-end: var(--space-6);
	font-size: var(--fs-h3);        /* Figma : 24 px */
	line-height: var(--lh-tight);
	color: var(--color-text-inverse);
}

/* Boutons */
.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
}

/* Surcharge contextuelle du bouton ghost : contour blanc sur fond sombre */
.page-hero .btn--ghost {
	color: var(--color-text-inverse);
	border-color: var(--color-text-inverse);
}

.page-hero .btn--ghost:hover,
.page-hero .btn--ghost:focus-visible {
	color: var(--color-text-inverse);
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--color-text-inverse);
}


/* ============================================================
   Mobile — tout est centré et le header flotte par-dessus

   Figma 01_MOB : la photo part du bord haut de l'écran, le titre et les
   boutons sont centrés, et le voile ne descend plus en biais mais du haut
   vers le bas — le texte est au milieu, plus à gauche.
   ============================================================ */

@media (max-width: 767px) {

	.page-hero__overlay {
		background: linear-gradient(
			to bottom,
			rgb(0 0 0 / calc(var(--hero-overlay, 45) * 0.4%))   0%,
			rgb(0 0 0 / calc(var(--hero-overlay, 45) * 0.5%))  45%,
			rgb(0 0 0 / calc(var(--hero-overlay, 45) * 1.1%)) 100%
		);
	}

	/* Le header étant sorti du flux, c'est au hero de lui garder sa place. */
	.page-hero__inner {
		align-items: center;
		padding-block-start: calc(var(--space-11) + var(--space-7));
		text-align: center;
	}

	.page-hero__lead {
		max-width: 34ch;
	}

	.page-hero__actions {
		flex-direction: column;
		align-items: center;
	}

	/* Les libellés tiennent sur deux lignes dans la maquette ; centrés, ils
	   ont besoin que le texte le soit aussi, l'icône restant à droite. */
	.page-hero .btn {
		width: min(100%, 230px);
		justify-content: space-between;
	}

}


/* ============================================================
   Variante page d'accueil
   ============================================================ */

.page-hero--home {
	min-height: clamp(480px, 58vw, 840px); /* Figma : ~840 px à 1440 px */
}

/* Figma 01_MOB : le hero occupe 874 px sur une page de 402, soit 217 %. */
@media (max-width: 767px) {

	.page-hero--home {
		min-height: min(217vw, 880px);
	}

}

/* Contenu ancré en bas pour la homepage */
.page-hero--home .page-hero__inner {
	justify-content: flex-end;
	padding-block-end: var(--space-9); /* Figma : ~80 px sous les boutons */
}

/* Contenu ancré en haut pour les pages intérieures */
.page-hero--inner .page-hero__inner {
	justify-content: flex-start;
}


/* Boutons dans le hero : style compact Figma
   – 16 px / Bold / HomepageBaukasten
   – white-space: normal pour autoriser le retour à la ligne (2 lignes intentionnelles)
   – max-width 175 px contrôle la cassure du libellé
   – texte aligné à gauche, icône en dehors du flux du texte */
.page-hero .btn {
	font-family: var(--font-body);    /* Figma : HomepageBaukasten, comme tout bouton */
	font-size: 1rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0;
	white-space: normal;              /* annule le nowrap global — 2 lignes voulues */
	line-height: 1.1;
	padding-block: var(--space-1);
	padding-inline: var(--space-3);
	min-height: 49px;
	max-width: 175px;                 /* force la cassure sur 2 lignes */
	justify-content: flex-start;
	text-align: left;
}


/* ============================================================
   Tablette 768px
   ============================================================ */

@media (min-width: 768px) {

	.page-hero__title {
		max-width: 65%;  /* ≈ 62–71 % du conteneur selon les pages Figma */
	}

	.page-hero--home .page-hero__title {
		max-width: 72%;  /* Figma Accueil : 870 px / 1232 px = 70.6 % */
	}

}


/* ============================================================
   Desktop 1200px
   ============================================================ */

@media (min-width: 1200px) {

	.page-hero__inner {
		padding-block: var(--space-8); /* Figma inner pages : ~61 px ≈ --space-8 = 64 px */
	}

	.page-hero--home .page-hero__inner {
		padding-block-end: var(--space-9);
	}

	.page-hero__actions {
		gap: var(--space-6); /* Figma : 29 px — --space-6 = 32 px, écart 3 px */
	}

}


/* ── Variante nue ───────────────────────────────────────────
   L'archive des actualités n'a pas de photographie : aucune page ne lui en
   fournit. Le bandeau se pose alors sur le vert du site, et perd la hauteur
   des autres — elle est faite pour qu'une image respire, ici elle n'ouvrait
   qu'un aplat vide sous le titre. */

.page-hero--nu {
	min-height: 0;
	background-color: var(--e4y-green);
}

.page-hero--nu .page-hero__inner {
	padding-block: var(--space-9) var(--space-8);
}