/**
 * Hero section — Figma nodes 91:20 (Hero) / 91:37 (Hero Body).
 *
 * @package Digitun
 */

/*
 * FULL-BLEED RIGHT IMAGE PATTERN
 * --------------------------------
 * Figma Hero Body (91:37): full-viewport-width row — Left Column 864px (91:38,
 * shrink-0, text + padding) + Right Column (91:59) flush to the viewport edge
 * with no right padding or max-width cap.
 *
 * Reuse this structure for any section where text stays in the content grid
 * but an image must bleed to the viewport edge:
 *
 *   .section__body          — full-width wrapper; NEVER wrap in .digitun-container
 *   .section__content       — constrained text column (max-width + padding only)
 *   .section__media         — grid column 1fr / flex: 1; NO max-width on media
 *
 * Desktop grid: column 1 ends at Prosessen nav link right edge (Figma 91:26
 * ends x=855.5 at 1920; image 91:59 starts x=864). --digitun-hero-split-x is
 * set from the live Prosessen link via hero.js so the split tracks flex nav.
 * Image column: 1fr to viewport edge; height locked to 717px (Figma 91:60).
 */

.hero {
	background-color: var(--color-bg-quaternary);
}

.hero__body {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.hero__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 3rem 1rem 2rem;
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 34px;
	padding: 8px 22px;
	border: 0.5px solid var(--digitun-border-subtle);
	border-radius: 999px;
	background-color: var(--color-bg-tertiary);
	color: var(--color-txt-heading);
	text-align: center;
}

.hero__heading {
	margin: 0;
	max-width: 680px;
}

.hero__body-text {
	margin: 0;
	max-width: 680px;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 28px;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}

.hero__cta--primary {
	background-color: var(--color-accent);
	color: var(--color-txt-heading);
}

.hero__cta--primary:hover,
.hero__cta--primary:focus-visible {
	filter: brightness(1.05);
}

.hero__cta--secondary {
	background-color: var(--color-bg-light);
	color: var(--color-bg-primary);
}

.hero__cta--secondary:hover,
.hero__cta--secondary:focus-visible {
	filter: brightness(0.97);
}

.hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero__trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hero__trust-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1056 / 717;
	overflow: hidden;
}

.hero__media picture,
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.hero__content {
		padding: 4rem 1.5rem 2.5rem;
	}

	.hero__trust {
		gap: 32px;
	}
}

@media (min-width: 1025px) {
	.hero__body {
		display: grid;
		grid-template-columns: minmax(0, var(--digitun-hero-split-x, 864px)) minmax(0, 1fr);
		align-items: stretch;
		height: var(--digitun-hero-body-height);
	}

	.hero__content {
		max-width: var(--digitun-hero-split-x, var(--digitun-hero-left-column-max));
		padding: 124px 64px 124px var(--digitun-viewport-padding-inline);
	}

	.hero__media {
		height: var(--digitun-hero-image-height);
		width: 100%;
		aspect-ratio: auto;
	}

	.hero__media picture,
	.hero__media img {
		width: 100%;
		height: var(--digitun-hero-image-height);
		object-fit: cover;
	}
}