/**
 * Block: Hero
 * Add custom styles ONLY if not available in Bootstrap 5 or default.css
 */

.hero-block {
	padding: clamp(5rem, 10vw, 9rem) 0;
	min-height: clamp(420px, 60vh, 640px);
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Image fusionnée AVEC le dégradé primary via blend-mode multiply :
   - l'image (1re couche) est multipliée avec le gradient bleu (2e couche)
   - le gradient reste à 100 % de densité, comme sans image
   - résultat : l'image apparaît "teintée" bleu EPC, identité visuelle préservée. */
.hero-block.epc-hero--has-bg {
	background-image:
		var(--epc-hero-bg-image),
		linear-gradient(135deg, var(--epc-primary) 0%, var(--epc-primary-light) 100%);
	background-blend-mode: multiply, normal;
}

/* Mode left avec image : pousse le sujet de l'image vers la droite. */
.epc-hero--align-left.epc-hero--has-bg {
	background-position: right center;
}

/* Overlay teinté primary (rendu uniquement si image de fond) : garde
   l'identité visuelle EPC par-dessus la photo. L'opacité est contrôlée
   par le champ ACF background_overlay_opacity via style="opacity:…". */
.epc-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--epc-primary) 0%, var(--epc-primary-light) 100%);
	pointer-events: none;
}

/* Mode left : gradient diagonal primary → transparent qui révèle la droite de l'image. */
.epc-hero--align-left .epc-hero__overlay {
	background: linear-gradient(
		90deg,
		var(--epc-primary) 0%,
		var(--epc-primary-light) 35%,
		rgba(44, 65, 128, 0.45) 70%,
		rgba(44, 65, 128, 0) 100%
	);
}

/* Le container passe au-dessus de l'overlay. */
.epc-hero__container {
	position: relative;
	z-index: 1;
}

.epc-hero__eyebrow {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	color: #fff;
	opacity: 0.85;
}

.epc-hero__subtitle {
	margin-bottom: 2rem;
	max-width: 60ch;
}

.epc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* Bouton primaire dans le hero : accent doré + texte blanc.
   Le bleu Bootstrap se confondait avec le fond bleu du hero ; le doré tranche
   et appelle l'œil sur l'action principale. */
.epc-hero__cta--primary {
	background-color: var(--epc-accent);
	border-color: var(--epc-accent);
	color: #fff;
	font-weight: 600;
}

.epc-hero__cta--primary:hover,
.epc-hero__cta--primary:focus-visible {
	background-color: var(--epc-accent-dark);
	border-color: var(--epc-accent-dark);
	color: #fff;
}

.epc-hero__content--center {
	text-align: center;
}

.epc-hero__content--center .epc-hero__subtitle {
	margin-inline: auto;
}

.epc-hero__content--center .epc-hero__actions {
	justify-content: center;
}

/* Tablet & mobile : le gradient diagonal devient illisible sur petit écran,
   on revient à un overlay sombre uniforme et l'image recadrée au centre. */
@media (max-width: 991.98px) {
	.epc-hero--align-left.epc-hero--has-bg {
		background-position: center center;
	}
	.epc-hero--align-left .epc-hero__overlay {
		background: linear-gradient(135deg, var(--epc-primary) 0%, var(--epc-primary-light) 100%);
	}
}