/* @doxallia/design — Marketing hero
 * Two-column hero section for marketing/landing pages.
 * Class prefix: .mk-hero*
 */

.mk-hero {
	background: var(--color-surface);
	padding: var(--s-16, 4rem) var(--s-6) var(--s-12, 3rem);
	border-bottom: 1px solid var(--color-border);
}

.mk-hero__inner {
	max-width: var(--page-max-width, 1280px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-12, 3rem);
	align-items: center;
}

.mk-hero__content {
}

.mk-hero__eyebrow {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium, 500);
	color: var(--color-text-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 var(--s-3) 0;
}

.mk-hero__title {
	/* DS2+ display-lg (48-72px fluid clamp) with fallback to text-4xl (36px)
     for portails that don't load extensions/1-tokens.css. */
	font-size: var(--display-lg, var(--text-4xl, 2.25rem));
	font-weight: var(--fw-bold, 700);
	color: var(--color-brand);
	line-height: var(--lh-display, 1.2);
	margin: 0 0 var(--s-4) 0;
	letter-spacing: var(--tracking-tighter, -0.02em);
}

.mk-hero__subtitle {
	font-size: var(--text-lg, 1.125rem);
	color: var(--color-text-subtle, var(--color-text-muted));
	line-height: 1.7;
	margin: 0 0 var(--s-8) 0;
}

.mk-hero__actions {
	display: flex;
	gap: var(--s-4);
	flex-wrap: wrap;
	margin-bottom: var(--s-6);
}

.mk-hero__trust {
	display: flex;
	gap: var(--s-2);
	flex-wrap: wrap;
}

.mk-hero__trust-pill {
	font-size: var(--text-xs);
	padding: var(--s-1) var(--s-3);
	border-radius: var(--radius-full);
	background: var(--color-surface-muted);
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
}

/* Right column — illustration placeholder */
.mk-hero__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
}

.mk-hero__visual img,
.mk-hero__visual svg {
	max-width: 100%;
	height: auto;
}

/* ── Variants ────────────────────────────────────────────── */

/* Centered variant — single column, title center-aligned */
.mk-hero--centered .mk-hero__inner {
	grid-template-columns: 1fr;
	max-width: 720px;
	text-align: center;
}

.mk-hero--centered .mk-hero__actions,
.mk-hero--centered .mk-hero__trust {
	justify-content: center;
}

.mk-hero--centered .mk-hero__visual {
	display: none;
}

/* Narrow variant — page hero for sub-pages (reforme, solutions, conformite,
   faq, a-propos, contact, demo, diagnostic, evenements, ressources, presse,
   mentions-legales). Reduced padding vs the main home hero, title on left +
   subtitle on right, subtle top gradient accent, bottom border for section
   separation. Used by 10+ routes — don't rename without a global codemod. */
.mk-hero--narrow {
	padding: var(--s-10, 2.5rem) var(--s-6) var(--s-8, 2rem);
	background: linear-gradient(
		180deg,
		rgba(20, 28, 82, 0.035) 0%,
		transparent 100%
	);
	border-bottom: 1px solid rgba(20, 28, 82, 0.06);
}

.mk-hero--narrow .mk-hero__inner {
	grid-template-columns: 1.2fr 1fr;
	align-items: end;
	gap: var(--s-8, 2rem);
}

.mk-hero--narrow .mk-hero__title {
	/* Slightly smaller than home hero — fluid clamp 40→64px */
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	margin-bottom: 0;
}

.mk-hero--narrow .mk-hero__subtitle {
	margin: 0;
	font-size: var(--text-base, 1rem);
	line-height: 1.6;
}

.mk-hero--narrow .mk-hero__actions {
	grid-column: 1 / -1;
	margin-top: var(--s-5, 1.25rem);
	margin-bottom: 0;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 768px) {
	.mk-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	/* Mobile font-size override removed — display-lg clamp() handles responsive sizing. */

	.mk-hero__actions {
		justify-content: center;
	}

	.mk-hero__trust {
		justify-content: center;
	}

	.mk-hero__visual {
		display: none;
	}

	/* Narrow variant on mobile: single column, left-aligned (not centered —
     page heroes read better left-aligned on mobile; save center for home). */
	.mk-hero--narrow .mk-hero__inner {
		grid-template-columns: 1fr;
		align-items: start;
		text-align: left;
		gap: var(--s-3, 0.75rem);
	}

	.mk-hero--narrow .mk-hero__actions {
		justify-content: flex-start;
	}
}

/* ── Dark mode ────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.mk-hero__title {
		color: var(--color-brand-text);
	}
}