/*
 * Composant : hero — surcharge du composant de base (Tris Component Engine).
 *
 * Ce fichier remplace entièrement assets/css/components/hero.css du plugin
 * (un seul des deux est chargé, jamais les deux) : il reprend donc toutes les
 * règles de base, plus l'accroche, le pied (sous-titre + actions), les boutons
 * du hero et l'étiquette d'angle propres à ce client.
 */
.component-hero {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	--component-hero-overlay: 0.4;
	--component-hero-padding: var(--component-space-normal);
}

.component-hero--spacing-compact { --component-hero-padding: var(--component-space-compact); }
.component-hero--spacing-normal  { --component-hero-padding: var(--component-space-normal); }
.component-hero--spacing-large   { --component-hero-padding: var(--component-space-large); }

.component-hero__inner {
	position: relative;
	z-index: 2;
	padding-top: var(--component-hero-padding);
	padding-bottom: var(--component-hero-padding);
}

.component-hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.component-hero__media .component-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.component-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--component-color-dark);
	opacity: var(--component-hero-overlay);
}

.component-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 28px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.component-hero__eyebrow-dash {
	flex: 0 0 auto;
	width: 34px;
	height: 3px;
	background: var(--component-color-primary);
}

.component-hero__title {
	margin: 0 0 0.4em;
	font-size: clamp(2rem, 5vw, 3.4rem);
	line-height: 1.1;
}

.component-hero__subtitle {
	margin: 0 0 1.5em;
	font-size: clamp(1rem, 2vw, 1.35rem);
	line-height: 1.5;
	max-width: 62ch;
}

.component-hero__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 36px;
}

.component-hero__footer .component-hero__subtitle {
	flex: 1 1 320px;
	margin: 0;
}

.component-hero__actions {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.component-hero .component-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 0;
	padding: 18px 26px;
	font-size: 15px;
	font-weight: 600;
}

.component-hero .component-hero__cta:hover,
.component-hero .component-hero__cta:focus {
	transform: none;
}

.component-hero__cta-arrow {
	transition: transform var(--component-transition);
}

.component-hero__cta:hover .component-hero__cta-arrow,
.component-hero__cta:focus .component-hero__cta-arrow {
	transform: translateX(4px);
}

.component-hero__cta--secondary {
	background: transparent;
}

/* Thèmes */
.component-hero--theme-dark { background-color: var(--component-color-dark); }

.component-hero--theme-dark .component-hero__title,
.component-hero--theme-dark .component-hero__subtitle {
	color: var(--component-color-text-invert);
}

.component-hero--theme-dark .component-hero__eyebrow {
	color: var(--component-color-text-invert);
	opacity: 0.82;
}

.component-hero--theme-dark .component-hero__cta:not(.component-hero__cta--secondary) {
	background: var(--component-color-light);
	color: var(--component-color-dark);
}

.component-hero--theme-dark .component-hero__cta:not(.component-hero__cta--secondary):hover,
.component-hero--theme-dark .component-hero__cta:not(.component-hero__cta--secondary):focus {
	background: var(--component-color-primary);
	color: var(--component-color-text-invert);
}

.component-hero--theme-dark .component-hero__cta--secondary {
	border: 1px solid var(--component-color-text-invert);
	color: var(--component-color-text-invert);
}

.component-hero--theme-dark .component-hero__cta--secondary:hover,
.component-hero--theme-dark .component-hero__cta--secondary:focus {
	background: color-mix(in srgb, var(--component-color-text-invert) 14%, transparent);
	color: var(--component-color-text-invert);
}

.component-hero--theme-light { background-color: var(--component-color-light); }

.component-hero--theme-light .component-hero__title { color: var(--component-color-dark); }
.component-hero--theme-light .component-hero__subtitle { color: var(--component-color-text); }

.component-hero--theme-light .component-hero__eyebrow {
	color: var(--component-color-text);
	opacity: 0.82;
}

.component-hero--theme-light .component-hero__cta--secondary {
	border: 1px solid var(--component-color-dark);
	color: var(--component-color-dark);
}

.component-hero--theme-light .component-hero__cta--secondary:hover,
.component-hero--theme-light .component-hero__cta--secondary:focus {
	background: color-mix(in srgb, var(--component-color-dark) 8%, transparent);
	color: var(--component-color-dark);
}

/* Étiquette d'angle (décorative, propre à ce client) */
.component-hero__corner {
	position: absolute;
	top: var(--component-gutter);
	right: var(--component-gutter);
	z-index: 3;
}

.component-hero__corner-label {
	display: inline-block;
	writing-mode: vertical-rl;
	font-family: var(--component-font-family);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.component-hero--theme-dark .component-hero__corner-label {
	color: var(--component-color-text-invert);
	opacity: 0.82;
}

.component-hero--theme-light .component-hero__corner-label {
	color: var(--component-color-dark);
	opacity: 0.82;
}

@media (max-width: 768px) {
	.component-hero__corner { display: none; }
}

/* Variante plein écran */
.component-hero--fullscreen .component-hero__inner {
	min-height: clamp(620px, 92vh, 900px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: clamp(40px, 6vh, 80px);
}

.component-hero--fullscreen .component-hero__title {
	font-size: clamp(2.75rem, 7vw, 8rem);
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.03em;
	max-width: 20ch;
	text-wrap: balance;
}

.component-hero--fullscreen .component-hero__footer {
	margin-top: clamp(28px, 4vh, 52px);
}

.component-hero--fullscreen .component-hero__subtitle {
	max-width: 52ch;
}

.component-hero--fullscreen.component-hero--theme-dark .component-hero__overlay {
	/* L'opacité de base (§ règle .component-hero__overlay) est neutralisée ici : le
	   dégradé encode directement le réglage "Opacité de l'overlay" via calc(), pour
	   éviter de l'atténuer deux fois. Ratios calibrés pour donner, à la valeur par
	   défaut (40 %), un dégradé 62 % / 28 % / 86 % — proportionnel au-delà. */
	opacity: 1;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--component-color-dark) calc(var(--component-hero-overlay) * 155%), transparent) 0%,
		color-mix(in srgb, var(--component-color-dark) calc(var(--component-hero-overlay) * 70%), transparent) 38%,
		color-mix(in srgb, var(--component-color-dark) calc(var(--component-hero-overlay) * 215%), transparent) 100%
	);
}

.component-hero--fullscreen.component-hero--theme-light .component-hero__overlay { background: var(--component-color-light); }

/* Variantes image latérale */
.component-hero--image-left .component-hero__inner,
.component-hero--image-right .component-hero__inner {
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.component-hero--image-left .component-hero__figure,
.component-hero--image-right .component-hero__figure {
	margin: 0;
}

.component-hero--image-left .component-hero__image,
.component-hero--image-right .component-hero__image {
	width: 100%;
	height: auto;
	border-radius: var(--component-radius-lg);
}

@media (min-width: 768px) {
	.component-hero--image-left .component-hero__inner,
	.component-hero--image-right .component-hero__inner {
		grid-template-columns: 1fr 1fr;
	}

	.component-hero--image-right .component-hero__figure { order: 2; }
	.component-hero--image-right .component-hero__content { order: 1; }
}