/**
 * Bloc « Hero Siam » (webecom/hero).
 *
 * Reproduit fidèlement le hero de production (siamformations.fr, module Divi
 * et_pb_fullwidth_header) : contenu aligné à gauche, kicker Poppins 14px/4px,
 * titre display Raleway 54px, 2 CTA style Divi (radius 3px). Fond bleu marine
 * uni (la prod superpose un dégradé à une image ; on conserve le bleu uni).
 *
 * Styles scopés à .wb-hero. Couleurs, polices et rayons proviennent des tokens
 * theme.json ; seules quelques tailles propres au composant (14px, 3px…) sont
 * en valeurs directes. Chargé uniquement sur les pages contenant le bloc, et
 * partagé par le rendu front (render.php) et l'aperçu éditeur (edit.js).
 */

.wb-hero {
	display: flex;
	align-items: center;
	min-height: 420px;
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	padding-block: var( --wp--preset--spacing--70 );
	padding-inline: var( --wp--preset--spacing--50 );
}

.wb-hero__inner {
	width: 100%;
	max-width: var( --wp--style--global--wide-size, 1080px );
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

/* Kicker (Poppins 14px, uppercase, letter-spacing 4px) — texte simple, sans badge */
.wb-hero__pill {
	display: block;
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 4px;
	line-height: 1.8;
	margin: 0 0 0.625rem;
}

/* Titre display (Raleway 54px blanc) */
.wb-hero__title {
	margin: 0;
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xx-large ); /* clamp → 54px max */
	font-weight: 700;
	line-height: 1.3;
	max-width: 22ch;
}

/* Paragraphe d'intro (facultatif) — blanc légèrement atténué, largeur limitée pour la lisibilité */
.wb-hero__lead {
	margin: 0.75rem 0 0;
	max-width: 56ch;
	color: rgba( 255, 255, 255, 0.92 );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.7;
}

/* Zone des boutons */
.wb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var( --wp--preset--spacing--40 );
	margin-top: var( --wp--preset--spacing--50 );
}

/* Boutons — style Divi de prod : radius 3px, Poppins 14px, letter-spacing 2px */
.wb-hero__cta {
	display: inline-block;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-decoration: none;
	line-height: 1.7;
	padding: 0.55rem 1.4rem;
	border-radius: 3px;
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Primaire : fond vert, texte blanc (comme la prod) */
.wb-hero__cta--primary {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
	border-color: var( --wp--preset--color--accent );
}

.wb-hero__cta--primary:hover,
.wb-hero__cta--primary:focus-visible {
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--base );
}

/* Secondaire : fond blanc, texte noir (comme la prod) */
.wb-hero__cta--secondary {
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	border-color: var( --wp--preset--color--base );
}

.wb-hero__cta--secondary:hover,
.wb-hero__cta--secondary:focus-visible {
	background: transparent;
	color: var( --wp--preset--color--base );
	border-color: var( --wp--preset--color--base );
}

/* Focus accessible */
.wb-hero__cta:focus-visible {
	outline: 2px solid var( --wp--preset--color--base );
	outline-offset: 3px;
}

/* Média (image/vidéo) aligné à droite. Colonne 1/3, image non recadrée :
   on centre verticalement au lieu d'étirer, l'image garde son ratio naturel. */
.wb-hero--has-media {
	align-items: center;
}

.wb-hero--has-media .wb-hero__inner {
	flex-direction: row;
	align-items: center;
	gap: var( --wp--preset--spacing--60 );
}

.wb-hero__content {
	flex: 1 1 66%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	text-align: left;
}

.wb-hero__media {
	flex: 1 1 34%;
	overflow: hidden;
	border-radius: var( --wp--custom--radius--md );
}

/* Image affichée entière (ratio préservé, pas de recadrage), plafonnée à la
   largeur de la colonne 1/3. */
.wb-hero__media-el {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Variante hero-avec-image : titre et lead plus compacts (colonne ~50 %). */
.wb-hero--has-media .wb-hero__title {
	font-size: 2.5rem;
}

.wb-hero--has-media .wb-hero__lead {
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Responsive : boutons empilés sur petit écran */
@media ( max-width: 600px ) {
	.wb-hero {
		min-height: 0;
	}

	.wb-hero__actions {
		flex-direction: column;
		align-self: stretch;
	}

	.wb-hero__cta {
		text-align: center;
	}

	.wb-hero__title,
	.wb-hero--has-media .wb-hero__title {
		font-size: 2rem;
	}
}

/* Média : repasse sous le texte en dessous du point de rupture tablette
   (convention du thème), sans toucher au point de rupture 600px ci-dessus
   qui gère uniquement les boutons. */
@media ( max-width: 900px ) {
	.wb-hero--has-media .wb-hero__inner {
		flex-direction: column;
	}

	.wb-hero__media {
		width: 100%;
	}
}